title: combining shaders in THREE.JS
body: <p>I'm writting a shader to render terrain from a heightmap and all goes good exept that after I have my shader I loose lights and shades. And here is when hell pain begins. It comes that I should use <code>THREE.ShaderChunk</code> to add default shaders chunks but not just add - mess with my shader.</p>
  
  <p>So after long time googling I came to <a href="https://github.com/mrdoob/three.js/issues/1135" rel="noreferrer">this advise</a></p>
  
  <blockquote>
    <p>You just need to add few snippets to your custom ShaderMaterial at
    proper places:</p>
    
    <p>// uniforms</p>
    
    <p>THREE.UniformsLib[ "shadowmap" ],</p>
    
    <p>// fragment shader</p>
    
    <p>THREE.ShaderChunk[ "shadowmap_pars_fragment" ], THREE.ShaderChunk[
    "shadowmap_fragment" ],</p>
    
    <p>// vertex shader</p>
    
    <p>THREE.ShaderChunk[ "shadowmap_pars_vertex" ], THREE.ShaderChunk[
    "shadowmap_vertex" ],</p>
  </blockquote>
  
  <p>but for me that was not added lights and shadows. Then the best I can thought of is to look at <a href="https://github.com/mrdoob/three.js/blob/master/src/renderers/shaders/ShaderLib.js" rel="noreferrer">ShaderLib.js</a> and try to use settings from one of default shaders. So I took settings for <code>lambert</code> and ended up with this code:</p>
  
  <pre><code>        @tileMaterial = new THREE.ShaderMaterial
          uniforms:  THREE.UniformsUtils.merge [
              THREE.UniformsLib[ "common" ],
              THREE.UniformsLib[ "fog" ],
              THREE.UniformsLib[ "lights" ],
              THREE.UniformsLib[ "shadowmap" ],
  
              {
                  "emissive" : { type: "c", value: new THREE.Color( 0x000000 ) },
                  "wrapRGB"  : { type: "v3", value: new THREE.Vector3( 1, 1, 1 ) }
              }
  
          ]
          vertexShader: [
              "#define LAMBERT",
  
              "varying vec3 vLightFront;",
  
              "#ifdef DOUBLE_SIDED",
  
              "   varying vec3 vLightBack;",
  
              "#endif",
  
              THREE.ShaderChunk[ "common" ],
              THREE.ShaderChunk[ "map_pars_vertex" ],
              THREE.ShaderChunk[ "lightmap_pars_vertex" ],
              THREE.ShaderChunk[ "envmap_pars_vertex" ],
              THREE.ShaderChunk[ "lights_lambert_pars_vertex" ],
              THREE.ShaderChunk[ "color_pars_vertex" ],
              THREE.ShaderChunk[ "morphtarget_pars_vertex" ],
              THREE.ShaderChunk[ "skinning_pars_vertex" ],
              THREE.ShaderChunk[ "shadowmap_pars_vertex" ],
              THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ],
  
              "void main() {",
  
                  THREE.ShaderChunk[ "map_vertex" ],
                  THREE.ShaderChunk[ "lightmap_vertex" ],
                  THREE.ShaderChunk[ "color_vertex" ],
  
                  THREE.ShaderChunk[ "morphnormal_vertex" ],
                  THREE.ShaderChunk[ "skinbase_vertex" ],
                  THREE.ShaderChunk[ "skinnormal_vertex" ],
                  THREE.ShaderChunk[ "defaultnormal_vertex" ],
  
                  THREE.ShaderChunk[ "morphtarget_vertex" ],
                  THREE.ShaderChunk[ "skinning_vertex" ],
                  THREE.ShaderChunk[ "default_vertex" ],
                  THREE.ShaderChunk[ "logdepthbuf_vertex" ],
  
                  THREE.ShaderChunk[ "worldpos_vertex" ],
                  THREE.ShaderChunk[ "envmap_vertex" ],
                  THREE.ShaderChunk[ "lights_lambert_vertex" ],
                  THREE.ShaderChunk[ "shadowmap_vertex" ],
  
              "}"
  
          ].join "\n"
          fragmentShader: [
              "uniform vec3 diffuse;",
          "uniform vec3 emissive;",
          "uniform float opacity;",
  
          "varying vec3 vLightFront;",
  
          "#ifdef DOUBLE_SIDED",
  
          "   varying vec3 vLightBack;",
  
          "#endif",
  
          THREE.ShaderChunk[ "common" ],
          THREE.ShaderChunk[ "color_pars_fragment" ],
          THREE.ShaderChunk[ "map_pars_fragment" ],
          THREE.ShaderChunk[ "alphamap_pars_fragment" ],
          THREE.ShaderChunk[ "lightmap_pars_fragment" ],
          THREE.ShaderChunk[ "envmap_pars_fragment" ],
          THREE.ShaderChunk[ "fog_pars_fragment" ],
          THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
          THREE.ShaderChunk[ "specularmap_pars_fragment" ],
          THREE.ShaderChunk[ "logdepthbuf_pars_fragment" ],
  
          "void main() {",
  
          "   vec3 outgoingLight = vec3( 0.0 );",
          "   vec4 diffuseColor = vec4( diffuse, opacity );",
  
              THREE.ShaderChunk[ "logdepthbuf_fragment" ],
              THREE.ShaderChunk[ "map_fragment" ],
              THREE.ShaderChunk[ "color_fragment" ],
              THREE.ShaderChunk[ "alphamap_fragment" ],
              THREE.ShaderChunk[ "alphatest_fragment" ],
              THREE.ShaderChunk[ "specularmap_fragment" ],
  
          "   #ifdef DOUBLE_SIDED",
  
  
          "       if ( gl_FrontFacing )",
          "           outgoingLight += diffuseColor.rgb * vLightFront + emissive;",
          "       else",
          "           outgoingLight += diffuseColor.rgb * vLightBack + emissive;",
  
          "   #else",
  
          "       outgoingLight += diffuseColor.rgb * vLightFront + emissive;",
  
          "   #endif",
  
              THREE.ShaderChunk[ "lightmap_fragment" ],
              THREE.ShaderChunk[ "envmap_fragment" ],
              THREE.ShaderChunk[ "shadowmap_fragment" ],
  
              THREE.ShaderChunk[ "linear_to_gamma_fragment" ],
  
              THREE.ShaderChunk[ "fog_fragment" ],
  
          "   gl_FragColor = vec4( outgoingLight, diffuseColor.a );",
  
          "}"
          ].join "\n"
          attributes:
              height:
                  type: "f"
                  value: heightData
          wireframe: no
  </code></pre>
  
  <p>which is still do not add lights and shadows and also throws errors:</p>
  
  <pre><code>three.js:22804 WebGL: INVALID_VALUE: uniform3fv: no array
  three.js:22804 WebGL: INVALID_VALUE: uniform3fv: no array
  </code></pre>
  
  <p>So the question is - what are the steps to add lights and shades to custom shader (as for r71)?</p>
  
  <p>jsfiddle  - <a href="http://jsfiddle.net/SET001/0wzqemks/2/" rel="noreferrer">http://jsfiddle.net/SET001/0wzqemks/2/</a></p>