title: Really simple custom shader in Three.js - how to make it work?
body: <p>I'm trying to make the simplest custom shader for Three.js that I can, but I haven't figured out how to make it work.  The object the I'm using the shader for doesn't appear at all.</p>
  
  <p>In my page html I have:</p>
  
  <pre><code>&lt;script id="simplefs" type="x-shader/x-fragment"&gt;
  
      void main(void) {
          gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
      }
  &lt;/script&gt;
  
  &lt;script id="simplevs" type="x-shader/x-vertex"&gt;
  
      void main(void) {
          gl_Position = modelViewMatrix * projectionMatrix * vec4(position, 1.0);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Then in javascript:</p>
  
  <pre><code>var vertShader = document.getElementById("simplevs").innerHTML;
  var fragShader = document.getElementById("simplefs").innerHTML;
  
  var myMaterial = new THREE.ShaderMaterial({
      vertexShader : vertShader,
      fragmentShader: fragShader
  });
  
  var baseBevel = new THREE.Mesh(new THREE.CylinderGeometry(BaseRadius - BaseBevel, BaseRadius, BaseBevel, 100, 100, false),
                                 myMaterial )
  baseBevel.position.x = x;
  baseBevel.position.y = y;
  baseBevel.position.z = BaseHeight - (BaseBevel / 2.0);
  baseBevel.rotation.x = Math.PI / 2.0;
  
  scene.add(baseBevel); 
  </code></pre>
  
  <p>Where the object should be, there is nothing. It works fine if I replace the material with a <code>MeshLambertMaterial</code>.  What am I missing that I need to make it work?</p>