THREE.js粒子纹理着色器

Question

作为一项训练练习，我试图通过水银演示＆＃34; luma＆＃34;重新创建场景。 （https://www.youtube.com/watch?v=WBuoyegCeXI）。我确实有一些点大小的问题。我试图根据顶点和摄像机位置之间的距离来缩放pointSize，但它会导致奇怪的随机放大，例如下面的那个。

它只发生在某些特定的位置。它导致的闪烁效果实际上非常酷，我想我稍后会以一种受控的方式实现它，但不幸的是，这不会做到。这是着色器的代码： [顶点]

uniform vec3 cameraPos;

void main() {
 float baseSize = 32.0;
 float distance = sqrt(dot(position, cameraPos));
 gl_PointSize = baseSize / (0.1 * distance);
 gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

距离函数由于某种原因没有给我任何东西，而sqrt（dot（））或多或少都有效。

[片段]

uniform sampler2D texture;

void main() {
   gl_FragColor = texture2D(texture, gl_PointCoord); 
}

three.js的材料代码

var shaderMaterial = new THREE.ShaderMaterial({
  uniforms: {
    texture: { type: "t", value: texture }
  },
  transparent: true,
  blending: THREE.AdditiveBlending,
  depthTest: false,
  vertexShader: document.getElementById('particleVertex').textContent,
  fragmentShader: document.getElementById('particleFragment').textContent,
})

如何使其表现？