window.onload = _=>{ const randSeed = Math.random() * Math.PI * 2; let timeOffset = 0; const resizeCallback = []; function resize() { const nw = container.clientWidth; const nh = container.clientHeight; resizeCallback.forEach(cb=>{ cb(nw,nh); }); } window.addEventListener("resize",resize); // Prepare WebGL let startTime = new Date(); let currentTime = startTime; const canvas = document.getElementById("canvas"); const container = document.getElementById("container"); const gl = canvas.getContext("webgl2"); gl.getExtension("EXT_color_buffer_float"); gl.blendFuncSeparate(gl.SRC_ALPHA,gl.ONE,gl.ONE,gl.ONE); gl.disable(gl.CULL_FACE); gl.enable(gl.DEPTH_TEST); gl.depthMask(false); gl.clearColor(0.2,0.2,0.2,1); resizeCallback.push((w,h)=>{ canvas.width = w; canvas.height = h; gl.viewport(0,0,w,h); }); // Mesh and Material function buildMesh(verts, dim, nrm) { const vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,vbo); gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(verts),gl.STATIC_DRAW); return _=>{ gl.bindBuffer(gl.ARRAY_BUFFER,vbo); const stride = 4*(dim+nrm); gl.vertexAttribPointer(0,dim,gl.FLOAT,false,stride,0); gl.enableVertexAttribArray(0); if(nrm > 0) { const offset = 4*dim; gl.vertexAttribPointer(1,nrm,gl.FLOAT,false,stride,offset); gl.enableVertexAttribArray(1); } gl.drawArrays(gl.TRIANGLE_STRIP,0,verts.length/(dim+nrm)); }; } const rect = buildMesh([-1,-1,1,-1,-1,1,1,1], 2, 0); const cube = buildMesh([ -1,-1,-1,+1,0,0, -1,+1,-1,+1,0,0, -1,-1,+1,+1,0,0, -1,+1,+1,+1,0,0, -1,+1,+1,+1,0,0, +1,-1,-1,-1,0,0, +1,-1,-1,-1,0,0, +1,-1,+1,-1,0,0, +1,+1,-1,-1,0,0, +1,+1,+1,-1,0,0, +1,+1,+1,-1,0,0, -1,-1,-1,0,+1,0, -1,-1,-1,0,+1,0, -1,-1,+1,0,+1,0, +1,-1,-1,0,+1,0, +1,-1,+1,0,+1,0, +1,-1,+1,0,+1,0, -1,+1,-1,0,-1,0, -1,+1,-1,0,-1,0, +1,+1,-1,0,-1,0, -1,+1,+1,0,-1,0, +1,+1,+1,0,-1,0, +1,+1,+1,0,-1,0, -1,-1,-1,0,0,+1, -1,-1,-1,0,0,+1, +1,-1,-1,0,0,+1, -1,+1,-1,0,0,+1, +1,+1,-1,0,0,+1, +1,+1,-1,0,0,+1, -1,-1,+1,0,0,-1, -1,-1,+1,0,0,-1, -1,+1,+1,0,0,-1, +1,-1,+1,0,0,-1, +1,+1,+1,0,0,-1 ], 3, 3); const groundMesh = frameCount=>{ const pss = []; let ps = []; const n = frameCount; const w = 1.0, l = 0.15, h = 0.025; ps = []; for(let i=0;i<=n;i++) { ps.push(-w, h, i); ps.push(-w+l, h, i); } pss.push(ps); ps = []; for(let i=0;i<=n;i++) { ps.push(-w+l, -h, i); ps.push(w-l, -h, i); } pss.push(ps); ps = []; for(let i=0;i<=n;i++) { ps.push(w-l, h, i); ps.push(w, h, i); } pss.push(ps); // Combine ps = []; for(let i=0;i{ const pss = []; for(let i=0;i{ const pss = []; for(let i=0;i{ locs[pa] = gl.getUniformLocation(p,pa); }); function setting(name, args) { if(args.length == 1 && args[0].texture !== undefined) { gl.uniform1i(locs[name], args[0].texture); } else { const func = "uniform" + args.length + "fv"; const as = []; for(let i=0;i{ gl.useProgram(p); task.forEach(t=>{t();}); task = []; setting("resolution",[1,canvas.height/canvas.width]); const sec = (currentTime - startTime) / 1000 + timeOffset; setting("time", [sec]); setting("randSeed", [randSeed]); gl.bindAttribLocation(p,0,"vertex"); gl.bindAttribLocation(p,1,"normal"); mesh(); }; params.forEach(l=>{ o[l] = function() { task.push(_=>{setting(l, arguments);}); }; }); return o; } // FrameBuffers const clone = buildMaterial(` attribute vec2 vertex; varying vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform sampler2D texture; void main() { vec2 uv = coord * 0.5 + 0.5; vec3 col = texture2D(texture, uv).rgb; gl_FragColor = vec4(col,1); } `,rect,["texture"]); let lastTexture = 0; const RenderBuffer = _=>{ const textureIndex = lastTexture++; const rb = gl.createRenderbuffer(); let w = canvas.width, h = canvas.height; gl.bindRenderbuffer(gl.RENDERBUFFER, rb); const samples = Math.min(8, gl.getParameter(gl.MAX_SAMPLES)); gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, gl.RGBA8, w, h); const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_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); const drb = gl.createRenderbuffer(); gl.bindRenderbuffer(gl.RENDERBUFFER, drb); gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, gl.DEPTH_COMPONENT16, w, h); const fb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, drb); gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, rb); const ofb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, ofb); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0); gl.bindFramebuffer(gl.FRAMEBUFFER, null); return { resize: (nw,nh)=>{ w = nw, h = nh; gl.bindRenderbuffer(gl.RENDERBUFFER, rb); gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, gl.RGBA8, w, h); gl.bindRenderbuffer(gl.RENDERBUFFER, drb); gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, gl.DEPTH_COMPONENT16, w, h); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); }, render: e=>{ gl.activeTexture(gl.TEXTURE0 + textureIndex); gl.bindTexture(gl.TEXTURE_2D, null); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); gl.depthMask(true); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.depthMask(false); e(); gl.bindFramebuffer(gl.READ_FRAMEBUFFER, fb); gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, ofb); gl.blitFramebuffer(0, 0, w, h, 0, 0, w, h, gl.COLOR_BUFFER_BIT, gl.NEAREST); gl.bindFramebuffer(gl.FRAMEBUFFER, null); }, use: _=>{ gl.activeTexture(gl.TEXTURE0 + textureIndex); gl.bindTexture(gl.TEXTURE_2D, tex); return { texture: textureIndex }; } }; }; const LoopBuffer = _=>{ const buffers = [RenderBuffer(), RenderBuffer()]; resizeCallback.push((nw,nh)=>{ buffers[1].resize(nw,nh); buffers[1].render(_=>{ clone.texture(buffers[0].use()); clone(); }); buffers[0].resize(nw,nh); buffers[0].render(_=>{ clone.texture(buffers[1].use()); clone(); }); }); return { render: e=>{ const target = buffers.pop(); target.render(e); buffers.unshift(target); }, use: _=>{ return buffers[0].use(); } }; }; // Data Buffer const maxElements = 32; const frameCount = 1024; const DataBuffer = _=>{ const textureIndex = lastTexture++; const d = 2; // per element const w = d * maxElements, h = frameCount; const rb = gl.createRenderbuffer(); gl.bindRenderbuffer(gl.RENDERBUFFER, rb); gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA32F, w, h); const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, w, h, 0, gl.RGBA, gl.FLOAT, null); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 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); const fb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, rb); const ofb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, ofb); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0); gl.bindFramebuffer(gl.FRAMEBUFFER, null); return { render: e=>{ gl.activeTexture(gl.TEXTURE0 + textureIndex); gl.bindTexture(gl.TEXTURE_2D, null); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); gl.clear(gl.COLOR_BUFFER_BIT); gl.disable(gl.DEPTH_TEST); gl.viewport(0,0,w,h); e(); gl.viewport(0,0,canvas.width,canvas.height); gl.enable(gl.DEPTH_TEST); gl.bindFramebuffer(gl.READ_FRAMEBUFFER, fb); gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, ofb); gl.blitFramebuffer(0, 0, w, h, 0, 0, w, h, gl.COLOR_BUFFER_BIT, gl.NEAREST); gl.bindFramebuffer(gl.FRAMEBUFFER, null); }, use: _=>{ gl.activeTexture(gl.TEXTURE0 + textureIndex); gl.bindTexture(gl.TEXTURE_2D, tex); return { texture: textureIndex }; } }; }; const DataLoopBuffer = _=>{ const buffers = [DataBuffer(), DataBuffer()]; return { render: e=>{ const target = buffers.pop(); target.render(e); buffers.unshift(target); }, use: _=>{ return buffers[0].use(); } }; }; const dataBuffer = DataLoopBuffer(); // Main Program resize(); const color = buildMaterial(` attribute vec2 vertex; varying vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform vec3 color; void main() { gl_FragColor = vec4(color,1); } `,rect,["color"]); const library = ` uniform vec2 resolution; uniform float time; uniform float randSeed; uniform sampler2D data; // https://gamedev.stackexchange.com/questions/28395/rotating-vector3-by-a-quaternion vec3 appQ(vec4 q, vec3 v) { // q v q* vec3 u = q.xyz; float s = q.w; return 2. * dot(u,v) * u + (s*s - dot(u,u)) * v + 2. * s * cross(u,v); } vec4 mulQ(vec4 a, vec4 b) { return vec4(a.w*b.xyz + b.w*a.xyz + cross(a.xyz,b.xyz), a.w*b.w - dot(a.xyz,b.xyz)); } vec4 axisQ(vec3 v) { return vec4(v, sqrt(1.-dot(v,v))); } vec4 invQ(vec4 q) { return vec4(-q.xyz, q.w); } float saturate(float x) { return clamp(x,0.,1.); } float rand(vec2 co) { return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453 + randSeed); } float noise(float t, float s) { float lv = rand(vec2(floor(t+0.)*0.01,s)); float uv = rand(vec2(floor(t+1.)*0.01,s)); return mix(lv,uv,smoothstep(0.,1.,fract(t)))*2.-1.; } void dataSampleRaw(float index, float time, out vec4 pos, out vec4 rot) { float maxElements = ${maxElements}.; float frameCount = ${frameCount}.; float w = 2. * maxElements, h = frameCount; float ix = floor(index)*2.+0.5; float location = floor(time)+0.5; pos = texture2D(data, vec2(ix+0.,location)/vec2(w,h)); rot = texture2D(data, vec2(ix+1.,location)/vec2(w,h)); } void dataSample(float index, float time, out vec4 pos, out vec4 rot) { dataSampleRaw(index,time,pos,rot); rot = normalize(rot); } `; const cameraControl = ` vec4 proj(vec3 worldPos) { vec4 camPos, camRot; dataSample(1., 2., camPos, camRot); vec4 camVel, camStub; dataSample(1., 3., camVel, camStub); vec3 forward = appQ(camRot, vec3(0,0,1)); float speedy = smoothstep(1.0, 4.0, dot(camVel.xyz, forward)); float dist = smoothstep(5.,1.,speedy); camPos.xyz -= appQ(camRot, vec3(0,0,dist)); vec4 viewPos = vec4(appQ(invQ(camRot),worldPos-camPos.xyz),1); float near = 0.01; float far = 100.; float fovy = 3.1415926535 * mix(0.7, 0.9, speedy); float f = 1. / tan(fovy / 2.); return viewPos * mat4( f / resolution.x, 0, 0, 0, 0, f / resolution.y, 0, 0, 0,0,2./(far-near),0, 0,0,(far+near)/(far-near),1 ); } `; const speed = 0.2; const compute = buildMaterial(` attribute vec2 vertex; varying vec2 coord; uniform float time; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform float frame; ${library} void main() { float maxElements = ${maxElements}.; float frameCount = ${frameCount}.; vec2 uv = (coord*0.5+0.5) * vec2(maxElements, frameCount); vec4 pos = vec4(0,0,0,1), rot = vec4(0,0,0,1); if(uv.x < 1.0) { if(uv.y < 1.0) { dataSample(uv.x+1.0, uv.y, pos, rot); } else { dataSample(uv.x, uv.y-1.0, pos, rot); } } else if(uv.x < 2.0) { if(uv.y < 1.0) { // ground trail dataSample(uv.x, uv.y, pos, rot); pos.xyz += appQ(rot, vec3(0,0,${speed})); vec3 av = vec3( noise(time/sqrt(3.),0.), noise(time/sqrt(2.),1.), noise(time/sqrt(5.),2.) ); rot = mulQ(rot, axisQ(av*0.02)); } else if(uv.y < 2.0) { // ground trail velocity } else if(uv.y < 3.0) { // camera dataSample(uv.x, uv.y, pos, rot); vec4 targetPos, targetRot; dataSample(0., frameCount/2.0, targetPos, targetRot); vec3 av = vec3( noise(time/sqrt(7.),4.), noise(time/sqrt(8.),5.), 0. ); targetRot = mulQ(targetRot, axisQ(av*0.5)); vec4 vel, stub; dataSample(uv.x, uv.y+1., vel, stub); pos += vel * 0.2; rot += (targetRot - rot) / 4.0; rot = normalize(rot); } else if(uv.y < 4.0) { // camera velocity dataSample(uv.x, uv.y, pos, rot); vec4 targetPos, targetRot; dataSample(0., frameCount/2.0, targetPos, targetRot); float offset = noise(time*0.2, 3.) * 1.; targetPos.xyz += appQ(rot, vec3(0,offset,-1)); vec4 curPos, curRot; dataSample(uv.x, uv.y-1., curPos, curRot); pos *= 0.95; pos += (targetPos - curPos) / 10.; } } else { if(uv.y < 1.0) { dataSampleRaw(uv.x, uv.y, pos, rot); float timer = rot.w; float h = rot.y; float seed = rot.z; float signs = rot.x; if(pos.w > 0.5) { if(timer > 0.0) { vec2 s = vec2(time,uv.x); if(uv.x > 3.0) { if(rand(s) < 0.01 || abs(pos.x) > 2.0 || abs(pos.y) > 0.2 || abs(pos.z) > 4.0) { pos.w = 0.; vec4 groundPos, groundRot; dataSample(0.,frameCount/2.,groundPos,groundRot); pos.xyz = appQ(groundRot, pos.xyz) + groundPos.xyz; rot = normalize(groundRot); signs = rot.x; h = rot.y; seed = rot.z; timer = rot.w; } } else { if(rand(s) < 0.01) { timer = - mix(0.1,0.4,rand(s+1.)); signs = 0.5; if(pos.x < 0.) signs += 1.; if(pos.y < 0.) signs += 2.; if(pos.z < 0.) signs += 4.; } } } else { timer += 0.01; vec2 s = vec2(seed,uv.x); vec3 dif = vec3(rand(s+0.),rand(s+1.),rand(s+2.)) - 0.5; if(uv.x < 3.0) { vec3 su = vec3(mod(signs, 2.) - 1., mod(signs/2., 2.) - 1., mod(signs/4., 2.) - 1.); dif = sign(su) * abs(dif); } dif.y *= 0.1; pos.xyz += dif * 0.1; } } else if(pos.w > -3.5) { pos.w -= 1.0; } else { dataSampleRaw(uv.x, frameCount/2., pos, rot); if(pos.w < -3.5) { float target = mod(frame, maxElements-2.) + 2.; dataSampleRaw(target, 0.0, pos, rot); if(pos.w > 0.5 && (rand(vec2(time,uv.x)) < 0.2 || target < 2.5 && rand(vec2(time,-1.0)) < 0.2)) { vec2 s = vec2(time,uv.x); // dupe timer = - mix(0.1, 0.4, rand(s+0.)); h = rot.y + (rand(s+1.)-0.5) * 0.5; seed = rand(s+2.); } else { pos.w = -4.; } } else { pos.w = -4.; } } rot = vec4(signs,h,seed,timer); } else { dataSampleRaw(uv.x, uv.y-1.0, pos, rot); } } gl_FragColor = fract(uv.x) < 0.5 ? pos : rot; } `,rect,["data","frame"]); const initialize = buildMaterial(` attribute vec2 vertex; varying vec2 coord; uniform float time; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; void main() { float maxElements = ${maxElements}.; float frameCount = ${frameCount}.; vec2 uv = (coord*0.5+0.5) * vec2(maxElements, frameCount); vec4 pos = vec4(0,0,0,1), rot = vec4(0,0,0,1); if(uv.x < 1.0) { pos = vec4(0,0,-uv.y*${speed},1); rot = vec4(0,0,0,1); } else if(uv.x < 2.0) { if(uv.y < 1.0) { // ground trail pos = vec4(0,0,0,1); rot = vec4(0,0,0,1); } else if(uv.y < 2.0) { // ground trail velocity pos = vec4(0,0,0,1); rot = vec4(0,0,0,1); } else if(uv.y < 3.0) { // camera pos = vec4(0,0,-frameCount*${speed},1); rot = vec4(0,0,0,1); } else if(uv.y < 4.0) { // camera velocity pos = vec4(0,0,0,1); rot = vec4(0,0,0,1); } } else { if(uv.x > 3.0) { pos.w = -4.; } } gl_FragColor = fract(uv.x) < 0.5 ? pos : rot; } `,rect,["data"]); const ground = buildMaterial(` attribute vec3 vertex; attribute vec3 normal; varying vec3 worldNormal; varying vec2 coord; ${library} ${cameraControl} void main() { float index = floor(vertex.z+0.5); vec4 pos, rot; dataSample(0.,index,pos,rot); vec3 worldPos = appQ(rot,vec3(vertex.xy,0)) + pos.xyz; coord = vec2(vertex.y > 0. ? sign(vertex.x) : vertex.x, index); worldNormal = appQ(rot,vec3(0,1,0)); gl_Position = proj(worldPos); } `,` varying vec3 worldNormal; varying vec2 coord; uniform float shift; ${library} void main() { vec2 uv = vec2(coord.x, (coord.y-shift)*${speed}); float uvY4 = coord.y*${speed}-mod(shift*${speed}, 4.); float uvYs5 = coord.y*${speed}-mod(shift*${speed}, 1./sqrt(5.)); vec3 col = cos(vec3(0,1,-1)*3.1415926535*2./3. + randSeed + uv.y*0.03)*0.3+0.7; float a = abs(uv.x) < 0.95 ? 0.1 : 1.0; if(length(vec2(uv.x,fract(uvY4)-0.5)) < 0.1 || length(vec2(uv.x,fract(uvY4/4.)*4.-0.5)) < 0.2 || length(vec2(abs(uv.x*sqrt(5.))-1.5,fract(uvYs5*sqrt(5.))-0.5)) < 0.1) a = 1.0; else col = mix(col, vec3(1.0), 0.5); if(abs(uv.x) > 0.95) col = vec3(1.0); float border = saturate((abs(coord.y/${frameCount}.-0.5) - 0.4) / 0.1); if(sin(uv.y*2.)*0.5+0.5-pow(border,5.) < 0.) discard; gl_FragColor = vec4(col,a); } `,groundMesh(frameCount),["data","shift"]); const trail = buildMaterial(` attribute vec3 vertex; attribute vec3 normal; varying vec3 worldNormal; varying vec2 coord; varying float h; varying float ring; varying float ringSize; varying vec2 ringUV; ${library} ${cameraControl} void main() { float trail = floor(vertex.y+0.5); float index = floor(vertex.z+0.5); float frameCount = ${frameCount}.; vec4 pos, rot; dataSampleRaw(2.+index,trail,pos,rot); h = rot.y; vec4 groundPos, groundRot; dataSample(0.,trail+frameCount/2.,groundPos,groundRot); float w = mix(0.02, 0.04, pow(rand(vec2(index,-3.)),2.)); vec3 worldPos = appQ(groundRot, pos.xyz + vec3(vertex.x,0,0) * w) + groundPos.xyz; coord = vec2(vertex.x, trail); worldNormal = appQ(groundRot,vec3(0,1,0)); ring = -1.; ringSize = 0.; ringUV = vec2(0); gl_Position = proj(worldPos); if(pos.w < 0.5) { // 0, -1, -2, -3 if(abs(pos.w-0.) < 0.5 || pos.w < -3.5) { gl_Position = vec4(0./0.,0,0,1); } else { worldPos = pos.xyz; vec2 locs = vec2(vertex.x, (pos.w+1.5)*2.); ringUV = locs; float size = mix(1.0, 4.0, exp(-6.*rand(vec2(index, 0.)))); ring = saturate(trail/(10.*size)); ringSize = size; worldPos += appQ(rot, vec3(locs,0)) * saturate(1. - pow(1.-ring, 2.)) * size; gl_Position = proj(worldPos); } } } `,` varying vec3 worldNormal; varying vec2 coord; varying float h; varying float ring; varying float ringSize; varying vec2 ringUV; uniform float shift; ${library} void main() { vec2 uv = vec2(coord.x, (coord.y-shift)*${speed}); vec3 col = pow(cos(vec3(0,1,-1)*3.1415926535*2./3. + randSeed + 3. + h + uv.y*0.03) * 0.3 + 0.7, vec3(1.7)); float a = 1.; if(ring < -0.5) { col = mix(col, vec3(1.0), smoothstep(10.,0.,coord.y) * 0.9); } else { col = mix(col, vec3(1.0), 0.5); float d = length(ringUV); float rw = mix(0.5,0.05,1.-pow(1.-ring,3.)) / ringSize; if(abs(d-(1.-rw)) > rw) discard; a = mix(1.,0.1,pow((ringSize-1.)/3.,0.5)); } gl_FragColor = vec4(col,a); } `,trailMesh(maxElements-2, frameCount/2.),["data","shift"]); const particle = buildMaterial(` attribute vec3 vertex; attribute vec3 normal; varying vec3 worldNormal; varying vec2 coord; varying vec3 seed; ${library} ${cameraControl} void main() { vec4 camPos, camRot; dataSample(1., 2., camPos, camRot); float index = vertex.z+0.5; float scale = 1.1; vec3 lix = floor(vec3(mod(index,40.), mod(index/40.,40.), mod(index/1600.,40.))) - 9.5; vec3 loc = floor((camPos.xyz + appQ(camRot,vec3(0,0,5.)))/scale + lix); vec3 worldPos = (loc + vec3(rand(loc.yz), rand(loc.zx), rand(loc.xy)) - 0.5) * scale; float size = smoothstep(19.5, 15., max(max(abs(lix.x),abs(lix.y)),abs(lix.z))) * 0.03; worldPos += appQ(camRot, vec3(vertex.xy,0)) * size; coord = vertex.xy; seed = loc+0.5; gl_Position = proj(worldPos); } `,` varying vec2 coord; varying vec3 seed; uniform float shift; ${library} void main() { vec2 s = floor(seed.xy) + rand(floor(seed.yz)); float i = rand(s); vec3 col = cos(vec3(0,1,-1)*3.1415926535*2./3. + randSeed + 2.5 + i - shift*${speed}*0.03) * 0.5 + 0.5; col = mix(col, vec3(1.), 0.8); float a = smoothstep(1.,0.9,length(coord)) * mix(0.2,1.,pow(rand(s),2.)); gl_FragColor = vec4(col,a); } `,particleMesh(64000),["data","shift"]); const additive = buildMaterial(` attribute vec2 vertex; varying vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform sampler2D texture; uniform sampler2D self; uniform float scale; uniform vec2 pixelRes; void main() { vec3 col = texture2D(self, coord*0.5+0.5).rgb; vec2 pixUV = (coord*0.5+0.5) * scale * pixelRes - 0.5; pixUV = floor(pixUV) + smoothstep(vec2(0.),vec2(1.),fract(pixUV)); col += texture2D(texture, (pixUV+0.5) / pixelRes).rgb * 0.2; gl_FragColor = vec4(col,1); } `,rect,["texture","self","scale","pixelRes"]); const minimize = buildMaterial(` attribute vec2 vertex; varying vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform sampler2D texture; uniform vec2 pixelRes; void main() { vec2 center = (coord*0.5+0.5) * 2.0 * pixelRes; vec3 col = vec3(0.); col += texture2D(texture, (center + vec2(+1,+1)) / pixelRes).xyz; col += texture2D(texture, (center + vec2(-1,+1)) / pixelRes).xyz; col += texture2D(texture, (center + vec2(+1,-1)) / pixelRes).xyz; col += texture2D(texture, (center + vec2(-1,-1)) / pixelRes).xyz; col /= 4.0; gl_FragColor = vec4(col,1); } `,rect,["texture","pixelRes"]); const postprocess = buildMaterial(` attribute vec2 vertex; varying vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform sampler2D texture; ${library} vec2 distort(vec2 u, int i) { float l = length(u); l -= l*l*float(i)*0.005; return normalize(u) * l; } void main() { vec3 col = vec3(0.), weight = vec3(0.0); for(int i=0;i<16;i++) { vec3 w = pow(cos((vec3(0,1,-1)/3. + float(i)/16.0)*3.1415926535*2.)*0.5+0.5,vec3(1.4)); w *= 1. - pow(float(i)/16.*2.-1., 2.0); col += texture2D(texture, distort(coord,i)*0.5+0.5).rgb * w; weight += w; } col /= weight; float dist = 1.8; col = pow(col, vec3(2.)); float vignette = pow(normalize(vec3(coord*resolution,dist)).z,4.); col *= vignette; col = floor(col*255.+rand(coord))/255.; gl_FragColor = vec4(col,1); } `,rect,["texture"]); const mainBuffer = LoopBuffer(); const bloomBuffer = LoopBuffer(); let shift = 0; dataBuffer.render(_=>{ initialize(); }); for(let i=0;i{ compute.data(dataBuffer.use()); compute.frame(shift); compute(); }); shift += 1; timeOffset += 1/60; } function render() { // currentTime = new Date(); timeOffset += 1/60; // Update Data dataBuffer.render(_=>{ compute.data(dataBuffer.use()); compute.frame(shift); compute(); }); // Render mainBuffer.render(_=>{ // Ground gl.depthMask(true); gl.enable(gl.SAMPLE_ALPHA_TO_COVERAGE); ground.data(dataBuffer.use()); ground.shift(shift); ground(); // Trails trail.data(dataBuffer.use()); trail.shift(shift); trail(); // Particle gl.disable(gl.SAMPLE_ALPHA_TO_COVERAGE); gl.enable(gl.BLEND); gl.depthMask(false); particle.data(dataBuffer.use()); particle.shift(shift); particle(); gl.disable(gl.BLEND); }); shift += 1; bloomBuffer.render(_=>{ color.color(0,0,0); color(); }); for(let i=0;i<8;i++) { bloomBuffer.render(_=>{ additive.self(bloomBuffer.use()); additive.texture(mainBuffer.use()); additive.pixelRes(canvas.width, canvas.height); additive.scale(Math.pow(2,-i)); additive(); }); mainBuffer.render(_=>{ minimize.texture(mainBuffer.use()); minimize.pixelRes(canvas.width, canvas.height); minimize(); }); } // PostProcess postprocess.texture(bloomBuffer.use()); postprocess(); requestAnimationFrame(render); } render(); };

Derivation