Exhibit #1: Using uniform variables

What we did here

This example produces the same behavior as before, but it has only one fragment shader. The color of the surface is provided via a uniform variable diffuseColor that is set to different values when each of the two spheres is drawn.

This way uniforms (besides the ones Three.js provides by itself) get handed to shader programs in Three.js is by putting an entry called uniforms in the parameters that are used to create the material:

uniforms: {
    'diffuseColor': { type: 'v3', value: new THREE.Vector3(0.4, 0.6, 1.0) }
},

The type field encodes the type of uniform variable this data is meant for; 3v corresponding to the GLSL type vec3.