06 Space, camera and depth

Matrices: object → world → screen

Local coordinates → world → camera → projection.

Model rotation0.50

-3.143.14

Camera field of view · °45.00

2580

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.50 / 0.10

gl_Position = projection × view × model × position; read it right to left.

Try it

Set the field of view to 80°: stronger perspective
Switch to the vertex stage and find the three matrices