08 What Three.js writes for you

What Three.js prepares for you

Click a name in the code to see its Three.js counterpart.

Model rotation0.60

-3.143.14

Runs once per vertexDrag numbers, or edit the code

void main() {
  vec3 p = aPosition;
  vColor = aColor;
  vUv = aUv;
  vNormal = uNormalMatrix * aNormal;
  vec4 world = uModel * vec4(p, 1.0);
  vWorld = world.xyz;
  gl_Position = uProjection * uView * world;
}

void main() {
  vec3 p = aPosition;
  vColor = aColor;
  vUv = aUv;
  vNormal = uNormalMatrix * aNormal;
  vec4 world = uModel * vec4(p, 1.0);
  vWorld = world.xyz;
  gl_Position = uProjection * uView * world;
}

JS sidegl.uniformMatrix4fv(uModel, …) // rotation 0.60 / 0.10

Three.js prepares geometry data, matrices and a compile prefix for you: aPosition ↔ position, uProjection ↔ projectionMatrix.

Try it

Click uModel in the code and read its Three.js name