three.js – 如何获得与使用PointsMaterial相同的结果,但使用ShaderMaterial作为Points系统

2024年1月3日 504次阅读

我想使用THREE.ShaderMaterial而不是THREE.PointMaterial.

并且在测量或绘制颗粒时存在问题.

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

Try it here

《three.js – 如何获得与使用PointsMaterial相同的结果,但使用ShaderMaterial作为Points系统》

左边是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
})

最佳答案 需要使用uniforms.scale.value = 350和USE_SIZEATTENUATION：“”才能说三个js来制作正确的着色器顶点程序.

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

点赞