webgl实现燃烧的火焰粒子动画效果代码
代码语言: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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0