Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

What I leaned from it

Cinder, C++
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.

You can’t perform that action at this time.