Threejs 精灵火焰特效 Sprite Firey Aura effect

Threejs 精灵火焰特效 Sprite Firey Aura effect

最近看了一些关于用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

---

BIM树洞

做一个静谧的树洞君

用建筑的语言描述IT事物；

用IT的思维解决建筑问题；

共建BIM桥梁，聚合团队。

本学习分享资料不得用于商业用途，仅做学习交流！！如有侵权立即删除！！

---

• 微信公众号： BIM树洞
  

• 知乎专栏：BIM树洞

• 气氛组博客：http://www.31bim.com

• BIM应用及咨询，CAD,Revit, OpenGL，图形开发交流，加Q群1083064224