Three.js 如何获得与在点系统中使用PointsMaterial但使用ShaderMaterial相同的结果
我想使用Three.js 如何获得与在点系统中使用PointsMaterial但使用ShaderMaterial相同的结果,three.js,shader,Three.js,Shader,我想使用THREE.ShaderMaterial而不是THREE.PointMaterial 并且在颗粒大小或拉伸方面存在问题 如果我使用THREE.PointMaterial,那么粒子的大小取决于粒子位置的z坐标(换句话说:粒子的深度)。 但是,如果我使用THREE.ShaderMaterial,那么我将失去所需的效果 左侧为3。着色器材质 右侧为3.点材质 你怎么看,有很大的不同 也许有人知道如何使用THREE.ShaderMaterial获得相同的渲染结果 mareials代码: 3.
THREE.ShaderMaterial
而不是THREE.PointMaterial
并且在颗粒大小或拉伸方面存在问题 如果我使用
THREE.PointMaterial
,那么粒子的大小取决于粒子位置的z坐标(换句话说:粒子的深度)。但是,如果我使用
THREE.ShaderMaterial
,那么我将失去所需的效果
左侧为3。着色器材质
右侧为3.点材质
你怎么看,有很大的不同
也许有人知道如何使用THREE.ShaderMaterial
获得相同的渲染结果
mareials代码:
3.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
}))
let material = new THREE.PointsMaterial({
size: 60,
// color: "#f0f",
map: uniforms.map.value,
depthWrite: false,
transparent: true
})
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
}))
三点材质
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
}))
let material = new THREE.PointsMaterial({
size: 60,
// color: "#f0f",
map: uniforms.map.value,
depthWrite: false,
transparent: true
})
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
}))
需要使用uniforms.scale.value=350
和使用_-sizeateNuation:“
以说出三个JS来制作正确的着色器顶点程序
3.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
}))
let material = new THREE.PointsMaterial({
size: 60,
// color: "#f0f",
map: uniforms.map.value,
depthWrite: false,
transparent: true
})
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
,因为它也是着色器
我仔细研究并发现了如何正确计算制服参数的比例。
文件:src/renderers/WebGLRenderer.js
行:2072
功能:查看和。这会给你一些想法。@WestLangley谢谢你的评论。真的我找到了决定!!!如果使用uniforms.scale.value=350
和使用大小评估:“
我有相同的结果:)非常感谢!