three.js - 如何获得与使用 PointsMaterial 相同的结果，但对点系统使用 ShaderMaterial

Question

我想使用 THREE.ShaderMaterial 而不是 THREE.PointMaterial。
并且在调整颗粒大小或绘制颗粒方面存在问题。

如果我使用THREE.PointMaterial，则粒子的大小取决于粒子位置的 z 坐标(换句话说:粒子的深度)。
但是，如果我使用 THREE.ShaderMaterial 那么我就会失去所需的效果。

Try it here

左边的球体是THREE.ShaderMaterial
右边的shpere是THREE.PointMaterial

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

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

Material 代码:

三.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
}))

三点 Material

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

Answer 1

需要使用 uniforms.scale.value = 350 和 USE_SIZEEATTENUATION: "" 以便使用 Threejs 来制作正确的着色器顶点程序。

三.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并找到了如何正确计算制服参数的比例。
文件:src/renderers/WebGLRenderer.js
线路:2072
功能:refreshUniformsPoints