html5 冒烟效果,利用HTML5实现3D火焰冒烟动画特效

特效描述：利用HTML5实现 3D火焰冒烟 动画特效。利用HTML5实现3D火焰冒烟动画特效

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

precision mediump float;

precision mediump int;

attribute vec4 color;

varying vec2 vUv;

varying float vFade;

void main(){

vUv = uv;

vec4 localPosition = vec4( position, 1);

vFade = clamp((localPosition.y + 3.0) / 6.0, 0.0, 1.0);

gl_Position = projectionMatrix * modelViewMatrix * localPosition;

}

precision mediump float;

precision mediump int;

uniform float time;

uniform float blend;

uniform sampler2D blendPattern;

varying float vFade;

varying vec2 vUv;

void main(){

vec4 startColor = vec4(1., 0.5, 0.1, 1.0);

vec4 endColor = vec4(0.2, 0.2, 0.2, 1.0);

float dissolve = texture2D(blendPattern, vUv).r * 0.5;

float spread = 0.4;

float fadeAmount = smoothstep(

max(0.0, vFade - spread),

min(1.0, vFade + spread),

blend + dissolve

);

vec4 color = mix(

startColor, endColor,

smoothstep(0.1,1., fadeAmount)

);

gl_FragColor = vec4(color.rgb, 1.-fadeAmount);

}