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

我注意到的一件事是，如果我发表评论的材料＆＃39;线条，材料将默认为＆＃39; PointsMaterial＆＃39;并将显示粒子。此外，即使我觉得我还没有将它们连接在一起，粒子的颜色也会以某种方式受到着色器代码的影响。

如何使用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>

Three.js着色器材质不显示粒子

1 个答案: