const canvas = document.getElementById("canvas"); const container = document.getElementById("container"); const gl = canvas.getContext("webgl"); gl.blendFuncSeparate(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA,gl.ONE,gl.ONE); gl.disable(gl.CULL_FACE); gl.enable(gl.DEPTH_TEST); gl.clearColor(0,0,0.2,1); function resize() { canvas.width = container.clientWidth; canvas.height = container.clientHeight; gl.viewport(0,0,canvas.width,canvas.height); } window.addEventListener("resize",resize); resize(); function buildMesh(verts, n) { 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); gl.vertexAttribPointer(0,n,gl.FLOAT,false,0,0); gl.enableVertexAttribArray(0); gl.drawArrays(gl.TRIANGLE_STRIP,0,verts.length/n); }; } const rect = buildMesh([-1,-1,-1,1,1,-1,1,1], 2); const cube = buildMesh([ -1,-1,-1,1,-1,-1,-1,1,-1,1,1,-1,-1,1,1,1,1,1,-1,-1,1,1,-1,1,1,-1,1, 1,1,-1,1,1,-1,1,1,1,1,-1,-1,1,-1,1,-1,-1,-1,-1,-1,1,-1,1,-1,-1,1,1 ],3); const startTime = new Date(); 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.forEach(pa=>{ locs[pa] = gl.getUniformLocation(p,pa); }); function setting(name, args) { const func = "uniform" + args.length + "fv"; const as = []; for(let i=0;i{ gl.useProgram(p); task.forEach(t=>{t();}); task = []; setting("resolution",[canvas.width,canvas.height]); setting("time", [(new Date() - startTime) / 1000]); gl.bindAttribLocation(p,0,"vertex"); mesh(); }; params.forEach(l=>{ o[l] = function() { task.push(_=>{setting(l, arguments);}); }; }); return o; } const background = buildMaterial(` attribute vec2 vertex; varying vec2 coord; uniform vec2 resolution; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform vec2 camera; uniform vec2 resolution; uniform float time; void main() { vec2 pos = coord * resolution / 200.; pos.y /= 2. / sqrt(13.); pos.xy *= mat2(1,-1,1,1) / sqrt(2.); vec2 fcam = camera; pos.xy += fcam; vec2 d2 = abs(fract(pos) - 0.5); float d = max(d2.x,d2.y) * 2.; // [0,1] float c = 1.; c *= mix(1.0, 0.8, smoothstep(-0.5,0.8,coord.y)); vec2 dd2 = abs(fract(pos-vec2(-1,1)*0.065) - 0.5); float dd = max(dd2.x,dd2.y) * 2.; // [0,1] float bk = mix(0.2, 0.5, smoothstep(0.9,0.8,dd)); c = mix(c, bk, smoothstep(-0.01,0.01,d-0.94-coord.y*0.04)); gl_FragColor = vec4(vec3(c),1); } `,rect,["camera"]); const trot = buildMaterial(` attribute vec3 vertex; varying vec3 original; varying vec3 world; varying float yaw; varying float pitch; uniform vec2 resolution; uniform float time; uniform vec2 position; uniform vec2 camera; void main() { vec3 pos = vertex.xyz * 0.5; vec2 fpos = position; vec2 p = floor(fpos + 0.5); vec2 f = fpos - p; yaw = length(f) < 0.0001 ? 0. : abs(f.x) < abs(f.y) ? sign(f.y) : sign(f.x)+3.; yaw *= 3.1415926535 / 2.; float s = abs(abs(f.x) - abs(f.y)) * 2.; // [0,1] pitch = pow(s,3.) * 3.1415926535 / 4.; pos.yx *= mat2(cos(pitch),-sin(pitch),sin(pitch),cos(pitch)); pos.xy += mat2(cos(pitch)-1.,-sin(pitch),sin(pitch),cos(pitch)-1.) * vec2(-0.5,0.5); pos.xz *= mat2(cos(yaw),-sin(yaw),sin(yaw),cos(yaw)); pos.y += 0.97; pos.xz += p; original = vertex.xyz; world = pos; vec2 fcam = camera; pos.xz -= fcam; pos.xz *= mat2(1,1,-1,1) / sqrt(2.); pos.yz *= mat2(3,2,-2,3) / sqrt(13.); pos.xy = pos.xy * 200. / resolution; pos.z = pos.z * 0.01 + 0.5; gl_Position = vec4(pos,1); } `,` varying vec3 original; varying float yaw; varying float pitch; varying vec3 world; uniform vec3 color; void main() { vec3 normal = sign(original) * pow(abs(original), vec3(9)); normal.yx *= mat2(cos(pitch),-sin(pitch),sin(pitch),cos(pitch)); normal.xz *= mat2(cos(yaw),-sin(yaw),sin(yaw),cos(yaw)); vec3 ld = normalize(vec3(1,2.7,-2)); float dif = dot(normal,ld)*0.5+0.5; float c = dif + 0.1; c *= 1.0 - exp((0.5-world.y)*5.) * 0.6; gl_FragColor = vec4(vec3(c),1); } `,cube,["position","camera","color"]); const shadow = buildMaterial(` attribute vec3 vertex; varying vec3 original; varying vec3 world; varying float yaw; varying float pitch; varying vec3 center; uniform vec2 resolution; uniform float time; uniform vec2 position; uniform vec2 camera; void main() { vec3 pos = vertex.xyz * 0.5; vec2 fpos = position; vec2 p = floor(fpos + 0.5); vec2 f = fpos - p; yaw = length(f) < 0.0001 ? 0. : abs(f.x) < abs(f.y) ? sign(f.y) : sign(f.x)+3.; yaw *= 3.1415926535 / 2.; float s = abs(abs(f.x) - abs(f.y)) * 2.; // [0,1] pitch = pow(s,3.) * 3.1415926535 / 4.; pos.yx *= mat2(cos(pitch),-sin(pitch),sin(pitch),cos(pitch)); pos.xy += mat2(cos(pitch)-1.,-sin(pitch),sin(pitch),cos(pitch)-1.) * vec2(-0.5,0.5); pos.xz *= mat2(cos(yaw),-sin(yaw),sin(yaw),cos(yaw)); pos.y *= 0.; pos *= 4.; pos.y -= 0.5; pos.y += 0.97; pos.xz += p; center = vec3(0.); center.xy += mat2(cos(pitch)-1.,-sin(pitch),sin(pitch),cos(pitch)-1.) * vec2(-0.5,0.5); center.xz *= mat2(cos(yaw),-sin(yaw),sin(yaw),cos(yaw)); center.y -= 0.5; center.y += 0.97; center.xz += p; original = vertex.xyz; world = pos; vec2 fcam = camera; pos.xz -= fcam; pos.xz *= mat2(1,1,-1,1) / sqrt(2.); pos.yz *= mat2(3,2,-2,3) / sqrt(13.); pos.xy = pos.xy * 200. / resolution; pos.z = pos.z * 0.01 + 0.5; gl_Position = vec4(pos,1); } `,` varying vec3 original; varying float yaw; varying float pitch; varying vec3 world; varying vec3 center; uniform vec3 color; void main() { vec2 dif = abs(world.xz - center.xz); vec2 rect = vec2(0.5); rect.x *= cos(pitch); rect *= mat2(cos(yaw),-sin(yaw),sin(yaw),cos(yaw)); dif = max(vec2(0.), dif - abs(rect)); float alpha = 1./pow(length(dif)+0.78,2.)*0.5*(cos(pitch)*0.5+0.5); alpha = pow(alpha, 2.); alpha = mix(alpha, 0., smoothstep(0.5,2.,distance(world.xz,center.xz))); gl_FragColor = vec4(vec3(0),alpha); } `,cube,["position","camera","color"]); const camera = {x:0, y:0}; const cubes = []; for(let i=0;i<40;i++) { const x = Math.round(Math.random() * 20 - 10); const y = Math.random() * 60 - 30; const vy = Math.pow(Math.random(), 5.) * 5 + 0.5; const c = {x:x,y:y,vx:0,vy:vy,landing:-100}; cubes.push(c); } let lastTime = startTime; function render() { const now = new Date(); const delta = (now - lastTime) / 1000.; camera.y += delta; // Initialize gl.clear(gl.COLOR_BUFFER_BIT); // Background gl.depthMask(false); background.camera(camera.x,camera.y); background(); // Render Cubes gl.enable(gl.BLEND); shadow.camera(camera.x,camera.y); cubes.forEach(c=>{ shadow.position(c.x,c.y); shadow(); }); gl.disable(gl.BLEND); gl.depthMask(true); trot.camera(camera.x,camera.y); cubes.forEach(c=>{ trot.position(c.x,c.y); trot(); }); // Step cubes.forEach(c=>{ c.y += delta * c.vy; if(c.landing > -99 && c.y > c.landing) { c.y = c.landing; c.landing = -100; c.vy = 0; } if(c.vy > 1.0 && c.y - camera.y > 30 || c.vy < 1.0 && c.y - camera.y < -30) { // OoB c.x = Math.round(Math.random() * 20 - 10); c.vy = Math.pow(Math.random(), 3.) * 7 + 0.5; if(c.vy > 1.) { c.y = camera.y - 20.; } else { c.y = camera.y + 20.; } } }); cubes.forEach(c=>{ cubes.forEach(c2=>{ if(c==c2) return; if(Math.abs(c.x-c2.x) < 0.5 && Math.abs(c.y+1.0 - c2.y) < 1.0) { c.landing = Math.ceil(c.y); } }); }); lastTime = now; requestAnimationFrame(render); } render();

Trotter Playground