Three.jsシェーダの素材にパーティクルが表示されない

Question

私はキューブの形の粒子のグリッドを含む非常に基本的なシーンを持っています。ここで見つけることができます：https://codepen.io/sungaila/pen/qqVXKM

私の問題は、ShaderMaterialを使用すると、私は表示する粒子を得ることができないということです。以下は、私の（非常に単純な）シェーダコードです：

<script type = 'x-shader/x-vertex' id = 'vertexShader'> 
void main() { 
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 
} 
</script> 

<script type = 'x-shader-x-fragment' id = 'fragmentShader'> 
void main() { 
    gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0); 
} 
</script> 

そして次は、関連するJSコードです：私が気づい

geometry = new THREE.BoxBufferGeometry(10,10,10, 5, 5, 5); 

material = new THREE.ShaderMaterial({ 
vertexShader: document.getElementById('vertexShader').textContent, 
fragmentShader: document.getElementById('fragmentShader').textContent 
}); 

particles = new THREE.Points(geometry, material); 

何かが、私は「材料」の行をコメントアウト場合ということです、マテリアルはデフォルトで 'PointsMaterial'になり、パーティクルが表示されます。また、パーティクルの色はシェーダコードの影響を受けますが、まだそれらをリンクしていないように感じます。

ShaderMaterialを使用してパーティクルを表示するにはどうすればよいですか？

Answer 1

頂点シェーダにgl_PointSizeを設定する必要があります。

<script type = 'x-shader/x-vertex' id = 'vertexShader'> 
void main() { 
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); 
    gl_PointSize = 1.0 * (300.0/-mvPosition.z); 
    gl_Position = projectionMatrix * mvPosition; 
} 
</script>