What I leaned from it
Feb 23th 2017
####Basic 3D concept with Cinder in comparison with three.js
- Model Matrix Model matrix is used to position an object in the world
- View Matrix View matrix is used to position our virtual "eye" in the world
- Projection Matrix
image credit: mindofmatthew
These three things are common concept when presenting 3D object in a 2D screen.
How 3D is projected onto the 2D image plane or screen. These include the aspect ratio, field-of-view and clipping planes.
In Cinder, it controls the view matrix by creating an camera object ( same in three.js ), but using the method CameraPersp::lookAt( vec3(point of view), vec3(where to look) )
By calling gl::setMatrices() and passing a CameraPersp, Cinder's OpenGL View and Projection matrices are set.
CameraPersp cam; cam.lookAt( vec3( 3, 3, 3 ), vec3( 0 ) ); gl::setMatrices( cam );
In three.js, it is by initializing a camera object
//PerspectiveCamera( fov, aspect, near, far ) var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
####Depth Buffer(z-index artifacts)
Z-Buffering is the standard technique for preventing fragments from drawing on top of each other incorrectly. It uses a per-pixel depth value to ensure that no pixel draws on top of a pixel it is "behind."
In Cinder, we have to add manually add two lines to enable depth read and write, because by default it is false.
At the beginning of the draw loop
But in three.js, it is associated with the Material object
Using the prooerty ".depthWrite"
Whether rendering this material has any effect on the depth buffer. Default is true.
When drawing 2D overlays it can be useful to disable the depth writing in order to layer several things together without creating z-index artifacts.