Hey there, I've been working on a simple scene with a grid of particles in the shape of a cube. Check it out here: https://codepen.io/sungaila/pen/qqVXKM
The issue I'm facing is that when using a ShaderMaterial, the particles don't seem to show up on the screen. Below is the basic shader code I've been using:
<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>
Here's the JavaScript code snippet related to this issue:
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);
I've observed that if I disable the 'material' section, the default 'PointsMaterial' kicks in and the particles are visible. Interestingly, the particle color seems influenced by the shader code even though they're not fully connected yet.
Any suggestions on how I can make the particles appear using a ShaderMaterial?