webgl实现蚂蚁粘液动画效果代码
代码语言:html
所属分类:动画
代码描述:webgl实现蚂蚁粘液动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<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"> attribute vec4 a_position; attribute vec3 a_colour; attribute vec2 a_reference; uniform vec2 u_resolution; uniform sampler2D b_velocity; uniform sampler2D b_position; uniform sampler2D b_blur; 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() { vec2 position = texture2D(b_position, a_reference).xy; vec2 velocity = texture2D(b_velocity, a_reference).xy; float size = texture2D(b_blur, position).r; vec4 pos = vec4(position / u_resolution * 2. - 1., 0., 1.); gl_Position = pos; gl_PointSize = 1.; v_colour = vec3(0); } </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_resolution; uniform vec3 u_mouse; uniform float u_time; uniform vec2 u_screen; uniform sampler2D s_noise; uniform sampler2D b_velocity; uniform sampler2D b_position; uniform sampler2D b_species; uniform sampler2D b_blur; /* 1. move speed 2. turn speed 3. sensor angle 4. sensor size */ struct Settings { float moveSpeed; float turnSpeed; float sensorAngle; float sensorOffsetDst; }; float sense(vec4 creature, Settings settings, float direction) { float a = creature.z + settings.sensorAngle * direction; vec2 dir = vec2(cos(a), sin(a)); vec2 pos = creature.xy + dir * settings.sensorOffsetDst; float p = 0.; const float s = 2.; for (float x = -s; x <= s; x ++) { for (float y = -s; y <= s; y ++) { vec2 s = (pos + vec2(x, y))/u_screen; p += texture2D(b_blur, s).x; } } return p; // return smoothstep(0., 100., sum); } 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); } void main() { vec2 uv = gl_FragCoord.xy / u_resolution.xy; vec2 position = texture2D(b_position, uv).xy; vec4 velocity = texture2D(b_velocity, uv); vec4 settingsA = texture2D(b_species, uv); Settings settings = Settings(settingsA.x, settingsA.y, settingsA.z, settingsA.w); vec4 creature = vec4(position.xy, velocity.zw); vec3 w = vec3( sense(creature, settings, 0.), // forward sense(creature, settings, -1.), // left sense(creature, settings, 1.) // right ); float r = abs(rand(length(creature.xy)))*.05; r = rand(creature.xy+u_time); float turnSpeed = settings.turnSpeed * 2. * 3.1415; if(w.x > w.y && w.x > w.z) { } else if(w.x < w.y && w.x < w.z) { creature.z += (r-.5) * 2. * turnSpeed; } else if(w.z > w.y) { creature.z -= r * turnSpeed; } else if(w.z < w.y) { creature.z += r * turnSpeed; } velocity.zw = creature.zw; velocity.xy = vec2( cos(creature.z) * settings.moveSpeed, sin(creature.z) * settings.moveSpeed ); if(u_mouse.z == 1.) { vec2 m = position - u_mouse.xy; float d = dot((position), (u_mouse.xy)); float a = atan(m.y, m.x); velocity.z = mix(velocity.z, a, smoothstep(200., 100., length(m))); float l = 1. / length(m*.001); velocity.xy += vec2( cos(a)*l, sin(a)*l ) * smoothstep(100., 10., length(m)); } // if(position.x > u_screen.x) velocity.z = rand(agent.xy+u_time) * 2. * 3.14159; // else if(position.x < 0.) velocity.z += rand(agent.xy+u_time) * 2. * 3.14159; // if(position.y > u_screen.y) velocity.z += rand(agent.xy+u_time) * 2. * 3.14159; // else if(position.y < 0.) velocity.z += rand(agent.xy+u_time) * 2. * 3.14159; gl_FragColor = velocity; } </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; void main() { vec2 uv = gl_FragCoord.xy / u_resolution.xy; vec2 position = texture2D(b_position, uv).xy; vec2 velocity = texture2D(b_velocity, uv).xy; vec2 pos = position+velocity*.99; 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.) pos.y = -10.; else if(pos.y < -20.) pos.y = u_screen.y + 10.; // if(pos.x > u_screen.x) pos.x = u_screen.x - .1; // else if(pos.x < 0.) pos.x = 0.; // if(pos.y > u_screen.y) pos.y = u_screen.y - .1; // else if(pos.y < 0.) pos.y = 0.; gl_FragColor = vec4(pos, 0., 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; gl_FragColor = vec4(0, 0, 0, 1); float l = length(uv); float c = smoothstep(.5, 0., l); float fog = smoothstep(-200., -1., v_fogDepth); float opacity = c * fog; gl_FragColor = vec4(.2); } </script> <script id="fragmentShader_blur" type="x-shader/x-fragment"> #extension GL_OES_standard_derivatives : enable precision highp float; uniform vec2 u_resolution; uniform vec3 u_mouse; uniform float u_time; uniform sampler2D s_noise; uniform sampler2D b_prime; uniform sampler2D b_blur; varying vec3 v_colour; const float diffuseSpeed = .1; const float fadeSpeed = .002; #define PI 3.141592653589793 #define TAU 6.283185307179586 #define pow2(x) (x * x) vec2 getScreenSpace() { vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); return uv; } vec4 blur(sampler2D sampler, vec2 p, vec2 ps) { vec4 v; for(float x = -1.; x <= 1.; x++) { for(float y = -1.; y <= 1.; y++) { vec2 s = p+vec2(x * ps.x, y * ps.y); v += texture2D(sampler, s); } } return v /= 9.; } void main() { vec2 s = gl_FragCoord.xy / u_resolution; vec2 ps = vec2(1.0) / u_resolution.xy; vec4 p = texture2D(b_prime, s); vec4 bo = texture2D(b_blur, s); vec4 b = blur(b_blur, s, ps); float d = mix(bo.x, b.x, diffuseSpeed); float opt = mix(d*(1.-fadeSpeed), 1., p.a); opt = d*(1.-fadeSpeed) + (p.a); if(u_mouse.z == 1.) { vec2 m = gl_FragCoord.xy - u_mouse.xy; float d = dot(gl_FragCoord.xy, (u_mouse.xy)); float a = atan(m.y, m.x); opt = mix(opt, opt*.9, smoothstep(200., 10., length(m))); } gl_FragColor = vec4(vec3(opt), 1.); } </script> <script id="fragmentShader_output" 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_blur; varying vec3 v_colour; vec2 getScreenSpace() { vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x); return uv; } const int samples = 8; const float sigma = float(samples) * 0.25; #define PI 3.141592653589793 #define TAU 6.283185307179586 #define pow2(x) (x * x) float gaussian(vec2 i) { return 1.0 / (2.0 * PI * pow2(sigma)) * exp(-((pow2(i.x) + pow2(i.y)) / (2.0 * pow2(sigma)))); } vec4 blur(sampler2D sp, vec2 uv, vec2 scale) { vec4 col = vec4(0.0); float accum = 0.0; float weight; vec2 offset; for (int x = -samples / 2; x < samples / 2; ++x) { for (int y = -samples / 2; y < samples / 2; ++y) { offset = vec2(x, y); weight = gaussian(offset); col += texture2D(sp, uv + scale * offset) * weight; accum += weight; } } return col / accum; } void main() { vec2 s = gl_FragCoord.xy / u_resolution; vec4 p = texture2D(b_prime, s); vec4 b = texture2D(b_blur, s); vec3 c = b.rgb*.05; c *= c; c = smoothstep(-1., 5., b.rgb) - smoothstep(30., 35., b.rgb); // c = smoothstep(0., 1., b.rgb); gl_FragColor = vec4(clamp(c, 0., 1.), 1.); // gl_FragColor = opt; } </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 px = Math.min(window.devicePixelRatio, 2); const dimensions = [window.innerWidth, window.innerHeight]; const texturesize = 128; 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: true, premultipliedAlpha: false, preserveDrawingBuffer: true, pxRatio: px }); 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); const speciesData = 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 const r = Math.random() * 3.14159 * 2.; const l = Math.random() * 400; const x = dimensions[0] * .5 + Math.cos(r) * l; const y = dimensions[1] * .5 + Math.sin(r) * l; // positionData[tindex] = Math.random() * (dimensions[0] * px + 40); // positionData[tindex + 1] = Math.random() * (dimensions[1] * px + 40); positionData[tindex] = x; positionData[tindex + 1] = y; positionData[tindex + 2] = 0; positionData[tindex + 3] = 1; velocityData[tindex] = -positionData[tindex]; velocityData[tindex + 1] = -positionData[tindex + 1.]; velocityData[tindex + 2] = r - Math.PI; velocityData[tindex + 3] = .5; speciesData[tindex] = 1.; // move speed speciesData[tindex + 1] = .7; // turn speed speciesData[tindex + 2] = .6; // sensor angle speciesData[tindex + 3] = 20; // sensor offset } 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 speciesBuffer = new FrameBuffer(renderer, 'species', { width: texturesize, height: texturesize, tiling: Texture.IMAGETYPE_TILE, texdepth: FrameBuffer.TEXTYPE_FLOAT, pxRatio: 1, data: speciesData }); const blurBuffer = new FrameBuffer(renderer, 'blur', { width: dimensions[0], height: dimensions[1], tiling: Texture.IMAGETYPE_REGULAR, texdepth: FrameBuffer.TEXTYPE_FLOAT, pxRatio: px }); const primaryBuffer = new FrameBuffer(renderer, 'prime', { width: dimensions[0], height: dimensions[1], tiling: Texture.IMAGETYPE_REGULAR, pxRatio: px }); 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 programBlur = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_blur').innerText, { renderType: Program.RENDER_STRIP }); const programMain = new Program(ctx, vertexShader_particle, document.getElementById('fragmentShader_particle').innerText, { // clearColour: [.15,.1,.05, 1.], clearColour: [.9, .9, .9, 0.], renderType: Program.RENDER_POINTS, blending: Renderer.BLENDING_NORMAL, depthTesting: false, transparent: false, premultiplied: false }); const programOutput = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_output').innerText, { clearColour: [.0, .0, .0, 1.], renderType: Program.RENDER_STRIP }); 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_V3, [0., 0., 0.]); const screen = new Uniform(ctx, 'screen', Uniform.TYPE_V2, [dimensions[0] * px, dimensions[1] * px]); const noise = new Texture(ctx, 'noise', { textureType: Texture.IMAGETYPE_TILE, url: 'https://assets.codepen.io/982762/noise.png' }); noise.preload().then(n => { requestAnimationFrame(run); }); let pointerdown = false; let lastPos = new Vec2(); window.addEventListener('pointerdown', e => { if (e.button == 0) { pointerdown = true; lastPos = new Vec2(e.x, e.y); mouse.value[0] = lastPos.x * px; mouse.value[1] = (window.innerHeight - lastPos.y) * px; 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, e.y); mouse.value[0] = newPos.x * px; mouse.value[1] = (window.innerHeight - newPos.y) * px; } }); let playing = true; const setPlaying = value => { playing = value; }.........完整代码请登录后点击上方下载按钮下载查看
网友评论0