I’m trying to demystify how matrices are used in three.js and after looking at source code and other issues explanations, I’m nevertheless confused :S

From my understanding, three.js’s WebGLRenderer would pass several matrices to WebGL, of which the minimal is

- projectionMatrix
- modelViewMatrix

projection matrix takes care of the the camera’s aspect ratio, fov, front and back. model view matrix takes care of where an object are is relatively in space. therefore I’m guessing to render any object projected to a 2d canvas, one could do `projectionMatrix * modelviewMatrix`

.

the question is perhaps, from where do three.js get the matrices from?

- projectionMatrix from camera?
- modelViewMatrix from object3D?

if we inspect objects in three.js scene, there are a bunch of matrices in them like `matrix`

, `matrixWorld`

, `matrixRotationWorld`

etc…

so I tried playing with something like `object.matrix.getPosition()`

and `object.matrixWorld.getPosition()`

but it seems all I get is some values which doesn’t make sense. if I do `object.matrix.extractPosition()`

instead, I’ll get an error `TypeError: Cannot read property 'n14' of undefined`

so apparently i’m using them incorrectly, or that i’ve a bad understanding of how the matrices work in three.js. would anyone care to enlighten this noob again? :cI

JS matrices

Positions in JS

JS matrices => GLSL uniforms

JS buffer => GLSL attribute

GLSL full transform

Alternatively