30:T5d8,# GPU-IO My first delve into the [GPU-IO library](https://github.com/amandaghassaei/gpu-io), which makes it possible to write WebGL programs dealing with particles really a breeze. I adapted some of [Amanda's examples](https://apps.amandaghassaei.com/gpu-io/examples) to Observable, in order to study the library (they are awesome in their own right, though!). The only modifications introduced were: - Examples always use WebGL2. This means no falling back to WebGL1 on some (increasingly rare) platforms. - Use the more idiomatic [Observable Inputs](https://observablehq.com/@observablehq/inputs) rather than [Dat GUI](https://github.com/dataarts/dat.gui). - No keyboard inputs. Screenshots are commanded by input buttons. - Rather than running in full screen, each example uses a 16x9 canvas. This means that the code for screen resizing has been stripped. Note that responsiveness to the width of the screen is taken care by Observable automatically. - Animation loops have been implemented with generators rather than with [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame). [Visibility promises](https://observablehq.com/@observablehq/stdlib?collection=@observablehq/libraries#visibilitySection) are used to avoid running all animations simultaneously. - Some examples have been extended with palette-based color renderer (see below). - Where appropriate, I added a "Refresh" button to restart the simulation/animation. 31:T758,renderPalette = function ( composer, defaultAmplitude = 1, defaultPalette = 0, components = "x" ) { const { GPUProgram, FLOAT, INT } = gpuio; return new GPUProgram(composer, { name: "renderPalette", fragmentShader: ` in vec2 v_uv; uniform sampler2D u_state; uniform float u_amplitude; uniform int u_palette; out vec4 out_color; const vec3 table[32] = vec3[32](vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.0,1.0,1.0),vec3(1.0,1.0,1.0), vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.0,1.0,1.0),vec3(0.0,0.33,0.67), vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.0,1.0,1.0),vec3(0.0,0.10,0.20), vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.0,1.0,1.0),vec3(0.3,0.20,0.20), vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.0,1.0,0.5),vec3(0.8,0.90,0.30), vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.0,0.7,0.4),vec3(0.0,0.15,0.20), vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(2.0,1.0,0.0),vec3(0.5,0.20,0.25), vec3(0.8,0.5,0.4),vec3(0.2,0.4,0.2),vec3(2.0,1.0,1.0),vec3(0.0,0.25,0.25) ); vec3 pal( in float t, in int i ) { vec3 a = table[i*4]; vec3 b = table[i*4+1]; vec3 c = table[i*4+2]; vec3 d = table[i*4+3]; return a + b*cos( 3.1416*(c*t+d) ); } void main() { float val = u_amplitude * texture(u_state, v_uv).${components} ; vec3 col = pal(val, u_palette); out_color = vec4(col, 1); } `, uniforms: [ { name: "u_amplitude", value: defaultAmplitude, type: FLOAT }, { name: "u_palette", value: defaultPalette, type: INT } ] }); }32:Tc36,{ readmeDemoRefresh; // Restart when button clicked let { GPUComposer, GPULayer, GPUProgram, renderAmplitudeProgram, FLOAT, INT, REPEAT, NEAREST } = gpuio; // Init a canvas element. const height = ~~((9 * width) / 16); const canvas = DOM.canvas(width, height, 1); yield visibility(canvas); // Avoid running cell if not visible // Init a composer. const composer = new GPUComposer({ canvas }); // Init a layer of float data filled with noise. const noise = new Float32Array(canvas.width * canvas.height); noise.forEach((el, i) => (noise[i] = Math.random())); const state = new GPULayer(composer, { name: "state", dimensions: [canvas.width, canvas.height], numComponents: 1, // Scalar state has one component. type: FLOAT, filter: NEAREST, // Use 2 buffers so we can toggle read/write // from one to the other. numBuffers: 2, wrapX: REPEAT, wrapY: REPEAT, array: noise }); // Init a program to diffuse state. const diffuseProgram = new GPUProgram(composer, { name: "render", fragmentShader: ` in vec2 v_uv; uniform sampler2D u_state; uniform vec2 u_pxSize; out float out_result; void main() { // Compute the discrete Laplacian. // https://en.wikipedia.org/wiki/Discrete_Laplace_operator float center = texture(u_state, v_uv).x; float n = texture(u_state, v_uv + vec2(0, u_pxSize.y)).x; float s = texture(u_state, v_uv - vec2(0, u_pxSize.y)).x; float e = texture(u_state, v_uv + vec2(u_pxSize.x, 0)).x; float w = texture(u_state, v_uv - vec2(u_pxSize.x, 0)).x; const float diffusionRate = 0.1; out_result = center + diffusionRate * (n + s + e + w - 4.0 * center); } `, uniforms: [ { // Index of sampler2D uniform to assign to value "u_state". name: "u_state", value: 0, type: INT }, { // Calculate the size of a 1 px step in UV coordinates. name: "u_pxSize", value: [1 / canvas.width, 1 / canvas.height], type: FLOAT } ] }); // Init a program to render state to canvas. // See https://github.com/amandaghassaei/gpu-io/tree/main/docs#gpuprogram-helper-functions // for more built-in GPUPrograms to use. /** Commented out const renderProgram = renderAmplitudeProgram(composer, { name: "render", type: state.type, components: "x" }); **/ let PARAMS = viewof readmeParams.value; const renderProgram = renderPalette( composer, PARAMS.amplitude, PARAMS.palette ); // Simulation/render loop. while (true) { // Diffuse state and write result to state. composer.step({ program: diffuseProgram, input: state, output: state }); PARAMS = viewof readmeParams.value; renderProgram.setUniform("u_amplitude", PARAMS.amplitude); renderProgram.setUniform("u_palette", PARAMS.palette); // If no "output", will draw to canvas. composer.step({ program: renderProgram, input: state }); yield visibility(canvas); } }33:T3167,{ const { GPUComposer, GPUProgram, GPULayer, FLOAT, INT, CLAMP_TO_EDGE, LINEAR, renderAmplitudeProgram, setValueProgram, WEBGL2, GLSL3 } = gpuio; const PARAMS = viewof RdDemoParams.value; const contextID = WEBGL2; const glslVersion = GLSL3; // Init a canvas element. const height = ~~((9 * width) / 16); const canvas = DOM.canvas(width, height, 1); yield visibility(canvas); // Avoid running cell if not visible const composer = new GPUComposer({ canvas, contextID, glslVersion }); const SIM_SCALE = 1.5; // Run sim at a lower scale. const state = new GPULayer(composer, { name: "state", dimensions: [ Math.round(canvas.width / SIM_SCALE), Math.round(canvas.height / SIM_SCALE) ], numComponents: 2, type: FLOAT, filter: LINEAR, numBuffers: 2, wrapX: CLAMP_TO_EDGE, wrapY: CLAMP_TO_EDGE }); const rxnDiffusion = new GPUProgram(composer, { name: "rxnDiffusion", fragmentShader: ` in vec2 v_uv; uniform sampler2D u_state; uniform vec2 u_pxSize; uniform vec2 u_feedRateBounds; uniform vec2 u_removalRateBounds; uniform float u_diffusionA; uniform float u_diffusionB; out vec2 out_state; void main() { // Calculate the laplacian of u_state. vec2 state = texture(u_state, v_uv).xy; vec2 n = texture(u_state, v_uv + vec2(u_pxSize.x, 0)).xy; vec2 s = texture(u_state, v_uv + vec2(-u_pxSize.x, 0)).xy; vec2 e = texture(u_state, v_uv + vec2(0, u_pxSize.y)).xy; vec2 w = texture(u_state, v_uv + vec2(0, -u_pxSize.y)).xy; vec2 laplacian = (n + s + e + w) - 4.0 * state; float reaction = state.x * state.y * state.y; float removalRate = mix(u_removalRateBounds.x, u_removalRateBounds.y, v_uv.x); float feedRate = mix(u_feedRateBounds.x, u_feedRateBounds.y, v_uv.y); out_state = clamp(state + vec2( u_diffusionA * laplacian.x - reaction + feedRate * (1.0 - state.x), u_diffusionB * laplacian.y + reaction - (removalRate + feedRate) * state.y ), 0.0, 1.0); } `, uniforms: [ { // Index of state GPULayer in "input" array. name: "u_state", value: 0, // We don't even really need to set this uniform, bc all uniforms default to zero. type: INT }, { name: "u_pxSize", value: [SIM_SCALE / canvas.width, SIM_SCALE / canvas.height], type: FLOAT }, { name: "u_feedRateBounds", value: [PARAMS.feedRateMin, PARAMS.feedRateMax], type: FLOAT }, { name: "u_removalRateBounds", value: [PARAMS.removalRateMin, PARAMS.removalRateMax], type: FLOAT }, { name: "u_diffusionA", value: PARAMS.diffusionA, type: FLOAT }, { name: "u_diffusionB", value: PARAMS.diffusionB, type: FLOAT } ] }); // const renderA = renderAmplitudeProgram(composer, { // name: "renderA", // type: state.type, // scale: 1, // components: "x" // Chemical A is stored in x component of state. // }); const renderA = renderPalette(composer, 1, PARAMS.palette, "x"); // const renderB = renderAmplitudeProgram(composer, { // name: "renderB", // type: state.type, // scale: 3, // components: "y" // Chemical B is stored in y component of state. // }); const renderB = renderPalette(composer, 3, PARAMS.palette, "y"); // Resize composer. composer.resize([width, height]); // Resize state with random initial values. const initialState = new Float32Array( Math.round(width / SIM_SCALE) * Math.round(height / SIM_SCALE) * 2 ); for (let i = 0; i < initialState.length / 2; i++) { initialState[2 * i] = 0.5 + Math.random() * 0.5; initialState[2 * i + 1] = 0.5 + Math.random() * 0.5; } state.resize( [Math.round(width / SIM_SCALE), Math.round(height / SIM_SCALE)], initialState ); // Update px size uniform. rxnDiffusion.setUniform("u_pxSize", [SIM_SCALE / width, SIM_SCALE / height]); // Render loop. function loop() { for (let i = 0; i < 10; i++) { composer.step({ program: rxnDiffusion, input: state, output: state }); } // No "output" will draw to screen. composer.step({ program: PARAMS.renderLayer === "Chemical A" ? renderA : renderB, input: state }); } const applyTransform = new GPUProgram(composer, { name: "applyTransform", fragmentShader: ` in vec2 v_uv; uniform sampler2D u_state; uniform vec2 u_offset; uniform float u_scale; out vec2 out_state; void main() { vec2 uv = u_offset + u_scale * v_uv; if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) out_state = vec2(0.5, 0.5); else out_state = texture(u_state, uv).xy; } `, uniforms: [ { // Index of state GPULayer in "input" array. name: "u_state", value: 0, // We don't even really need to set this uniform, bc all uniforms default to zero. type: INT }, { name: "u_scale", value: 1, type: FLOAT }, { name: "u_offset", value: [0, 0], type: FLOAT } ] }); // Touch events. const activeTouches = {}; let pinchPan; function updateGUI() { viewof RdDemoParams.value = PARAMS; } function onPinchZoom(e) { if (e.preventDefault) e.preventDefault(); // Calculate new bounds for feed/removal rate. const factor = e.ctrlKey ? 0.005 : 0.001; let scaleF = PARAMS.feedRateMax - PARAMS.feedRateMin; let scaleK = PARAMS.removalRateMax - PARAMS.removalRateMin; const fractionF = (canvas.height - e.clientY) / canvas.height; const fractionK = e.clientX / canvas.width; const centerF = fractionF * scaleF + PARAMS.feedRateMin; const centerK = fractionK * scaleK + PARAMS.removalRateMin; const scale = 1.0 + e.deltaY * factor; const scaleLimit = 1e-6; scaleF = Math.max(scaleF * scale, scaleLimit); scaleK = Math.max(scaleK * scale, scaleLimit); PARAMS.feedRateMin = centerF - scaleF * fractionF; PARAMS.feedRateMax = centerF + scaleF * (1 - fractionF); PARAMS.removalRateMin = centerK - scaleK * fractionK; PARAMS.removalRateMax = centerK + scaleK * (1 - fractionK); rxnDiffusion.setUniform("u_feedRateBounds", [ PARAMS.feedRateMin, PARAMS.feedRateMax ]); rxnDiffusion.setUniform("u_removalRateBounds", [ PARAMS.removalRateMin, PARAMS.removalRateMax ]); applyTransform.setUniform("u_scale", scale); applyTransform.setUniform("u_offset", [ (1 - scale) * fractionK, (1 - scale) * fractionF ]); composer.step({ program: applyTransform, input: state, output: state }); updateGUI(); } canvas.addEventListener("wheel", onPinchZoom, { passive: false }); function onPan(e) { const { deltaX, deltaY } = e; const scaleF = PARAMS.feedRateMax - PARAMS.feedRateMin; const scaleK = PARAMS.removalRateMax - PARAMS.removalRateMin; const scaledDeltaX = deltaX / canvas.width; const scaledDeltaY = -deltaY / canvas.height; PARAMS.feedRateMin -= scaleF * scaledDeltaY; PARAMS.feedRateMax -= scaleF * scaledDeltaY; PARAMS.removalRateMin -= scaleK * scaledDeltaX; PARAMS.removalRateMax -= scaleK * scaledDeltaX; rxnDiffusion.setUniform("u_feedRateBounds", [ PARAMS.feedRateMin, PARAMS.feedRateMax ]); rxnDiffusion.setUniform("u_removalRateBounds", [ PARAMS.removalRateMin, PARAMS.removalRateMax ]); applyTransform.setUniform("u_scale", 1); applyTransform.setUniform("u_offset", [-scaledDeltaX, -scaledDeltaY]); composer.step({ program: applyTransform, input: state, output: state }); updateGUI(); } // During touch, set chemical values to 0.5, 0.5 within a small circle. const touch = setValueProgram(composer, { name: "touch", type: state.type, value: [0.5, 0.5] }); function getAvgAndDeltaBetweenPoints(id1, id2) { const diffX = activeTouches[id1][0] - activeTouches[id2][0]; const diffY = activeTouches[id1][1] - activeTouches[id2][1]; const delta = Math.sqrt(diffX * diffX + diffY * diffY); const avg = [ (activeTouches[id1][0] + activeTouches[id2][0]) / 2, (activeTouches[id1][1] + activeTouches[id2][1]) / 2 ]; return { avg, delta }; } function onPointerMove(e) { if (!activeTouches[e.pointerId]) return; e.preventDefault(); const pointers = Object.keys(activeTouches); if (pointers.length === 1) { if (e.which === 3 || e.button === 2 || e.buttons === 2) { onPan({ deltaX: e.offsetX - activeTouches[e.pointerId][0], deltaY: e.offsetY - activeTouches[e.pointerId][1] }); } else { composer.stepCircle({ program: touch, output: state, position: [e.offsetX, canvas.height - e.offsetY], diameter: 30 }); } activeTouches[e.pointerId] = [e.offsetX, e.offsetY]; } else if (pinchPan && pointers.length === 2) { const { id1, id2, lastDelta, lastAvg } = pinchPan; activeTouches[e.pointerId] = [e.offsetX, e.offsetY]; const { delta, avg } = getAvgAndDeltaBetweenPoints(id1, id2); onPinchZoom({ pointerId: e.pointerId, clientX: avg[0], clientY: avg[1], deltaY: lastDelta - delta, ctrlKey: true }); onPan({ pointerId: e.pointerId, deltaX: avg[0] - lastAvg[0], deltaY: avg[1] - lastAvg[1] }); pinchPan.lastDelta = delta; pinchPan.lastAvg = avg; } } function onPointerStop(e) { delete activeTouches[e.pointerId]; if (Object.keys(activeTouches).length !== 2) { pinchPan = undefined; } } function onPointerStart(e) { e.preventDefault(); activeTouches[e.pointerId] = [e.offsetX, e.offsetY]; const pointers = Object.keys(activeTouches); if (pointers.length === 2) { pinchPan = {}; pinchPan.id1 = pointers[0]; pinchPan.id2 = pointers[1]; const { delta, avg } = getAvgAndDeltaBetweenPoints( pointers[0], pointers[1] ); pinchPan.lastDelta = delta; pinchPan.lastAvg = avg; } else { pinchPan = undefined; } } function onContextMenu(e) { e.preventDefault(); return false; } canvas.addEventListener("pointermove", onPointerMove); canvas.addEventListener("pointerdown", onPointerStart); canvas.addEventListener("pointerup", onPointerStop); canvas.addEventListener("pointerout", onPointerStop); canvas.addEventListener("pointercancel", onPointerStop); canvas.addEventListener("contextmenu", onContextMenu); /** * screenshot **/ function savePNG() { composer.step({ program: PARAMS.renderLayer === "Chemical A" ? renderA : renderB, input: state }); composer.savePNG({ filename: `reaction_diffusion` }); } viewof rdScreenshot.oninput = savePNG; /** * GUI update **/ function updateParms() { Object.assign(PARAMS, viewof RdDemoParams.value); rxnDiffusion.setUniform("u_diffusionA", PARAMS.diffusionA); rxnDiffusion.setUniform("u_diffusionB", PARAMS.diffusionB); rxnDiffusion.setUniform("u_removalRateBounds", [ PARAMS.removalRateMin, PARAMS.removalRateMax ]); rxnDiffusion.setUniform("u_feedRateBounds", [ PARAMS.feedRateMin, PARAMS.feedRateMax ]); rxnDiffusion.setUniform("u_feedRateBounds", [ PARAMS.feedRateMin, PARAMS.feedRateMax ]); renderA.setUniform("u_palette", PARAMS.palette); renderB.setUniform("u_palette", PARAMS.palette); } viewof RdDemoParams.addEventListener("input", updateParms); /** * Cleanup **/ invalidation.then(() => { viewof RdDemoParams.removeEventListener("input", updateParms); canvas.removeEventListener("wheel", onPinchZoom); canvas.removeEventListener("pointermove", onPointerMove); canvas.removeEventListener("pointerdown", onPointerStart); canvas.removeEventListener("pointerup", onPointerStop); canvas.removeEventListener("pointerout", onPointerStop); canvas.removeEventListener("pointercancel", onPointerStop); canvas.removeEventListener("contextmenu", onContextMenu); rxnDiffusion.dispose(); renderA.dispose(); renderB.dispose(); touch.dispose(); applyTransform.dispose(); state.dispose(); composer.dispose(); }); // Simulation/render loop. while (true) { loop(); yield visibility(canvas); } }34:T6ac,viewof physarumPresets = { const presets = [ [ "fibers", { decayFactor: 0.9, depositAmount: 4, particleDensity: 0.35, sensorDistance: 18, sensorAngle: 5.5, stepSize: 2, rotationAngle: 45, renderAmplitude: 0.03 } ], [ "fingerprint", { decayFactor: 0.9, depositAmount: 4, particleDensity: 0.35, sensorDistance: 14, sensorAngle: 70, stepSize: 1.5, rotationAngle: -25, renderAmplitude: 0.03 } ], [ "honeycomb", { decayFactor: 0.9, depositAmount: 4, particleDensity: 0.35, sensorDistance: 7.5, sensorAngle: 90, stepSize: 2, rotationAngle: -45, renderAmplitude: 0.03 } ], [ "net", { decayFactor: 0.9, depositAmount: 4, particleDensity: 0.35, sensorDistance: 18, sensorAngle: 90, stepSize: 2, rotationAngle: -16, renderAmplitude: 0.03 } ], [ "dot", { decayFactor: 0.9, depositAmount: 4, particleDensity: 0.35, sensorDistance: 26, sensorAngle: 5.5, stepSize: 1.5, rotationAngle: -70, renderAmplitude: 0.03 } ] ]; const form = Inputs.select(presets, { label: "Preset", value: presets[0], format: (d) => d[0], valueof: (d) => d[1] }); form.addEventListener("input", () => { viewof physarumParams.value = Object.assign({ palette: 0 }, form.value); viewof physarumParams.dispatchEvent(new CustomEvent("input")); }); return form; }35:T3cbe,{ physarumDemoRefresh; const { GPUComposer, GPUProgram, GPULayer, INT, BOOL, FLOAT, REPEAT, LINEAR, WEBGL2, GLSL3, renderAmplitudeProgram, addValueProgram } = gpuio; const contextID = WEBGL2; const glslVersion = GLSL3; // Init a canvas element. const height = ~~((9 * width) / 16); const canvas = DOM.canvas(width, height, 1); yield visibility(canvas); // Avoid running cell if not visible // Get a reference to the parameters const PARAMS = viewof physarumParams.value; // Make a copy of the params so that we know which parameters actually changed in the form const oldPARAMS = Object.assign({}, PARAMS); // For better floating point accuracy, break position data into absolute // position (xy) plus accumulated displacement (zw). // This way small numbers are added together in the accumulated displacement // until they are large enough to be combined with the absolute position. // This isn't strictly necessary but can help in cases where the code falls // back to HALF_FLOAT (if FLOAT is not supported by the device). const PARTICLES_NUM_COMPONENTS = 4; // Calculate the number of particles and init with random positions and headings. function initParticlesArrays() { const { width, height } = canvas; const numParticles = Math.round(width * height * PARAMS.particleDensity); const positions = new Float32Array(numParticles * PARTICLES_NUM_COMPONENTS); const heading = new Float32Array(numParticles); for (let i = 0; i < numParticles; i++) { positions[PARTICLES_NUM_COMPONENTS * i] = Math.random() * width; positions[PARTICLES_NUM_COMPONENTS * i + 1] = Math.random() * height; positions[PARTICLES_NUM_COMPONENTS * i + 2] = 0; positions[PARTICLES_NUM_COMPONENTS * i + 3] = 0; heading[i] = Math.random() * Math.PI * 2; } return { positions, heading, numParticles }; } // The composer orchestrates all of the GPU operations. const composer = new GPUComposer({ canvas, glslVersion, contextID }); /** * Init particles state and programs. */ const { positions, heading, numParticles } = initParticlesArrays(); // Init particles position data on GPU. const particlesPositions = new GPULayer(composer, { name: "particlesPositions", dimensions: numParticles, numComponents: PARTICLES_NUM_COMPONENTS, type: FLOAT, numBuffers: 2, array: positions }); // Init particles heading (orientation) data on GPU. const particlesHeading = new GPULayer(composer, { name: "particlesHeading", dimensions: numParticles, numComponents: 1, type: FLOAT, numBuffers: 2, array: heading }); // Fragment shader program for updating particles position and heading. const updateParticles = new GPUProgram(composer, { name: "updateParticles", fragmentShader: ` in vec2 v_uv; #define TWO_PI 6.28318530718 uniform sampler2D u_particlesHeading; uniform sampler2D u_particlesPositions; uniform sampler2D u_trail; uniform vec2 u_dimensions; uniform float u_sensorAngle; uniform float u_sensorDistance; uniform float u_rotationAngle; uniform bool u_randomDir; uniform float u_stepSize; layout (location = 0) out float out_heading; // Output at index 0. layout (location = 1) out vec4 out_position; // Output at index 1. float sense(vec2 position, float angle) { vec2 sensePosition = position + u_sensorDistance * vec2(cos(angle), sin(angle)); return texture(u_trail, sensePosition / u_dimensions).x; } void main() { float heading = texture(u_particlesHeading, v_uv).r; // Add absolute position plus displacement to get position. vec4 positionInfo = texture(u_particlesPositions, v_uv); // Add absolute position plus displacement to get position. vec2 absolute = positionInfo.xy; vec2 displacement = positionInfo.zw; vec2 position = absolute + displacement; // Get location of particle in trail state (different that v_uv, which is UV coordinate in particles arrays). vec2 trailUV = position / u_dimensions; // Sense and rotate. float middleState = sense(position, heading); float leftState = sense(position, heading + u_sensorAngle); float rightState = sense(position, heading - u_sensorAngle); // Using some tricks here to remove conditionals (they cause significant slowdowns). // Leaving the old code here for clarity, replaced by the lines below. // if (middleState > rightState && middleState < leftState) { // // Rotate left. // heading += u_rotationAngle; // } else if (middleState < rightState && middleState > leftState) { // // Rotate right. // heading -= u_rotationAngle; // } else if (middleState < rightState && middleState < leftState) { // // Choose randomly. // heading += u_rotationAngle * (u_randomDir ? 1.0 : -1.0); // } // else do nothing. // The following lines give the same result without conditionals. float rightWeight = step(middleState, rightState); float leftWeight = step(middleState, leftState); heading += mix( rightWeight * mix(u_rotationAngle, -u_rotationAngle, float(u_randomDir)), mix(u_rotationAngle, -u_rotationAngle, rightWeight), abs(leftWeight - rightWeight) ); // Wrap heading around 2PI. heading = mod(heading + TWO_PI, TWO_PI); out_heading = heading; // Move in direction of heading. vec2 move = u_stepSize * vec2(cos(heading), sin(heading)); vec2 nextDisplacement = displacement + move; // If displacement is large enough, merge with abs position. // This method reduces floating point error in position. // Using some tricks here to remove conditionals (they cause significant slowdowns). // Leaving the old code here for clarity, replaced by the lines below. // if (dot(nextDisplacement, nextDisplacement) > 30.0) { // absolute += nextDisplacement; // nextDisplacement = vec2(0); // // Also check if we've wrapped. // if (absolute.x < 0.0) { // absolute.x = absolute.x + u_dimensions.x; // } else if (absolute.x >= u_dimensions.x) { // absolute.x = absolute.x - u_dimensions.x; // } // if (absolute.y < 0.0) { // absolute.y = absolute.y + u_dimensions.y; // } else if (absolute.y >= u_dimensions.y) { // absolute.y = absolute.y - u_dimensions.y; // } // } // The following lines give the same result without conditionals. float shouldMerge = step(30.0, dot(nextDisplacement, nextDisplacement)); absolute = mod(absolute + shouldMerge * nextDisplacement + u_dimensions, u_dimensions); nextDisplacement *= (1.0 - shouldMerge); out_position = vec4(absolute, nextDisplacement); }`, uniforms: [ { // Index of particlesHeading GPULayer in "input" array. name: "u_particlesHeading", value: 0, type: INT }, { // Index of particlesPositions GPULayer in "input" array. name: "u_particlesPositions", value: 1, type: INT }, { // Index of trail GPULayer in "input" array. name: "u_trail", value: 2, type: INT }, { name: "u_dimensions", value: [canvas.width, canvas.height], type: FLOAT }, { name: "u_sensorAngle", value: (PARAMS.sensorAngle * Math.PI) / 180, type: FLOAT }, { name: "u_sensorDistance", value: PARAMS.sensorDistance, type: FLOAT }, { name: "u_rotationAngle", value: (PARAMS.rotationAngle * Math.PI) / 180, type: FLOAT }, { name: "u_randomDir", value: false, type: BOOL }, { name: "u_stepSize", value: PARAMS.stepSize, type: FLOAT } ] }); /** * Init chemical trail state and programs. */ // Init a GPULayer to contain trail data at full size of screen. const trail = new GPULayer(composer, { name: "trail", dimensions: [canvas.width, canvas.height], numComponents: 1, type: FLOAT, filter: LINEAR, numBuffers: 2, wrapX: REPEAT, wrapY: REPEAT }); // Fragment shader program for adding chemical attractant from particles to trail layer. const deposit = addValueProgram(composer, { name: "deposit", type: trail.type, value: PARAMS.depositAmount }); // Fragment shader program for diffusing trail state. const diffuseAndDecay = new GPUProgram(composer, { name: "diffuseAndDecay", fragmentShader: ` in vec2 v_uv; uniform sampler2D u_trail; uniform float u_decayFactor; uniform vec2 u_pxSize; uniform int u_numParticles; out float out_state; void main() { vec2 halfPx = u_pxSize / 2.0; // Use built-in linear interpolation to reduce 9 samples to 4. // This is not the same as the flat kernel described in Jones 2010. // This kernel has weighting: // 1/16 1/8 1/16 // 1/8 1/4 1/8 // 1/16 1/8 1/16 float prevStateNE = texture(u_trail, v_uv + halfPx).x; float prevStateNW = texture(u_trail, v_uv + vec2(-halfPx.x, halfPx.y)).x; float prevStateSE = texture(u_trail, v_uv + vec2(halfPx.x, -halfPx.y)).x; float prevStateSW = texture(u_trail, v_uv - halfPx).x; float diffusedState = (prevStateNE + prevStateNW + prevStateSE + prevStateSW) / 4.0; out_state = u_decayFactor * diffusedState; }`, uniforms: [ { // Index of trail GPULayer in "input" array. name: "u_trail", value: 0, // We don't even really need to set this uniform, bc all uniforms default to zero. type: INT }, { name: "u_decayFactor", value: PARAMS.decayFactor, type: FLOAT }, { name: "u_pxSize", value: [1 / canvas.width, 1 / canvas.height], type: FLOAT } ] }); // Fragment shader program for rendering trail state to screen (with a scaling factor). /** const render = renderAmplitudeProgram(composer, { name: "render", type: trail.type, components: "x", scale: PARAMS.renderAmplitude }); **/ const render = renderPalette( composer, PARAMS.renderAmplitude, PARAMS.palette ); /** * This loop is where all the action happens. */ function loop() { // Update randomDir uniform by coin flip - the same value will be applied to all particles // in the system, which is a bit of an oversimplification, but seems to work fine. // Would be more realistic to pick randomDir within each fragment shader kernel, // but this is easier + faster. updateParticles.setUniform("u_randomDir", Math.random() < 0.5); // Update each particle's heading and position. composer.step({ program: updateParticles, input: [particlesHeading, particlesPositions, trail], output: [particlesHeading, particlesPositions] }); // Render particles' positions on top of trail layer to apply chemical // attractant to trail. Technically this is still not quite right bc overlapping // particles will get merged together and only count once, but it seems to work fine anyway. // Jones 2010 described a collision detection scheme that could avoid this overlap issue, // but none of that is implemented in this code for simplicity. composer.drawLayerAsPoints({ layer: particlesPositions, program: deposit, input: trail, output: trail, pointSize: 1, wrapX: true, wrapY: true }); // Diffuse trail state and apply decay factor. composer.step({ program: diffuseAndDecay, input: trail, output: trail }); // Draw to screen. composer.step({ program: render, input: trail }); } /** * Updates parameter-dependent variables on UI change **/ function stateUpdate() { Object.assign(PARAMS, viewof physarumParams.value); updateParticles.setUniform( "u_sensorAngle", (PARAMS.sensorAngle * Math.PI) / 180 ); updateParticles.setUniform("u_sensorDistance", PARAMS.sensorDistance); updateParticles.setUniform( "u_rotationAngle", (PARAMS.rotationAngle * Math.PI) / 180 ); updateParticles.setUniform("u_stepSize", PARAMS.stepSize); deposit.setUniform("u_value", PARAMS.depositAmount); diffuseAndDecay.setUniform("u_decayFactor", PARAMS.decayFactor); // render.setUniform("u_scale", PARAMS.renderAmplitude); render.setUniform("u_amplitude", PARAMS.renderAmplitude); render.setUniform("u_palette", PARAMS.palette); if (oldPARAMS.particleDensity != PARAMS.particleDensity) { // Init new particles (only) when particle density changes const { positions, heading, numParticles } = initParticlesArrays(); particlesPositions.resize(numParticles, positions); particlesHeading.resize(numParticles, heading); } Object.assign(oldPARAMS, viewof physarumParams.value); } /** * Mouse / touch interaction **/ // Touch events. const activeTouches = {}; const TOUCH_DIAMETER = 25; function onPointerMove(e) { const lastPosition = activeTouches[e.pointerId]; if (lastPosition) { const currentPosition = [e.offsetX, canvas.height - e.offsetY]; composer.stepSegment({ program: deposit, input: trail, output: trail, position1: currentPosition, position2: lastPosition, thickness: TOUCH_DIAMETER, endCaps: true }); activeTouches[e.pointerId] = currentPosition; } } function onPointerStop(e) { delete activeTouches[e.pointerId]; } function onPointerStart(e) { const currentPosition = [e.offsetX, canvas.height - e.offsetY]; composer.stepCircle({ program: deposit, input: trail, output: trail, position: currentPosition, diameter: TOUCH_DIAMETER }); activeTouches[e.pointerId] = currentPosition; } /** * Screenshot **/ function savePNG() { composer.step({ program: render, input: trail }); composer.savePNG({ filename: "physarum" }); } viewof physarumScreenshot.addEventListener("input", savePNG); /** * Event handler setup **/ canvas.addEventListener("pointermove", onPointerMove); canvas.addEventListener("pointerdown", onPointerStart); canvas.addEventListener("pointerup", onPointerStop); canvas.addEventListener("pointerout", onPointerStop); canvas.addEventListener("pointercancel", onPointerStop); viewof physarumParams.addEventListener("input", stateUpdate); /** * Resource disposal (called on cell invalidation) **/ invalidation.then(() => { canvas.removeEventListener("pointermove", onPointerMove); canvas.removeEventListener("pointerdown", onPointerStart); canvas.removeEventListener("pointerup", onPointerStop); canvas.removeEventListener("pointerout", onPointerStop); canvas.removeEventListener("pointercancel", onPointerStop); viewof physarumParams.removeEventListener("input", stateUpdate); viewof physarumScreenshot.removeEventListener("input", savePNG); particlesPositions.dispose(); particlesHeading.dispose(); updateParticles.dispose(); trail.dispose(); deposit.dispose(); diffuseAndDecay.dispose(); render.dispose(); composer.dispose(); }); // Simulation/render loop. while (true) { loop(); yield visibility(canvas); } }36:T1a94,{ fractalDemoRefresh; const { GPUComposer, GPULayer, GPUProgram, FLOAT, renderAmplitudeProgram, WEBGL2, GLSL3 } = gpuio; const contextID = WEBGL2; const glslVersion = GLSL3; const RADIUS = 1.75; // Init a canvas element. const height = ~~((9 * width) / 16); const canvas = DOM.canvas(width, height, 1); yield visibility(canvas); // Avoid running cell if not visible // Calc initial bounds, which scale the entire fractal to fit inside the current window. function calcInitialBounds() { const aspectRatio = canvas.width / canvas.height; return { min: aspectRatio > 1 ? [-RADIUS * aspectRatio, -RADIUS] : [-RADIUS, -RADIUS / aspectRatio], max: aspectRatio > 1 ? [RADIUS * aspectRatio, RADIUS] : [RADIUS, RADIUS / aspectRatio] }; } let bounds = calcInitialBounds(); const PARAMS = viewof fractalParams.value; // Flag to trigger recompute. let needsCompute = true; const composer = new GPUComposer({ canvas, contextID, glslVersion }); const state = new GPULayer(composer, { name: "state", dimensions: [canvas.width, canvas.height], type: FLOAT, numComponents: 1 }); const fractalCompute = new GPUProgram(composer, { name: "fractalCompute", fragmentShader: ` // Sub-sampling for anti-aliasing. #define SUBSAMPLE_RES 2.0 in vec2 v_uv; uniform vec2 u_boundsMin; uniform vec2 u_boundsMax; uniform float u_cReal; uniform float u_cImaginary; uniform vec2 u_pxSize; out float out_value; void main() { // https://en.wikipedia.org/wiki/Julia_set#Pseudocode int value = 0; for (float u = 0.0; u < SUBSAMPLE_RES; u++) { for (float v = 0.0; v < SUBSAMPLE_RES; v++) { vec2 uvOffset = vec2(u, v) / (SUBSAMPLE_RES + 1.0) + 0.5; vec2 uv = v_uv + uvOffset * u_pxSize; vec2 z = uv * u_boundsMax + (1.0 - uv) * u_boundsMin; for (int i = 0; i < MAX_ITERS; i++) { if (z.x * z.x + z.y * z.y > ${RADIUS * RADIUS}) break; float xTemp = z.x * z.x - z.y * z.y; z.y = 2.0 * z.x * z.y + u_cImaginary; z.x = xTemp + u_cReal; value += 1; } } } out_value = (float(value) / (SUBSAMPLE_RES * SUBSAMPLE_RES)) / float(MAX_ITERS); }`, uniforms: [ { name: "u_boundsMin", value: bounds.min, type: FLOAT }, { name: "u_boundsMax", value: bounds.max, type: FLOAT }, { name: "u_cReal", value: PARAMS.cReal, type: FLOAT }, { name: "u_cImaginary", value: PARAMS.cImaginary, type: FLOAT }, { name: "u_pxSize", value: [1 / canvas.width, 1 / canvas.height], type: FLOAT } ], // Use compile-time variables to set loop parameter so this will work in WebGL1 as well. // See https://github.com/amandaghassaei/gpu-io/blob/main/docs/GLSL1_Support.md#other-glsl1-gotchas compileTimeConstants: { MAX_ITERS: `${PARAMS.maxIters}` } }); const fractalRender = renderPalette( composer, PARAMS.renderAmplitude, PARAMS.palette ); // Render loop. function loop() { if (needsCompute) { // Only recompute if something has changed. composer.step({ program: fractalCompute, output: state }); needsCompute = false; // Draw to screen. composer.step({ program: fractalRender, input: state }); } } /** * UI interaction update **/ function stateUpdate() { Object.assign(PARAMS, viewof fractalParams.value); fractalCompute.setUniform("u_cReal", PARAMS.cReal); fractalCompute.setUniform("u_cImaginary", PARAMS.cImaginary); fractalCompute.recompile({ MAX_ITERS: `${PARAMS.maxIters}` }); fractalRender.setUniform("u_amplitude", PARAMS.renderAmplitude); fractalRender.setUniform("u_palette", PARAMS.palette); needsCompute = true; } viewof fractalParams.addEventListener("input", stateUpdate); /** * Mouse/touch interaction **/ // Touch events. const activeTouches = {}; let pinchPan; function onPinchZoom(e) { if (e.preventDefault) e.preventDefault(); // Calculate new bounds. const factor = e.ctrlKey ? 0.005 : 0.001; let [minX, minY] = bounds.min; let [maxX, maxY] = bounds.max; let scaleX = maxY - minY; let scaleY = maxX - minX; const fractionY = (canvas.height - e.offsetY) / canvas.height; const fractionX = e.offsetX / canvas.width; const centerY = fractionY * scaleX + minY; const centerX = fractionX * scaleY + minX; const scale = 1.0 + e.deltaY * factor; const scaleLimit = 1e-4; if (Math.min(scaleX * scale, scaleY * scale) < scaleLimit) return; scaleX = scaleX * scale; scaleY = scaleY * scale; bounds.min[0] = centerX - scaleY * fractionX; bounds.max[0] = centerX + scaleY * (1 - fractionX); bounds.min[1] = centerY - scaleX * fractionY; bounds.max[1] = centerY + scaleX * (1 - fractionY); fractalCompute.setUniform("u_boundsMin", bounds.min); fractalCompute.setUniform("u_boundsMax", bounds.max); needsCompute = true; } canvas.onwheel = onPinchZoom; function onPan(e) { const { deltaX, deltaY } = e; const [minX, minY] = bounds.min; const [maxX, maxY] = bounds.max; const scaleX = maxY - minY; const scaleY = maxX - minX; const scaledDeltaX = deltaX / canvas.width; const scaledDeltaY = -deltaY / canvas.height; bounds.min[1] -= scaleX * scaledDeltaY; bounds.max[1] -= scaleX * scaledDeltaY; bounds.min[0] -= scaleY * scaledDeltaX; bounds.max[0] -= scaleY * scaledDeltaX; fractalCompute.setUniform("u_boundsMin", bounds.min); fractalCompute.setUniform("u_boundsMax", bounds.max); needsCompute = true; } let mouse; function onMouseDown(e) { mouse = [e.offsetX, e.offsetY]; } function onMouseMove(e) { if (e.buttons == 0) return; const nextMouse = [e.offsetX, e.offsetY]; const panInfo = { deltaX: nextMouse[0] - mouse[0], deltaY: nextMouse[1] - mouse[1] }; onPan(panInfo); mouse = nextMouse; } canvas.onmousedown = onMouseDown; canvas.onmousemove = onMouseMove; /** * Screenshot **/ function savePNG() { composer.step({ program: fractalRender, input: state }); composer.savePNG({ filename: "fractal" }); } viewof fractalScreenshot.addEventListener("input", savePNG); /** * Resource cleanup **/ invalidation.then(() => { fractalCompute.dispose(); fractalRender.dispose(); state.dispose(); composer.dispose(); }); // Simulation/render loop. while (true) { loop(); yield visibility(canvas); } }37:T4b71,{ fluidDemoRefresh; const { GPUComposer, GPUProgram, GPULayer, SHORT, INT, FLOAT, REPEAT, NEAREST, LINEAR, renderSignedAmplitudeProgram, WEBGL2, GLSL3 } = gpuio; const contextID = WEBGL2; const glslVersion = GLSL3; // Init a canvas element. const height = ~~((9 * width) / 16); const canvas = DOM.canvas(width, height, 1); yield visibility(canvas); // Avoid running cell if not visible // The params const PARAMS = viewof fluidSimParams.value; // Scaling factor for touch interactions. const TOUCH_FORCE_SCALE = 2; // Approx avg num particles per px. const PARTICLE_DENSITY = 0.1; const MAX_NUM_PARTICLES = 100000; // How long do the particles last before they are reset. // If we don't have then reset they tend to clump up. const PARTICLE_LIFETIME = 1000; // How many steps to compute the zero pressure field. const NUM_JACOBI_STEPS = 3; const PRESSURE_CALC_ALPHA = -1; const PRESSURE_CALC_BETA = 0.25; // How many steps to move particles between each step of the simulation. // This helps to make the trails look smoother in cases where the particles are moving >1 px per step. const NUM_RENDER_STEPS = 3; // Compute the velocity at a lower resolution to increase efficiency. const VELOCITY_SCALE_FACTOR = 8; // Put a speed limit on velocity, otherwise touch interactions get out of control. const MAX_VELOCITY = 30; // We are storing abs position (2 components) and displacements (2 components) in this buffer. // This decreases error when rendering to half float. const POSITION_NUM_COMPONENTS = 4; function calcNumParticles(width, height) { return Math.min( Math.ceil(width * height * PARTICLE_DENSITY), MAX_NUM_PARTICLES ); } let NUM_PARTICLES = calcNumParticles(canvas.width, canvas.height); const composer = new GPUComposer({ canvas, contextID, glslVersion }); // Init state. const velocityState = new GPULayer(composer, { name: "velocity", dimensions: [ Math.ceil(width / VELOCITY_SCALE_FACTOR), Math.ceil(height / VELOCITY_SCALE_FACTOR) ], type: FLOAT, filter: LINEAR, numComponents: 2, wrapX: REPEAT, wrapY: REPEAT, numBuffers: 2 }); const divergenceState = new GPULayer(composer, { name: "divergence", dimensions: [velocityState.width, velocityState.height], type: FLOAT, filter: NEAREST, numComponents: 1, wrapX: REPEAT, wrapY: REPEAT }); const pressureState = new GPULayer(composer, { name: "pressure", dimensions: [velocityState.width, velocityState.height], type: FLOAT, filter: NEAREST, numComponents: 1, wrapX: REPEAT, wrapY: REPEAT, numBuffers: 2 }); const particlePositionState = new GPULayer(composer, { name: "position", dimensions: NUM_PARTICLES, type: FLOAT, numComponents: POSITION_NUM_COMPONENTS, numBuffers: 2 }); // We can use the initial state to reset particles after they've died. const particleInitialState = new GPULayer(composer, { name: "initialPosition", dimensions: NUM_PARTICLES, type: FLOAT, numComponents: POSITION_NUM_COMPONENTS, numBuffers: 1 }); const particleAgeState = new GPULayer(composer, { name: "age", dimensions: NUM_PARTICLES, type: SHORT, numComponents: 1, numBuffers: 2 }); // Init a render target for trail effect. const trailState = new GPULayer(composer, { name: "trails", dimensions: [canvas.width, canvas.height], type: FLOAT, filter: NEAREST, numComponents: 1, numBuffers: 2 }); // Init programs. const advection = new GPUProgram(composer, { name: "advection", fragmentShader: ` in vec2 v_uv; uniform sampler2D u_state; uniform sampler2D u_velocity; uniform vec2 u_dimensions; out vec2 out_state; void main() { // Implicitly solve advection. out_state = texture(u_state, v_uv - texture(u_velocity, v_uv).xy / u_dimensions).xy; }`, uniforms: [ { name: "u_state", value: 0, type: INT }, { name: "u_velocity", value: 1, type: INT }, { name: "u_dimensions", value: [canvas.width, canvas.height], type: FLOAT } ] }); const divergence2D = new GPUProgram(composer, { name: "divergence2D", fragmentShader: ` in vec2 v_uv; uniform sampler2D u_vectorField; uniform vec2 u_pxSize; out float out_divergence; void main() { float n = texture(u_vectorField, v_uv + vec2(0, u_pxSize.y)).y; float s = texture(u_vectorField, v_uv - vec2(0, u_pxSize.y)).y; float e = texture(u_vectorField, v_uv + vec2(u_pxSize.x, 0)).x; float w = texture(u_vectorField, v_uv - vec2(u_pxSize.x, 0)).x; out_divergence = 0.5 * ( e - w + n - s); }`, uniforms: [ { name: "u_vectorField", value: 0, type: INT }, { name: "u_pxSize", value: [1 / velocityState.width, 1 / velocityState.height], type: FLOAT } ] }); const jacobi = new GPUProgram(composer, { name: "jacobi", fragmentShader: ` in vec2 v_uv; uniform float u_alpha; uniform float u_beta; uniform vec2 u_pxSize; uniform sampler2D u_previousState; uniform sampler2D u_divergence; out vec4 out_jacobi; void main() { vec4 n = texture(u_previousState, v_uv + vec2(0, u_pxSize.y)); vec4 s = texture(u_previousState, v_uv - vec2(0, u_pxSize.y)); vec4 e = texture(u_previousState, v_uv + vec2(u_pxSize.x, 0)); vec4 w = texture(u_previousState, v_uv - vec2(u_pxSize.x, 0)); vec4 d = texture(u_divergence, v_uv); out_jacobi = (n + s + e + w + u_alpha * d) * u_beta; }`, uniforms: [ { name: "u_alpha", value: PRESSURE_CALC_ALPHA, type: FLOAT }, { name: "u_beta", value: PRESSURE_CALC_BETA, type: FLOAT }, { name: "u_pxSize", value: [1 / velocityState.width, 1 / velocityState.height], type: FLOAT }, { name: "u_previousState", value: 0, type: INT }, { name: "u_divergence", value: 1, type: INT } ] }); const gradientSubtraction = new GPUProgram(composer, { name: "gradientSubtraction", fragmentShader: ` in vec2 v_uv; uniform vec2 u_pxSize; uniform sampler2D u_scalarField; uniform sampler2D u_vectorField; out vec2 out_result; void main() { float n = texture(u_scalarField, v_uv + vec2(0, u_pxSize.y)).r; float s = texture(u_scalarField, v_uv - vec2(0, u_pxSize.y)).r; float e = texture(u_scalarField, v_uv + vec2(u_pxSize.x, 0)).r; float w = texture(u_scalarField, v_uv - vec2(u_pxSize.x, 0)).r; out_result = texture2D(u_vectorField, v_uv).xy - 0.5 * vec2(e - w, n - s); }`, uniforms: [ { name: "u_pxSize", value: [1 / velocityState.width, 1 / velocityState.height], type: FLOAT }, { name: "u_scalarField", value: 0, type: INT }, { name: "u_vectorField", value: 1, type: INT } ] }); const renderParticles = new GPUProgram(composer, { name: "renderParticles", fragmentShader: ` #define FADE_TIME 0.1 in vec2 v_uv; in vec2 v_uv_position; uniform isampler2D u_ages; uniform sampler2D u_velocity; out float out_state; void main() { float ageFraction = float(texture(u_ages, v_uv_position).x) / ${PARTICLE_LIFETIME.toFixed( 1 )}; // Fade first 10% and last 10%. float opacity = mix(0.0, 1.0, min(ageFraction * 10.0, 1.0)) * mix(1.0, 0.0, max(ageFraction * 10.0 - 90.0, 0.0)); vec2 velocity = texture(u_velocity, v_uv).xy; // Show the fastest regions with darker color. float multiplier = clamp(dot(velocity, velocity) * 0.05 + 0.7, 0.0, 1.0); out_state = opacity * multiplier; }`, uniforms: [ { name: "u_ages", value: 0, type: INT }, { name: "u_velocity", value: 1, type: INT } ] }); const ageParticles = new GPUProgram(composer, { name: "ageParticles", fragmentShader: ` in vec2 v_uv; uniform isampler2D u_ages; out int out_age; void main() { int age = texture(u_ages, v_uv).x + 1; out_age = stepi(age, ${PARTICLE_LIFETIME}) * age; }`, uniforms: [ { name: "u_ages", value: 0, type: INT } ] }); const advectParticles = new GPUProgram(composer, { name: "advectParticles", fragmentShader: ` in vec2 v_uv; uniform vec2 u_dimensions; uniform sampler2D u_positions; uniform sampler2D u_velocity; uniform isampler2D u_ages; uniform sampler2D u_initialPositions; out vec4 out_position; void main() { // Store small displacements as separate number until they accumulate sufficiently. // Then add them to the absolution position. // This prevents small offsets on large abs positions from being lost in float16 precision. vec4 positionData = texture(u_positions, v_uv); vec2 absolute = positionData.rg; vec2 displacement = positionData.ba; vec2 position = absolute + displacement; // Forward integrate via RK2. vec2 pxSize = 1.0 / u_dimensions; vec2 velocity1 = texture(u_velocity, position * pxSize).xy; vec2 halfStep = position + velocity1 * 0.5 * ${1 / NUM_RENDER_STEPS}; vec2 velocity2 = texture(u_velocity, halfStep * pxSize).xy; displacement += velocity2 * ${1 / NUM_RENDER_STEPS}; // Merge displacement with absolute if needed. float shouldMerge = step(20.0, dot(displacement, displacement)); // Also wrap absolute position if needed. absolute = mod(absolute + shouldMerge * displacement + u_dimensions, u_dimensions); displacement *= (1.0 - shouldMerge); // If this particle is being reset, give it a random position. int shouldReset = stepi(texture(u_ages, v_uv).x, 1); out_position = mix(vec4(absolute, displacement), texture(u_initialPositions, v_uv), float(shouldReset)); }`, uniforms: [ { name: "u_positions", value: 0, type: INT }, { name: "u_velocity", value: 1, type: INT }, { name: "u_ages", value: 2, type: INT }, { name: "u_initialPositions", value: 3, type: INT }, { name: "u_dimensions", value: [canvas.width, canvas.height], type: "FLOAT" } ] }); const fadeTrails = new GPUProgram(composer, { name: "fadeTrails", fragmentShader: ` in vec2 v_uv; uniform sampler2D u_image; uniform float u_increment; out float out_color; void main() { out_color = max(texture(u_image, v_uv).x + u_increment, 0.0); }`, uniforms: [ { name: "u_image", value: 0, type: INT }, { name: "u_increment", value: -1 / PARAMS.trailLength, type: "FLOAT" } ] }); const renderTrails = new GPUProgram(composer, { name: "renderTrails", fragmentShader: ` in vec2 v_uv; uniform sampler2D u_trailState; out vec4 out_color; void main() { vec3 background = vec3(0.98, 0.922, 0.843); vec3 particle = vec3(0, 0, 0.2); out_color = vec4(mix(background, particle, texture(u_trailState, v_uv).x), 1); } ` }); const renderPressure = renderSignedAmplitudeProgram(composer, { name: "renderPressure", type: pressureState.type, scale: 0.5, component: "x" }); let shouldSavePNG = false; // Render loop. function loop() { // Advect the velocity vector field. composer.step({ program: advection, input: [velocityState, velocityState], output: velocityState }); // Compute divergence of advected velocity field. composer.step({ program: divergence2D, input: velocityState, output: divergenceState }); // Compute the pressure gradient of the advected velocity vector field (using jacobi iterations). for (let i = 0; i < NUM_JACOBI_STEPS; i++) { composer.step({ program: jacobi, input: [pressureState, divergenceState], output: pressureState }); } // Subtract the pressure gradient from velocity to obtain a velocity vector field with zero divergence. composer.step({ program: gradientSubtraction, input: [pressureState, velocityState], output: velocityState }); if (PARAMS.render === "Pressure") { composer.step({ program: renderPressure, input: pressureState }); } else if (PARAMS.render === "Velocity") { composer.drawLayerAsVectorField({ layer: velocityState, vectorSpacing: 10, vectorScale: 2.5, color: [0, 0, 0] }); } else { // Increment particle age. composer.step({ program: ageParticles, input: particleAgeState, output: particleAgeState }); // Fade current trails. composer.step({ program: fadeTrails, input: trailState, output: trailState }); for (let i = 0; i < NUM_RENDER_STEPS; i++) { // Advect particles. composer.step({ program: advectParticles, input: [ particlePositionState, velocityState, particleAgeState, particleInitialState ], output: particlePositionState }); // Render particles to texture for trail effect. composer.drawLayerAsPoints({ layer: particlePositionState, program: renderParticles, input: [particleAgeState, velocityState], output: trailState, wrapX: true, wrapY: true }); } // Render particle trails to screen. composer.step({ program: renderTrails, input: trailState }); } if (shouldSavePNG) { composer.savePNG({ filename: `fluid` }); shouldSavePNG = false; } } function onResize() { // Resize composer. composer.resize([width, height]); // Re-init textures at new size. const velocityDimensions = [ Math.ceil(width / VELOCITY_SCALE_FACTOR), Math.ceil(height / VELOCITY_SCALE_FACTOR) ]; velocityState.resize(velocityDimensions); divergenceState.resize(velocityDimensions); pressureState.resize(velocityDimensions); trailState.resize([width, height]); // Update uniforms. advection.setUniform("u_dimensions", [width, height]); advectParticles.setUniform("u_dimensions", [width, height]); const velocityPxSize = [ 1 / velocityDimensions[0], 1 / velocityDimensions[1] ]; divergence2D.setUniform("u_pxSize", velocityPxSize); jacobi.setUniform("u_pxSize", velocityPxSize); gradientSubtraction.setUniform("u_pxSize", velocityPxSize); // Re-init particles. NUM_PARTICLES = calcNumParticles(width, height); // Init new positions. const positions = new Float32Array(NUM_PARTICLES * 4); for (let i = 0; i < positions.length / 4; i++) { positions[POSITION_NUM_COMPONENTS * i] = Math.random() * width; positions[POSITION_NUM_COMPONENTS * i + 1] = Math.random() * height; } particlePositionState.resize(NUM_PARTICLES, positions); particleInitialState.resize(NUM_PARTICLES, positions); // Init new ages. const ages = new Int16Array(NUM_PARTICLES); for (let i = 0; i < NUM_PARTICLES; i++) { ages[i] = Math.round(Math.random() * PARTICLE_LIFETIME); } particleAgeState.resize(NUM_PARTICLES, ages); } onResize(); /** * Interaction **/ // During touch, copy data from noise over to state. const touch = new GPUProgram(composer, { name: "touch", fragmentShader: ` in vec2 v_uv; in vec2 v_uv_local; uniform sampler2D u_velocity; uniform vec2 u_vector; out vec2 out_velocity; void main() { vec2 radialVec = (v_uv_local * 2.0 - 1.0); float radiusSq = dot(radialVec, radialVec); vec2 velocity = texture(u_velocity, v_uv).xy + (1.0 - radiusSq) * u_vector * ${TOUCH_FORCE_SCALE.toFixed( 1 )}; float velocityMag = length(velocity); out_velocity = velocity / velocityMag * min(velocityMag, ${MAX_VELOCITY.toFixed( 1 )}); }`, uniforms: [ { name: "u_velocity", value: 0, type: INT }, { name: "u_vector", value: [0, 0], type: FLOAT } ] }); // Touch events. const activeTouches = {}; function onPointerMove(e) { const x = e.offsetX; const y = e.offsetY; if (activeTouches[e.pointerId] === undefined) { activeTouches[e.pointerId] = { current: [x, y] }; return; } activeTouches[e.pointerId].last = activeTouches[e.pointerId].current; activeTouches[e.pointerId].current = [x, y]; const { current, last } = activeTouches[e.pointerId]; if (current[0] == last[0] && current[1] == last[1]) { return; } touch.setUniform("u_vector", [ current[0] - last[0], -(current[1] - last[1]) ]); composer.stepSegment({ program: touch, input: velocityState, output: velocityState, position1: [current[0], canvas.clientHeight - current[1]], position2: [last[0], canvas.clientHeight - last[1]], thickness: 30, endCaps: true }); } function onPointerStop(e) { delete activeTouches[e.pointerId]; } canvas.addEventListener("pointermove", onPointerMove); canvas.addEventListener("pointerup", onPointerStop); canvas.addEventListener("pointerout", onPointerStop); canvas.addEventListener("pointercancel", onPointerStop); /** * Screenshot **/ function savePNG() { shouldSavePNG = true; } viewof fluidSimScreenshot.addEventListener("input", savePNG); /** * UI interaction update **/ function stateUpdate() { Object.assign(PARAMS, viewof fluidSimParams.value); fadeTrails.setUniform("u_increment", -1 / PARAMS.trailLength); } viewof fluidSimParams.addEventListener("input", stateUpdate); /** * Resource cleanup **/ invalidation.then(() => { canvas.removeEventListener("pointermove", onPointerMove); canvas.removeEventListener("pointerup", onPointerStop); canvas.removeEventListener("pointerout", onPointerStop); canvas.removeEventListener("pointercancel", onPointerStop); viewof fluidSimParams.removeEventListener("input", stateUpdate); viewof fluidSimScreenshot.removeEventListener("input", savePNG); velocityState.dispose(); divergenceState.dispose(); pressureState.dispose(); particlePositionState.dispose(); particleInitialState.dispose(); particleAgeState.dispose(); trailState.dispose(); advection.dispose(); divergence2D.dispose(); jacobi.dispose(); gradientSubtraction.dispose(); renderParticles.dispose(); ageParticles.dispose(); advectParticles.dispose(); renderTrails.dispose(); fadeTrails.dispose(); renderPressure.dispose(); touch.dispose(); composer.dispose(); }); // Simulation/render loop. while (true) { loop(); yield visibility(canvas); } }38:T4988,{ const { GPUComposer, GPUProgram, GPULayer, GPUIndexBuffer, FLOAT, INT, REPEAT, copyProgram, LINEAR, NEAREST, GLSL3 } = gpuio; const { Scene, PerspectiveCamera, WebGLRenderer, BufferGeometry, MeshBasicMaterial, Mesh, Texture, BufferAttribute, OrbitControls, DoubleSide, Color, LineSegments, PlaneGeometry } = THREE; const glslVersion = GLSL3; const PARAMS = viewof wave2dParams.value; // Size of the simulation. const TEXTURE_DIM = [100, 100]; const CAUSTICS_TEXTURE_SCALE_FACTOR = 6; // Increase in resolution of caustics texture from TEXTURE_DIM. // Some simulation constants. // https://beltoforion.de/en/recreational_mathematics/2d-wave-equation.php const DT = 1; const DX = 1; const DECAY = 0.005; // Drop parameters. const NUM_FRAMES_BETWEEN_DROPS = 150; const DROP_DIAMETER = 10; // Grid mesh amplitude scale. const GRID_MESH_Y_SCALE = 3; // Colors. const BACKGROUND_COLOR = [54 / 255, 122 / 255, 149 / 255]; // Turquoise color. let paused = false; // Init threejs objects. const scene = new Scene(); scene.background = new Color(0xdddddd); const camera = new PerspectiveCamera(45, 16 / 9, 0.1, 1000); camera.zoom = 7; camera.position.set(1, 1, 1); const renderer = new WebGLRenderer({ antialias: true }); const hgt = ~~((width * 9) / 16); renderer.setSize(width, hgt); const canvas = renderer.domElement; yield visibility(canvas); const controls = new OrbitControls(camera, canvas); controls.enablePan = false; // Init a plane with texture containing the caustics simulation rendered in color. const planeTexture = new Texture(); const plane = new Mesh( new PlaneGeometry(1.1, 1.1), new MeshBasicMaterial({ map: planeTexture, side: DoubleSide, transparent: true }) ); plane.rotateX(-Math.PI / 2); plane.rotateZ(-Math.PI / 2); plane.position.y = (-PARAMS.separation / TEXTURE_DIM[0]) * 0.5; scene.add(plane); // Init 3D grid surface rendering simulation as height. const gridPositions = new Float32Array(3 * TEXTURE_DIM[0] * TEXTURE_DIM[1]); const gridSegmentsIndices = new Uint16Array( 2 * ((TEXTURE_DIM[0] - 1) * TEXTURE_DIM[1] + (TEXTURE_DIM[1] - 1) * TEXTURE_DIM[0]) ); const gridMeshIndices = new Uint16Array( 6 * (TEXTURE_DIM[0] - 1) * (TEXTURE_DIM[1] - 1) ); let gridSegmentIndex = 0; let gridMeshIndex = 0; for (let j = 0; j < TEXTURE_DIM[1]; j++) { for (let i = 0; i < TEXTURE_DIM[0]; i++) { const index = TEXTURE_DIM[0] * i + j; // Set the x and z values of gridPositions array (y is up). gridPositions[3 * index] = (i - (TEXTURE_DIM[0] - 1) / 2) / TEXTURE_DIM[0]; gridPositions[3 * index + 2] = (j - (TEXTURE_DIM[1] - 1) / 2) / TEXTURE_DIM[1]; // Form line segments of the grid mesh. if (j < TEXTURE_DIM[1] - 1) { gridSegmentsIndices[2 * gridSegmentIndex] = index; gridSegmentsIndices[2 * gridSegmentIndex + 1] = index + 1; gridSegmentIndex += 1; } if (i < TEXTURE_DIM[0] - 1) { gridSegmentsIndices[2 * gridSegmentIndex] = index; gridSegmentsIndices[2 * gridSegmentIndex + 1] = index + TEXTURE_DIM[0]; gridSegmentIndex += 1; } if (i < TEXTURE_DIM[0] - 1 && j < TEXTURE_DIM[1] - 1) { // Form triangles of grid mesh. gridMeshIndices[3 * gridMeshIndex] = index; gridMeshIndices[3 * gridMeshIndex + 1] = index + 1; gridMeshIndices[3 * gridMeshIndex + 2] = index + TEXTURE_DIM[0]; gridMeshIndex += 1; gridMeshIndices[3 * gridMeshIndex] = index + 1; gridMeshIndices[3 * gridMeshIndex + 1] = index + TEXTURE_DIM[0] + 1; gridMeshIndices[3 * gridMeshIndex + 2] = index + TEXTURE_DIM[0]; gridMeshIndex += 1; } } } // Vertex shader pulls info stored in u_height texture and uses this to update vertex height. const vertexShader = ` uniform sampler2D u_height; uniform ivec2 u_heightDimensions; vec2 getTextureUV(const int vertexIndex, const ivec2 dimensions) { int y = vertexIndex / dimensions.x; int x = vertexIndex - dimensions.x * y; float u = (float(x) + 0.5) / float(dimensions.x); float v = (float(y) + 0.5) / float(dimensions.y); return vec2(u, v); } void main() { vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0); vec4 position = projectionMatrix * modelViewPosition; vec2 uv = getTextureUV(gl_VertexID, u_heightDimensions); // Set height of grid mesh using data from gpu-io simulation. position.y += ${GRID_MESH_Y_SCALE.toFixed(6)} * texture(u_height, uv).x; gl_Position = position; } `; // Init black line segments to visualize grid. const gridSegmentsGeometry = new BufferGeometry(); gridSegmentsGeometry.setAttribute( "position", new BufferAttribute(gridPositions, 3) ); gridSegmentsGeometry.setIndex(new BufferAttribute(gridSegmentsIndices, 1)); const gridTexture = new Texture(); const gridSegmentsMaterial = new THREE.ShaderMaterial({ uniforms: { u_height: { value: gridTexture }, u_heightDimensions: { value: TEXTURE_DIM } }, vertexShader, fragmentShader: ` out vec4 out_color; void main() { out_color = vec4(0, 0, 0, 1); } `, glslVersion: THREE.GLSL3 }); const gridSegments = new LineSegments( gridSegmentsGeometry, gridSegmentsMaterial ); gridSegments.position.y = (PARAMS.separation / TEXTURE_DIM[0]) * 0.5; scene.add(gridSegments); // Init white semi-transparent mesh under grid. const gridMeshGeometry = new BufferGeometry(); gridMeshGeometry.setAttribute( "position", gridSegmentsGeometry.getAttribute("position") ); gridMeshGeometry.setIndex(new BufferAttribute(gridMeshIndices, 1)); const gridMeshMaterial = new THREE.ShaderMaterial({ uniforms: { u_height: { value: gridTexture }, u_heightDimensions: { value: TEXTURE_DIM } }, vertexShader, fragmentShader: ` out vec4 out_color; void main() { out_color = vec4(1, 1, 1, 0.7); } `, glslVersion: THREE.GLSL3, transparent: true }); const gridMesh = new Mesh(gridMeshGeometry, gridMeshMaterial); gridMesh.position.y = (PARAMS.separation / TEXTURE_DIM[0]) * 0.5; scene.add(gridMesh); const composer = GPUComposer.initWithThreeRenderer(renderer, { glslVersion }); // Undo any changes threejs has made to WebGL state. composer.undoThreeState(); // Init a layer of float data to store height. // I'm using a trick to use both the currentState and lastState of this GPULayer // as inputs to the wave function GPUProgram. You could also store these as separate // GPULayers if you wanted. const height = new GPULayer(composer, { name: "height", dimensions: TEXTURE_DIM, numComponents: 1, // x component is height. type: FLOAT, filter: NEAREST, // Prefer NEAREST filtering if you do not need to measure subpixel values. numBuffers: 3, // Use 3 buffers so we can pass currentState + lastState as inputs and write to the third buffer. wrapX: REPEAT, wrapY: REPEAT }); // On each render cycle, we will render the height into a single channel texture. // This is what we will bind to a threejs texture mapped to the mesh. const heightMap = new GPULayer(composer, { name: "heightMap", dimensions: TEXTURE_DIM, numComponents: 1, type: FLOAT, filter: NEAREST }); // Link heightMap's WebGLTexure to threejs Texture object. heightMap.attachToThreeTexture(gridTexture); // On each render cycle, compute caustics into an RGBA texture. const caustics = new GPULayer(composer, { name: "caustics", dimensions: [ TEXTURE_DIM[0] * CAUSTICS_TEXTURE_SCALE_FACTOR, TEXTURE_DIM[1] * CAUSTICS_TEXTURE_SCALE_FACTOR ], numComponents: 4, // RGBA type: FLOAT, filter: LINEAR }); // Link caustics WebGLTexure to threejs Texture object. caustics.attachToThreeTexture(planeTexture); // In order to compute caustics intensity in realtime // we use a 2D mesh to push a wavefront of light through the water's surface // and measure the distortion in the mesh to compute the intensity of light hitting the bottom plane. // See https://medium.com/@evanwallace/rendering-realtime-caustics-in-webgl-2a99a29a0b2c const lightMeshPositions = new GPULayer(composer, { name: "lightMeshPositions", dimensions: TEXTURE_DIM, numComponents: 2, type: FLOAT, filter: NEAREST }); // Init gpu-io buffer for triangle indices for this light wavefront mesh. // We can reuse the same mesh indices we used for our threejs mesh. const lightMeshIndices = new GPUIndexBuffer(composer, { indices: gridMeshIndices }); // Init a program to solve wave function. const waveProgram = new GPUProgram(composer, { name: "wave", fragmentShader: ` in vec2 v_uv; uniform sampler2D u_height; uniform sampler2D u_lastHeight; uniform vec2 u_pxSize; uniform float u_alpha; out float out_result; void main() { // Compute the discrete Laplacian on the height. // https://en.wikipedia.org/wiki/Discrete_Laplace_operator float current = texture(u_height, v_uv).x; float last = texture(u_lastHeight, v_uv).x; vec2 onePxX = vec2(u_pxSize.x, 0); vec2 onePxY = vec2(0, u_pxSize.y); float n = texture(u_height, v_uv + onePxY).x; float s = texture(u_height, v_uv - onePxY).x; float e = texture(u_height, v_uv + onePxX).x; float w = texture(u_height, v_uv - onePxX).x; // Solve discrete wave equation. float laplacian = n + s + e + w - 4.0 * current; // Add a decay factor slightly less than 1 to dampen. out_result = ${(1 - DECAY).toFixed( 6 )} * (u_alpha * laplacian + 2.0 * current - last); } `, uniforms: [ { // Index of sampler2D uniform to assign to value "u_height". name: "u_height", value: 0, type: INT }, { // Index of sampler2D uniform to assign to value "u_lastHeight". name: "u_lastHeight", value: 1, type: INT }, { // Calculate the size of a 1 px step in UV coordinates. name: "u_pxSize", value: [1 / TEXTURE_DIM[0], 1 / TEXTURE_DIM[1]], type: FLOAT }, { // Constant that controls wave propagation speed. name: "u_alpha", value: ((PARAMS.c * DT) / DX) ** 2, type: FLOAT } ] }); // Init a program to initialize height state in a small drop area. const dropProgram = new GPUProgram(composer, { name: "drop", fragmentShader: ` // We get v_uv_local when calling programs via stepCircle(). // It gives the uv coordinates in the local reference frame of the circle. // See https://github.com/amandaghassaei/gpu-io/blob/main/docs/GLSL.md#fragment-shader-inputs in vec2 v_uv_local; out float out_height; void main() { // Calculate height so that it's tallest in the center and // tapers down toward the outside of the circle. // Use dist from center (vec2(0.5)) to compute this. vec2 vector = v_uv_local - vec2(0.5); out_height = 1.0 - 2.0 * length(vector); } ` }); const refractLight = new GPUProgram(composer, { name: "refractLight", fragmentShader: ` in vec2 v_uv; uniform sampler2D u_height; uniform vec2 u_dimensions; uniform float u_separation; uniform vec2 u_pxSize; out vec2 out_position; void main() { // Calculate a normal vector for height field. vec2 onePxX = vec2(u_pxSize.x, 0); vec2 onePxY = vec2(0, u_pxSize.y); float center = texture(u_height, v_uv).x; float n = texture(u_height, v_uv + onePxY).x; float s = texture(u_height, v_uv - onePxY).x; float e = texture(u_height, v_uv + onePxX).x; float w = texture(u_height, v_uv - onePxX).x; vec2 normalXY = vec2(w - e, s - n) / 2.0; // Clip normal amplitude to prevent triangle overlap / issues with triangle rendering order. normalXY *= min(0.0075 / length(normalXY), 1.0); vec3 normal = normalize(vec3(normalXY, 1.0)); const vec3 incident = vec3(0, 0, -1); // 1 / 1.33 = Air refractive index / water refractive index. vec3 refractVector = refract(incident, normal, ${(1 / 1.33).toFixed(6)}); refractVector.xy /= abs(refractVector.z); // Render this out slightly smaller so we can see raw edge of caustic pattern. // Also add a scaling factor of 0.15 to reduce caustic distortion. out_position = (0.9 * (v_uv + refractVector.xy * u_separation * 0.15) + 0.05) * u_dimensions; } `, uniforms: [ { // Index of sampler2D uniform to assign to value "u_height". name: "u_height", value: 0, type: INT }, { // Calculate the size of a 1 px step in UV coordinates of u_height. name: "u_pxSize", value: [1 / TEXTURE_DIM[0], 1 / TEXTURE_DIM[1]], type: FLOAT }, { // Dimensions of output GPULayer. name: "u_dimensions", value: [caustics.width, caustics.height], type: FLOAT }, { // Separation between water surface and caustics projection. name: "u_separation", value: PARAMS.separation, type: FLOAT } ] }); const computeCaustics = new GPUProgram(composer, { name: "computeCaustics", fragmentShader: ` in vec2 v_uv; in vec2 v_uv_position; uniform vec2 u_pxSize; out vec4 out_color; void main() { // Calculate change in area. // https://medium.com/@evanwallace/rendering-realtime-caustics-in-webgl-2a99a29a0b2c float oldArea = dFdx(v_uv_position.x) * dFdy(v_uv_position.y); float newArea = dFdx(v_uv.x) * dFdy(v_uv.y); float amplitude = oldArea / newArea * 0.75; /// 0.75 is a small scaling factor of light intensity. const vec3 background = vec3(${BACKGROUND_COLOR[0]}, ${BACKGROUND_COLOR[1]}, ${BACKGROUND_COLOR[2]}); out_color = vec4(background * amplitude, 1); } ` }); // Init a program to render height to heightMap. // We can just use a simple copy operation for this. const copy = copyProgram(composer, { name: "copy", type: height.type, components: "x" }); let numFramesUntilNextDrop = NUM_FRAMES_BETWEEN_DROPS; function addDrop() { // Initialize a circular region with a drop of height > 0 at a random position. const position = [ (TEXTURE_DIM[0] - 2 * DROP_DIAMETER) * Math.random() + DROP_DIAMETER, (TEXTURE_DIM[1] - 2 * DROP_DIAMETER) * Math.random() + DROP_DIAMETER ]; // We need to be sure to write drop height to both lastState and currentState. // Write drop to lastState. height.decrementBufferIndex(); composer.stepCircle({ program: dropProgram, position, diameter: DROP_DIAMETER, output: height, useOutputScale: true // Use the same px scale size as the output GPULayer (otherwise it uses screen px). }); // Write drop to currentState. height.incrementBufferIndex(); composer.stepCircle({ program: dropProgram, position, diameter: DROP_DIAMETER, output: height, useOutputScale: true // Use the same px scale size as the output GPULayer (otherwise it uses screen px). }); // Reset drop counter. numFramesUntilNextDrop = NUM_FRAMES_BETWEEN_DROPS; } // Simulation/render loop. function loop() { // Update wave function simulation. if (!paused) { // Add a drop. if (--numFramesUntilNextDrop <= 0) { addDrop(); } // Propagate wave and write result to height. composer.step({ program: waveProgram, input: [height.currentState, height.lastState], output: height }); // Copy current height to heightMap. // heightMap is sampled by the threejs gridSegments and gridMesh vertex shaders. composer.step({ program: copy, input: height, output: heightMap }); // Compute caustics. // Refract light wavefront mesh through water surface. composer.step({ program: refractLight, input: height, output: lightMeshPositions }); caustics.clear(); // Render light wavefront mesh to caustics. // caustics is already linked to threejs planeTexture. composer.drawLayerAsMesh({ layer: lightMeshPositions, indices: lightMeshIndices, program: computeCaustics, output: caustics, useOutputScale: true // Use the same px scale size as the output GPULayer (otherwise it uses screen px). }); } // // Slowly rotate the sim. // const rotationSpeed = 0.0025; // plane.rotateZ(rotationSpeed); // gridMesh.rotateY(rotationSpeed); // gridSegments.rotateY(rotationSpeed); // Reset three state back to what threejs is expecting (otherwise we get WebGL errors). composer.resetThreeState(); // Render threejs state. renderer.render(scene, camera); // Undo any changes threejs has made to WebGL state. composer.undoThreeState(); } /** * Clean up resources */ invalidation.then(() => { renderer.dispose(); controls.dispose(); plane.geometry.dispose(); planeTexture.dispose(); plane.material.dispose(); gridSegments.geometry.dispose(); gridMesh.geometry.dispose(); gridTexture.dispose(); gridSegments.material.dispose(); gridMesh.material.dispose(); height.dispose(); heightMap.dispose(); lightMeshIndices.dispose(); waveProgram.dispose(); dropProgram.dispose(); refractLight.dispose(); computeCaustics.dispose(); copy.dispose(); composer.dispose(); }); /** * Screenshots **/ function savePNG() { let _paused = paused; paused = true; loop(); // Refresh rendering. paused = _paused; composer.savePNG({ filename: `threejs_scene` }); } function saveTexturePNG() { caustics.savePNG({ filename: "caustics" }); } waveScreenshot.oninput = savePNG; waveTextureSave.oninput = saveTexturePNG; /** * UI interaction update **/ function stateUpdate() { Object.assign(PARAMS, viewof wave2dParams.value); waveProgram.setUniform("u_alpha", ((PARAMS.c * DT) / DX) ** 2); refractLight.setUniform("u_separation", PARAMS.separation); plane.position.y = (-PARAMS.separation / TEXTURE_DIM[0]) * 0.5; gridSegments.position.y = (PARAMS.separation / TEXTURE_DIM[0]) * 0.5; gridMesh.position.y = (PARAMS.separation / TEXTURE_DIM[0]) * 0.5; } viewof wave2dParams.addEventListener("input", stateUpdate); // Simulation/render loop. while (true) { loop(); yield visibility(canvas); } }39:[{"id":"6bb5e8d5a6f9d673c13736e4071d7753f0c9850f4c0993c4f9691135280420f2cdcb6a5a161be8d9bd3881f37d53852c25f5b5baf1c31ccf9dbc7ece9f0d5dd6","href":"https://static.observableusercontent.com/files/6bb5e8d5a6f9d673c13736e4071d7753f0c9850f4c0993c4f9691135280420f2cdcb6a5a161be8d9bd3881f37d53852c25f5b5baf1c31ccf9dbc7ece9f0d5dd6","name":"sample8.png","type":"image/png","lastModified":1672085954177.693,"size":1596745},{"id":"2109b8b1463aa222692cf59e7aa8f37dcc8ba2a58068cb6e40443aede9a2e5533c35bd5682022008bd51d3645c44644eed201633544e624da0d897d173d0b509","href":"https://static.observableusercontent.com/files/2109b8b1463aa222692cf59e7aa8f37dcc8ba2a58068cb6e40443aede9a2e5533c35bd5682022008bd51d3645c44644eed201633544e624da0d897d173d0b509","name":"sample5.png","type":"image/png","lastModified":1672085954388.105,"size":2049974},{"id":"7ab6d67de584e80957b77b4b4ed78673f7ae7d910066e80a006a6ed1f7d8c655650b9b3c1535f63abd58d58dd5a3851ae59366cd3170c0f4706463d8d82d26e3","href":"https://static.observableusercontent.com/files/7ab6d67de584e80957b77b4b4ed78673f7ae7d910066e80a006a6ed1f7d8c655650b9b3c1535f63abd58d58dd5a3851ae59366cd3170c0f4706463d8d82d26e3","name":"sample7.png","type":"image/png","lastModified":1672085954263.889,"size":1514563},{"id":"3c79a0e92011c4c033b76dbf965ad77f8b30492c27d2cf24354bb1ffab827d828ee407daf074466ce7d851b1ff74b127299fb1940f8b5622a164df7764f14163","href":"https://static.observableusercontent.com/files/3c79a0e92011c4c033b76dbf965ad77f8b30492c27d2cf24354bb1ffab827d828ee407daf074466ce7d851b1ff74b127299fb1940f8b5622a164df7764f14163","name":"sample6.png","type":"image/png","lastModified":1672085954245.698,"size":1470213},{"id":"ed5ff5024263636f6435af20e060b2dce3cdea70b1cae78bba28736970dc1f17bf389a4b478a5120108a5f9c2bf13698878bbfe8c7320ca4f7e47495b9911042","href":"https://static.observableusercontent.com/files/ed5ff5024263636f6435af20e060b2dce3cdea70b1cae78bba28736970dc1f17bf389a4b478a5120108a5f9c2bf13698878bbfe8c7320ca4f7e47495b9911042","name":"sample11.png","type":"image/png","lastModified":1672085954138.318,"size":1230606},{"id":"6a755190fd070505d9df121e063ebfbc558970edde06a5ff9485e3294f18a6e51d771f91d67b63fd8ced4edcc3ca9bbed699e79854881a4b95d1abab63b18c55","href":"https://static.observableusercontent.com/files/6a755190fd070505d9df121e063ebfbc558970edde06a5ff9485e3294f18a6e51d771f91d67b63fd8ced4edcc3ca9bbed699e79854881a4b95d1abab63b18c55","name":"sample4.png","type":"image/png","lastModified":1672085953096.175,"size":185260},{"id":"e5172d9f6fa51aa441a0d5e2e45e42bf58f4d0e13b8b34949baf81ea74c9e198a951dee0669e31346f3a17727c4dee9445ec2a6fff459513e5c1d0eb7ae22afa","href":"https://static.observableusercontent.com/files/e5172d9f6fa51aa441a0d5e2e45e42bf58f4d0e13b8b34949baf81ea74c9e198a951dee0669e31346f3a17727c4dee9445ec2a6fff459513e5c1d0eb7ae22afa","name":"sample2.png","type":"image/png","lastModified":1672085953487.839,"size":460217},{"id":"fa2c73585baae324b6e8472c96765f80264db506a7a8e2ad40fd5f40ccfd6a7fe25dc71427f363ae85a04b78ea356dbfbae57ebab99afea0e50db5a0a9c821be","href":"https://static.observableusercontent.com/files/fa2c73585baae324b6e8472c96765f80264db506a7a8e2ad40fd5f40ccfd6a7fe25dc71427f363ae85a04b78ea356dbfbae57ebab99afea0e50db5a0a9c821be","name":"sample1.png","type":"image/png","lastModified":1672085954060.777,"size":1142554},{"id":"4c1bb0307299fcd88447463f790cffd46c524240fb688db45a20e691337c8d1972ef61667686474630a6209a54a99e96fc96a53c4c2d9313db2ea186af0bf29f","href":"https://static.observableusercontent.com/files/4c1bb0307299fcd88447463f790cffd46c524240fb688db45a20e691337c8d1972ef61667686474630a6209a54a99e96fc96a53c4c2d9313db2ea186af0bf29f","name":"sample9.png","type":"image/png","lastModified":1672085953992.732,"size":881624},{"id":"de6abe95b39a685e5a5fcba6bfed522471e95f663ec6e142f6b049dcd44ba6765805789f8e7213149a583d740d3399e5f07d3809c00be6f64809ef6d033bff71","href":"https://static.observableusercontent.com/files/de6abe95b39a685e5a5fcba6bfed522471e95f663ec6e142f6b049dcd44ba6765805789f8e7213149a583d740d3399e5f07d3809c00be6f64809ef6d033bff71","name":"sample10.png","type":"image/png","lastModified":1672085953785.172,"size":723466},{"id":"542b70ac2309100893cd860c472bdc3fbe1ec4faddc8f9f1e553e4ce52e9023cb1155ed9685f4daeebac743208c4ed550ee702aa545862a987659b90882d3906","href":"https://static.observableusercontent.com/files/542b70ac2309100893cd860c472bdc3fbe1ec4faddc8f9f1e553e4ce52e9023cb1155ed9685f4daeebac743208c4ed550ee702aa545862a987659b90882d3906","name":"sample3.png","type":"image/png","lastModified":1672085953259.78,"size":310718},{"id":"0b4c9d85d80d15492eef6b1a9062258f6c1bed7fbe3b834e0904da34f66c98f29ee16385b034d63856bb0c3270a2b5a57c0c93fe928d5804ea2412ea4424b04e","href":"https://static.observableusercontent.com/files/0b4c9d85d80d15492eef6b1a9062258f6c1bed7fbe3b834e0904da34f66c98f29ee16385b034d63856bb0c3270a2b5a57c0c93fe928d5804ea2412ea4424b04e","name":"sample12.png","type":"image/png","lastModified":1672085952812.402,"size":61298}] 2e:{"title":"GPU-IO","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":384,"value":"carousel(\n [\n await FileAttachment(\"sample1.png\").image(),\n await FileAttachment(\"sample2.png\").image(),\n await FileAttachment(\"sample3.png\").image(),\n await FileAttachment(\"sample4.png\").image(),\n await FileAttachment(\"sample5.png\").image(),\n await FileAttachment(\"sample6.png\").image(),\n await FileAttachment(\"sample7.png\").image(),\n await FileAttachment(\"sample8.png\").image(),\n await FileAttachment(\"sample9.png\").image(),\n await FileAttachment(\"sample10.png\").image(),\n await FileAttachment(\"sample11.png\").image(),\n await FileAttachment(\"sample12.png\").image()\n ],\n {\n translateZ: 400,\n perspective: 600,\n background: \"rgba(0, 0, 0, 0)\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"## Library imports\n\nThe Three library is required only for the Wave 2D demo.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"gpuio = require(\"gpu-io\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"THREE = {\n const THREE = (window.THREE = await require(\"three@0.146\"));\n await require(\"three@0.146/examples/js/controls/OrbitControls.js\").catch(\n () => {}\n );\n return THREE;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":381,"value":"import { carousel } from \"@esperanc/image-carousel\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"## A palette-based renderer\n\nJust to make sure I understood the gist of how to write a custom rendering program, I wrote this palette-based renderer based on an [idea by Inigo Quilez](https://iquilezles.org/articles/palettes/), so that we can add some color to the otherwise grayscale-based demos. You will notice an added render parameter called \"palette\" in some of the examples below, which allows you to select one of 7 color palettes in addition to the usual monochrome.","pinned":false,"hidden":false,"mode":"md"},{"id":273,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"
\n## The Readme demo\n\nThe first demo is a simple Laplacian diffusion shader, shown in [GPU-IO's](https://github.com/amandaghassaei/gpu-io) landing page. It starts with a white noise texture which is diffused progressively.","pinned":false,"hidden":false,"mode":"md"},{"id":277,"value":"viewof readmeParams = Inputs.form({\n palette: Inputs.select([0, 1, 2, 3, 4, 5, 6, 7], {\n label: \"Palette\",\n value: 0,\n format: (d) => [\"Black and White\", \"A\", \"B\", \"C\", \"D\", \"E\", \"F\", \"G\"][d]\n }),\n amplitude: Inputs.range([0, 3], {\n label: \"Amplitude\",\n value: 1,\n step: 0.01\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"viewof readmeDemoRefresh = Inputs.button(\"refresh\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"
\n## Reaction-diffusion demo\n\nFrom the [GPU-IO examples](https://apps.amandaghassaei.com/gpu-io/examples/) page:\n>This app simulates a simple reaction-diffusion system, where two virtual chemicals interact to create dynamic patterns. Similar systems were proposed by Alan Turing in 1952 as a mechanism for pattern formation in plants and animals. This reaction-diffusion system is particularly sensitive to two parameters: K (varies along x-axis) and F (varies along y-axis). You can interactively explore regions of K,F parameter space by zooming and panning across the screen.\n\nOriginal demo at [apps.amandaghassaei.com/gpu-io/examples/reaction-diffusion/](https://apps.amandaghassaei.com/gpu-io/examples/reaction-diffusion/)","pinned":false,"hidden":false,"mode":"md"},{"id":341,"value":"viewof RdDemoParams = (rdDemoRefresh,\nInputs.form({\n diffusionA: Inputs.range([0.05, 0.22], {\n label: \"Diffusion A\",\n step: 0.001,\n value: 0.2097\n }),\n diffusionB: Inputs.range([0.05, 0.22], {\n label: \"Diffusion B\",\n step: 0.0001,\n value: 0.105\n }),\n removalRateMin: Inputs.range([0, 0.1], {\n label: \"Removal rate min\",\n step: 0.001,\n value: 0.05\n }),\n removalRateMax: Inputs.range([0, 0.1], {\n label: \"Removal rate max\",\n step: 0.001,\n value: 0.066\n }),\n feedRateMin: Inputs.range([0, 0.1], {\n label: \"Feed rate min\",\n step: 0.001,\n value: 0.016\n }),\n feedRateMax: Inputs.range([0, 0.1], {\n label: \"Feed rate max\",\n step: 0.001,\n value: 0.044\n }),\n renderLayer: Inputs.select([\"Chemical A\", \"Chemical B\"], {\n label: \"Render layer\",\n value: \"Chemical B\"\n }),\n palette: Inputs.select([0, 1, 2, 3, 4, 5, 6, 7], {\n label: \"Palette\",\n value: 0,\n format: (d) => [\"Black and White\", \"A\", \"B\", \"C\", \"D\", \"E\", \"F\", \"G\"][d]\n }),\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"viewof rdDemoRefresh = Inputs.button(\"refresh\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"viewof rdScreenshot = Inputs.button(\"screenshot\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"
\n## The Physarum transport networks example\n\nFrom the [GPU-IO examples](https://apps.amandaghassaei.com/gpu-io/examples/) page:\n\n>This app simulates the network effects of a multicellular slime mold (Physarum polycephalum), based on a [2010 paper by Jeff Jones](https://doi.org/10.1162/artl.2010.16.2.16202): \"Characteristics of pattern formation and evolution in approximations of Physarum transport networks\" and [work by Sage Jenson](https://cargocollective.com/sagejenson/physarum). In this simulation, simple particle \"agents\" interact with an underlying field of chemical attractants to form complex, emergent behaviors.","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"viewof physarumParams = {\n const form = Inputs.form({\n decayFactor: Inputs.range([0, 1], { value: 0.9, label: \"Decay Factor\" }),\n depositAmount: Inputs.range([0, 10], { value: 4, label: \"Deposit Amount\" }),\n particleDensity: Inputs.range([0, 1], {\n value: 0.35,\n label: \"Particle Density\"\n }),\n sensorDistance: Inputs.range([1, 30], {\n value: 18,\n label: \"Sensor Distance\"\n }),\n sensorAngle: Inputs.range([-90, 90], { value: 5.5, label: \"Sensor Angle\" }),\n stepSize: Inputs.range([0.01, 3], { value: 2, label: \"Step Size\" }),\n rotationAngle: Inputs.range([-90, 90], {\n value: 45,\n label: \"Rotation Angle\"\n }),\n renderAmplitude: Inputs.range([0, 1], {\n value: 0.03,\n label: \"Render Amplitude\",\n step: 0.001\n }),\n palette: Inputs.select([0, 1, 2, 3, 4, 5, 6, 7], {\n label: \"Palette\",\n value: 0,\n format: (d) => [\"Black and White\", \"A\", \"B\", \"C\", \"D\", \"E\", \"F\", \"G\"][d]\n })\n });\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"viewof physarumDemoRefresh = Inputs.button(\"refresh\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"viewof physarumScreenshot = Inputs.button(\"screenshot\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"
\n## The Fractal (Julia Set) example\n\nA Julia set renderer. Mouse wheel zooms and mouse drag pans. I changed the interaction code slightly in order to deal better with mouse input.","pinned":false,"hidden":false,"mode":"md"},{"id":96,"value":"viewof fractalParams = {\n fractalDemoRefresh;\n const form = Inputs.form({\n cReal: Inputs.range([-2, 2], { value: 0.38, label: \"C Real\", step: 0.001 }),\n cImaginary: Inputs.range([-2, 2], {\n value: -0.23,\n label: \"C Imaginary\",\n step: 0.001\n }),\n maxIters: Inputs.range([1, 1000], {\n value: 500,\n label: \"Iterations\",\n step: 1\n }),\n renderAmplitude: Inputs.range([0, 2], {\n value: 1.0,\n label: \"Render Amplitude\",\n step: 0.001\n }),\n palette: Inputs.select([0, 1, 2, 3, 4, 5, 6, 7], {\n label: \"Palette\",\n value: 0,\n format: (d) => [\"Black and White\", \"A\", \"B\", \"C\", \"D\", \"E\", \"F\", \"G\"][d]\n })\n });\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"viewof fractalDemoRefresh = Inputs.button(\"refresh\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"viewof fractalScreenshot = Inputs.button(\"screenshot\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"
\n## The Fluid Simulation example\n\nFrom the [GPU-IO examples](https://apps.amandaghassaei.com/gpu-io/examples/) page:\n\n>This simulation solves the [Navier-Stokes equations](https://en.wikipedia.org/wiki/Navier%E2%80%93Stokes_equations) for incompressible fluids. The fluid visualization includes thousands of [Lagrangian particles](https://en.wikipedia.org/wiki/Lagrangian_particle_tracking) that follow the velocity field and leave behind semi-transparent trails as they move.\n\nDrag your mouse around the screen to move particles.","pinned":false,"hidden":false,"mode":"md"},{"id":144,"value":"viewof fluidSimParams = {\n const form = Inputs.form({\n trailLength: Inputs.range([1, 100], {\n value: 15,\n label: \"Trail length\",\n step: 1\n }),\n render: Inputs.select([\"Fluid\", \"Pressure\", \"Velocity\"], {\n label: \"Render\",\n value: \"Fluid\"\n })\n });\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"viewof fluidDemoRefresh = Inputs.button(\"refresh\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"viewof fluidSimScreenshot = Inputs.button(\"screenshot\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"## The Wave2D example\n\nFrom the [GPU-IO examples](https://apps.amandaghassaei.com/gpu-io/examples/) page: \n\n>This app simulates the [2D wave equation](https://en.wikipedia.org/wiki/Wave_equation) and renders the resulting height field as a 3D mesh Additionally, it simulates realtime caustics formed by light shining through the 3D surface and renders the result as a texture ([method described in more detail by Evan Wallace](https://medium.com/@evanwallace/rendering-realtime-caustics-in-webgl-2a99a29a0b2c)). All computations are performed in gpu-io and the results are passed to [Three.js](https://threejs.org) without ever leaving the GPU.","pinned":false,"hidden":false,"mode":"md"},{"id":211,"value":"viewof wave2dParams = {\n const form = Inputs.form({\n c: Inputs.range([0.01, 0.5], {\n value: 0.2,\n label: \"speed\",\n step: 0.01\n }),\n separation: Inputs.range([10, 100], {\n value: 50,\n label: \"separation\",\n step: 1\n })\n });\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"waveScreenshot = Inputs.button(\"screenshot\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"waveTextureSave = Inputs.button(\"save texture\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}