Three.js着色器材質不顯示粒子

Question

我有一個非常基本的場景，其中包含一個立方體形狀的粒子網格。你可以在這裏找到它：https://codepen.io/sungaila/pen/qqVXKM

我的問題是，如果我使用ShaderMaterial，我無法得到要顯示的粒子。以下是我的（很簡單）shader代碼：

<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>