Particle Camera Transition

#version 300 es in vec2 aPosition; in vec2 aTexCoord; out vec2 vUv; void main() { vUv = aTexCoord; gl_Position = vec4(aPosition, 0.0, 1.0); } #version 300 es precision highp float; in vec2 vUv; out vec4 fragColor; uniform sampler2D uTexture0; uniform sampler2D uTexture1; uniform float uTime; uniform vec2 uResolution; // Parameters const float period = 3.0; // seconds const float particleSizeMin = 12.0; // pixel const float rotationRange = 30.0/180.0 * 3.1415926; const float travelDistanceRatio = 1.0; // Limits for loops (keeps shader compatible) const int MAX_GRID_X = 128; const int MAX_GRID_Y = 128; float rand(vec2 co){ return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); } float pKernel(float r) { return 1.0 - smoothstep(0.9, 1.0, r); } float exponentialInOut(float t) { return t == 0.0 || t == 1.0 ? t : t < 0.5 ? +0.5 * pow(2.0, (20.0 * t) - 10.0) : -0.5 * pow(2.0, 10.0 - (t * 20.0)) + 1.0; } float quadraticInOut(float t) { float p = 2.0 * t * t; return t < 0.5 ? p : -p + (4.0 * t) - 1.0; } vec4 animatedColor(sampler2D tex0, sampler2D tex1, vec2 fragCoord, vec2 res, float t) { float st = quadraticInOut(t); float particleSizeInit = particleSizeMin; // particle counts (clamped) int numX = int(ceil(res.x / particleSizeInit)); int numY = int(ceil(res.y / particleSizeInit)); numX = min(numX, MAX_GRID_X); numY = min(numY, MAX_GRID_Y); // camera float travelDistance = travelDistanceRatio * (res.x + res.y); float fx = travelDistance; vec3 cameraPos = vec3(res * 0.5, -fx + travelDistance * 0.8 * st); // rotation float phi0 = rotationRange * st; // accumulation vec4 colorSum = vec4(0.0); float weightSum = 0.0; for (int i = 0; i < numX; i++) { for (int j = 0; j < numY; j++) { // particle base coordinate (centered in cell) vec2 coordp = (vec2(float(i), float(j)) + 0.5) * particleSizeInit; float noise = rand(coordp); // position in world (z negative is away) vec3 pos0; pos0.xy = coordp + 30.0 * (noise - 0.5); // small jitter pos0.z = -(travelDistance * (0.2 + noise * 0.8)) * st * 0.6; // radius initial float radius0 = particleSizeInit * (0.25 + noise * 0.75) * (0.5 + 1.0 * st); // to camera space vec3 screenPos = pos0 - cameraPos; if (screenPos.z > 0.0) { // rotation around origin in XY float c = cos(-phi0); float s = sin(-phi0); vec2 rot = vec2(screenPos.x * c - screenPos.y * s, screenPos.x * s + screenPos.y * c); screenPos.xy = rot; // perspective projection screenPos.xy = screenPos.xy * fx / screenPos.z; screenPos.xy += res * 0.5; float screenRadius = radius0 * fx / screenPos.z; // check on-screen if (screenPos.x > -screenRadius && screenPos.x < res.x + screenRadius && screenPos.y > -screenRadius && screenPos.y < res.y + screenRadius) { vec2 dir = fragCoord - screenPos.xy; float r = length(dir) / max(0.0001, screenRadius); if (r < 1.0) { // particle UV on source textures vec2 uv0 = pos0.xy / res; uv0 = clamp(uv0, vec2(0.0), vec2(1.0)); vec4 color0 = texture(tex0, uv0); vec4 color1 = texture(tex1, uv0); vec4 colorP = mix(color0, color1, st); // weight with kernel and distance falloff float w = pKernel(r); // slight depth-based attenuation so nearer particles weigh more float depthAtten = 1.0 / (1.0 + screenPos.z * 0.001); w *= depthAtten; colorSum.rgb += colorP.rgb * w; colorSum.a += colorP.a * w; weightSum += w; } } } } } if (weightSum > 0.0) { colorSum.rgb /= weightSum; colorSum.a /= weightSum; } else { colorSum = vec4(0.0); } // background blending with slight scale+rotate float scale = 1.0 / (1.0 + 0.6 * st); vec2 uvCenter = fragCoord - res * 0.5; vec2 uvRot = vec2(uvCenter.x * cos(phi0) - uvCenter.y * sin(phi0), uvCenter.x * sin(phi0) + uvCenter.y * cos(phi0)); vec2 uv0 = (scale * uvRot) / res + 0.5; vec2 uv1 = fragCoord / res; uv0 = clamp(uv0, vec2(0.0), vec2(1.0)); uv1 = clamp(uv1, vec2(0.0), vec2(1.0)); vec4 col0 = texture(tex0, uv0); vec4 col1 = texture(tex1, uv1); vec4 colBG = mix(col0, col1, exponentialInOut(t)); // transition weight curve float w; if (t < 0.2) { w = smoothstep(0.0, 0.2, t); } else if (t < 0.8) { w = 1.0; } else { w = 1.0 - smoothstep(0.8, 1.0, t); } // composite: particle color over backdrop vec3 finalCol = mix(colBG.rgb, colorSum.rgb, w * step(0.0, colorSum.a)); return vec4(finalCol, 1.0); } void main() { // compute global transition time in [0,1] float tRaw = fract(uTime / period); // remap to tighten start/end (as original) float t = clamp((tRaw - 0.2) * 1.3, 0.0, 1.0); // decide turn (which texture is source/dest) int turn = int(floor(uTime / period)) % 2; vec2 fragCoord = vUv * uResolution; vec4 col; if (turn == 0) { col = animatedColor(uTexture0, uTexture1, fragCoord, uResolution, t); } else { col = animatedColor(uTexture1, uTexture0, fragCoord, uResolution, t); } fragColor = vec4(col.rgb, 1.0); } const vertexShaderSource = `#version 300 es in vec2 aPosition; in vec2 aTexCoord; out vec2 vUv; void main() { vUv = aTexCoord; gl_Position = vec4(aPosition, 0.0, 1.0); }`; const fragmentShaderSource = `#version 300 es precision highp float; in vec2 vUv; out vec4 fragColor; uniform sampler2D uTexture0; uniform sampler2D uTexture1; uniform float uTime; uniform vec2 uResolution; const float period = 3.0; const float particleSizeMin = 12.0; const float rotationRange = 30.0/180.0 * 3.1415926; const float travelDistanceRatio = 1.0; const int MAX_GRID_X = 128; const int MAX_GRID_Y = 128; float rand(vec2 co){ return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); } float pKernel(float r) { return 1.0 - smoothstep(0.9, 1.0, r); } float exponentialInOut(float t) { return t == 0.0 || t == 1.0 ? t : t < 0.5 ? +0.5 * pow(2.0, (20.0 * t) - 10.0) : -0.5 * pow(2.0, 10.0 - (t * 20.0)) + 1.0; } float quadraticInOut(float t) { float p = 2.0 * t * t; return t < 0.5 ? p : -p + (4.0 * t) - 1.0; } vec4 animatedColor(sampler2D tex0, sampler2D tex1, vec2 fragCoord, vec2 res, float t) { float st = quadraticInOut(t); float particleSizeInit = particleSizeMin; int numX = int(ceil(res.x / particleSizeInit)); int numY = int(ceil(res.y / particleSizeInit)); numX = min(numX, MAX_GRID_X); numY = min(numY, MAX_GRID_Y); float travelDistance = travelDistanceRatio * (res.x + res.y); float fx = travelDistance; vec3 cameraPos = vec3(res * 0.5, -fx + travelDistance * 0.8 * st); float phi0 = rotationRange * st; vec4 colorSum = vec4(0.0); float weightSum = 0.0; for (int i = 0; i < numX; i++) { for (int j = 0; j < numY; j++) { vec2 coordp = (vec2(float(i), float(j)) + 0.5) * particleSizeInit; float noise = rand(coordp); vec3 pos0; pos0.xy = coordp + 30.0 * (noise - 0.5); pos0.z = -(travelDistance * (0.2 + noise * 0.8)) * st * 0.6; float radius0 = particleSizeInit * (0.25 + noise * 0.75) * (0.5 + 1.0 * st); vec3 screenPos = pos0 - cameraPos; if (screenPos.z > 0.0) { float c = cos(-phi0); float s = sin(-phi0); vec2 rot = vec2(screenPos.x * c - screenPos.y * s, screenPos.x * s + screenPos.y * c); screenPos.xy = rot; screenPos.xy = screenPos.xy * fx / screenPos.z; screenPos.xy += res * 0.5; float screenRadius = radius0 * fx / screenPos.z; if (screenPos.x > -screenRadius && screenPos.x < res.x + screenRadius && screenPos.y > -screenRadius && screenPos.y < res.y + screenRadius) { vec2 dir = fragCoord - screenPos.xy; float r = length(dir) / max(0.0001, screenRadius); if (r < 1.0) { vec2 uv0 = pos0.xy / res; uv0 = clamp(uv0, vec2(0.0), vec2(1.0)); vec4 color0 = texture(tex0, uv0); vec4 color1 = texture(tex1, uv0); vec4 colorP = mix(color0, color1, st); float w = pKernel(r); float depthAtten = 1.0 / (1.0 + screenPos.z * 0.001); w *= depthAtten; colorSum.rgb += colorP.rgb * w; colorSum.a += colorP.a * w; weightSum += w; } } } } } if (weightSum > 0.0) { colorSum.rgb /= weightSum; colorSum.a /= weightSum; } else { colorSum = vec4(0.0); } float scale = 1.0 / (1.0 + 0.6 * st); vec2 uvCenter = fragCoord - res * 0.5; vec2 uvRot = vec2(uvCenter.x * cos(phi0) - uvCenter.y * sin(phi0), uvCenter.x * sin(phi0) + uvCenter.y * cos(phi0)); vec2 uv0 = (scale * uvRot) / res + 0.5; vec2 uv1 = fragCoord / res; uv0 = clamp(uv0, vec2(0.0), vec2(1.0)); uv1 = clamp(uv1, vec2(0.0), vec2(1.0)); vec4 col0 = texture(tex0, uv0); vec4 col1 = texture(tex1, uv1); vec4 colBG = mix(col0, col1, exponentialInOut(t)); float w; if (t < 0.2) { w = smoothstep(0.0, 0.2, t); } else if (t < 0.8) { w = 1.0; } else { w = 1.0 - smoothstep(0.8, 1.0, t); } vec3 finalCol = mix(colBG.rgb, colorSum.rgb, w * step(0.0, colorSum.a)); return vec4(finalCol, 1.0); } void main() { float tRaw = fract(uTime / period); float t = clamp((tRaw - 0.2) * 1.3, 0.0, 1.0); int turn = int(floor(uTime / period)) % 2; vec2 fragCoord = vUv * uResolution; vec4 col; if (turn == 0) { col = animatedColor(uTexture0, uTexture1, fragCoord, uResolution, t); } else { col = animatedColor(uTexture1, uTexture0, fragCoord, uResolution, t); } fragColor = vec4(col.rgb, 1.0); }`; function createShader(gl, type, source) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.error(gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } return shader; } function createProgram(gl, vsSource, fsSource) { const vs = createShader(gl, gl.VERTEX_SHADER, vsSource); const fs = createShader(gl, gl.FRAGMENT_SHADER, fsSource); const prog = gl.createProgram(); gl.attachShader(prog, vs); gl.attachShader(prog, fs); gl.linkProgram(prog); if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) { console.error(gl.getProgramInfoLog(prog)); gl.deleteProgram(prog); return null; } return prog; } function createGradientCanvas(w, h, c1, c2) { const c = document.createElement('canvas'); c.width = w; c.height = h; const ctx = c.getContext('2d'); const grad = ctx.createLinearGradient(0, 0, w, h); grad.addColorStop(0, c1); grad.addColorStop(1, c2); ctx.fillStyle = grad; ctx.fillRect(0, 0, w, h); // add some subtle noise const img = ctx.getImageData(0, 0, w, h); for (let i = 0; i < img.data.length; i += 4) { const n = (Math.random() - 0.5) * 10; img.data[i] = Math.min(255, Math.max(0, img.data[i] + n)); img.data[i+1] = Math.min(255, Math.max(0, img.data[i+1] + n)); img.data[i+2] = Math.min(255, Math.max(0, img.data[i+2] + n)); } ctx.putImageData(img, 0, 0); return c; } function createTextureFromCanvas(gl, canvas) { const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.bindTexture(gl.TEXTURE_2D, null); return tex; } function init() { const canvas = document.getElementById('glCanvas'); const gl = canvas.getContext('webgl2', { antialias: true }); if (!gl) { alert('WebGL2 not supported'); return; } // full screen quad const positions = new Float32Array([ -1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1 ]); const program = createProgram(gl, vertexShaderSource, fragmentShaderSource); gl.useProgram(program); const vao = gl.createVertexArray(); gl.bindVertexArray(vao); const vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); const aPosition = gl.getAttribLocation(program, 'aPosition'); const aTexCoord = gl.getAttribLocation(program, 'aTexCoord'); gl.enableVertexAttribArray(aPosition); gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 16, 0); gl.enableVertexAttribArray(aTexCoord); gl.vertexAttribPointer(aTexCoord, 2, gl.FLOAT, false, 16, 8); // create two procedural textures const texSize = 1024; const canvasA = createGradientCanvas(texSize, texSize, '#0b3d91', '#2bb7f2'); const canvasB = createGradientCanvas(texSize, texSize, '#ff6b6b', '#ffd166'); const texture0 = createTextureFromCanvas(gl, canvasA); const texture1 = createTextureFromCanvas(gl, canvasB); // uniforms const uTex0 = gl.getUniformLocation(program, 'uTexture0'); const uTex1 = gl.getUniformLocation(program, 'uTexture1'); const uTime = gl.getUniformLocation(program, 'uTime'); const uResolution = gl.getUniformLocation(program, 'uResolution'); // bind textures to units gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture0); gl.uniform1i(uTex0, 0); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, texture1); gl.uniform1i(uTex1, 1); let start = performance.now(); function resize() { const dpr = window.devicePixelRatio || 1; const width = Math.floor(gl.canvas.clientWidth * dpr); const height = Math.floor(gl.canvas.clientHeight * dpr); if (gl.canvas.width !== width || gl.canvas.height !== height) { gl.canvas.width = width; gl.canvas.height = height; gl.viewport(0, 0, width, height); } gl.uniform2f(uResolution, gl.canvas.width, gl.canvas.height); } function render() { resize(); const now = performance.now(); const t = (now - start) * 0.001; gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); gl.uniform1f(uTime, t); gl.bindVertexArray(vao); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); requestAnimationFrame(render); } // initial canvas sizing to full viewport function fitToWindow() { canvas.style.width = '100vw'; canvas.style.height = '100vh'; } window.addEventListener('resize', fitToWindow); fitToWindow(); requestAnimationFrame(render); } window.onload = init;