Exhibit #0: Getting Triangles on the screen

What we did here

• We are using basic Three.js to set up:
  • A WebGL canvas in the div just above this text;
  • A scene with two spheres in it;
  • A camera with an orbit controller; and
  • A ShaderMaterial that asks Three.js to use a particular shader program when drawing each sphere.
• The shader programs are very minimal:
  • The vertex program takes positions from object to clip space. Notice that the vertex attribute position is magically defined, as are the matrices modelViewMatrix and projectionMatrix, although they're not declared in the shader code and it's not a GLSL builtin. This is because, behind the scenes, Three.js appends some declarations to the beginning of our shader code, for a standard set of uniforms and attributes it always provides. Three.js has some rather terse documentation of what these attributes are.
  • Each sphere has its own fragment program, and each always outputs a constant color.

Three.js turns on hidden surface removal by default, so the z-buffer is being used to discard fragments that should be hidden.

You can see the shaders in your browser by opening up the developer tools. They are sitting right there in the text of the HTML page.