Three.js：使用大小增强的ShaderMaterial gl_PointSize与PointCloudMaterial大小相比较

Question

我很好奇 gl_PointSize 和 PointCloudMaterial 中的 size 属性之间的关系是什么。

当我使用 PointCloudMaterial 创建一个 PointCloud 并将 size 属性设置为 1 时，粒子的大小比使用 ShaderMaterial 创建 PointCloud 并将顶点着色器的 size 参数设置为 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的size属性相同的单位度量。由于必须同时使用这两种材料，因此我正在尝试找出这些大小之间的关系。也许是我在vertex shader上漏掉了什么？

谢谢！ Johnny

- Johnny Slack

---

FYI- sortParticles 不再是 PointCloud 的一个属性。 - WestLangley

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

- WestLangley

---

我建议您通过以下两种方式来确认这一点：(1) 对于两个“PointClouds”，使用相同的几何结构；(2) 在每种情况下都删除“map”。 - WestLangley

感谢快速的回复 - 谢谢！我已按建议更新了大小统一。我还删除了地图，现在为两个PointCloud共享几何体，正如您所提到的。绿色粒子仍然显示更小。我一定是漏掉了一些明显的东西 :) 更新反映在这里：http://dev.cartelle.nl/particle-example/ - Johnny Slack

虽然我刚刚尝试了设置ShaderMaterial大小：{type：'f'，value：window.innerHeight}，这似乎正好显示PointCloudMaterial的大小。 - Johnny Slack

我的回答中有个打字错误，但是 window.innerHeight / 2 对我来说可行。 - WestLangley