如何获得与使用PointsMaterial相同的结果，但使用ShaderMaterial作为Points系统

Question

我想使用THREE.ShaderMaterial代替THREE.PointMaterial 并且在测量或绘制颗粒时存在问题。

如果我使用THREE.PointMaterial，那么粒子的大小取决于粒子位置的z坐标（换句话说：粒子深度）。
但是，如果我使用THREE.ShaderMaterial，那么我将失去所需的效果。

Try it here

左侧是THREE.ShaderMaterial
正确的shpere是THREE.PointMaterial

你怎么看，有很大的不同。

也许有人知道如何使用THREE.ShaderMaterial获得相同的渲染效果？

mareials代码：

THREE.ShaderMaterial

const shaderPoint = THREE.ShaderLib.points
const uniforms = THREE.UniformsUtils.clone(shaderPoint.uniforms)
uniforms.map.value = /*set some texture*/
uniforms.size.value = 60
material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    defines: {
        "USE_MAP": ""
    },
    transparent: true,
    // alphaTest: .4,
    depthWrite: false,
    // depthTest: false,
    // blending: THREE.AdditiveBlending,
    vertexShader: shaderPoint.vertexShader,
    fragmentShader: shaderPoint.fragmentShader
}))

THREE.PointMaterial

let material = new THREE.PointsMaterial({
    size: 60,
    // color: "#f0f",
    map:  uniforms.map.value,
    depthWrite: false,
    transparent: true
})

Answer 1

需要使用uniforms.scale.value = 350和USE_SIZEATTENUATION: ""才能说出三个j来制作正确的着色器顶点程序。

<强> THREE.ShaderMaterial

const shaderPoint = THREE.ShaderLib.points
const uniforms = THREE.UniformsUtils.clone(shaderPoint.uniforms)
uniforms.map.value = /*set some texture*/
uniforms.size.value = 60
/*+++*/
uniforms.scale.value = 350 // in my case value is 350
/*+++*/

material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    defines: {
        USE_MAP: "",
        /*+++*/ 
        USE_SIZEATTENUATION: ""
        /*+++*/
    },
    transparent: true,
    // alphaTest: .4,
    depthWrite: false,
    // depthTest: false,
    // blending: THREE.AdditiveBlending,
    vertexShader: shaderPoint.vertexShader,
    fragmentShader: shaderPoint.fragmentShader
}))

<强> UPD＃1
说实话，如果你不需要为THREE.Points写自己的着色器，那么你应该使用THREE.PointMaterial，因为它也是着色器。

我查看了three.js source code并找到了如何正确计算制服参数的比例 file：src / renderers / WebGLRenderer.js
线：2072
功能：refreshUniformsPoints