vlambda博客
学习文章列表

Threejs 精灵火焰特效 Sprite Firey Aura effect

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