CODEWITHSUNDEEP
canvas3d
Shaniqwa
Shaniqwa

Reputation: 2084

Backface removal for Perspective Projection

I'm working on 3D exercise, and I have implemented Backface Removal technique that only works for Orthographic Projection and need to change it to support other projections as well.

What I did so far is :

  1. for each polygon I loop all vertices
  2. perform transitions and projections calculations
  3. calculate surface Normal by Newell's Method
  4. draw the polygon only if the vector direction is < 0

as I said this works only for orthographic projection and I'm struggling with other projections. Please any help would be great

by the way I have seen this explanation here somewhere but didn't understand it : "..The usual approach, used in actual 3D hardware, is to first do all of the transformation (including projection), then check whether the resulting 2D triangle is counterclockwise or clockwise wound, and keep or discard based on that condition". maybe someone how does can explain what is the resulting 2D triangle ?

I'm using html5 canvas and js.

Upvotes: 1

Views: 646

Answers (1)

Qbic
Qbic

Reputation: 298

This approach in 3d hardware calls graphic pipeline. Doesn't matter which type of projections you use, it always will be transformed into 2D triangle and just then backface culling test will be performed.

function Triangle (a, b, c) {
    this.pointA = a;
    this.pointB = b;
    this.pointC = c;
}

Triangle.prototype.isBackface = function () {
    var ax = this.pointA.getProjectedX() - this.pointB.getProjectedX();
    var ay = this.pointA.getProjectedY() - this.pointB.getProjectedY();
    var bx = this.pointA.getProjectedX() - this.pointC.getProjectedX();
    var by = this.pointA.getProjectedY() - this.pointC.getProjectedY();
    var cz = ax * by - ay * bx;
    return cz < 0;
};

// before drawing a triangle you call a isBackface method. This method check
// either this triangle is counterclockwise or clockwise but just after 
// all projections.
Triangle.prototype.draw = function (context) {
    if (this.isBackface()) {
        return;
    }
    this._draw();
};

Upvotes: 3

Related Questions