///////////// // Physics // ///////////// let lastStack = true; const generateWorld = aspectRatio=>{ const world = new CANNON.World(); const voronoi = d3.voronoi(); const w = 10, h = w * aspectRatio; const cps = []; // Block Construction const sceneType = Math.random() < 0.5 || lastStack ? -1 : h; const tp = [(Math.random()*2-1)*0.8*w, (Math.random()*2-1)*0.8*h]; if(Math.random() < 0.5) { voronoi.extent([[-w,-h],[w,h]]); for(let i=0;i<(sceneType<0?200:160);i++) { let x = Math.random()*2-1; let y = Math.random()*2-1; x = Math.sign(x) * Math.pow(Math.abs(x),2.) * w * 2; y = Math.sign(y) * Math.pow(Math.abs(y),2.) * w * 2; x += tp[0], y += tp[1]; if(Math.abs(x) < w && Math.abs(y) < h) { cps.push([x,y]); } } } else { let gridSize = w/30*(1+Math.random()); let wSplit = Math.ceil(w/gridSize/2), hSplit = Math.ceil(h/gridSize/2); if((wSplit*2+1)*(hSplit*2+1) >= (sceneType<0?240:160)) wSplit /= 2, hSplit /= 2, gridSize *= 2; const offsetY = sceneType < 0 ? 0 : (hSplit+0.5)*gridSize*2 - h; voronoi.extent([[-(wSplit+0.5)*gridSize*2,-(hSplit+0.5)*gridSize*2+offsetY],[(wSplit+0.5)*gridSize*2,(hSplit+0.5)*gridSize*2+offsetY]]); for(let i=-wSplit;i<=wSplit;i++) { for(let j=-hSplit;j<=hSplit;j++) { const x = i*gridSize*2, y = j*gridSize*2; cps.push([x,y+offsetY]); } } } const polys = voronoi.polygons(cps); const shapes = []; for(let i=0;i 0; const radius = 2 + Math.random()*5; const theta = Math.random() * 2 * 3.1415926535; const u = Math.sqrt(Math.random()); const vel = { x: Math.cos(theta) * u, y: Math.sin(theta) * u, z: Math.sqrt(1-u*u) }; const speed = Math.random()*1; let sphere = new CANNON.Body({ mass: 100, position: new CANNON.Vec3(tp[0]-vel.x*radius,tp[1]-vel.y*radius,-vel.z*radius*0.5), velocity: new CANNON.Vec3(vel.x*speed,vel.y*speed,vel.z*speed), shape: new CANNON.Sphere(radius) }); world.addBody(sphere); if(sceneType < 0.) world.gravity.set(0, 0, 9.82); else world.gravity.set(0, -9.82, 0.); const groundPos = sceneType < 0. ? new CANNON.Vec3(0,0,1) : new CANNON.Vec3(0,-h,0); const groundRot = sceneType < 0. ? new CANNON.Quaternion(1,0,0,0) : new CANNON.Quaternion(0,1/Math.sqrt(2),1/Math.sqrt(2),0); const groundBody = new CANNON.Body({ mass: 0, position: groundPos, quaternion: groundRot, shape: new CANNON.Plane() }); world.addBody(groundBody); let frameCount = 0; return { type: _=>{ return sceneType; }, count: _=>{ return shapes.length; }, shapes: _=>{ return shapes; }, simulate: dt=>{ world.step(dt); frameCount++; if(sphere != null && frameCount > 5) { world.removeBody(sphere); sphere = null; } }, read: cb=>{ for(let i=0;i{ cb(nw,nh); }); } window.addEventListener("resize",resize); // Prepare WebGL let startTime = new Date(); let currentTime = startTime; let randomValues; function shuffleRandom() { randomValues = [Math.random(), Math.random(), Math.random(), Math.random()]; } shuffleRandom(); 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_MINUS_SRC_ALPHA,gl.ONE,gl.ONE); gl.enable(gl.CULL_FACE); gl.cullFace(gl.BACK); gl.enable(gl.DEPTH_TEST); gl.depthMask(false); gl.clearColor(0,0,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)); }; } function buildPrism() { const vbo = gl.createBuffer(); let verts = []; function genVerts(vss) { verts = []; for(let j=0;j{ gl.bindBuffer(gl.ARRAY_BUFFER,vbo); const stride = 4*(dim+nrm); gl.vertexAttribPointer(0,dim,gl.FLOAT,false,stride,0); gl.enableVertexAttribArray(0); const offset = 4*dim; gl.vertexAttribPointer(1,nrm,gl.FLOAT,false,stride,offset); gl.enableVertexAttribArray(1); gl.drawArrays(gl.TRIANGLES,0,verts.length/(dim+nrm)); }; f.set = genVerts; return f; } 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 fragments = buildPrism(); let endPeriod = false; let hueBase = Math.random(); function buildMaterial(vs,fs,mesh,params) { const prec = "precision mediump float;\n"; function buildShader(type,src) { const s = gl.createShader(type); gl.shaderSource(s,prec+src); gl.compileShader(s); if(!gl.getShaderParameter(s,gl.COMPILE_STATUS)){ console.error(gl.getShaderInfoLog(s)); return null; } return s; } function buildProgram(v,f) { const p = gl.createProgram(); gl.attachShader(p,v); gl.attachShader(p,f); gl.linkProgram(p); if(!gl.getProgramParameter(p,gl.LINK_STATUS)){ console.error(gl.getProgramInfoLog(p)); } return p; } const v = buildShader(gl.VERTEX_SHADER,vs); const f = buildShader(gl.FRAGMENT_SHADER,fs); const p = buildProgram(v,f); const locs = {}; params.push("resolution"); params.push("time"); params.push("randoms"); params.push("hueBase"); params.forEach(pa=>{ 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; setting("time", [sec]); setting("randoms", randomValues); setting("hueBase", [hueBase]); gl.bindAttribLocation(p,0,"vertex"); gl.bindAttribLocation(p,1,"normal"); mesh(); }; params.forEach(l=>{ o[l] = function() { task.push(_=>{setting(l, arguments);}); }; }); return o; } function onPeriod(cb) { endPeriod = true; cb(); endPeriod = false; } // 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.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); 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(); } }; }; // Text Canvas const textCanvas = document.getElementById("text"); const ctx = textCanvas.getContext("2d"); ctx.font = "10px 'Heebo'"; ctx.measureText("M"); // Trigger font loading resizeCallback.push((w,h)=>{ textCanvas.width = w; textCanvas.height = h; }); const CanvasTexture = (canvas,render)=>{ const textureIndex = lastTexture++; let w = textCanvas.width, h = textCanvas.height; const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); 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 o = { render: _=>{ ctx.font = "10px 'Heebo'"; if(Math.abs(ctx.measureText("M").width - 8.764) < 0.01) { const proc = _=>{ render(canvas); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, canvas); gl.generateMipmap(gl.TEXTURE_2D); }; o.render = proc; proc(); } }, use: _=>{ gl.activeTexture(gl.TEXTURE0 + textureIndex); gl.bindTexture(gl.TEXTURE_2D, tex); return { texture: textureIndex }; } }; resizeCallback.push((nw,nh)=>{ w = nw, h = nh; o.render(); }); return o; }; function renderText(canvas) { const w = canvas.width, h = canvas.height; ctx.fillStyle = "#000000"; ctx.fillRect(0,0,w,h); ctx.fillStyle = "#ff00ff"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.shadowColor = "#00ffff"; ctx.shadowBlur = w*0.005; ctx.font = Math.floor(w*0.14) + "px 'Heebo'"; const now = currentTime; function pad(n){ return n < 10 ? "0" + n : n; } let nowStr = ""; // nowStr += now.getFullYear() + "-" + pad(now.getMonth()+1) + "-" + pad(now.getDate()) + " "; nowStr += pad(now.getHours()) + ":" + pad(now.getMinutes()) + ":" + pad(now.getSeconds()) + "." + pad(Math.floor(now.getMilliseconds()/10)); ctx.fillText(nowStr,w/2,h*0.53); } // Data Buffer const maxDataElements = 256; const frameCount = 60*2; const DataBuffer = _=>{ const textureIndex = lastTexture++; const d = 2; // per element const w = d * maxDataElements, h = frameCount; 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); return { data: (y,lw,ds)=>{ gl.bindTexture(gl.TEXTURE_2D, tex); gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, y, lw*d, 1, gl.RGBA, gl.FLOAT, ds); }, use: _=>{ gl.activeTexture(gl.TEXTURE0 + textureIndex); gl.bindTexture(gl.TEXTURE_2D, tex); return { texture: textureIndex }; } }; }; const DataLoopBuffer = _=>{ const buffers = [DataBuffer(), DataBuffer()]; return { data: (y,lw,ds)=>{ buffers[1].data(y,lw,ds); }, flip: _=>{ const last = buffers.pop(); buffers.unshift(last); }, 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 vec4 randoms; uniform float hueBase; // 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); } 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); } vec3 hue(float x) { // x: [0,1] float h = hueBase; return pow(cos((vec3(1,0,-1)/3.+h+(x-0.5)*0.2)*3.1415926535*2.)*0.5+0.5,vec3(1./1.5)); } vec2 projUV(vec4 p) { return p.xy / p.w * 0.5 + 0.5; } `; const cameraControl = ` uniform float type; uniform float reverse; vec3 view(float t, vec3 pos) { t = saturate(t/duration); if(reverse>0.5) t = 1. - t; if(type > 0.) { float at = - t * sign(randoms.w-0.5) * mix(0.03, 0.2, randoms.w) + (randoms.y-0.5) * 3.1415926535 / 2.0; pos.xz *= mat2(cos(at),-sin(at),sin(at),cos(at)); at = mix(0.0, -0.4, randoms.z); pos.yz *= mat2(cos(at),-sin(at),sin(at),cos(at)); pos.z += mix(0.4-0.2*randoms.w,0.5,t); } return pos - vec3(0,0,-2.15); } `; const background = buildMaterial(` attribute vec3 vertex; attribute vec3 normal; varying vec2 coord; varying vec4 projPos, firstProjPos, lastProjPos; varying vec3 worldNormal; uniform float duration; ${library} ${cameraControl} void proj(vec3 v, float t, out vec4 pos, out vec4 rot) { vec3 worldPos = v; if(type < 0.1) { float scale = 1.07; worldPos *= scale; worldPos.z -= scale - 0.1; } else { worldPos.y += 1.0; worldPos *= 2.0; worldPos.y -= type*0.1; } vec4 viewPos = vec4(view(t,worldPos),1); float near = 0.001; float far = 10.; float fovy = 3.1415926535 * 0.2; float f = 1. / tan(fovy / 2.); pos = 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 ); rot = vec4(0,0,0,1); } void main() { vec4 pp, q; proj(vertex, time, pp, q); worldNormal = appQ(q, normal); projPos = pp; vec4 fpp, lpp; proj(vertex, 0., fpp, q); proj(vertex, duration, lpp, q); firstProjPos = fpp; lastProjPos = lpp; gl_Position = projPos; } `,` varying vec2 coord; varying vec4 projPos, firstProjPos, lastProjPos; varying vec3 worldNormal; uniform sampler2D screen; uniform sampler2D text; uniform float lastReverse; uniform float reverse; uniform float type; ${library} vec3 textColor(vec2 uv, vec3 col) { vec3 d = texture2D(text, uv).rgb; vec3 c = mix(vec3(1.2), col, (1.-d.x)*0.7+0.3); return c; } void main() { vec3 col = mix(vec3(1.), vec3(-dot(worldNormal,normalize(vec3(-0.1,0.2,1)))*0.3+0.7), smoothstep(0.,0.5,time)); float fac = smoothstep(0.1,1.0,time); vec2 firstUV = projUV(firstProjPos); if(reverse > 0.5) col *= mix(texture2D(screen, firstUV).rgb, hue(randoms.x), fac*0.2); else if(type > 0. || lastReverse > 0.5) col *= mix(texture2D(screen, firstUV).rgb, vec3(1.), fac*0.2); vec2 lastUV = projUV(lastProjPos); if(reverse < 0.5) col *= hue(randoms.x); col = textColor(lastUV, col); gl_FragColor = vec4(col,1); } `,cube,["text","screen","duration","type","lastReverse","reverse"]); const object = buildMaterial(` attribute vec4 vertex; attribute vec3 normal; varying vec4 projPos, firstProjPos, lastProjPos; varying vec3 worldNormal; varying float index; varying vec3 color; uniform float duration; uniform sampler2D data; ${library} ${cameraControl} vec4 dataSample(float offset, float t) { float maxDataElements = 256.; float frameCount = 120.; float w = 2. * 256., h = frameCount; float ix = index*2.+0.5+offset; float location = t*(h-1.)+0.5; vec4 p0 = texture2D(data, vec2(ix,floor(location))/vec2(w,h)); vec4 p1 = texture2D(data, vec2(ix,floor(location)+1.)/vec2(w,h)); return mix(p0,p1,fract(location)); } void proj(vec3 v, float t, out vec4 pos, out vec4 rot) { vec3 worldPos = v; float timePos = saturate(t/duration); if(reverse>0.5) timePos = 1. - timePos; vec4 p = dataSample(0.,timePos); vec4 q = normalize(dataSample(1.,timePos)); worldPos = appQ(q, worldPos); worldPos += p.xyz; worldPos *= 0.1; vec4 viewPos = vec4(view(t,worldPos),1); float near = 0.001; float far = 10.; float fovy = 3.1415926535 * 0.2; float f = 1. / tan(fovy / 2.); pos = 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 ); rot = q; } void main() { index = vertex.w; vec4 pp, q; proj(vertex.xyz, time, pp, q); worldNormal = appQ(q, normal); projPos = pp; vec4 fpp, lpp; proj(vertex.xyz, 0., fpp, q); proj(vertex.xyz, duration, lpp, q); firstProjPos = fpp; lastProjPos = lpp; color = rand(vec2(-3,index+0.5)) < 0.9 ? vec3(1.) : hue(rand(vec2(floor(index+0.5),0))); gl_Position = projPos; } `,` varying vec3 coord; varying vec3 worldNormal; varying vec4 projPos, firstProjPos, lastProjPos; varying float index; varying vec3 color; uniform sampler2D text; uniform sampler2D screen; ${library} vec3 textColor(vec2 uv, vec3 col) { vec3 d = texture2D(text, uv).rgb; vec3 c = mix(vec3(1.2), col, 1.-d.x); return c; } void main() { vec3 col = vec3(1.); float fac = smoothstep(0.1,1.0,time); col *= mix(vec3(1.), color, smoothstep(0.1,0.3+rand(vec2(floor(index+0.5),0.))*0.5,time)); vec2 firstUV = projUV(firstProjPos); col *= mix(texture2D(screen, firstUV).rgb, hue(randoms.x), fac*0.2); vec2 lastUV = projUV(lastProjPos); col = textColor(lastUV, col); col *= mix(vec3(1.), vec3(-dot(worldNormal,normalize(vec3(-0.1,0.2,1)))*0.3+0.7), smoothstep(0.,0.5,time)); gl_FragColor = vec4(col,1); } `,fragments,["screen","data","duration","text","type","reverse"]); const shadow = buildMaterial(` attribute vec4 vertex; attribute vec3 normal; varying vec4 projPos, firstProjPos, lastProjPos; varying vec3 worldNormal; varying float index; varying vec3 color; uniform float duration; uniform sampler2D data; ${library} ${cameraControl} vec4 dataSample(float offset, float t) { float maxDataElements = 256.; float frameCount = 120.; float w = 2. * 256., h = frameCount; float ix = index*2.+0.5+offset; float location = t*(h-1.)+0.5; vec4 p0 = texture2D(data, vec2(ix,floor(location))/vec2(w,h)); vec4 p1 = texture2D(data, vec2(ix,floor(location)+1.)/vec2(w,h)); return mix(p0,p1,fract(location)); } void proj(vec3 v, float t, out vec4 pos, out vec4 rot) { vec3 worldPos = v; float timePos = saturate(t/duration); if(reverse>0.5) timePos = 1. - timePos; vec4 p = dataSample(0.,timePos); vec4 q = normalize(dataSample(1.,timePos)); worldPos = appQ(q, worldPos); worldPos += p.xyz; worldPos *= 0.1; if(type < 0.1) { worldPos.z = +0.1-0.001; } else { worldPos.y = -type*0.1+0.001; } vec4 viewPos = vec4(view(t,worldPos),1); float near = 0.001; float far = 10.; float fovy = 3.1415926535 * 0.2; float f = 1. / tan(fovy / 2.); pos = 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 ); rot = q; } void main() { index = vertex.w; vec4 pp, q; proj(vertex.xyz, time, pp, q); worldNormal = appQ(q, normal); projPos = pp; vec4 fpp, lpp; proj(vertex.xyz, 0., fpp, q); proj(vertex.xyz, duration, lpp, q); firstProjPos = fpp; lastProjPos = lpp; color = rand(vec2(-3,index+0.5)) < 0.9 ? vec3(1.) : hue(rand(vec2(floor(index+0.5),0))); gl_Position = projPos; } `,` varying vec3 coord; varying vec3 worldNormal; varying vec4 projPos, firstProjPos, lastProjPos; varying float index; varying vec3 color; void main() { gl_FragColor = vec4(0,0,0,0.3); } `,fragments,["screen","data","duration","text","type","reverse"]); const postprocess = buildMaterial(` attribute vec2 vertex; varying vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform vec2 resolution; uniform float time; uniform float reverse; uniform sampler2D texture; void main() { vec2 uv = coord * 0.5 + 0.5; vec3 col = texture2D(texture, uv).rgb; float dist = reverse>0.5 ? 2.5 : 5.; float vignette = pow(normalize(vec3(coord*resolution,dist)).z,4.); col *= vignette; gl_FragColor = vec4(col,1); } `,rect,["texture","reverse"]); const screenBuffer = LoopBuffer(); const mainBuffer = LoopBuffer(); const canvasTexture = CanvasTexture(textCanvas, renderText); screenBuffer.render(_=>{ color.color(1,1,1); color(); }); let physWorld = generateWorld(canvas.height/canvas.width); fragments.set(physWorld.shapes()); let bakedIndex = 0; let duration = 1; let lastTime = currentTime; let sceneType = -1; let lastReverse = 0, reverse = 0; function render() { currentTime = new Date(); const passed = (currentTime - startTime) / 1000; function renderContent() { gl.depthMask(true); // Background background.screen(screenBuffer.use()); background.text(canvasTexture.use()); background.duration(duration); background.type(sceneType); background.lastReverse(lastReverse); background.reverse(reverse); background(); // Shadow gl.enable(gl.SAMPLE_ALPHA_TO_COVERAGE); shadow.text(canvasTexture.use()); shadow.screen(screenBuffer.use()); shadow.data(dataBuffer.use()); shadow.duration(duration); shadow.type(sceneType); shadow.reverse(reverse); shadow(); gl.disable(gl.SAMPLE_ALPHA_TO_COVERAGE); // Object object.text(canvasTexture.use()); object.screen(screenBuffer.use()); object.data(dataBuffer.use()); object.duration(duration); object.type(sceneType); object.reverse(reverse); object(); gl.depthMask(false); } mainBuffer.render(renderContent); // PostProcess postprocess.texture(mainBuffer.use()); postprocess.reverse(reverse); postprocess(); // Bake Procedure const desiredIndex = Math.min(frameCount, Math.ceil(passed/duration*1.1*frameCount)); let timeCount = Math.min(desiredIndex/20, 5); // distribute load while(bakedIndex < desiredIndex && timeCount > 0) { const sliceBuffer = new Float32Array(4*2*physWorld.count()); physWorld.read((i,o,p,q)=>{ let op = o.negate(); op = q.vmult(op); sliceBuffer[i*8+0] = p.x + op.x; sliceBuffer[i*8+1] = p.y + op.y; sliceBuffer[i*8+2] = p.z + op.z; sliceBuffer[i*8+3] = 1.; sliceBuffer[i*8+4] = q.x; sliceBuffer[i*8+5] = q.y; sliceBuffer[i*8+6] = q.z; sliceBuffer[i*8+7] = q.w; }); dataBuffer.data(bakedIndex, physWorld.count(), sliceBuffer); physWorld.simulate(1/60.); bakedIndex++; timeCount--; } if(bakedIndex >= frameCount && passed >= duration) { // Save current screen screenBuffer.render(renderContent); // Update shuffleRandom(); canvasTexture.render(); sceneType = physWorld.type(); duration = sceneType < 0 ? 1 + Math.random()*0.5 : 1.5 + Math.random()*0.5; lastReverse = reverse; reverse = lastReverse > 0.5 ? 0 : Math.random() < 0.3 ? 1 : 0; startTime = currentTime; bakedIndex = 0; dataBuffer.flip(); fragments.set(physWorld.shapes()); physWorld = generateWorld(canvas.height/canvas.width); hueBase += 0.01 * Math.random(); } const fps = 1000 / (currentTime - lastTime); lastTime = currentTime; requestAnimationFrame(render); } render();

Then