Threejs 精灵火焰特效 Sprite Firey Aura effect

Posted 2021-04-21 BIM树洞

Author--------------- Yen

最近看了一些关于用shader写的特效，感觉这个火焰一般的效果还有趣，我们经常在一些场景中也是会遇到，废话不多说先上效果：

其实原理也比较好理解，比较关键的在于：

1、通过上下左右的纹理采样的偏移来实现周围圆环的透明度设置；

2、流动的纹理结合

这样就行成这个效果

比较关键核心的逻辑，引用别人的图了

1、第一个left\right\top\bottom的偏移

2、求和的目的是覆盖全部图形的外围

3、求alpha通道的逆值才是圆环需要显示的通道值。

核心代码如下：

vertexShader：

	varying vec2 vUv;
	void main() 
         {
	     vUv = uv;
	     gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
	 }

fragmentShader:

         uniform float time;
			uniform float repeatX;
			varying vec2 vUv;
			uniform sampler2D map;
			uniform sampler2D fireyMap;
			uniform vec3 uColor;

			void main() {
				float offset = 0.09;
				vec4 finalcolor=texture2D(map, vec2(vUv.x, vUv.y));
				float left=texture2D(map, vec2(vUv.x + offset, vUv.y)).a;
				float right=texture2D(map, vec2(vUv.x - offset, vUv.y)).a;
				float top=texture2D(map, vec2(vUv.x,vUv.y + offset)).a;
				float bottom=texture2D(map, vec2(vUv.x,vUv.y - offset)).a;
				float result=left+right+top+bottom;
				result=result*(1.0-finalcolor.a);
				vec4 freyColor=texture2D(fireyMap, vec2(vUv.x , vUv.y - time * 0.1))*result;
				gl_FragColor = finalcolor + freyColor;
            }

ShaderMaterial:

var customMaterial = new THREE.ShaderMaterial({
					uniforms: 
					{ 
						time:   { type: "f", value: 1.0},
						repeatX:   { type: "f", value: 1.0},
						map:   { value: undefined },
						fireyMap: { value: undefined },
						uColor:   { type: "v3", value: new THREE.Vector4(0.0 , 1.0, 1.0) },
					},
					vertexShader:   document.getElementById( 'vertexShader'   ).textContent,
					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
					side: THREE.FrontSide,
					blending: THREE.AdditiveBlending,
					transparent: true
				})

纹理参数设置：

var map = textureLoader.load( "textures/sprites/alarm.png" );
var fireyMap = textureLoader.load( "textures/sprites/3.png" );
fireyMap.wrapS = THREE.RepeatWrapping;
fireyMap.wrapT = THREE.RepeatWrapping;
createHUDSprites()
spriteC.material.uniforms.map.value = map;
spriteC.material.uniforms.fireyMap.value = fireyMap;

renader函数中不断循环的纹理坐标：

spriteC.material.uniforms.time.value += 0.01;

核心代码都在这里了

感兴趣的还在看下下面参考文章：

https://zhuanlan.zhihu.com/p/267320941

https://link.zhihu.com/?target=https%3A//www.patreon.com/posts/shader-graph-32245554