2c:null 2d:["$","title",null,{"children":"Learning GPU-IO | Chuncheng | Observable"}] 32:T11f3,{ readmeDemoRefresh; // Restart when button clicked let { GPUComposer, GPULayer, GPUProgram, renderAmplitudeProgram, FLOAT, INT, REPEAT, NEAREST, LINEAR, addValueProgram } = 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: LINEAR, //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 * 2.0; 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 ); const deposit = addValueProgram(composer, { name: "deposit", type: state.type, value: 2 }); /** * 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: state, output: state, 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: state, output: state, position: currentPosition, diameter: TOUCH_DIAMETER }); activeTouches[e.pointerId] = currentPosition; } /** * Event handler setup **/ canvas.addEventListener("pointermove", onPointerMove); canvas.addEventListener("pointerdown", onPointerStart); canvas.addEventListener("pointerup", onPointerStop); canvas.addEventListener("pointerout", onPointerStop); canvas.addEventListener("pointercancel", onPointerStop); // 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:T4ca6,{ 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); console.log(NUM_PARTICLES); 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: 2, 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 vec2 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); vec2 multiplier = clamp(abs(velocity) * abs(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 vec2 out_color; void main() { out_color = max(texture(u_image, v_uv).xy + 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 background = vec3(0.2, 0.2, 0.2); vec3 particle = vec3(0.98, 0.922, 0.843); out_color = vec4(mix(background.x, particle.x, texture(u_trailState, v_uv).x), mix(background.y, particle.y, texture(u_trailState, v_uv).y), background.z, 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); console.log(PARAMS, -1 / PARAMS.trailLength); 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); } }34:T4c09,{ 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); console.log(NUM_PARTICLES); 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: LINEAR, 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); // float multiplier = clamp(abs(velocity).x * 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); console.log(PARAMS, -1 / PARAMS.trailLength); 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); } }35: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; }36:T3cd7,{ 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 }); // console.log(trail); // 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); } }37:T7a6,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 }, { name: "u_state", value: 0, type: INT } ] }); }38:[] 30:{"id":"ee1bd9b96fc4f5f2","slug":"learning-gpu-io","title":"Learning GPU-IO","thumbnail":"8e4ffd51dd120ab2e0bb4668fafba8e7dbf98eb5c28dea9bdb89d1ebf36e59b6","access_level":"public","create_time":"$D2023-01-04T12:53:20.776Z","update_time":"$D2023-04-18T06:00:31.248Z","view_time":null,"first_public_time":"$D2023-01-04T12:53:20.776Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024"},"version":229,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null}],"members":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"7a372bf651d9b6a4","slug":"gpu-io","title":"GPU-IO","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"type":"notebook","body":{"titling":"auto","title":"Learning GPU-IO","cells":[{"id":0,"value":"# Learning GPU-IO\n\nMake a better use for your GPU.\n\nThe project is copied from https://observablehq.com/@esperanc/gpu-io","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":191,"value":"---\n\n## Simple Diffusion\n\nDrag on the canvas to paint.\nThe diffusion process is operated.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":72,"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"viewof readmeDemoRefresh = Inputs.button(\"refresh\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"---\n\n## Fluid Field\n\nWave your mouse to trigger.\nSee the dynamic of the field.\n\nIn Pic1, the color shows the speed's projection.\nIn Pic2, the strengh shows the speed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":119,"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"viewof fluidDemoRefresh = Inputs.button(\"refresh\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"viewof fluidSimScreenshot = Inputs.button(\"screenshot\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"---\n\n## Self Origanization\n\nDrag on the canvas to set up the attracters.\nThe particles are self-origanizing and formulating the structures.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"viewof physarumDemoRefresh = Inputs.button(\"refresh\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"viewof physarumScreenshot = Inputs.button(\"screenshot\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"gpuio = require(\"gpu-io\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 31:"$30:body"