Not to long ago i started to create a small 3D engine in javascript to combine this with an html5 canvas.
One of the issues I run into is how can you transform 3d to 2d coords. Since I cannot use matrices or built in transformation methods I need another way.
I've tried implementing the next explanation + pseudo code: http://freespace.virgin.net/hugo.elias/routines/3d_to_2d.htm
Unfortunately no luck there. I've replace all the input variables with data from my own camera and object classes.
I have the following data: An object with a rotation, position vector and an array of 4 3d coords (its just a plane) a camera with a position and rotation vector the viewport -> a square 600 x 600 surface. The example uses a zoom factor which I've set as 1
Most hits on google use either matrix calculations or don't implement camera rotation. Basic transformation should be like this: screen.x = x / z * zoom screen.y = y / z * zoom
Can anyone point me in the right direction or explain to me howto achieve this?
edit: Thanks for all your posts, I haven't been able to apply all this to my project yet but I hope to do this soon.
Ok after playing around a while some issues still remain. I've created a new projection matrix:
var w = (2 * nearPlane) / viewportWidth;
var h = (2 * nearPlane) / viewportHeight;
var q = farPlane / (farPlane - nearPlane);
this.ProjectionMatrix = $M([
[w, 0, 0, 0],
[0, h, 0, 0],
[0, 0, q, 1],
[0, 0, (nearPlane * farPlane) / (nearPlane - farPlane), 0]
]);
where viewport = 600 * 450
and near plane = 0.5 and far plane = 500
the original code for drawing the vertices is this:
var comboMatrix = world.WorldMatrix.x(camera.ViewMatrix);
for (i = 0; i != this.NumberOfPolygons; i++) {
var transformedVertices = new Array(verticesPerPolygon);
var valid = new Boolean(1);
for (j = 0; j != verticesPerPolygon; j++) {
currentVertex = this.Mesh[i][j].x(comboMatrix);
currentVertex.elements[0][0] = currentVertex.elements[0][0] / currentVertex.elements[0][2];
currentVertex.elements[0][1] = currentVertex.elements[0][1] / currentVertex.elements[0][2];
if (currentVertex.elements[0][0] < -1 || currentVertex.elements[0][0] > 1 || currentVertex.elements[0][1] < -1 || currentVertex.elements[0][1] > 1) {
valid = new Boolean(0);
break;
}
// Process Viewport Mapping Transformation
currentVertex.elements[0][0] = currentVertex.elements[0][0] * 300 + 300;
currentVertex.elements[0][1] = -currentVertex.elements[0][1] * 300 + 300;
transformedVertices[j] = currentVertex;
}
// Draw the polygon
if (valid == true) {
this.DrawQuad(context, transformedVertices, true, new Boolean(0), new Boolean(1));
}
}
which kinda works since the letter H is drawn on my screen. Moving the camera however makes parts of the letter stop being drawn whenever one of the vertices is outside a 300 * 300 region. I'm assuming this has something to do with a very basic implementation of a projection in these lines:
currentVertex.elements[0][0] = currentVertex.elements[0][0] * 300 + 300;
currentVertex.elements[0][1] = -currentVertex.elements[0][1] * 300 + 300;
Can anybody help me out howto change this piece of code so it works with my projection matrix?
I've tried removing the last 2 lines and changing transformedVertices[j] = currentVertex; into transformedVertices[j] = currentVertex.x(projection); with no result.