カスタム頂点カラー（）

Question

私は私の目標は、線分の束に、頂点カラーごとに持つことである THREE.LineSegmentsにshaderMaterialを使用するthreejsに苦しんでいます：

私は頂点を持っていますそして、フラグメントシェーダ：

 <script type="x-shader/x-vertex" id="vertexshader"> 

      varying vec3 vColor; 
      attribute vec3 customColor;    

      void main() { 
       vColor = customColor; 
      } 

     </script> 

     <script type="x-shader/x-fragment" id="fragmentshader"> 

      varying vec3 vColor; 

      void main() { 
       gl_FragColor = vec4(vColor, 1.0); 
      } 

     </script> 

が、その後threejsシーンで、私はシェーダに関連するすべてのものを作成し、オブジェクトに適用されます。

 var customColors = new Float32Array(_count*2*3); // 2 vertex by segment *length(RGB) 
     for (var i = 0; i < customColors.length/3; i++) { 
      var ratio = i/(customColors.length/3.0); 
      customColors[(i*3)] = ratio; 
      customColors[(i*3)+1] = ratio; 
      customColors[(i*3)+2] = ratio; 
     }; 

     geo.addAttribute('customColor' , new THREE.BufferAttribute(customColors,3)); 


     var drawCount = _count * 2; 
     geo.setDrawRange(0, drawCount); 


     var uniforms = { 
      opacity : 0.5 

     }; 


     var customMaterial = new THREE.ShaderMaterial({ 
      uniforms : uniforms, 
      vertexShader : document.getElementById('vertexshader').textContent, 
      fragmentShader : document.getElementById('fragmentshader').textContent, 
      } 
     ); 
     var lines = new THREE.LineSegments(geo, customMaterial); 

問題がどこにあるのかわかりません。 線分が黒く表示されることはありません。 私がしたことは、フラグメントシェーダの色を「ハードコード」することです（目的を明らかに破る）。

コンソールには何もエラーメッセージはありません。

私はここで間違っていますか？

Answer 1

もう一度苦労して、最後にカスタム頂点カラーを持つ線分を見ることができます。 gl_position変数に値を与える必要があるようです（頂点の位置を変更することはできないので、私は自動的に行うと考えました）。

IはvertexShaderの）（主に行を追加：

gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);