2b:null 2c:["$","title",null,{"children":"Compute Boids | AntV | Observable"}] 31:T231b,(async () => { const $canvas = createCanvas(); const deviceContribution = createDeviceContributionWebGPU(); const swapChain = await deviceContribution.createSwapChain($canvas); swapChain.configureSwapChain($canvas.width, $canvas.height); const device = swapChain.getDevice(); const { BufferUsage, BufferFrequencyHint, VertexStepMode, Format, PrimitiveTopology, TextureUsage, TransparentWhite, TransparentBlack, ChannelWriteMask, BlendMode, BlendFactor, CullMode, CompareMode, WrapMode, TexFilterMode, MipFilterMode } = deviceAPI; const { mat4, vec3 } = glMatrix; const renderProgram = device.createProgram({ vertex: { entryPoint: "vert_main", wgsl: ` struct VertexOutput { @builtin(position) position : vec4, @location(4) color : vec4, } @vertex fn vert_main( @location(0) a_particlePos : vec2, @location(1) a_particleVel : vec2, @location(2) a_pos : vec2 ) -> VertexOutput { let angle = -atan2(a_particleVel.x, a_particleVel.y); let pos = vec2( (a_pos.x * cos(angle)) - (a_pos.y * sin(angle)), (a_pos.x * sin(angle)) + (a_pos.y * cos(angle)) ); var output : VertexOutput; output.position = vec4(pos + a_particlePos, 0.0, 1.0); output.color = vec4( 1.0 - sin(angle + 1.0) - a_particleVel.y, pos.x * 100.0 - a_particleVel.y + 0.1, a_particleVel.x + cos(angle + 0.5), 1.0); return output; } ` }, fragment: { entryPoint: "frag_main", wgsl: ` @fragment fn frag_main(@location(4) color : vec4) -> @location(0) vec4 { return color; } ` } }); const computeProgram = device.createProgram({ compute: { wgsl: ` struct Particle { pos : vec2, vel : vec2, } struct SimParams { deltaT : f32, rule1Distance : f32, rule2Distance : f32, rule3Distance : f32, rule1Scale : f32, rule2Scale : f32, rule3Scale : f32, } struct Particles { particles : array, } @group(0) @binding(0) var params : SimParams; @group(2) @binding(0) var particlesA : Particles; @group(2) @binding(1) var particlesB : Particles; // https://github.com/austinEng/Project6-Vulkan-Flocking/blob/master/data/shaders/computeparticles/particle.comp @compute @workgroup_size(64) fn main(@builtin(global_invocation_id) GlobalInvocationID : vec3) { var index = GlobalInvocationID.x; var vPos = particlesA.particles[index].pos; var vVel = particlesA.particles[index].vel; var cMass = vec2(0.0); var cVel = vec2(0.0); var colVel = vec2(0.0); var cMassCount = 0u; var cVelCount = 0u; var pos : vec2; var vel : vec2; for (var i = 0u; i < arrayLength(&particlesA.particles); i++) { if (i == index) { continue; } pos = particlesA.particles[i].pos.xy; vel = particlesA.particles[i].vel.xy; if (distance(pos, vPos) < params.rule1Distance) { cMass += pos; cMassCount++; } if (distance(pos, vPos) < params.rule2Distance) { colVel -= pos - vPos; } if (distance(pos, vPos) < params.rule3Distance) { cVel += vel; cVelCount++; } } if (cMassCount > 0) { cMass = (cMass / vec2(f32(cMassCount))) - vPos; } if (cVelCount > 0) { cVel /= f32(cVelCount); } vVel += (cMass * params.rule1Scale) + (colVel * params.rule2Scale) + (cVel * params.rule3Scale); // clamp velocity for a more pleasing simulation vVel = normalize(vVel) * clamp(length(vVel), 0.0, 0.1); // kinematic update vPos = vPos + (vVel * params.deltaT); // Wrap around boundary if (vPos.x < -1.0) { vPos.x = 1.0; } if (vPos.x > 1.0) { vPos.x = -1.0; } if (vPos.y < -1.0) { vPos.y = 1.0; } if (vPos.y > 1.0) { vPos.y = -1.0; } // Write back particlesB.particles[index].pos = vPos; particlesB.particles[index].vel = vVel; } ` } }); const numParticles = 1500; const initialParticleData = new Float32Array(numParticles * 4); for (let i = 0; i < numParticles; ++i) { initialParticleData[4 * i + 0] = 2 * (Math.random() - 0.5); initialParticleData[4 * i + 1] = 2 * (Math.random() - 0.5); initialParticleData[4 * i + 2] = 2 * (Math.random() - 0.5) * 0.1; initialParticleData[4 * i + 3] = 2 * (Math.random() - 0.5) * 0.1; } const particleBuffers = []; for (let i = 0; i < 2; ++i) { particleBuffers[i] = device.createBuffer({ viewOrSize: initialParticleData, usage: BufferUsage.VERTEX | BufferUsage.STORAGE }); } const vertexBufferData = new Float32Array([ -0.01, -0.02, 0.01, -0.02, 0.0, 0.02 ]); const spriteVertexBuffer = device.createBuffer({ viewOrSize: vertexBufferData, usage: BufferUsage.VERTEX }); const uniformBuffer = device.createBuffer({ viewOrSize: 7 * Float32Array.BYTES_PER_ELEMENT, usage: BufferUsage.UNIFORM }); const inputLayout = device.createInputLayout({ vertexBufferDescriptors: [ { arrayStride: 4 * 4, stepMode: VertexStepMode.INSTANCE, attributes: [ { // instance position shaderLocation: 0, offset: 0, format: Format.F32_RG }, { // instance velocity shaderLocation: 1, offset: 4 * 2, format: Format.F32_RG } ] }, { arrayStride: 4 * 2, stepMode: VertexStepMode.VERTEX, attributes: [ { // vertex positions shaderLocation: 2, offset: 0, format: Format.F32_RG } ] } ], indexBufferFormat: null, program: renderProgram }); const renderPipeline = device.createRenderPipeline({ inputLayout, program: renderProgram, colorAttachmentFormats: [Format.U8_RGBA_RT] }); const computePipeline = device.createComputePipeline({ inputLayout: null, program: computeProgram }); const simParams = { deltaT: 0.04, rule1Distance: 0.1, rule2Distance: 0.025, rule3Distance: 0.025, rule1Scale: 0.02, rule2Scale: 0.05, rule3Scale: 0.005 }; const bindings = []; for (let i = 0; i < 2; ++i) { bindings[i] = device.createBindings({ pipeline: computePipeline, uniformBufferBindings: [ { binding: 0, buffer: uniformBuffer } ], storageBufferBindings: [ { binding: 0, buffer: particleBuffers[i] }, { binding: 1, buffer: particleBuffers[(i + 1) % 2] } ] }); } const renderTarget = device.createRenderTarget({ format: Format.U8_RGBA_RT, width: $canvas.width, height: $canvas.height }); device.setResourceName(renderTarget, "Main Render Target"); uniformBuffer.setSubData( 0, new Uint8Array( new Float32Array([ simParams.deltaT, simParams.rule1Distance, simParams.rule2Distance, simParams.rule3Distance, simParams.rule1Scale, simParams.rule2Scale, simParams.rule3Scale ]).buffer ) ); let id; let t = 0; const frame = () => { device.beginFrame(); const computePass = device.createComputePass(); computePass.setPipeline(computePipeline); computePass.setBindings(bindings[t % 2]); computePass.dispatchWorkgroups(Math.ceil(numParticles / 64)); device.submitPass(computePass); /** * An application should call getCurrentTexture() in the same task that renders to the canvas texture. * Otherwise, the texture could get destroyed by these steps before the application is finished rendering to it. */ const onscreenTexture = swapChain.getOnscreenTexture(); const renderPass = device.createRenderPass({ colorAttachment: [renderTarget], colorResolveTo: [onscreenTexture], colorClearColor: [TransparentWhite] }); renderPass.setPipeline(renderPipeline); renderPass.setVertexInput( inputLayout, [ { buffer: particleBuffers[(t + 1) % 2] }, { buffer: spriteVertexBuffer } ], null ); renderPass.setViewport(0, 0, $canvas.width, $canvas.height); renderPass.draw(3, numParticles); device.submitPass(renderPass); device.endFrame(); ++t; id = requestAnimationFrame(frame); }; frame(); invalidation.then(() => { if (id) { cancelAnimationFrame(id); } renderProgram.destroy(); computeProgram.destroy(); particleBuffers.forEach((buffer) => buffer.destroy()); uniformBuffer.destroy(); spriteVertexBuffer.destroy(); inputLayout.destroy(); renderPipeline.destroy(); computePipeline.destroy(); renderTarget.destroy(); device.destroy(); // For debug. device.checkForLeaks(); }); return $canvas; })()32:[] 2f:{"id":"2bd1c0668c8b80c8","slug":"compute-boids","title":"Compute Boids","thumbnail":"a203b1a8a0213096474105c9f8d67ae80faf21898bccf1872d17f9f39532176b","access_level":"public","create_time":"$D2023-12-22T05:32:42.081Z","update_time":"$D2024-03-19T11:41:28.365Z","view_time":null,"first_public_time":"$D2023-12-22T05:32:42.081Z","fork":{"id":"8d14847b25d5492d","slug":"water-caustics","title":"Water Caustics","owner":{"id":"96a4168c70a60e69","login":"antv","name":"AntV"}},"stars":0,"starred":false,"owner":{"type":"team","id":"96a4168c70a60e69","login":"antv","name":"AntV","avatar_url":"https://avatars-next.observableusercontent.com/9cfb1b3742d5fee0ae1105c158818aad1b91fd02751860be879c813cbaac3abf","tier":"starter_2024"},"version":172,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bf67d760eefcbffd","login":"xiaoiver","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f4a568df4cb69f834e43d657ac3e7239ed96aac8fb20e8c31c9c1ddcdf8b54a0","tier":null}],"members":[{"type":"team","id":"96a4168c70a60e69","login":"antv","name":"AntV","avatar_url":"https://avatars-next.observableusercontent.com/9cfb1b3742d5fee0ae1105c158818aad1b91fd02751860be879c813cbaac3abf","tier":"starter_2024","role":"editor"},{"type":"individual","id":"bf67d760eefcbffd","login":"xiaoiver","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f4a568df4cb69f834e43d657ac3e7239ed96aac8fb20e8c31c9c1ddcdf8b54a0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Compute Boids","cells":[{"id":0,"value":"# Compute Boids\n\nA GPU compute particle simulation that mimics the flocking behavior of birds. A compute shader updates two ping-pong buffers which store particle data. The data is used to draw instanced particles.\n\nhttps://webgpu.github.io/webgpu-samples/samples/computeBoids","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":55,"value":"import {\n deviceAPI,\n createDeviceContributionWebGPU,\n createCanvas,\n createBlitPipelineAndBindings,\n registerShaderModule,\n createProgram,\n alias,\n prelude,\n glMatrix\n} from \"@antv/compute-toys\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"