Threejs：PointCloudMaterial 大小与 ShaderMaterial gl_PointSize 相比具有大小衰减

Question

我很好奇 gl_PointSize 和 PointCloudMaterial 内的大小属性之间有什么关系。

当我用PointCloudMaterial创建一个PointCloud并将size属性设置为1时，粒子的大小远大于使用 ShaderMaterial 创建 PointCloud 并将顶点着色器的大小参数设置为 1。我还考虑了 PointCloudMaterial 着色器中的尺寸衰减：

<script type="x-shader/x-vertex" id="particle_vs">
    uniform float size;
    uniform float scale;
    void main() {
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_PointSize = size * ( scale / length( mvPosition.xyz ) );
        gl_Position = projectionMatrix * mvPosition;
    }
</script>

我在这里提取了一个简单的问题示例： http://dev.cartelle.nl/particle-example/

红色粒子被分配 PointCloudMaterial 大小设置为 1。
绿色粒子被分配了一个 ShaderMaterial，它有一个 Vertex Shader 来解释尺寸衰减，就像在 PointCloudMaterial 中一样。在这种情况下，我将 size 设置为 300，正如您所看到的，绿色颗粒仍然更小。

我的预期结果是 ShaderMaterial 与 PointCloudMaterial 上的尺寸属性采用相同的单位度量。我必须让这两种材料一起工作，所以我想弄清楚这些尺寸之间的关系。一定是我在顶点着色器中遗漏了什么？

谢谢！强尼

Answer 1

在你的ShaderMaterial中，你需要设置

scale: { type: 'f', value: window.innerHeight / 2 },

这是因为 WebGLRenderer 方法中的以下行 refreshUniformsParticle():

uniforms.scale.value = _canvas.height / 2.0; // TODO: Cache this.

three.js r.71

Threejs：PointCloudMaterial 大小与 ShaderMaterial gl_PointSize 相比具有大小衰减

Threejs: PointCloudMaterial size compared to ShaderMaterial gl_PointSize with size attenuation

webgl

vertex-shader

three.js