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 previousTime = startTime; 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.disable(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,gl.canvas.width,gl.canvas.height); }); // 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 particleMesh = count=>{ 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]); const dt = Math.min((currentTime - previousTime) / 1000, 1/30); setting("dt", [dt]); 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; gl_FragColor = texture2D(texture, uv); } `,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 DataBuffer = _=>{ const textureIndex = lastTexture++; const w = 512, h = 512; 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(); } }; }; // Main Program resize(); 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() { vec2 vel = vec2(0,0); gl_FragColor = vec4(vel,0,0); } `,rect,[]); const addForce = buildMaterial(` attribute vec2 vertex; varying vec2 coord; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform sampler2D data; uniform float time; uniform float dt; uniform float randSeed; void main() { vec2 p = coord*0.5+0.5; vec4 data = texture2D(data, p); data.xy *= exp(-dt*0.05); float t = time*2.; vec2 c = vec2(cos(t),sin(t)); float wd = distance(p, vec2(0.15,0.4)); float da = (sin(time*1.0+randSeed)*0.5+0.5) * 0.2 + 0.02; data.xy += vec2(cos(da),sin(da)) * 1.0 * smoothstep(0.15, 0.0, wd) * dt; data.w = 0.0; gl_FragColor = data; } `,rect,["data"]); const advect = buildMaterial(` attribute vec2 vertex; varying vec2 coord; uniform float time; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform sampler2D data; uniform float dt; vec4 sample(vec2 p, vec2 dp) { float s = 512.0; float dx = 1.0/s; p += dp * dx; vec2 u = p * s - 0.5; vec2 e = vec2(0, 1); vec4 p00 = texture2D(data, (floor(u)+e.xx+0.5)/s); vec4 p01 = texture2D(data, (floor(u)+e.xy+0.5)/s); vec4 p10 = texture2D(data, (floor(u)+e.yx+0.5)/s); vec4 p11 = texture2D(data, (floor(u)+e.yy+0.5)/s); vec4 p0 = mix(p00, p01, fract(u.y)); vec4 p1 = mix(p10, p11, fract(u.y)); return mix(p0, p1, fract(u.x)); } void main() { vec2 p = coord*0.5+0.5; vec2 v = texture2D(data, p).xy; v *= exp(-dt); vec4 da = sample(p, -v * dt * 160.0); gl_FragColor = da; } `,rect,["data"]); // (I - νdtΔ)x = u // x - νdt(x00+x01+x10+x11-4x)/dx^2 = u const diffuse = buildMaterial(` attribute vec2 vertex; varying vec2 coord; uniform float time; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform sampler2D data, field; uniform float dt; void main() { vec2 p = coord*0.5+0.5; vec4 da = texture2D(field, p); vec2 u = da.xy; float s = 512.0; float dx = 1.0/s; vec2 d = vec2(dx,0); vec2 ux0 = texture2D(data, p-d.xy).xy; vec2 ux1 = texture2D(data, p+d.xy).xy; vec2 uy0 = texture2D(data, p-d.yx).xy; vec2 uy1 = texture2D(data, p+d.yx).xy; // x * (1+4νdt/dx^2) = νdt/dx^2*(ux0+ux1+uy0+uy1) + u float nu = 0.0001; float a = nu * dt / dx / dx; vec2 x = (a*(ux0+ux1+uy0+uy1) + u) / (1.0 + 4.0*a); gl_FragColor = vec4(x,0,da.w); } `,rect,["data","field"]); const divergence = buildMaterial(` attribute vec2 vertex; varying vec2 coord; uniform float time; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform sampler2D data, pressure; uniform float dt; void main() { vec2 p = coord*0.5+0.5; vec2 u = texture2D(data, p).xy; float s = 512.0; float dx = 1.0/s; vec2 d = vec2(dx,0); vec2 ux0 = texture2D(data, p-d.xy).xy; vec2 ux1 = texture2D(data, p+d.xy).xy; vec2 uy0 = texture2D(data, p-d.yx).xy; vec2 uy1 = texture2D(data, p+d.yx).xy; float div = ((ux1-ux0).x + (uy1-uy0).y) / (2.0 * dx); float pressure = texture2D(pressure, p).x; gl_FragColor = vec4(pressure,div,0,0); } `,rect,["data","pressure"]); // Δp = ∇・u = y // (p00+p01+p10+p11-4p)/dx^2 = y const pressure = buildMaterial(` attribute vec2 vertex; varying vec2 coord; uniform float time; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform sampler2D data; uniform float dt; void main() { vec2 p = coord*0.5+0.5; float y = texture2D(data, p).y; float s = 512.0; float dx = 1.0/s; vec2 d = vec2(dx,0); float px0 = texture2D(data, p-d.xy).x; float px1 = texture2D(data, p+d.xy).x; float py0 = texture2D(data, p-d.yx).x; float py1 = texture2D(data, p+d.yx).x; // p * 4/dx^2 = (px0+px1+py0+py1)/dx^2 - y float a = dx*dx; float pressure = ((px0+px1+py0+py1)/a - y) / 4.0 * a; gl_FragColor = vec4(pressure,y,0,0); } `,rect,["data"]); // x = u - ∇p const project = buildMaterial(` attribute vec2 vertex; varying vec2 coord; uniform float time; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform sampler2D data, pressure; uniform float dt; vec2 grad(vec2 p) { float s = 512.0; float dx = 1.0/s; vec2 d = vec2(dx,0); float px0 = texture2D(pressure, p-d.xy).x; float px1 = texture2D(pressure, p+d.xy).x; float py0 = texture2D(pressure, p-d.yx).x; float py1 = texture2D(pressure, p+d.yx).x; return vec2(px1-px0, py1-py0) / 2.0 / dx; } void main() { vec2 p = coord*0.5+0.5; vec4 da = texture2D(data, p); vec2 u = da.xy; u -= grad(p); gl_FragColor = vec4(u,0,da.w); } `,rect,["data","pressure"]); const display = buildMaterial(` attribute vec2 vertex; varying vec2 coord; uniform vec2 resolution; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); vec2 res = resolution / max(resolution.x, resolution.y) / 2.0; gl_Position.xy /= res; } `,` varying vec2 coord; uniform float time; uniform sampler2D data, iter; float laplacian(vec2 p) { float pr = texture2D(iter, p).x; float s = 512.0; float dx = 1.0/s; vec2 d = vec2(dx,0); float px0 = texture2D(iter, p-d.xy).x; float px1 = texture2D(iter, p+d.xy).x; float py0 = texture2D(iter, p-d.yx).x; float py1 = texture2D(iter, p+d.yx).x; return (px0+px1+py0+py1-4.0*pr) / dx / dx; } vec3 pattern(vec2 uv) { uv *= 20.0; bool xb = distance(fract(uv.x),0.5) < 0.2; bool yb = distance(fract(uv.y),0.5) < 0.2; float u = xb || yb ? 1. : 0.; return mix(vec3(0.8), vec3(0.2), u); } vec4 sample(vec2 p) { float s = 512.0; float dx = 1.0/s; vec2 u = p * s - 0.5; vec2 e = vec2(0, 1); vec4 p00 = texture2D(data, (floor(u)+e.xx+0.5)/s); vec4 p01 = texture2D(data, (floor(u)+e.xy+0.5)/s); vec4 p10 = texture2D(data, (floor(u)+e.yx+0.5)/s); vec4 p11 = texture2D(data, (floor(u)+e.yy+0.5)/s); vec4 p0 = mix(p00, p01, fract(u.y)); vec4 p1 = mix(p10, p11, fract(u.y)); return mix(p0, p1, fract(u.x)); } float rand(vec2 co) { return fract(sin(dot(co, vec2(12.9898,78.233))) * 43758.5453); } void main() { vec2 p = coord*0.5+0.5; vec4 data = sample(p); vec4 iter = texture2D(iter, p); vec2 ce = p - data.rg * 0.1; vec3 col = pattern(ce); // p + data.rg * 0.03 * noise(vec3(ce*100.0,0))); // col *= vec3(data.rg,laplacian(p)-iter.y) * 0.5 + 0.5; col = vec3(length(data.rg)); if(data.w > 0.5) col *= 0.5; col *= vec3(0.05,0.1,0.15); col = floor(col*255.+rand(coord))/255.; gl_FragColor = vec4(col,1); } `,rect,["data","iter"]); const initParticle = 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 randSeed; float rand(vec2 co) { return fract(sin(dot(co, vec2(12.9898,78.233))) * 43758.5453 + randSeed); } void main() { vec2 p = coord*0.5+0.5; vec2 pos = vec2(rand(p+0.), rand(p+1.))*2.-1.; vec2 vel = vec2(0,0); gl_FragColor = vec4(pos,vel); } `,rect,[]); const particle = buildMaterial(` attribute vec2 vertex; varying vec2 coord; uniform float time; void main() { coord = vertex; gl_Position = vec4(vertex,0,1); } `,` varying vec2 coord; uniform sampler2D particle, data; uniform float dt; float rand(vec2 co) { return fract(sin(dot(co, vec2(12.9898,78.233))) * 43758.5453); } void main() { vec2 p = coord*0.5+0.5; vec4 d = texture2D(particle, p); vec2 c = d.xy*0.5+0.5; vec2 vel = texture2D(data, c).xy; d.xy += d.zw * dt; d.zw *= exp(-dt*0.1); float spd = mix(0.1, 0.05, pow(rand(p+3.),2.0)); float index = floor(p.x*512.) + floor(p.y*512.)*512. + 0.5; if(index < 8.) { spd = 0.2; } d.zw += vel * spd * dt; float bound = 1.0 + 0.1; if(abs(d.x) > bound || abs(d.y) > bound) { vec2 seed = d.xy; vec2 pos = vec2(rand(seed+0.), rand(seed+1.))*2.-1.; vec2 vel = vec2(0,0); d = vec4(pos, vel); } gl_FragColor = d; } `,rect,["particle","data"]); const displayParticle = buildMaterial(` attribute vec3 vertex; varying vec2 coord; varying vec2 vel; varying float color; uniform sampler2D particle; uniform vec2 resolution; float rand(vec2 co) { return fract(sin(dot(co, vec2(12.9898,78.233))) * 43758.5453); } void main() { float index = vertex.z+0.5; vec2 p = vec2(mod(index,512.0), floor(index/512.0)+0.5) / 512.0; vec4 d = texture2D(particle, p); coord = vertex.xy; vel = d.zw; float dense = 1.0 * length(vel); float size = mix(0.005, 0.03, pow(rand(p+3.),2.0)*0.5*(1.+dense)) * 0.5; color = rand(p+4.)*0.8+0.2; if(index < 8.) { color = 2.0; size *= 5.0; } gl_Position = vec4(d.xy + coord*size,0,1); vec2 res = resolution / max(resolution.x, resolution.y) / 2.0; gl_Position.xy /= res; } `,` varying vec2 coord; varying vec2 vel; varying float color; uniform float time; void main() { float d = length(coord); if(d > 1.0) discard; float dense = 0.5 * length(vel); vec3 c = vec3(1,1,1); if(color > 1.5) { c = vec3(2.0,1.6,0.3) * 3.; dense *= exp(-max(0., d-0.02)*20.0); } else { dense *= smoothstep(1.0,0.8,d); dense *= 1.5-pow(d,2.0); } gl_FragColor = vec4(c*dense*color, 1.0); } `,particleMesh(4096),["particle"]); const mainBuffer = LoopBuffer(); const dataBuffer = DataLoopBuffer(); const iterBuffer = DataLoopBuffer(); const pressureBuffer = DataLoopBuffer(); const particleBuffer = DataLoopBuffer(); dataBuffer.render(_=>{ initialize(); }); particleBuffer.render(_=>{ initParticle(); }); function render() { currentTime = new Date(); // External Force dataBuffer.render(_=>{ addForce.data(dataBuffer.use()); addForce(); }); // Advection dataBuffer.render(_=>{ advect.data(dataBuffer.use()); advect(); }); // Diffuse iterBuffer.render(_=>{ clone.texture(dataBuffer.use()); clone(); }); for(let i=0;i<8;i++) { iterBuffer.render(_=>{ diffuse.field(dataBuffer.use()); diffuse.data(iterBuffer.use()); diffuse(); }); } dataBuffer.render(_=>{ clone.texture(iterBuffer.use()); clone(); }); // Project pressureBuffer.render(_=>{ divergence.data(dataBuffer.use()); divergence.pressure(pressureBuffer.use()); divergence(); }); for(let i=0;i<32;i++) { pressureBuffer.render(_=>{ pressure.data(pressureBuffer.use()); pressure(); }); } dataBuffer.render(_=>{ project.data(dataBuffer.use()); project.pressure(pressureBuffer.use()); project(); }); particleBuffer.render(_=>{ particle.particle(particleBuffer.use()); particle.data(dataBuffer.use()); particle(); }); display.data(dataBuffer.use()); display.iter(pressureBuffer.use()); display(); gl.enable(gl.BLEND); displayParticle.particle(particleBuffer.use()); displayParticle(); gl.disable(gl.BLEND); requestAnimationFrame(render); previousTime = currentTime; } render(); };

Night Wind