Posted in Uncategorized

Matrices in Three.js

   January 6, 2021  1 Comment on Matrices in Three.js

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

Author: Fantashit

1 thought on “Matrices in Three.js”

  1. JS matrices

    // local transform (object space)
// composed from position / rotation / scale
// object.updateMatrix() must be called for this to be correct
object.matrix             

// global transform (world space)
// scene graph must be updated for this to be correct
// scene.updateMatrixWorld()
object.matrixWorld       

// just rotation part of global transform, 
// computed on demand in Ray / Projector
// otherwise not used
object.matrixRotationWorld

    Positions in JS

    localPosition = object.position;
worldPosition = object.matrixWorld.getPosition();

    JS matrices => GLSL uniforms

    object.matrixWorld => objectMatrix // till r49
object.matrixWorld => modelMatrix // since r50
camera.projectionMatrix => projectionMatrix
camera.matrixWorldInverse => viewMatrix
camera.matrixWorldInverse * object.matrixWorld => modelViewMatrix

    JS buffer => GLSL attribute

    geometry.vertices[ i ].position => position

    GLSL full transform

    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

    Alternatively

    gl_Position = projectionMatrix * viewMatrix * objectMatrix * vec4( position, 1.0 ); // till r49
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 ); // since r50

Comments are closed.