2a:null 2b:["$","title",null,{"children":"Stardust | AntV | Observable"}] 30:T4242,(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, MipmapFilterMode, AddressMode, FilterMode, TextureDimension } = deviceAPI; registerShaderModule(device, prelude); const screen = device.createTexture({ format: Format.F16_RGBA, width: $canvas.width, height: $canvas.height, dimension: TextureDimension.TEXTURE_2D, usage: TextureUsage.STORAGE }); const pass_in = device.createTexture({ format: Format.F16_RGBA, width: $canvas.width, height: $canvas.height, dimension: TextureDimension.TEXTURE_2D_ARRAY, depthOrArrayLayers: 4, usage: TextureUsage.SAMPLED }); const pass_out = device.createTexture({ format: Format.F16_RGBA, width: $canvas.width, height: $canvas.height, dimension: TextureDimension.TEXTURE_2D_ARRAY, depthOrArrayLayers: 4, usage: TextureUsage.STORAGE }); const bilinear = device.createSampler({ addressModeU: AddressMode.CLAMP_TO_EDGE, addressModeV: AddressMode.CLAMP_TO_EDGE, minFilter: FilterMode.BILINEAR, magFilter: FilterMode.BILINEAR, mipmapFilter: MipmapFilterMode.NO_MIP }); const { pipeline: blitPipeline, bindings: blitBindings } = createBlitPipelineAndBindings(device, screen); const custom = /* wgsl */ ` #define_import_path custom struct Custom { Radius: f32, TimeStep: f32, Samples: f32, BlurRadius: f32, VelocityDecay: f32, Speed: f32, BlurExponentA: f32, BlurExponentB: f32, AnimatedNoise: f32, Accumulation: f32, Exposure: f32, } @group(0) @binding(1) var custom: Custom; `; const camera = /* wgsl */ ` #define_import_path camera struct Camera { pos: vec3f, cam: mat3x3, fov: f32, size: vec2f } var camera : Camera; fn GetCameraMatrix(ang: vec2f) -> mat3x3 { let x_dir = vec3f(cos(ang.x)*sin(ang.y), cos(ang.y), sin(ang.x)*sin(ang.y)); let y_dir = normalize(cross(x_dir, vec3f(0.0,1.0,0.0))); let z_dir = normalize(cross(y_dir, x_dir)); return mat3x3(-x_dir, y_dir, z_dir); } //project to clip space fn Project(cam: Camera, p: vec3f) -> vec3f { let td = distance(cam.pos, p); let dir = (p - cam.pos)/td; let screen = dir*cam.cam; return vec3f(screen.yz*cam.size.y/(cam.fov*screen.x) + 0.5*cam.size,screen.x*td); } `; const math = /* wgsl */ ` #define_import_path math const PI = 3.14159265; const TWO_PI = 6.28318530718; var state : vec4; fn pcg4d(a: vec4) -> vec4 { var v = a * 1664525u + 1013904223u; v.x += v.y*v.w; v.y += v.z*v.x; v.z += v.x*v.y; v.w += v.y*v.z; v = v ^ ( v >> vec4(16u) ); v.x += v.y*v.w; v.y += v.z*v.x; v.z += v.x*v.y; v.w += v.y*v.z; return v; } fn rand4() -> vec4f { state = pcg4d(state); return vec4f(state)/f32(0xffffffffu); } fn nrand4(sigma: f32, mean: vec4f) -> vec4f { let Z = rand4(); return mean + sigma * sqrt(-2.0 * log(Z.xxyy)) * vec4f(cos(TWO_PI * Z.z),sin(TWO_PI * Z.z),cos(TWO_PI * Z.w),sin(TWO_PI * Z.w)); } fn disk(r: vec2f) -> vec2f { return vec2(sin(TWO_PI*r.x), cos(TWO_PI*r.x))*(r.y); } fn sqr(x: f32) -> f32 { return x*x; } fn diag(a: vec4f) -> mat4x4 { return mat4x4( a.x,0.0,0.0,0.0, 0.0,a.y,0.0,0.0, 0.0,0.0,a.z,0.0, 0.0,0.0,0.0,a.w ); } fn rand4s(seed: vec4) -> vec4f { return vec4f(pcg4d(seed))/f32(0xffffffffu); } `; const particle = /* wgsl */ ` #define_import_path particle #import prelude::{pass_in, pass_out}; #import camera::{Project, camera}; struct Particle { position: vec4f, velocity: vec4f, } @group(2) @binding(0) var atomic_storage : array>; fn AdditiveBlend(color: vec3f, depth: f32, index: i32) { let scaledColor = 256.0 * color/depth; atomicAdd(&atomic_storage[index*4+0], i32(scaledColor.x)); atomicAdd(&atomic_storage[index*4+1], i32(scaledColor.y)); atomicAdd(&atomic_storage[index*4+2], i32(scaledColor.z)); } fn RasterizePoint(pos: vec3f, color: vec3f) { let screen_size = vec2i(camera.size); let projectedPos = Project(camera, pos); let screenCoord = vec2i(projectedPos.xy); //outside of our view if(screenCoord.x < 0 || screenCoord.x >= screen_size.x || screenCoord.y < 0 || screenCoord.y >= screen_size.y || projectedPos.z < 0.0) { return; } let idx = screenCoord.x + screen_size.x * screenCoord.y; AdditiveBlend(color, projectedPos.z, idx); } fn LoadParticle(pix: vec2i) -> Particle { var p: Particle; p.position = textureLoad(pass_in, pix, 0, 0); p.velocity = textureLoad(pass_in, pix, 1, 0); return p; } fn SaveParticle(pix: vec2i, p: Particle) { textureStore(pass_out, pix, 0, p.position); textureStore(pass_out, pix, 1, p.velocity); } `; registerShaderModule(device, prelude); registerShaderModule(device, math); registerShaderModule(device, custom); registerShaderModule(device, camera); registerShaderModule(device, particle); const computeWgsl = /* wgsl */ ` #import prelude::{screen, time, pass_in, pass_out}; #import math::{PI, TWO_PI, state, rand4, nrand4, disk}; #import camera::{Camera, GetCameraMatrix, Project, camera}; #import particle::{Particle, LoadParticle, SaveParticle, RasterizePoint, atomic_storage}; #import custom::{Custom, custom}; const MaxSamples = 256.0; const FOV = 0.8; //sqrt of particle count const PARTICLE_COUNT = 160; const DEPTH_MIN = 0.2; const DEPTH_MAX = 5.0; const DEPTH_BITS = 16u; var bokehRad : f32; fn SetCamera(ang: vec2f, fov: f32) { camera.fov = fov; camera.cam = GetCameraMatrix(ang); camera.pos = - (camera.cam*vec3f(15.0*custom.Radius+0.5,0.0,0.0)); camera.size = vec2f(textureDimensions(screen)); } fn ForceField(pos: vec3f, t: f32) -> vec4f { let a0 = vec3f(sin(t),cos(0.4*t),cos(t)); let d = distance(pos, a0); let F = (a0 - pos)*(1.0/(d*d*d + 1e-3) - 0.4/(d*d*d*d + 1e-3)) + 1e-3; return 0.2*vec4f(F, 0.0); } @compute @workgroup_size(16, 16) fn SimulateParticles(@builtin(global_invocation_id) id: vec3u) { var pix = vec2i(id.xy); var p = LoadParticle(pix); if(pix.x > PARTICLE_COUNT || pix.y > PARTICLE_COUNT) { return; } state = vec4u(id.x, id.y, id.z, time.frame); if(time.frame == 0u) { let rng = rand4(); p.position = vec4f(2.0*rng.xyz - 1.0, 0.0); p.velocity = vec4f(0.0,0.0,0.0,0.0); } let t = fract(custom.Speed*f32(time.frame)/800.0)*30.0; // if(mouse.click == 1) // { // return; // } if(t < 0.05) { p.velocity -= 0.5 * p.velocity * length(p.velocity); } let dt = custom.Speed * custom.TimeStep; p.velocity += (ForceField(p.position.xyz, t) - custom.VelocityDecay*p.velocity) * dt; p.position += p.velocity * dt; SaveParticle(pix, p); } @compute @workgroup_size(16, 16) fn Clear(@builtin(global_invocation_id) id: vec3u) { let screen_size = vec2i(textureDimensions(screen)); let idx0 = i32(id.x) + i32(screen_size.x * i32(id.y)); atomicStore(&atomic_storage[idx0*4+0], 0); atomicStore(&atomic_storage[idx0*4+1], 0); atomicStore(&atomic_storage[idx0*4+2], 0); atomicStore(&atomic_storage[idx0*4+3], 0); } @compute @workgroup_size(16, 16) fn Rasterize(@builtin(global_invocation_id) id: vec3u) { // Viewport resolution (in pixels) let screen_size = vec2i(textureDimensions(screen)); let screen_size_f = vec2f(screen_size); let ang = vec2f(-TWO_PI, PI)/screen_size_f + 1e-4; // let ang = vec2f(mouse.pos.xy)*vec2f(-TWO_PI, PI)/screen_size_f + 1e-4; SetCamera(ang, FOV); //RNG state state = vec4u(id.x, id.y, id.z, 0u); let rng = rand4(); bokehRad = pow(rng.x, custom.BlurExponentA); // if(mouse.click == 1 && custom.AnimatedNoise > 0.5) // { // state.w = time.frame; // } var pix = vec2i(id.xy); if(pix.x > PARTICLE_COUNT || pix.y > PARTICLE_COUNT) { return; } var p = LoadParticle(pix); var pos = p.position.xyz; var col = 5.5*abs(p.velocity.xyz)*dot(p.velocity,p.velocity)+0.1; col /= (0.1+bokehRad); let impSample = (col.x + col.y + col.z)*bokehRad; let sampleCount = clamp(i32(impSample*custom.Samples*MaxSamples + 1.0), 1, 1024); let normalCount = i32(custom.Samples*MaxSamples + 1.0); col *= f32(normalCount)/f32(sampleCount); for(var i = 0; i < sampleCount; i++) { let R = 2.0*custom.BlurRadius*bokehRad; let rng = rand4(); let dpos = R*normalize(nrand4(1.0, vec4f(0.0)).xyz)*pow(rng.x, custom.BlurExponentB); RasterizePoint(pos + dpos, col); } } fn Sample(pos: vec2i) -> vec3f { let screen_size = vec2i(textureDimensions(screen)); let idx = pos.x + screen_size.x * pos.y; var color: vec3f; let x = f32(atomicLoad(&atomic_storage[idx*4+0]))/(256.0); let y = f32(atomicLoad(&atomic_storage[idx*4+1]))/(256.0); let z = f32(atomicLoad(&atomic_storage[idx*4+2]))/(256.0); color = tanh( custom.Exposure * 0.03 * f32(screen_size.y) * vec3f(x,y,z) / (custom.Samples * MaxSamples + 1.0)); return abs(color); } @compute @workgroup_size(16, 16) fn main_image(@builtin(global_invocation_id) id: vec3u) { let screen_size = vec2u(textureDimensions(screen)); // Prevent overdraw for workgroups on the edge of the viewport if (id.x >= screen_size.x || id.y >= screen_size.y) { return; } // Pixel coordinates (centre of pixel, origin at bottom left) let fragCoord = vec2f(f32(id.x) + .5, f32(id.y) + .5); var color = vec4f(Sample(vec2i(id.xy)),1.0); let oldColor = textureLoad(pass_in, vec2i(id.xy), 2, 0); // if(mouse.click == 1 && custom.AnimatedNoise > 0.5) // { // color += oldColor * custom.Accumulation; // } // Output to buffer textureStore(pass_out, vec2i(id.xy), 2, color); textureStore(screen, vec2i(id.xy), vec4f(color.xyz/color.w, 1.)); } `; const simulateParticlesProgram = createProgram(device, { compute: { entryPoint: "SimulateParticles", wgsl: computeWgsl } }); const clearProgram = createProgram(device, { compute: { entryPoint: "Clear", wgsl: computeWgsl } }); const rasterizeProgram = createProgram(device, { compute: { entryPoint: "Rasterize", wgsl: computeWgsl } }); const mainImageProgram = createProgram(device, { compute: { entryPoint: "main_image", wgsl: computeWgsl } }); const uniformBuffer = device.createBuffer({ viewOrSize: 2 * Float32Array.BYTES_PER_ELEMENT, usage: BufferUsage.UNIFORM }); uniformBuffer.setSubData(0, new Uint8Array(new Float32Array([0, 0]).buffer)); const customUniformBuffer = device.createBuffer({ viewOrSize: 11 * Float32Array.BYTES_PER_ELEMENT, usage: BufferUsage.UNIFORM }); customUniformBuffer.setSubData( 0, new Uint8Array( new Float32Array([ 0.551, 0.313, 0.632, 0.489, 0.018, 0.697, 0.621, 0, 1, 0.962, 0.224 ]).buffer ) ); const storageBuffer = device.createBuffer({ viewOrSize: $canvas.width * $canvas.height * 4 * Float32Array.BYTES_PER_ELEMENT, usage: BufferUsage.STORAGE }); const simulateParticlesPipeline = device.createComputePipeline({ inputLayout: null, program: simulateParticlesProgram }); const clearPipeline = device.createComputePipeline({ inputLayout: null, program: clearProgram }); const rasterizePipeline = device.createComputePipeline({ inputLayout: null, program: rasterizeProgram }); const mainImagePipeline = device.createComputePipeline({ inputLayout: null, program: mainImageProgram }); const simulateParticlesBindings = device.createBindings({ pipeline: simulateParticlesPipeline, uniformBufferBindings: [ { buffer: uniformBuffer }, { buffer: customUniformBuffer } ], samplerBindings: [ { texture: pass_in, sampler: bilinear, samplerBinding: -1 } ], storageTextureBindings: [ { binding: 1, texture: pass_out } ] }); const clearBindings = device.createBindings({ pipeline: clearPipeline, storageBufferBindings: [ { binding: 0, buffer: storageBuffer } ], storageTextureBindings: [ { binding: 0, texture: screen } ] }); const rasterizeBindings = device.createBindings({ pipeline: rasterizePipeline, uniformBufferBindings: [ { binding: 1, buffer: customUniformBuffer } ], samplerBindings: [ { texture: pass_in, sampler: bilinear, samplerBinding: -1 } ], storageBufferBindings: [ { binding: 0, buffer: storageBuffer } ], storageTextureBindings: [ { binding: 0, texture: screen } ] }); const mainImageBindings = device.createBindings({ pipeline: mainImagePipeline, uniformBufferBindings: [ { binding: 1, buffer: customUniformBuffer } ], samplerBindings: [ { texture: pass_in, sampler: bilinear, samplerBinding: -1 } ], storageBufferBindings: [ { binding: 0, buffer: storageBuffer } ], storageTextureBindings: [ { binding: 0, texture: screen }, { binding: 1, texture: pass_out } ] }); const renderTarget = device.createRenderTarget({ format: Format.U8_RGBA_RT, width: $canvas.width, height: $canvas.height }); device.setResourceName(renderTarget, "Main Render Target"); let id; let t = 0; const frame = (time) => { uniformBuffer.setSubData( 0, new Uint8Array(new Float32Array([t, time / 1000]).buffer) ); device.beginFrame(); const computePass = device.createComputePass(); computePass.setPipeline(simulateParticlesPipeline); computePass.setBindings(simulateParticlesBindings); computePass.dispatchWorkgroups( Math.ceil($canvas.width / 16), Math.ceil($canvas.height / 16) ); computePass.setPipeline(clearPipeline); computePass.setBindings(clearBindings); computePass.dispatchWorkgroups( Math.ceil($canvas.width / 16), Math.ceil($canvas.height / 16) ); computePass.setPipeline(rasterizePipeline); computePass.setBindings(rasterizeBindings); computePass.dispatchWorkgroups( Math.ceil($canvas.width / 16), Math.ceil($canvas.height / 16) ); computePass.setPipeline(mainImagePipeline); computePass.setBindings(mainImageBindings); computePass.dispatchWorkgroups( Math.ceil($canvas.width / 16), Math.ceil($canvas.height / 16) ); device.submitPass(computePass); device.copySubTexture2D(pass_in, 0, 0, pass_out, 0, 0, 4); /** * 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(blitPipeline); renderPass.setBindings(blitBindings); renderPass.setViewport(0, 0, $canvas.width, $canvas.height); renderPass.draw(3); device.submitPass(renderPass); device.endFrame(); ++t; id = requestAnimationFrame(frame); }; frame(); invalidation.then(() => { if (id) { cancelAnimationFrame(id); } simulateParticlesProgram.destroy(); simulateParticlesPipeline.destroy(); clearPipeline.destroy(); clearProgram.destroy(); clearPipeline.destroy(); rasterizeProgram.destroy(); rasterizePipeline.destroy(); mainImageProgram.destroy(); mainImagePipeline.destroy(); screen.destroy(); uniformBuffer.destroy(); customUniformBuffer.destroy(); blitPipeline.destroy(); renderTarget.destroy(); device.destroy(); // For debug. device.checkForLeaks(); }); return $canvas; })()31:[] 2e:{"id":"5ebd5088621b2bbd","slug":"stardust","title":"Stardust","thumbnail":"715df729d1fd43ebe937bc31933c52751021debf3c786f15c806e0ae8926a5fc","access_level":"public","create_time":"$D2023-12-22T10:05:37.250Z","update_time":"$D2024-03-19T11:54:54.603Z","view_time":null,"first_public_time":"$D2023-12-22T10:05:37.250Z","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":173,"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":0,"collection":null,"type":"notebook","body":{"title":"Stardust","cells":[{"id":0,"value":"# Stardust\n\nhttps://compute.toys/view/29","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":17,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":136,"value":"Custom shader module:\n\n```wgsl\n#define_import_path custom\n\nstruct Custom {\n Radius: f32,\n TimeStep: f32,\n Samples: f32,\n BlurRadius: f32,\n VelocityDecay: f32,\n Speed: f32,\n BlurExponentA: f32,\n BlurExponentB: f32,\n AnimatedNoise: f32,\n Accumulation: f32,\n Exposure: f32,\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":153,"value":"The shader can write to pass_out, which will be copied into pass_in after the current entrypoint has returned.\n\n```ts\ndevice.submitPass(computePass);\ndevice.copySubTexture2D(pass_in, 0, 0, pass_out, 0, 0, 4);\n```","pinned":false,"hidden":false,"mode":"md","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} from \"@antv/compute-toys\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"