2f:Te9c,run = async (wgsl) => { // const $canvas = createCanvas(); const $canvas = document.createElement("canvas"); $canvas.width = 1920; $canvas.height = 1080; $canvas.style.width = "960px"; $canvas.style.height = "490px"; 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, 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 { pipeline: blitPipeline, bindings: blitBindings } = createBlitPipelineAndBindings(device, screen); const computeProgram = createProgram(device, { compute: { entryPoint: "main_image", wgsl } }); const uniformBuffer = device.createBuffer({ viewOrSize: 2 * Float32Array.BYTES_PER_ELEMENT, usage: BufferUsage.UNIFORM }); uniformBuffer.setSubData(0, new Uint8Array(new Float32Array([0]).buffer)); const computePipeline = device.createComputePipeline({ inputLayout: null, program: computeProgram }); const bindings = device.createBindings({ pipeline: computePipeline, uniformBufferBindings: [ { binding: 0, buffer: uniformBuffer } ], storageTextureBindings: [ { binding: 0, texture: screen } ] }); 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(computePipeline); computePass.setBindings(bindings); computePass.dispatchWorkgroups( Math.floor($canvas.width / 16), Math.floor($canvas.height / 16) ); 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(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(0); invalidation.then(() => { if (id) { cancelAnimationFrame(id); } blitBindings.destroy(); computeProgram.destroy(); screen.destroy(); uniformBuffer.destroy(); blitPipeline.destroy(); computePipeline.destroy(); renderTarget.destroy(); device.destroy(); // For debug. // device.checkForLeaks(); }); return $canvas; }30:T614,run(/* wgsl */ ` #import prelude::{screen, time} @compute @workgroup_size(16, 16) fn main_image(@builtin(global_invocation_id) id: vec3u) { // Viewport resolution (in pixels) let screen_size = 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 p = vec2f(f32(id.x) + .5, f32(screen_size.y - id.y) - .5); //Initialize hue and clear fragcolor var h=vec4f(0.0); var c=vec4f(1.0); //Resolution for scaling var r = vec2f(screen_size); //Alpha, length, angle var A=0f; var l=0f; var a=0f; //Loop through layer for(var i=0.6; i>0.1; i-=0.1) { //Smoothly rotate a quarter at a time a=(time.elapsed+i)*4; a-=sin(a); a-=sin(a); //Rotate var t = cos(a/4+vec2f(0,11)); var R = mat2x2(t.x, -t.y, t.y, t.x); //Scale and center var u =(p*2f - r)/ r.y; //Compute round square SDF u -= R*clamp(u*R,-vec2f(i),vec2f(i)); l = max(length(u),0.1); //Compute anti-aliased alpha using SDF A = min((l - 0.1) * r.y / 5, 1); //Pick layer color h = sin(i*10+a/3+vec4f(1,3,5,0))/5+0.8; //Color blending and lighting c = mix(h,c,A) * mix(h/h,h+A*u.y/l/2,0.1/l); } var color = tanh(c*c); color.a = 1.0; // Output to screen (tanh tonemap) textureStore(screen, id.xy, color); } `)31:T958,## Basic Polynomial Surface (Noise) ![image@2.png](${await FileAttachment("image@2.png").url()}) The relevant code in the shadertoy shader is: ```glsl float noise( in vec2 x ) { vec2 p = floor(x); vec2 w = fract(x); #if 1 vec2 u = w*w*w*(w*(w*6.0-15.0)+10.0); #else vec2 u = w*w*(3.0-2.0*w); #endif float a = hash1(p+vec2(0,0)); float b = hash1(p+vec2(1,0)); float c = hash1(p+vec2(0,1)); float d = hash1(p+vec2(1,1)); return -1.0+2.0*(a + (b-a)*u.x + (c-a)*u.y + (a - b - c + d)*u.x*u.y); } //========================================================================================== // hashes (low quality, do NOT use in production) //========================================================================================== float hash1( vec2 p ) { p = 50.0*fract( p*0.3183099 ); return fract( p.x*p.y*(p.x+p.y) ); } ``` `hash1` as Inigo says is a function that > "sufficiently shuffles i and j to provide a random enough value for each vertex". There are also 2 different implementation of `S` the smoothstep function. The one from the tutorial is ```gsls vec2 u = w*w*(3.0-2.0*w); ``` The other (enabled on shader toy) smoothstep implementation has this shape (the darker line on the graph) compared to the original (in the light color). ![image@3.png](${await FileAttachment("image@3.png").url()}) Maybe we'll want later to compare this with the built-in wgsl `smoothstep` function. ### Debugging Took me a while to figure out: - trying the code on compute.toys would work fine but I'd get a `unreachable` runtime error with a lot of webgpu validation errors in the console - I tried upgrading the `g-device-api` in https://observablehq.com/@jmatsushita/compute-toys - this ended up requiring slightly modifying our `run` function (adding `device.beginFrame()` and `device.endFrame()` (cf. https://observablehq.com/@jmatsushita/origami) - unused bindings (specifically with `time`) seem to also error out. So we create `let ignore = time.elapsed / time.elapsed` to avoid rewriting the `run` function with a different binding. - What ended up being the culprit (and I guess compute toys silently fixes this behind the scenes) is the following code: ```wgsl let a = hash1(p+vec2(0,0)); ``` Which I suppose was interpreted as `vec2` and instead needed to be: ```wgsl let a = hash1(p+vec2(0.,0.)); ``` 32:T544,run(/* wgsl */` #import prelude::{screen, time} //========================================================================================== // hashes (low quality, do NOT use in production) //========================================================================================== fn hash1(p: float2) -> float { let p2 = 50.0*fract( p*0.3183099 ); return fract( p2.x*p2.y*(p2.x+p2.y) ); } fn noise(x: float2 ) -> float { let p = floor(x); let w = fract(x); let u = w * w * (3.0 - 2.0 * w); let a = hash1(p+vec2(0.,0.)); let b = hash1(p+vec2(1.,0.)); let c = hash1(p+vec2(0.,1.)); let d = hash1(p+vec2(1.,1.)); return -1.0 + 2.0 * (a + (b-a) * u.x + (c-a) * u.y + (a - b - c + d) * u.x * u.y); } @compute @workgroup_size(16, 16) fn main_image(@builtin(global_invocation_id) id: uint3) { let screen_size = uint2(textureDimensions(screen)); if (id.x >= screen_size.x || id.y >= screen_size.y) { return; } let fragCoord = float2(id.xy) + .5; let resolution = float2(screen_size); let p = fragCoord / resolution.x; var ignore = time.elapsed / time.elapsed; // to avoid rewriting run without the time bindings. var uv = p * float2(resolution.x / resolution.y, 1.) + ignore; var f = noise( 8.0*uv ); textureStore(screen, int2(id.xy), float4(f, f, f, 1.)); } `)33:T62f,run(/* wgsl */` #import prelude::{screen, time} fn sphere(p: float3) -> float { return (length(p) - 100.); } fn scene(pos: float3) -> float { var d = 0.0; d += sphere(pos - vec3(0.,-150.,0.)); return d; } const MIN_DIST=0.001; const MAX_DIST=200000.; const MARCH_STEPS=100; fn raymarch(ro: float3, rd: float3) -> float { var d0 = 0.0; for(var i=0; i MAX_DIST ) { break; }; } return d0; } @compute @workgroup_size(16, 16) fn main_image(@builtin(global_invocation_id) id: uint3) { let screen_size = uint2(textureDimensions(screen)); if (id.x >= screen_size.x || id.y >= screen_size.y) { return; } let fragCoord = float2(id.xy); let resolution = float2(screen_size); let p = (2.0*(fragCoord-0.5)-resolution.xy)/ resolution.y; var ignore = time.elapsed / time.elapsed; // to avoid rewriting run without the time bindings. var uv = float2(id.xy)/resolution.xy; uv -= 0.5; uv.x *= resolution.x / resolution.y; // camera let ro = vec3(0.0, -200., -500.0); let zoom = 1.; let tgt = vec2(0.,-0.1); // point the camera a bit downwards let rd = normalize(vec3((uv-tgt)/zoom, 1.)); //--------- // raymarch //--------- let d = raymarch(ro, rd); let pos = ro + rd * d; var color = vec3(0.,0.,0.); if(d float { return (length(p) - 100.); } fn scene(pos: float3) -> float { var d = 0.0; d += sphere(pos - vec3(0.,-150.,0.)); return d; } const MIN_DIST=0.001; const MAX_DIST=200000.; const MARCH_STEPS=100; fn raymarch(ro: float3, rd: float3) -> float { var d0 = 0.0; for(var i=0; i MAX_DIST ) { break; }; } return d0; } const lightPosition=vec3(-50.0 ,20.0 , -500.0); fn getNormal(p: float3 ) -> float3 { let e = vec2(.01, 0); let n = scene(p) - vec3( scene(p-e.xyy), scene(p-e.yxy), scene(p-e.yyx)); return normalize(n); } @compute @workgroup_size(16, 16) fn main_image(@builtin(global_invocation_id) id: uint3) { let screen_size = uint2(textureDimensions(screen)); if (id.x >= screen_size.x || id.y >= screen_size.y) { return; } let fragCoord = float2(id.xy) + .5; let resolution = float2(screen_size); let p = fragCoord / resolution.x; var ignore = time.elapsed / time.elapsed; // to avoid rewriting run without the time bindings. var uv = float2(id.xy)/resolution.xy; uv -= 0.5; uv.x *= resolution.x / resolution.y; // camera let ro = vec3(0.0, -200., -500.0); let zoom = 1.; let tgt = vec2(0.,-0.1); // point the camera a bit downwards let rd = normalize(vec3((uv-tgt)/zoom, 1.)); //--------- // raymarch //--------- let d = raymarch(ro, rd); let pos = ro + rd * d; var color = vec3(0.,0.,0.); if(d float { let p2 = 50.0*fract( p*0.3183099 ); return fract( p2.x*p2.y*(p2.x+p2.y) ); } fn noise(x: float2 ) -> float { let p = floor(x); let w = fract(x); let u = w * w * (3.0 - 2.0 * w); let a = hash1(p+vec2(0.,0.)); let b = hash1(p+vec2(1.,0.)); let c = hash1(p+vec2(0.,1.)); let d = hash1(p+vec2(1.,1.)); return -1.0 + 2.0 * (a + (b-a) * u.x + (c-a) * u.y + (a - b - c + d) * u.x * u.y); } fn terrain(p: float2) -> float { var e = noise( p/100.0 + vec2(10.0,-10.0) ); e = 600.0*e + 600.0; return e * .1; } fn scene(pos: float3) -> float { var d = 0.0; d += terrain(pos.xz); d += -pos.y + 1.0; return d; } const MIN_DIST=0.001; const MAX_DIST=200000.; const MARCH_STEPS=100; fn raymarch(ro: float3, rd: float3) -> float { var d0 = 0.0; for(var i=0; i MAX_DIST ) { break; }; } return d0; } const lightPosition=vec3(-50.0 ,20.0 , -500.0); fn getNormal(p: float3 ) -> float3 { let e = vec2(.01, 0); let n = scene(p) - vec3( scene(p-e.xyy), scene(p-e.yxy), scene(p-e.yyx)); return normalize(n); } @compute @workgroup_size(16, 16) fn main_image(@builtin(global_invocation_id) id: uint3) { let screen_size = uint2(textureDimensions(screen)); if (id.x >= screen_size.x || id.y >= screen_size.y) { return; } let fragCoord = float2(id.xy) + .5; let resolution = float2(screen_size); let p = fragCoord / resolution.x; var ignore = time.elapsed / time.elapsed; // to avoid rewriting run without the time bindings. var uv = float2(id.xy)/resolution.xy; uv -= 0.5; uv.x *= resolution.x / resolution.y; // camera let ro = vec3(0.0, -200., -500.0); let zoom = 1.; let tgt = vec2(0.,-0.1); let rd = normalize(vec3((uv-tgt)/zoom, 1.)); //--------- // raymarch //--------- let d = raymarch(ro, rd); let pos = ro + rd * d; var color = vec3(0.,0.,0.); if(d float { let p2 = 50.0*fract( p*0.3183099 ); return fract( p2.x*p2.y*(p2.x+p2.y) ); } fn noise(x: float2 ) -> float { let p = floor(x); let w = fract(x); let u = w * w * (3.0 - 2.0 * w); let a = hash1(p+vec2(0.,0.)); let b = hash1(p+vec2(1.,0.)); let c = hash1(p+vec2(0.,1.)); let d = hash1(p+vec2(1.,1.)); return -1.0 + 2.0 * (a + (b-a) * u.x + (c-a) * u.y + (a - b - c + d) * u.x * u.y); } //========================================================================================== // fbm constructions //========================================================================================== const m2 = mat2x2( 0.80, 0.60, -0.60, 0.80 ); //------------------------------------------------------------------------------------------ fn fbm_9(x: float2) -> float { let f = 1.9; let s = 0.55; var a = 0.0; var b = 0.5; var x2 = x; for(var i=0; i<9; i++ ) { let n = noise(x); a += b*n; b *= s; x2 = f*m2*x2; } return a; } fn terrain(p: float2) -> float { var e = fbm_9( p/100.0 + vec2(10.0,-10.0) ); e = 600.0*e + 600.0; return e * .1; } fn scene(pos: float3) -> float { var d = 0.0; d += terrain(pos.xz); d += -pos.y + 1.0; return d; } const MIN_DIST=0.0001; const MAX_DIST=20000.; const MARCH_STEPS=400; fn raymarch(ro: float3, rd: float3) -> float { var d0 = 0.0; for(var i=0; i MAX_DIST ) { break; }; } return d0; } const lightPosition=vec3(-50.0 ,20.0 , -500.0); fn getNormal(p: float3 ) -> float3 { let e = vec2(.01, 0); let n = scene(p) - vec3( scene(p-e.xyy), scene(p-e.yxy), scene(p-e.yyx)); return normalize(n); } @compute @workgroup_size(16, 16) fn main_image(@builtin(global_invocation_id) id: uint3) { let screen_size = uint2(textureDimensions(screen)); if (id.x >= screen_size.x || id.y >= screen_size.y) { return; } let fragCoord = float2(id.xy) + .5; let resolution = float2(screen_size); let p = fragCoord / resolution.x; var ignore = time.elapsed / time.elapsed; // to avoid rewriting run without the time bindings. var uv = float2(id.xy)/resolution.xy; uv -= 0.5; uv.x *= resolution.x / resolution.y; // camera let ro = vec3(0.0, -500., -500.0); let zoom = 1.; let tgt = vec2(0.,-2.); let rd = normalize(vec3((uv-tgt)/zoom, 1.)); //--------- // raymarch //--------- let d = raymarch(ro, rd); let pos = ro + rd * d; var color = vec3(0.,0.,0.); if(d float\n{\n return (length(p) - 100.); \n}\n\nfn scene(pos: float3) -> float\n{\n var d = 0.0;\n d += sphere(pos - vec3(0.,-150.,0.));\n return d;\n}\n```\n\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":295,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"## Raymarching with diffuse shading\n\nLet's also add some basic diffuse shading based on the incidence of a directional light on the surface normals.","pinned":false,"hidden":false,"mode":"md"},{"id":366,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"## Raymarching the terrain's heightmap\n\nLet's represent this as a height map using Inigo's raymarching functions `raymarchTerrain` which uses `terrainMap`.\n\nWe'll just replace our sphere with a terrain function that uses the basic noise.\n```wgsl\nfn terrain(p: float2) -> float\n{\n var e = noise( p/100.0 + vec2(10.0,-10.0) );\n e = 600.0*e + 600.0;\n return e * .1; \n}\n```\n\nThe scene is then defined such that the distance we use is the difference between the calculated height of the terrain for the ray's position xy `terrain(pos.xz)` minus the height of the ray `pos.y`:\n```wgsl\nfn scene(pos: float3) -> float\n{\n var d = 0.0;\n d += terrain(pos.xz);\n d += -pos.y + 1.0;\n return d;\n}\n```\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":282,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":254,"value":"## Fractal Surface (FBM)\n\nNow let's add the fractal brownian motion noise, so that our noise looks like a terrain that nature would produce. https://iquilezles.org/articles/fbm/\n\nIn the shadertoy code there are variations of fbm - fractal brownian motion - (fbm_4 in 2d and 3d, fbm_7, fbm_8, fbm_9, fbmd_9) which are used as various sources of noise for clouds, terrain, trees, sky and even shade. Here's the simpler `fbm_4` in 2d, the other constructions are very similar.\n\n```glsl\n// this is the rotation matrix using the pythagorean triple 3,4,5\nconst mat2 m2 = mat2( 0.80, 0.60,\n -0.60, 0.80 );\n//------------------------------------------------------------------------------------------\n\nfloat fbm_4( in vec2 x )\n{\n float f = 1.9;\n float s = 0.55;\n float a = 0.0;\n float b = 0.5;\n for( int i=ZERO; i<4; i++ )\n {\n float n = noise(x);\n a += b*n;\n b *= s;\n x = f*m2*x;\n }\n\treturn a;\n}\n```\n\nThe terrain uses `fbm_9` with 9 iterations.","pinned":false,"hidden":false,"mode":"md"},{"id":257,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":55,"value":"import {\n deviceAPI,\n createDeviceContributionWebGPU,\n createCanvas,\n createBlitPipelineAndBindings,\n registerShaderModule,\n createProgram,\n alias,\n prelude\n} from \"@jmatsushita/compute-toys\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}