Question

I have been working on a perspective projection rendering demo using javascript, recently I added perspective projection and it works as it should except when I zoom in.

Here is a picture of this strange behavior:

Notice how grid lines are gathering at a point.

So I doubt in 2 things other the zooming formulas I’m using are incorrect or there is something I don’t understand in perspective projection math.

For the zoom I just have a global variable window.scaleFactor that I multiply with each point:

Point.prototype.projection = function(matrix){
    var point = $M([[this.x *window.scaleFactor],[this.y * window.scaleFactor],[this.z * window.scaleFactor],[1]]);
    var projection = matrix.x(point);
    return new Point(projection.e(1,1)/projection.e(4,1) + window.panX,projection.e(2,1)/projection.e(4,1) + window.panY,0);
}

So is that right, or should the zoom calculation be related to the point of view?

You can try the demo here: http://ahmedkotb.0fees.net/3d/projection_demo.html

EDIT: You can zoom using the mouse wheel and rotate by dragging inside the canvas… Also I haven’t tested this except on chrome sorry for that.

Any illustration will be appreciated, thanks.

Answer 1

I think the problem is as follows: when you zoom in, some of your lines reach behind the camera and you are not clipping them (the lines). The artifact that I can see are typical of non-clipping projection. Solution : clip your lines, or use another 3D rendering library that will clip for you.