webgl实现燃烧的火焰粒子动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：粒子
代码描述：webgl实现燃烧的火焰粒子动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
    body {
  background: #666;
  margin: 0;
  overflow: hidden;
}
canvas {
  height: 100vh;
  width: 100vw;
  touch-action: none;
}
.osc {
  left: 0px;
  position: fixed;
  top: 0px;
}

.button {
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: 0;
}
.controls {
  position: fixed;
  z-index: 10;
  left: 0;
  bottom: 0;
}
.playpause {
  background: #AAB;
  padding: 10px;
}
.playpause label {
  display: block;
  box-sizing: border-box;

  width: 0;
  height: 20px;

  cursor: pointer;

  border-color: transparent transparent transparent #202020;
  transition: 100ms all ease;
  will-change: border-width;

  border-style: double;
  border-width: 0px 0 0px 20px;
}
.playpause input[type='checkbox'] {
  visibility: hidden;
}
.playpause.checked label {
  border-style: double;
  border-width: 0px 0 0px 20px;
}
.playpause label {
  border-style: solid;
  border-width: 10px 0 10px 20px;
}
/* } */
</style>

</head>
<body>

<script id="vertexShader_particle" type="x-shader/x-vertex">
  precision highp float;
  attribute vec4 a_position;
  attribute vec3 a_colour;
  attribute vec2 a_reference;
  
  uniform vec2 u_resolution;
  uniform float u_time;
  
  uniform sampler2D b_velocity;
  uniform sampler2D b_position;
  
  varying vec2 v_reference;
  varying vec3 v_colour;
  varying float v_fogDepth;
  
  float rand(vec2 n) { 
    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
  }
  
  vec3 hsv2rgb(vec3 c) {
    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
  }
  
  void main() {
    vec3 positionD = texture2D(b_position, a_reference).xyz;
    vec2 position = positionD.xy;
    vec2 velocity = texture2D(b_velocity, a_reference).xy;
    
    vec4 pos = vec4(position / u_resolution * 2. - 1., 0., 1.);
    
    float r = positionD.z;
    
    gl_Position = pos;
    gl_PointSize = (50. * pow(.2, r)) * sin((u_time + r*.2) * 20. + r* 10.);
    v_colour = hsv2rgb(vec3(1.05+rand(a_reference)*r*.1,min(length(velocity), 1.)*.3+.5,r));
    v_reference = a_reference;
  }
</script>
<script id="vertexShader_buffer" type="x-shader/x-vertex">attribute vec4 a_position;  
  uniform mat4 u_modelViewMatrix;
  uniform mat4 u_projectionMatrix;
  
  void main() {
    gl_Position = a_position;
  }
</script>
<script id="fragmentShader_velocity" type="x-shader/x-fragment">
  #extension GL_OES_standard_derivatives : enable
  precision highp float;
  
  #define PI 3.141592653589793
  #define HPI 1.5707963267948966
  #define TAU 6.283185307179586
  #define G 0.67408
  
  uniform vec2 u_screen;
  uniform vec2 u_resolution;
  uniform vec4 u_mouse;
  uniform float u_time;
  uniform sampler2D s_noise;
  
  varying vec2 v_reference;
  uniform sampler2D b_velocity;
  uniform sampler2D b_position;
  
  //	Simplex 3D Noise 
  //	by Ian McEwan, Ashima Arts
  //
  vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
  vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
  
  float rand(float n){return fract(sin(n) * 43758.5453123);}
  float rand(vec2 n) { 
    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
  }
  float snoise(vec3 v){ 
    const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
    const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);

  // First corner
    vec3 i  = floor(v + dot(v, C.yyy) );
    vec3 x0 =   v - i + dot(i, C.xxx) ;

  // Other corners
    vec3 g = step(x0.yzx, x0.xyz);
    vec3 l = 1.0 - g;
    vec3 i1 = min( g.xyz, l.zxy );
    vec3 i2 = max( g.xyz, l.zxy );

    //  x0 = x0 - 0. + 0.0 * C 
    vec3 x1 = x0 - i1 + 1.0 * C.xxx;
    vec3 x2 = x0 - i2 + 2.0 * C.xxx;
    vec3 x3 = x0 - 1. + 3.0 * C.xxx;

  // Permutations
    i = mod(i, 289.0 ); 
    vec4 p = permute( permute( permute( 
               i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
             + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
             + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));

  // Gradients
  // ( N*N points uniformly over a square, mapped onto an octahedron.)
    float n_ = 1.0/7.0; // N=7
    vec3  ns = n_ * D.wyz - D.xzx;

    vec4 j = p - 49.0 * floor(p * ns.z *ns.z);  //  mod(p,N*N)

    vec4 x_ = floor(j * ns.z);
    vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)

    vec4 x = x_ *ns.x + ns.yyyy;
    vec4 y = y_ *ns.x + ns.yyyy;
    vec4 h = 1.0 - abs(x) - abs(y);

    vec4 b0 = vec4( x.xy, y.xy );
    vec4 b1 = vec4( x.zw, y.zw );

    vec4 s0 = floor(b0)*2.0 + 1.0;
    vec4 s1 = floor(b1)*2.0 + 1.0;
    vec4 sh = -step(h, vec4(0.0));

    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;

    vec3 p0 = vec3(a0.xy,h.x);
    vec3 p1 = vec3(a0.zw,h.y);
    vec3 p2 = vec3(a1.xy,h.z);
    vec3 p3 = vec3(a1.zw,h.w);

  //Normalise gradients
    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
    p0 *= norm.x;
    p1 *= norm.y;
    p2 *= norm.z;
    p3 *= norm.w;

  // Mix final noise value
    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
    m = m * m;
    return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), 
                                  dot(p2,x2), dot(p3,x3) ) );
  }
  
  void main() {
    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
    vec3 positionD = texture2D(b_position, uv).xyz;
    vec2 position = positionD.xy;
    vec2 velocity = texture2D(b_velocity, uv).xy;
    
    vec2 m = (position - u_mouse.xy);
    
    float r = positionD.z;
    
    float n = snoise(vec3(position*.001, u_time * 2.));
    float a = n * (3.14159 * 2.) + rand(uv)*2.;
    
    float c = cos(a);
    float s = sin(a);
    
    velocity = velocity * .99 + vec2(c, s) * (.005 + r * .005);
    
    // if(length(velocity) > 10.) velocity = normalize(velocity)*10.;
    
    if(u_mouse.z == 1.) {
      float a = atan(m.y, m.x);
      float m = smoothstep(400., 0., length(m));
      float l = pow(m, 20.) * (1.+r-n) * .3;
      float c = cos(a);
      float s = sin(a);
      velocity += vec2(c*l, s*l);
    }
    
    vec2 pos = position+velocity*.99+vec2(0.,1.*r);
    if(pos.x < -20. || pos.x > u_screen.x + 20.) velocity.xy *= .1;
    if(pos.y < -20. || pos.y > u_screen.y + 20.) velocity.xy *= .1;
    
    gl_FragColor = vec4(velocity, 0., 1.0);
  }
</script>
<script id="fragmentShader_position" type="x-shader/x-fragment">
  #extension GL_OES_standard_derivatives : enable
  precision highp float;
  
  uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform float u_time;
  uniform sampler2D s_noise;
  uniform vec2 u_screen;
  
  uniform sampler2D b_velocity;
  uniform sampler2D b_position;
  
  float rand(vec2 n) { 
    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
  }

  void main() {
    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
    vec3 positionD = texture2D(b_position, uv).xyz;
    vec2 position = positionD.xy;
    vec2 velocity = texture2D(b_velocity, uv).xy;
    
    float r = 1.-positionD.z;
    
    vec2 pos = position+velocity*.99+vec2(0.,.1+.4*r);
    if(pos.x > u_screen.x + 20.) pos.x = -10.;
    else if(pos.x < -20.) pos.x = u_screen.x + 10.;
    if(pos.y > u_screen.y + 20.) {
      float r = rand(uv+u_time);
      pos.y = -10.;
      pos.x = r*u_screen.x;
    }
    else if(pos.y < -20.) pos.y = u_screen.y + 10.;
    
    gl_FragColor = vec4(pos, positionD.z, 1.0);
  }
</script>
<script id="fragmentShader_particle" type="x-shader/x-fragment">
  #extension GL_OES_standard_derivatives : enable
  precision highp float;
  
  uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform float u_time;
  uniform sampler2D s_noise;
  
  uniform sampler2D b_prime;
  uniform sampler2D b_position;
  
  varying vec3 v_colour;
  varying float v_fogDepth;
  
  vec2 getScreenSpace() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    return uv;
  }

  void main() {
    vec2 uv = gl_PointCoord.xy - .5;
    vec2 s = gl_FragCoord.xy / u_resolution.xy;
    
    float l = length(uv);
    float c = smoothstep(.5, 0., l) * .5;
    float opacity = c + smoothstep(.1, 0.09, l);
    
    gl_FragColor = vec4(v_colour, opacity);
  }
  
</script>

<script type="module" >
    function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}function _classPrivateFieldSet(receiver, privateMap, value) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to set private field on non-instance");}if (descriptor.set) {descriptor.set.call(receiver, value);} else {if (!descriptor.writable) {throw new TypeError("attempted to set read only private field");}descriptor.value = value;}return value;}function _classPrivateFieldGet(receiver, privateMap) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to get private field on non-instance");}if (descriptor.get) {return descriptor.get.call(receiver);}return descriptor.value;}function _classStaticPrivateFieldSpecGet(receiver, classConstructor, descriptor) {if (receiver !== classConstructor) {throw new TypeError("Private static access of wrong provenance");}if (descriptor.get) {return descriptor.get.call(receiver);}return descriptor.value;}import { Vec2, Vec3, Mat2, Mat3, Mat4, Quat } from 'https://cdn.skypack.dev/wtc-math';

import gifJs from 'https://cdn.skypack.dev/gif.js';

console.clear();

const setup = function () {
  // Simulation dimensions
  const px = Math.min(window.devicePixelRatio, 2);
  const dimensions = [window.innerWidth, window.innerHeight];
  const texturesize = 256;
  const particles = Math.pow(texturesize, 2);
  const textureArraySize = particles * 4;

  const canvas = document.createElement('canvas');
  document.body.appendChild(canvas);

  const renderer = new Renderer(canvas, { width: dimensions[0], height: dimensions[1], alpha: false, premultipliedAlpha: false, preserveDrawingBuffer: true });
  const ctx = renderer.ctx;

  let drawing = new Float32Array([-1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0]);
  const ants = new Float32Array(particles * 2).fill(0);
  const references = new Float32Array(particles * 2).fill(0);
  const positionData = new Float32Array(particles * 4).fill(0);
  const velocityData = new Float32Array(particles * 4).fill(0);
  for (let i = 0; i < ants.length; i += 2) {
    const index = i / 2;
    const tindex = i * 2;

    ants[i] = index % texturesize; // x position
    ants[i + 1] = Math.floor(index / texturesize); // y position

    references[i] = ants[i] / texturesize; // x position of the texture particle representing this ant
    references[i + 1] = ants[i + 1] / texturesize; // y position of the texture particle representing this ant

    positionData[tindex] = Math.random() * (window.innerWidth * px + 40);
    positionData[tindex + 1] = Math.random() * (window.innerHeight * px + 40);
    positionData[tindex + 2] = Math.random();
    positionData[tindex + 3] = 1;

    velocityData[tindex] = Math.random() - .5;
    velocityData[tindex + 1] = Math.random() - .5;
    velocityData[tindex + 2] = 0;
    velocityData[tindex + 3] = 1;
  }
  // for (let i = 0; i < textureArraySize; i += 4) {
  //   positionData[i] = Math.random();
  //   positionData[i + 1] = Math.random();
  //   positionData[i + 2] = 0;
  //   positionData[i + 3] = 1;
  // }

  const positionBuffer = new FrameBuffer(renderer, 'position', {
    width: texturesize,
    height: texturesize,
    tiling: Texture.IMAGETYPE_TILE,
    texdepth: FrameBuffer.TEXTYPE_FLOAT,
    pxRatio: 1,
    data: positionData });

  const velocityBuffer = new FrameBuffer(renderer, 'velocity', {
    width: texturesize,
    height: texturesize,
    tiling: Texture.IMAGETYPE_TILE,
    texdepth: FrameBuffer.TEXTYPE_FLOAT,
    pxRatio: 1,
    data: velocityData });


  const drawBuffer = new Buffer(ctx, drawing);
  const antBuffer = new Buffer(ctx, ants, {
    attributes: [{
      name: 'ants',
      numComponents: 2 }] });


  const referenceBuffer = new Buffer(ctx, references, {
    attributes: [{
      name: 'reference',
      numComponents: 2 }] });



  const vertexShader_buffer = document.getElementById('vertexShader_buffer').innerText;
  const vertexShader_particle = document.getElementById('vertexShader_particle').innerText;

  const programPosition = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_position').innerText, {
    renderType: Program.RENDER_STRIP });
  const programVelocity = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_velocity').innerText, {
    renderType: Program.RENDER_STRIP });
  const programMain = new Program(ctx, vertexShader_particle, document.getElementById('fragmentShader_particle').innerText, {
    // clearColour: [.15,.1,.05, 1.], 
    clearColour: [.03, .03, .22, 1.],
    renderType: Program.RENDER_POINTS,
    blending: Renderer.BLENDING_ADDITIVE,
    depthTesting: false,
    transparent: false,
    premultiplied: false });


  const time = new Uniform(ctx, 'time', Uniform.TYPE_FLOAT, 100);
  const uDelta = new Uniform(ctx, 'delta', Uniform.TYPE_FLOAT, 100);
  const mouse = new Uniform(ctx, 'mouse', Uniform.TYPE_V4, [0., 0., 0., 0.]);
  const screen = new Uniform(ctx, 'screen', Uniform.TYPE_V2, [window.innerWidth * px, window.innerHeight * px]);

  const noise = new Texture(ctx, 'noise', {
    textureType: Texture.IMAGETYPE_TILE,
    url: '//repo.bfw.wiki/bfwrepo/icon/5fe566a638afc.gif' });


  noise.preload().then(n => {
    requestAnimationFrame(run);
  });

  let pointerdown = false;
  let lastPos = new Vec2();
  window.addEventListener('pointerdown', e => {
    pointerdown = true;
    lastPos = new Vec2(e.x, e.y);
    mouse.value[2] = 1.;
  });
  window.addEventListener('pointerup', e => {
    pointerdown = false;
    mouse.value[2] = 0.;
  });
  window.addEventListener('pointermove', e => {
    // if(pointerdown) {
    let newPos = new Vec2(e.x * px, e.y * px);
    mouse.value[0] = newPos.x;
    mouse.value[1] = window.innerHeight * px - newPos.y;
    // }
  });

  let playing = true;
  const setPlaying = value => {
    playing = value;
  };

  let autoTransitionTimer = 0;
  let timeToTransition = 0;
  const setupValues = i => {
    dimensions[0] = window.innerWidth;
    dimensions[1] = window.innerHeight;

    time.value = 0;
  };

  setupValues(0);

  let timeout;
  window.addEventListener('resize', () => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      dimensions[0] = window.innerWidth;
      dimensions[1] = window.innerHeight;
      renderer.resize(dimensions[0], dimensions[1]);
      screen.value = [dimensions[0] * px, dimensions[1] * px];
    }, 100);
  });

  let then = 0;
  const run = delta => {

    let now = Date.now() / 1000;
    let _delta = now - then;
    then = now;

    if (_delta > 1000) {
      requestAnimationFrame(run);
      return;
    }

    if (playing) {
      uDelta.value = Math.min(_delta, 0.5);
      time.value += _delta * .05;

      renderer.setViewport([velocityBuffer.width, velocityBuffer.height]);
      // window.renderer = renderer;
      // console.log(renderer.uniformResolution.value)
      renderer.setupProgram(programVelocity, [drawBuffer], [], [time, mouse, velocityBuffer, positionBuffer, uDelta, screen, noise]);
      velocityBuffer.render(4);

      renderer.setupProgram(programPosition, [drawBuffer], [], [time, mouse, velocityBuffer, positionBuffer, uDelta, screen, noise]);
      positionBuffer.render(4);

      renderer.setViewport();
      renderer.setupProgram(programMain, [referenceBuffer], [], [time, mouse, velocityBuffer, positionBuffer, screen, noise]);
      renderer.render(particles);

      requestAnimationFrame(run);
    }
  };
};

// Determine whether a number is a power of 2
function powerOf2(v) {
  return v && !(v & v - 1);
}
// Return the next greatest power of 2
function nextPow2(v) {
  v--;
  v |= v >> 1;
  v |= v >> 2;
  v |= v >> 4;
  v |= v >> 8;
  v |= v >> 16;
  v++;
  return v;
}
// Update a provided image to the nearest power of 2 in size.
const pow2Image = c => {
  const newWidth = powerOf2(c.width) ? c.width : nextPow2(c.width);
  const newHeight = powerOf2(c.height) ? c.height : nextPow2(c.height);
  const _c = document.createElement('canvas');
  const ctx = _c.getContext('2d');
  _c.width = newWidth;
  _c.height = newHeight;
  ctx.drawImage(c, 0, 0, newWidth, newHeight);
  return _c;
};
const asy.........完整代码请登录后点击上方下载按钮下载查看