Материал шейдера 3..s.s не отображает частицы

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>