Three.js Shader-Material zeigt keine Partikel

Question

Ich habe eine sehr grundlegende Szene, die ein Raster von Partikeln in der Form eines Würfels enthält. Sie können es hier finden: https://codepen.io/sungaila/pen/qqVXKM

Mein Problem ist, dass, wenn ich ein ShaderMaterial verwende, ich nicht die Partikel zur Anzeige bekommen kann. Hier finden Sie meine (sehr einfach) Shader-Code:

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

und die folgenden ist der relevante JS-Code:

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

Etwas, das ich bemerkt, dass, wenn ich kommentieren Sie die ‚Material‘ Linien, die Das Material wird standardmäßig auf "PointsMaterial" eingestellt und die Partikel werden angezeigt. Außerdem wird die Farbe der Partikel irgendwie vom Shader-Code beeinflusst, obwohl ich das Gefühl habe, dass ich sie noch nicht verbunden habe.

Wie bekomme ich die Partikel mit einem ShaderMaterial angezeigt?

Answer 1

Sie müssen gl_PointSize in Ihrem Vertex-Shader setzen.

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