你好,有人可以帮我吗?我有这个着色器,它适用于 THREE.Mesh,但不适用于 THREE.Particle System?
我希望每个粒子都有给定贴图(纹理)的一部分并相应地改变它们的位置,像这样http://www.chromeexperiments.com/detail/webcam-displacement/?f=webgl
<script id="vs" type="x-shader/x-vertex">
uniform sampler2D map;
varying vec2 vUv;
void main() {
vUv = uv;
vec4 color = texture2D( map, vUv );
float value = ( color.r + color.g + color.b ) / 3.0;
vec4 pos = vec4( position.xy, value * 100.0, 1.0 );
gl_PointSize = 20.0;
gl_Position = projectionMatrix * modelViewMatrix * pos;
}
</script>
<script id="fs" type="x-shader/x-fragment">
uniform sampler2D map;
varying vec2 vUv;
void main() {
gl_FragColor = texture2D( map, vUv );
}
</script>
粒子系统并不真正支持 UV,因为没有面,只有单个点。纹理映射粒子是使用 gl_PointCoord (IIRC) 完成的,但这为每个粒子提供了相同的映射。为了给每个粒子提供相同纹理的不同部分,您应该使用 BufferGeometry,它在最新版本的 Three.js 中支持所有属性,包括自定义属性(并且非常高效且快速!)。然后,您将为每个粒子提供 vec2 偏移属性:您可以从此偏移和 gl_PointCoord 获得正确的 UV。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)