Threejs:PointCloudMaterial 尺寸与 ShaderMaterial gl_PointSize 相比，尺寸衰减 [英] Threejs: PointCloudMaterial size compared to ShaderMaterial gl_PointSize with size attenuation

问题描述

我很想知道 gl_PointSize 和 PointCloudMaterial 中的 size 属性之间的关系.

I am curious to know what the relationship is between gl_PointSize and the size property within PointCloudMaterial.

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

When I create a PointCloud with PointCloudMaterial and set the size property to 1, the size of the particles are far larger than when creating a PointCloud with a ShaderMaterial and setting the size parameter for the vertex shader to 1. I also account for size attenuation like in the PointCloudMaterial shader:

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

I have extracted a simple example of my problem here: http://dev.cartelle.nl/particle-example/

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

• The red particles are assigned a PointCloudMaterial set to size 1.
• The green particles are assigned a ShaderMaterial that has a Vertex Shader that accounts for size attenuation like in PointCloudMaterial. I've set the size to 300 in this case, and as you can see the green particles are still smaller.

我的预期结果是让 ShaderMaterial 与 PointCloudMaterial 上的 size 属性采用相同的单位度量.我必须让这两种材料一起工作，所以我试图弄清楚这些尺寸之间的关系.一定是我缺少顶点着色器的东西吗?

My expected result is to have a ShaderMaterial to take the same unit measure as the size property on PointCloudMaterial. I have to have both these materials working together, so I'm trying to figure out the relationship between these sizes. Must be something I'm missing with the vertex shader?

谢谢！约翰尼

推荐答案

在你的ShaderMaterial中，你需要设置

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

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

This is because of the following line in the WebGLRenderer method refreshUniformsParticle():

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

three.js r.71

three.js r.71

这篇关于Threejs:PointCloudMaterial 尺寸与 ShaderMaterial gl_PointSize 相比，尺寸衰减的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！