/* Custom 2D WebGL cloud renderer. * Much lighter than Vanta's volumetric raymarching while still * GPU-accelerated. Renders a fullscreen quad and uses a custom * fragment shader to produce animated cloud-like patterns. * * Drop-in replacement for Vanta when CONFIG.renderer === 'clouds2d'. */ (function() { function makeShader(gl, type, src) { var s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) { console.error('clouds2d: Shader compile error:', gl.getShaderInfoLog(s)); gl.deleteShader(s); return null; } return s; } function makeProgram(gl, vsSrc, fsSrc) { var vs = makeShader(gl, gl.VERTEX_SHADER, vsSrc); var fs = makeShader(gl, gl.FRAGMENT_SHADER, fsSrc); if (!vs || !fs) return null; var p = gl.createProgram(); gl.attachShader(p, vs); gl.attachShader(p, fs); gl.linkProgram(p); if (!gl.getProgramParameter(p, gl.LINK_STATUS)) { console.error('clouds2d: Program link error:', gl.getProgramInfoLog(p)); gl.deleteProgram(p); return null; } return p; } var VERT_SRC = [ 'attribute vec2 aPos;', 'void main() { gl_Position = vec4(aPos, 0.0, 1.0); }' ].join('\n'); var FRAG_SRC = [ 'precision highp float;', 'uniform vec2 uResolution;', 'uniform float uTime;', 'uniform vec3 uSky;', 'uniform vec3 uCloud;', 'uniform vec3 uLight;', 'uniform float uSpeed;', 'float hash(vec2 p) {', 'p = fract(p * vec2(123.34, 456.21));', 'p += dot(p, p + 45.32);', 'return fract(p.x * p.y);', '}', 'float noise(vec2 p) {', 'vec2 i = floor(p);', 'vec2 f = fract(p);', 'float a = hash(i);', 'float b = hash(i + vec2(1.0, 0.0));', 'float c = hash(i + vec2(0.0, 1.0));', 'float d = hash(i + vec2(1.0, 1.0));', 'vec2 u = f * f * (3.0 - 2.0 * f);', 'return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;', '}', 'float fbm(vec2 p) {', 'float v = 0.0;', 'float a = 0.5;', 'for (int i = 0; i < 5; i++) {', 'v += a * noise(p);', 'p *= 2.02;', 'a *= 0.5;', '}', 'return v;', '}', 'void main() {', 'vec2 uv = gl_FragCoord.xy / uResolution.xy;', 'vec2 p1 = uv * vec2(3.0, 1.7) + vec2(uTime * 0.012, uTime * 0.004);', 'vec2 p2 = uv * vec2(5.0, 2.6) + vec2(uTime * 0.020, -uTime * 0.006);', 'float n = fbm(p1 * uSpeed) * 0.6 + fbm(p2 * uSpeed) * 0.4;', 'float cloud = smoothstep(0.35, 0.75, n);', 'float horizon = smoothstep(0.0, 0.45, uv.y);', 'vec3 col = mix(uSky, uCloud, cloud * (1.0 - horizon * 0.3));', 'col = mix(col, uLight, cloud * horizon * 0.5);', 'gl_FragColor = vec4(col, 1.0);', '}' ].join('\n'); function init(canvas) { var gl = canvas.getContext('webgl', { antialias: false, alpha: false }); if (!gl) { console.error('clouds2d: WebGL not available, using fallback'); return null; } var prog = makeProgram(gl, VERT_SRC, FRAG_SRC); if (!prog) return null; var buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ -1,-1, 3,-1, -1,3 ]), gl.STATIC_DRAW); var aPos = gl.getAttribLocation(prog, 'aPos'); var uRes = gl.getUniformLocation(prog, 'uResolution'); var uTime = gl.getUniformLocation(prog, 'uTime'); var uSky = gl.getUniformLocation(prog, 'uSky'); var uCloud = gl.getUniformLocation(prog, 'uCloud'); var uLight = gl.getUniformLocation(prog, 'uLight'); var uSpeed = gl.getUniformLocation(prog, 'uSpeed'); return { gl: gl, prog: prog, buf: buf, aPos: aPos, uRes: uRes, uTime: uTime, uSky: uSky, uCloud: uCloud, uLight: uLight, uSpeed: uSpeed }; } function hex(r, g, b) { return [r/255, g/255, b/255]; } window.clouds2dRender = function(canvas) { if (!canvas) { console.error('clouds2d: no canvas'); return; } if (!canvas._clouds2d) { canvas._clouds2d = init(canvas); if (!canvas._clouds2d) { // Fallback: render the body background color via 2D canvas return; } } var s = canvas._clouds2d; var gl = s.gl; var w = canvas.width, h = canvas.height; gl.viewport(0, 0, w, h); gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(s.prog); gl.bindBuffer(gl.ARRAY_BUFFER, s.buf); gl.enableVertexAttribArray(s.aPos); gl.vertexAttribPointer(s.aPos, 2, gl.FLOAT, false, 0, 0); gl.uniform2f(s.uRes, w, h); gl.uniform1f(s.uTime, performance.now() / 1000); // Default theme colors (used until renderWeather() sets the right ones) var sky = [0.39, 0.54, 0.78]; var cloud = [0.43, 0.43, 0.43]; var light = [0.89, 0.87, 0.82]; // Pull from the same source as Vanta does var cfg = window.CONFIG || {}; var theme = (cfg.currentWeatherTheme || (cfg.weatherThemes && cfg.weatherThemes[cfg.theme])) || null; if (theme) { sky = hex((theme.skyColor >> 16) & 255, (theme.skyColor >> 8) & 255, theme.skyColor & 255); cloud = hex((theme.cloudColor >> 16) & 255, (theme.cloudColor >> 8) & 255, theme.cloudColor & 255); light = hex((theme.lightColor >> 16) & 255, (theme.lightColor >> 8) & 255, theme.lightColor & 255); } gl.uniform3fv(s.uSky, sky); gl.uniform3fv(s.uCloud, cloud); gl.uniform3fv(s.uLight, light); gl.uniform1f(s.uSpeed, 1.0); gl.drawArrays(gl.TRIANGLES, 0, 3); }; // Auto-render loop: keep the render in sync with rAF so the canvas // always shows the latest frame. window.clouds2dStart = function() { if (window._clouds2dRaf) return; function loop() { var c = document.getElementById('vanta'); if (c) window.clouds2dRender(c); window._clouds2dRaf = requestAnimationFrame(loop); } window._clouds2dRaf = requestAnimationFrame(loop); }; })();