title: Using Three.js ShaderMaterial and writing fragment shaders
body: <p>I have a few questions about using the Three.js ShaderMaterial.</p>
  
  <ol>
  <li>How can I set the color? Three.js seems to provide a lot of the variables through uniforms and ShaderChunk's.I have been unable to determine how to get the color. I assumed it would not be far different from setting the color of any other material. I attempted to copy what was in the DashedLineMaterial but it always came out gray.</li>
  <li>How can I set a uniform array that I can access in a for loop? This may not be Three.js specific. See the problem below. I describe it above the fragment shader.</li>
  </ol>
  
  <p>I'm trying to  create a material that can handle a special dashed pattern store in an array. negatives are gaps, positives are dashes. eg <code>[ 0.5, -0.250, 0.250, -0.250 ]</code></p>
  
  <pre><code>dashedLineShader.uniforms = THREE.UniformsUtils.merge( [
  
      THREE.UniformsLib[ 'common' ],
      THREE.UniformsLib[ 'fog' ],
      {
          'pattern': { type: 'fv1', value: pattern },  // pattern eg [1.0, -0.5]
          'patternSize': { type: 'i', value: pattern.length },
          'patternLength': { type: 'f', value: totalLength }
      }
  ] );
  </code></pre>
  
  <p>The vertex shader seems good</p>
  
  <pre><code>dashedLineShader.vertexShader = [
      'attribute float lineDistance;',
  
      'varying float vLineDistance;',
  
      THREE.ShaderChunk[ 'color_pars_vertex' ],
  
  'void main() {',
  
      THREE.ShaderChunk[ 'color_vertex' ],
          'vLineDistance = lineDistance;',
          'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
      '}'
  ].join('\n');
  </code></pre>
  
  <p>When pattern[i] is negative, I want a gap. When pattern[i] is positive, I want a dash. (Eventually 0 will be a dot, but first things first).</p>
  
  <p>This shader doesn't set the color according to the input yet. I tried using ShaderChunks and code copied from the 'dashed' shader included with Three.js, but it always turns out light gray. Below is the shader with some test code. The output is always a solid blue line, so pattern[i] is always 0 and I'm not sure why.</p>
  
  <pre><code>dashedLineShader.fragmentShader = [
      'uniform vec3 diffuse;',
      'uniform float opacity;',
  
      'uniform float pattern[' + pattern.length + '];',
      'uniform float patternLength;',
      'varying float vLineDistance;',
  
      'void main() {',
      'float pos = mod( vLineDistance, patternLength );',
  
      'for ( int i = 0; i &lt; ' + pattern.length + '; i++ ) {',
          'pos = pos - abs( pattern[i] );',
          'if ( pos &lt;= 0.0 ) {',
              'if ( pattern[i] &lt; 0.0 ) {',
                  'gl_FragColor = vec4(1.0, 0.0, 0.0, opacity );',
              '} else if (pattern[i] &gt; 0.0 ) {',
                  'gl_FragColor = vec4(0.0, 0.0, 1.0, opacity );',
              '} else {',
                  'gl_FragColor = vec4(0.0, 1.0, 0.0, opacity );',
              '}',
              'break;',
          '}',
      '}',
  '}'
  ].join('\n');
  </code></pre>
  
  <p>The confusing part. How do I enter the color?</p>
  
  <pre><code>material = new THREE.ShaderMaterial({
      //vertexColors: THREE.NoColors,
      //color: color,
      //attributes: { color: { type: 'c', value: new THREE.Color(color) } },
      uniforms: lineType.uniforms,
      vertexShader: lineType.vertexShader,
      fragmentShader: lineType.fragmentShader
  });
  </code></pre>
  
  <p>Last notes: this is my first attempt at shaders. The Three.js ShaderMaterial is not completely documented. Been learning by debugging the code, but shaders are difficult to debug.</p>