1

A few years back I started experimenting with 3d in canvas. Everything went pretty well untill I had to to turn the camera, I couldn't get it done.

A few days back I just happened to stumble upon that project again and noticed I got pretty far with it, sure, the code was a mess... so I cleaned it up a little and started fixing the camera rotation... And... I still have no clue how to do it. I tried google but so far nothing worked, I just have no idea what I'm doing....

Can somebody help me with this?

The code is located here: http://johandam.com/etc/3d

The relevant pieces are (probably) located here:

http://johandam.com/etc/3d/js/obj.js < General 'entity' class, here the 3d world coordinates are translated to 2d screen coordinates, it used to adjust it's position based on the camera's rotation but then distance-checking got all messed up so I moved it to the camera class, which I think makes more sense anyway.

http://johandam.com/etc/3d/js/camera.js < the camera object. A lot of movement code and at the end I try to adjust the camera based on it's rotation.

The idea is to have a target point around which the camera rotates but I'm pretty sure that somewhere a long the line I mixed a couple of different methods in it and I have no idea what I'm doing...

Who can help me out here?

Johan
  • 133
  • 6
  • 1
    This would be so much easier with matrices. But keeping what you already have, I think the trick is in the order in wich you apply the transformations. The correct order should be: rotate by the model angles, translate by the model position, translate by the negative camera position, i.e subtract instead of adding, and rotate by the negative camera angles. This should mimic the same order that would take place when applying a world matrix followed by a view matrix. – David Gouveia May 14 '12 at 12:00
  • I have no trouble switching to metrices, the current code I don't understand anyway, so trowing it away in favour of something simpler is fine. – Johan May 14 '12 at 12:09
  • Then, if it's any help, take a look at this answer, and in particular to the example code. The sample I posted there also has a camera implemented using a view matrix, although it's not being used in the demo. – David Gouveia May 14 '12 at 12:28
  • The way it works is that each object gets a matrix (i.e. world matrix) and the camera also gets a matrix (i.e. view matrix). You can think of a matrix as a black box that encapsulates a series of calculations, such as translations and rotations. Then the transformation process is just a matter combining the world and view matrices into one (matrix-matrix multiplication), and applying this combined matrix to each vertex in your polygons (matrix-vector multiplication). – David Gouveia May 14 '12 at 12:40
  • I thought you said it was simpler... :P Oh well, I'm going to give it a shot. Will report back later :) – Johan May 14 '12 at 12:43
  • You're right, it's somewhat hard to learn... But very simple to use once you have a linear algebra and transformations library in place. The reason is that with matrices you don't need to deal with trigonometry and all the other calculations directly. You get to a point where the only thing you really need is to multiply a single matrix by your vertex and all the transformations are done in one single step. And yet this single matrix can contain all the scales, rotations, and translations of your object and camera, along with other things such as perspective projection and field of view. – David Gouveia May 14 '12 at 12:58
  • And another tip, take a look into the Create* family of methods from this list to get an idea of some of the helper methods that you could create. In your case you only really need the CreateTranslation and CreateRotation* methods, but a few of the others would also be useful, such as the CreateLookAt method to help move your camera around. – David Gouveia May 14 '12 at 13:02
  • So worldMatrix would become an objectMatrix and implemented into the objects, then I combine that with the cameraMatrix at each frame and use the coordinates that result from in the translation to their respective 2d screen coordinates... I think... – Johan May 14 '12 at 13:03
  • Yes, that's the idea, although world and view are the conventional names for those matrices. You store a worldMatrix in each object and a viewMatrix in the camera. Then when starting to render each object, you first create a worldViewMatrix by combining the object's worldMatrix with the camera's viewMatrix. Finally, you take the worldViewMatrix and multiply it by every vertex in the object. The result of this multiplication is a new, transformed vertex, which you can then project into 2D and add to the rendering list. – David Gouveia May 14 '12 at 13:18
  • Alright, I implemented it. Though I probably missed something since the result is... odd... I'm unsure what actualy is going on. I updated the source online to include the matrices. I either forgot to add something or add a thing too much... for now I think I'm gonna read up on matrix math so I know what I'm actualy working with here – Johan May 14 '12 at 14:11
  • Also, it seems the matrices are not liking my z-indexing based on distance... how do I fix that? – Johan May 15 '12 at 12:25
  • Would simply rotating the world around the camera work? – Dylan Katz Dec 06 '12 at 18:00

0 Answers0