如何获得与使用 PointsMaterial 但对 Points 系统使用 ShaderMaterial 相同的结果答案

【问题标题】：How to get the same result as with using PointsMaterial but with using ShaderMaterial for the Points system如何获得与使用 PointsMaterial 但对 Points 系统使用 ShaderMaterial 相同的结果
【发布时间】：2017-05-05 22:31:26
【问题描述】：

我想使用THREE.ShaderMaterial 而不是THREE.PointMaterial。
并且对粒子的大小或绘图有问题。

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

Try it here

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

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

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

marials 代码：

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

【问题讨论】：

看看this SO answer 和this comment。这会给你一些想法。
@WestLangley 感谢您的评论。真的我找到了决定！！！如果使用uniforms.scale.value = 350 和USE_SIZEATTENUATION: "" 我有相同的结果:) 非常感谢！

标签： three.js shader

【解决方案1】：

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

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，发现了如何正确计算制服参数的比例。
文件：src/renderers/WebGLRenderer.js
线路：2072
函数：refreshUniformsPoints

【讨论】：