title: threejs Adding lighting to ShaderMaterial
body: <p>I'm creating a cube full of spheres.  So I'm using a particle system.  It's all working well until I try to apply a shader material to each of the particles.  I've pretty much used the example at <a href="http://threejs.org/examples/#webgl_custom_attributes_particles3" rel="nofollow">http://threejs.org/examples/#webgl_custom_attributes_particles3</a>.  </p>
  
  <p>It is working, but what I'm trying to do now is add lighting to the scene using directional lighting.  That's where I'm not getting anywhere.  I have no experience in GLSL and am just copying and pasting at the moment, testing the waters.  Any help would be great.  </p>
  
  <p>Here's what I have so far.  </p>
  
  <pre><code>&lt;script type="x-shader/x-vertex" id="vertexshader"&gt;
  
      attribute float size;
      attribute vec4 ca;
  
      varying vec4 vColor;
  
      void main() {
  
      vColor = ca;
  
      vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
  
      gl_PointSize = size * ( 150.0 / length( mvPosition.xyz ) );
  
      gl_Position = projectionMatrix * mvPosition;
  
      }
  
  &lt;/script&gt;
  
  &lt;script type="x-shader/x-fragment" id="fragmentshader"&gt;
  
      uniform vec3 color;
      uniform sampler2D texture;
  
      varying vec4 vColor;
  
      void main() {
  
      vec4 outColor = texture2D( texture, gl_PointCoord );
  
      if ( outColor.a &lt; 0.5 ) discard;
  
      gl_FragColor = outColor * vec4( color * vColor.xyz, 1.0 );
  
      float depth = gl_FragCoord.z / gl_FragCoord.w;
      const vec3 fogColor = vec3( 0.0 );
  
      float fogFactor = smoothstep( 200.0, 700.0, depth );
      gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
  
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>and in my js:</p>
  
  <pre><code>(function addSpheres() {
  var cube = new THREE.Object3D();
  scene.add(cube);
  
  var totalSpheres = 3840; //15*16*16
  var particles = new THREE.Geometry();
  
  var attributes = {
      size: { type: 'f', value: [] },
      ca: { type: 'c', value: [] }
  };
  var uniforms = {
      amplitude: { type: "f", value: 1.0 },
      color: { type: "c", value: new THREE.Color(0xffffff) },
      texture: { type: "t", value: THREE.ImageUtils.loadTexture("textures/sprites/ball.png") }
  };
  uniforms.texture.value.wrapS = uniforms.texture.value.wrapT = THREE.RepeatWrapping;
  
  var shaderMaterial = new THREE.ShaderMaterial({
      uniforms: uniforms,
      attributes: attributes,
      vertexShader: document.getElementById('vertexshader').textContent,
      fragmentShader: document.getElementById('fragmentshader').textContent,
  });
  shaderMaterial.lights = true;
  
  var n = 20, n2 = n / 2;
  var particle;
  for (var i = -7; i &lt; 9; i++) {
      for (var j = -7; j &lt; 9; j++) {
          for (var k = -7; k &lt; 8; k++) {
              var pX = i * n - n2;
              var pY = j * n - n2;
              var pZ = k * n - n2;
  
              particle = new THREE.Vector3(pX, pY, pZ);
              particles.vertices.push(particle);
          }
      }
  }
  
  particleSystem = new THREE.ParticleSystem(particles, shaderMaterial);
  particleSystem.dynamic = true;
  
  // custom attributes
  
  var vertices = particleSystem.geometry.vertices;
  var values_size = attributes.size.value;
  var values_color = attributes.ca.value;
  
  for (var v = 0; v &lt; vertices.length; v++) {
      attributes.size.value[v] = 55;
      attributes.ca.value[v] = new THREE.Color(0xffffff);
  
      attributes.size.needsUpdate = true;
      attributes.ca.needsUpdate = true;
  }
  
  cube.add(particleSystem);
  
  scene.matrixAutoUpdate = false;
  })();
  </code></pre>
  
  <p>Thanks in advance.
  John.</p>