@bloopjs/toodle 0.0.100

package/src/shaders/postprocess/blur.ts

@@ -0,0 +1,245 @@
+import type { Color } from "../../coreTypes/Color";
+import { PostProcessDefaults } from "./mod";
+
+// example of a blur post-process effect using a two-pass Gaussian blur
+export function blur(
+  encoder: GPUCommandEncoder,
+  context: GPUCanvasContext,
+  device: GPUDevice,
+  clearColor: Color,
+  presentationFormat: GPUTextureFormat,
+  pingpong: [GPUTexture, GPUTexture],
+) {
+  const blurRadius = 20;
+
+  const weights = gaussianWeights(blurRadius);
+  const lines = weights.map((w) => w.toFixed(7)).join(", ");
+  const wgslFragment = `let weights = array<f32, ${weights.length}>(${lines});`;
+
+  const brightPipeline = device.createRenderPipeline({
+    ...PostProcessDefaults.pipelineDescriptor(device),
+    label: "toodle post process - brightness pass",
+    fragment: {
+      targets: [{ format: presentationFormat }],
+      module: device.createShaderModule({
+        label: "toodle post process - brightness pass",
+        code: /*wgsl*/ `
+  @group(0) @binding(0) var tex: texture_2d<f32>;
+  @group(0) @binding(1) var samp: sampler;
+  @group(0) @binding(2) var<uniform> engineUniform: EngineUniform;
+
+  struct EngineUniform {
+    // resolution of the canvas in physical pixels
+    resolution: vec2f,
+    random: f32,
+    time: f32,
+  };
+
+  @fragment
+  fn fs_main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
+    let color = textureSample(tex, samp, uv);
+    let _nope = engineUniform.time;
+    return color;
+  }
+          `,
+      }),
+    },
+  });
+
+  const horizontalBlurPipeline = device.createRenderPipeline({
+    ...PostProcessDefaults.pipelineDescriptor(device),
+    label: "toodle post process - horizontal blur",
+    fragment: {
+      targets: [{ format: presentationFormat }],
+      module: device.createShaderModule({
+        label: "toodle post process - horizontal blur",
+        code: /*wgsl*/ `
+@group(0) @binding(0) var tex: texture_2d<f32>;
+@group(0) @binding(1) var samp: sampler;
+@group(0) @binding(2) var<uniform> engineUniform: EngineUniform;
+
+struct EngineUniform {
+  // resolution of the canvas in physical pixels
+  resolution: vec2f,
+  random: f32,
+  time: f32,
+};
+
+@fragment
+fn fs_main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
+  let pixelSize = 1.0 / engineUniform.resolution;
+  let offset = vec2f(pixelSize.x, 0.0); // horizontal
+
+  // Gaussian weights for 5-tap kernel
+  // let weights = array<f32, 5>(0.204164, 0.304005, 0.093913, 0.010381, 0.000336);
+  ${wgslFragment}
+
+  var color = textureSample(tex, samp, uv) * weights[0];
+  for (var i = 1; i < ${weights.length}; i++) {
+    color += textureSample(tex, samp, uv + offset * f32(i)) * weights[i];
+    color += textureSample(tex, samp, uv - offset * f32(i)) * weights[i];
+  }
+
+  return color;
+}
+  `,
+      }),
+    },
+  });
+
+  const verticalBlurPipeline = device.createRenderPipeline({
+    ...PostProcessDefaults.pipelineDescriptor(device),
+    label: "toodle post process - vertical blur",
+    fragment: {
+      targets: [{ format: presentationFormat }],
+      module: device.createShaderModule({
+        label: "toodle post process - vertical blur",
+        code: /*wgsl*/ `
+        @group(0) @binding(0) var tex: texture_2d<f32>;
+        @group(0) @binding(1) var samp: sampler;
+        @group(0) @binding(2) var<uniform> engineUniform: EngineUniform;
+
+        struct EngineUniform {
+          // resolution of the canvas in physical pixels
+          resolution: vec2f,
+          random: f32,
+          time: f32,
+        };
+
+        @fragment
+        fn fs_main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
+          let pixelSize = 1.0 / engineUniform.resolution;
+          let offset = vec2f(0.0, pixelSize.y); // vertical
+
+          // Gaussian weights for 5-tap kernel
+          // let weights = array<f32, 5>(0.204164, 0.304005, 0.093913, 0.010381, 0.000336);
+          ${wgslFragment}
+
+          var color = textureSample(tex, samp, uv) * weights[0];
+          for (var i = 1; i < ${weights.length}; i++) {
+            color += textureSample(tex, samp, uv + offset * f32(i)) * weights[i];
+            color += textureSample(tex, samp, uv - offset * f32(i)) * weights[i];
+          }
+
+          return color;
+        }
+                `,
+      }),
+    },
+  });
+
+  renderToTarget(
+    "blur",
+    pingpong[0],
+    pingpong[1],
+    device,
+    encoder,
+    horizontalBlurPipeline,
+    clearColor,
+  );
+
+  renderToTarget(
+    "blur",
+    pingpong[1],
+    context.getCurrentTexture(),
+    device,
+    encoder,
+    verticalBlurPipeline,
+    clearColor,
+  );
+}
+
+// Gaussian function is
+// G(x) = exp(-x² / (2σ²))
+// where x is the distance from the center and σ is the standard deviation.
+function gaussianWeights(radius: number, sigma = radius / 2): number[] {
+  const weights = [];
+  let sum = 0;
+
+  for (let i = 0; i <= radius; i++) {
+    const w = Math.exp(-0.5 * (i / sigma) ** 2);
+    weights.push(w);
+    sum += i === 0 ? w : w * 2;
+  }
+
+  return weights.map((w) => w / sum); // normalize to sum = 1
+}
+
+function renderToTarget(
+  label: string,
+  from: GPUTexture,
+  to: GPUTexture,
+  device: GPUDevice,
+  encoder: GPUCommandEncoder,
+  pipeline: GPURenderPipeline,
+  clearColor: Color,
+  bindGroups?: GPUBindGroup[],
+) {
+  // biome-ignore format:it's a matrix
+  const fullscreenQuadVerts = new Float32Array([
+    -1, -1,  0, 0,
+     1, -1,  1, 0,
+    -1,  1,  0, 1,
+     1,  1,  1, 1,
+  ]);
+
+  // create vertex buffer
+  // todo: only create this once
+  const fullscreenVB = device.createBuffer({
+    size: fullscreenQuadVerts.byteLength,
+    usage: GPUBufferUsage.VERTEX,
+    mappedAtCreation: true,
+  });
+  new Float32Array(fullscreenVB.getMappedRange()).set(fullscreenQuadVerts);
+  fullscreenVB.unmap();
+
+  // create engine uniform
+  // todo: only create this once
+  const engineUniform = device.createBuffer({
+    label: `${label} engine uniform buffer`,
+    size: 16,
+    usage: GPUBufferUsage.UNIFORM,
+    mappedAtCreation: true,
+  });
+  const engineUniformData = new Float32Array(engineUniform.getMappedRange());
+  engineUniformData[0] = from.width;
+  engineUniformData[1] = from.height;
+  engineUniformData[2] = Math.random();
+  engineUniformData[3] = performance.now() / 1000;
+  engineUniform.unmap();
+
+  // create bind group
+  const bindGroup = device.createBindGroup({
+    label: `${label} engine bind group`,
+    layout: pipeline.getBindGroupLayout(0),
+    entries: [
+      { binding: 0, resource: from.createView() },
+      { binding: 1, resource: PostProcessDefaults.sampler(device) },
+      { binding: 2, resource: engineUniform },
+    ],
+  });
+
+  const renderPass = encoder.beginRenderPass({
+    label: `${label} render pass`,
+    colorAttachments: [
+      {
+        view: to.createView(),
+        clearValue: clearColor,
+        loadOp: "clear",
+        storeOp: "store",
+      },
+    ],
+  });
+
+  renderPass.setPipeline(pipeline);
+  renderPass.setVertexBuffer(0, fullscreenVB);
+  renderPass.setBindGroup(0, bindGroup);
+  if (bindGroups) {
+    for (let i = 0; i < bindGroups.length; i++) {
+      renderPass.setBindGroup(i + 1, bindGroups[i]);
+    }
+  }
+  renderPass.draw(4, 1, 0, 0);
+
+  renderPass.end();
+}

package/src/shaders/postprocess/mod.ts

@@ -0,0 +1,71 @@
+export type PostProcess = {
+  /**
+   * A post-processor modifies the current render before it is presented to the screen.
+   *
+   * @param encoder - a GPUCommandEncoder used to create render passes
+   * @param pingpong - a pair of GPUTextures used for ping-pong rendering
+   * @param screen - the final screen GPUTexture to render to
+   */
+  process(
+    queue: GPUQueue,
+    encoder: GPUCommandEncoder,
+    pingpong: [GPUTexture, GPUTexture],
+    screen: GPUTexture,
+  ): void;
+};
+
+export const PostProcessDefaults = {
+  sampler(device: GPUDevice): GPUSampler {
+    return device.createSampler({
+      label: "toodle post process sampler",
+      magFilter: "linear",
+      minFilter: "linear",
+      mipmapFilter: "linear",
+      addressModeU: "clamp-to-edge",
+      addressModeV: "clamp-to-edge",
+    });
+  },
+
+  vertexBufferLayout(device: GPUDevice): GPUVertexBufferLayout {
+    return {
+      arrayStride: 4 * 4,
+      attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+    };
+  },
+
+  vertexShader(device: GPUDevice): GPUShaderModule {
+    return device.createShaderModule({
+      label: "toodle post process vertex shader",
+      code: `
+  struct VertexOut {
+    @builtin(position) position: vec4<f32>,
+    @location(0) uv: vec2<f32>,
+  };
+
+  const enginePosLookup = array(vec2f(-1, 1), vec2f(-1, -1), vec2f(1, 1), vec2f(1, -1));
+  const engineUvLookup = array(vec2f(0, 0), vec2f(0, 1), vec2f(1, 0), vec2f(1, 1));
+
+  @vertex
+  fn vs_main(@builtin(vertex_index) vertexIndex: u32) -> VertexOut {
+    var out: VertexOut;
+    out.position = vec4(enginePosLookup[vertexIndex], 0.0, 1.0);
+    out.uv = engineUvLookup[vertexIndex];
+    return out;
+  }
+      `,
+    });
+  },
+
+  pipelineDescriptor(device: GPUDevice): GPURenderPipelineDescriptor {
+    return {
+      label: "toodle post process pipeline descriptor",
+      layout: "auto",
+
+      primitive: { topology: "triangle-strip" },
+      vertex: {
+        buffers: [PostProcessDefaults.vertexBufferLayout(device)],
+        module: PostProcessDefaults.vertexShader(device),
+      },
+    };
+  },
+} as const;

package/src/shaders/samplers.ts

@@ -0,0 +1,13 @@
+export const pixelArtSampler: GPUSamplerDescriptor = {
+  magFilter: "nearest",
+  minFilter: "nearest",
+  addressModeU: "clamp-to-edge",
+  addressModeV: "clamp-to-edge",
+};
+
+export const smoothSampler: GPUSamplerDescriptor = {
+  magFilter: "linear",
+  minFilter: "linear",
+  addressModeU: "clamp-to-edge",
+  addressModeV: "clamp-to-edge",
+};

package/src/shaders/wgsl/example.wgsl.ts

@@ -0,0 +1,24 @@
+// this is an example custom quad shader that returns defaults, tinting the red channel
+
+export default /*wgsl*/ `
+struct MyStuff {
+  red: f32,
+}
+
+@vertex
+fn vert(
+  @builtin(vertex_index) VertexIndex: u32,
+  @builtin(instance_index) InstanceIndex: u32,
+  instance: InstanceData
+) -> VertexOutput {
+  var output = default_vertex_shader(VertexIndex, InstanceIndex, instance);
+  return output;
+}
+
+@fragment
+fn frag(vertex: VertexOutput) -> @location(0) vec4f {
+  let color = default_fragment_shader(vertex);
+  color.r = vertex.myStuff_red;
+  return color;
+}
+`;

package/src/shaders/wgsl/hello.wgsl.ts

@@ -0,0 +1,62 @@
+// this is a shader that draws a fullscreen magenta quad
+// it can be used to test a pipeline with no vertex buffers or uniforms
+export default /*wgsl*/ `
+
+//
+// SECTION: Struct Definitions
+//
+
+struct InstanceData {}
+
+
+struct VertexInput {
+  @builtin(vertex_index) vertexIndex: u32,
+  @builtin(instance_index) instanceIndex: u32,
+}
+
+struct VertexOutput {
+  @builtin(position) engine_clip_position : vec4<f32>,
+}
+
+struct FragmentInput {
+  @builtin(position) engine_clip_position : vec4<f32>,
+}
+
+struct FragmentOutput {
+  color: vec4<f32>,
+}
+
+//
+// SECTION: Base Entrypoints
+//
+
+@vertex
+fn base_vertex_entrypoint(input: VertexInput) -> VertexOutput {
+  return default_vertex_shader(input);
+}
+
+@fragment
+fn base_fragment_entrypoint(vertex: VertexOutput) -> @location(0) vec4<f32> {
+  let output = base_fragment_shader(vertex);
+  return output.color;
+}
+
+//
+// SECTION: Base Shaders
+//
+
+const pos = array(vec2f(-1, -1), vec2f(1, -1), vec2f(-1, 1), vec2f(1, 1));
+
+fn base_vertex_shader(input: VertexInput) -> VertexOutput {
+  var output : VertexOutput;
+  output.engine_clip_position = vec4f(pos[input.vertexIndex], 0.0, 1.0);
+  return output;
+}
+
+fn base_fragment_shader(vertex: VertexOutput) -> FragmentOutput {
+  var output : FragmentOutput;
+  output.color = vec4f(1.0, 0.0, 1.0, 1.0);
+  return output;
+}
+
+`;

package/src/shaders/wgsl/helloInstanced.wgsl.ts

@@ -0,0 +1,46 @@
+// this is a shader that can be used to test a pipeline with a vertex buffer with a step mode of instance
+
+export default /*wgsl*/ `
+// const pos = array(vec2f(-0.5, -0.5), vec2f(0.5, -0.5), vec2f(-0.5, 0.5), vec2f(0.5, 0.5));
+const pos = array(vec2f(-0.5, 0.5), vec2f(-0.5, -0.5), vec2f(0.5, 0.5), vec2f(0.5, -0.5));
+
+struct InstanceData {
+  @location(0) model0: vec4<f32>,
+  @location(1) model1: vec4<f32>,
+  @location(2) model2: vec4<f32>,
+  @location(3) color: vec4<f32>,
+}
+struct VertexOutput {
+  @builtin(position) engine_clip_position : vec4<f32>,
+  @location(0) @interpolate(flat) color: vec4<f32>,
+}
+
+struct EngineUniform {
+  viewProjection: mat3x3<f32>,
+};
+
+@group(0) @binding(0) var<uniform> engineUniform: EngineUniform;
+
+
+// this is the vertex shader
+@vertex
+fn vs(
+  @builtin(vertex_index) VertexIndex : u32,
+  @builtin(instance_index) InstanceIndex: u32,  // Instance ID for each instance
+  instanceData: InstanceData,
+) -> VertexOutput {
+  var output : VertexOutput;
+  let modelMatrix = mat3x3(instanceData.model0.xyz, instanceData.model1.xyz, instanceData.model2.xyz);
+  let worldPosition = engineUniform.viewProjection * modelMatrix * vec3f(pos[VertexIndex], 1.0);
+
+  output.engine_clip_position = vec4f(worldPosition, 1.0);
+  output.color = instanceData.color;
+  return output;
+}
+
+// this is the fragment shader
+@fragment
+fn fs(vertex: VertexOutput) -> @location(0) vec4<f32> {
+  return vertex.color;
+}
+`;

package/src/shaders/wgsl/quad.wgsl.ts

@@ -0,0 +1,140 @@
+export default /*wgsl*/ `
+struct InstanceData {
+  // location 0-2 are the model matrix for this instanced quad
+  @location(0) model0: vec4<f32>,
+  @location(1) model1: vec4<f32>,
+  @location(2) model2: vec4<f32>,
+  // location 3 is the tint - the color will be multiplied by the texture color to determine the pixel color
+  @location(3) engine_tint: vec4<f32>,
+  // location 4 are the uv offset and scale used to sample the texture atlas. these are in normalized texel coordinates.
+  @location(4) uvOffsetAndScale: vec4<f32>,
+  // location 5 is the crop offset from center and scale. These are ratios applied to the unit quad.
+  @location(5) cropOffsetAndScale: vec4<f32>,
+  // location 6 is the atlas index
+  @location(6) atlasIndex: u32,
+  // @INSTANCE_DATA SNIPPET
+}
+
+struct VertexInput {
+  @builtin(vertex_index) VertexIndex: u32,
+  @builtin(instance_index) InstanceIndex: u32,
+  instance: InstanceData
+}
+
+struct VertexOutput {
+  @builtin(position) engine_clip_position : vec4<f32>,
+  // uv coordinates are stored as two vec2s:
+  // [0,1] = atlas uv coords
+  // [2,3] = uv scale
+  @location(0) engine_uv: vec4<f32>,
+  @location(1) @interpolate(flat) engine_tint: vec4<f32>,
+  @location(2) @interpolate(flat) engine_atlasIndex: u32,
+  // @VERTEX_OUTPUT SNIPPET
+}
+
+struct EngineUniform {
+  viewProjection: mat3x3<f32>,
+  resolution: vec2f,
+};
+
+// we can't divide by 2 in the projection matrix because
+// it will affect the positioning as well as the geometry scale
+// so we need to divide by 2 for the initial position scale.
+// for eg a 10x10 quad in the top left of a 100x100 logical canvas with a 200x200 natural size
+// will be passed in as
+// position=[-45, 45]
+// scale=[10,10]
+// so the top left corner will be: (-0.5 * 10 - 45) * 2 / 100 = -1
+// if the top left vertex was -1, it would be: (-1 * 10 - 45) * 2 / 100 = -1.1
+const enginePosLookup = array(vec2f(-0.5, 0.5), vec2f(-0.5, -0.5), vec2f(0.5, 0.5), vec2f(0.5, -0.5));
+const engineUvLookup = array(vec2f(0, 0), vec2f(0, 1), vec2f(1, 0), vec2f(1, 1));
+
+@group(0) @binding(0) var<uniform> engineUniform: EngineUniform;
+@group(0) @binding(1) var linearSampler: sampler;
+@group(0) @binding(2) var nearestSampler: sampler;
+
+@group(1) @binding(0) var textureArray: texture_2d_array<f32>;
+
+@vertex
+fn engine_vs(
+  @builtin(vertex_index) VertexIndex: u32,
+  @builtin(instance_index) InstanceIndex: u32,
+  instance: InstanceData
+) -> VertexOutput {
+  var output = default_vertex_shader(VertexIndex, InstanceIndex,instance);
+  return output;
+}
+
+@fragment
+fn engine_fs(vertex: VertexOutput) -> @location(0) vec4<f32> {
+  return default_fragment_shader(vertex, nearestSampler);
+}
+
+fn default_vertex_shader(
+  VertexIndex: u32,
+  InstanceIndex: u32,
+  instance: InstanceData
+) -> VertexOutput {
+  var output : VertexOutput;
+  output.engine_tint = instance.engine_tint;
+
+  // reconstruct the model matrix from the instance data
+  // bc we can't pass a mat3x3 as instance data
+  let modelMatrix = mat3x3(instance.model0.xyz, instance.model1.xyz, instance.model2.xyz);
+
+  // transform the vertex position
+  let localPosition = enginePosLookup[VertexIndex];
+  let cropOffset = instance.cropOffsetAndScale.xy;
+  let cropScale = instance.cropOffsetAndScale.zw;
+  let croppedPosition = localPosition * cropScale + cropOffset;
+  let worldPosition = modelMatrix * vec3f(croppedPosition, 1.0);
+  let clipPosition = engineUniform.viewProjection * worldPosition;
+  output.engine_clip_position = vec4f(clipPosition, 1.0);
+
+  // set the uv coordinates in the texture atlas.
+  let original_uv = engineUvLookup[VertexIndex];
+  // uvOffsetAndScale is a vec4 with the following values:
+  // [0,1] = uv offset
+  // [2,3] = uv scale
+  let atlas_uv = original_uv * instance.uvOffsetAndScale.zw * cropScale + instance.uvOffsetAndScale.xy;
+  // we also pack the original uv coordinates in the w and z components
+  // since these can be useful in the fragment shader
+  output.engine_uv = vec4f(atlas_uv, original_uv);
+  output.engine_atlasIndex = u32(instance.atlasIndex);
+  // @PASSTHROUGH_SNIPPET
+
+  return output;
+}
+
+fn default_fragment_shader(vertex: VertexOutput, samp: sampler) -> vec4<f32> {
+  let atlas_uv = vertex.engine_uv.xy;
+  let original_uv = vertex.engine_uv.zw;
+
+  // Force both samplers to be referenced without assignment
+  // This prevents WGSLReflect from optimizing them away
+  var nope: bool = false;
+  if (nope) {
+    _ = linearSampler;
+    _ = nearestSampler;
+  }
+
+  let color = textureSample(textureArray, samp, atlas_uv, vertex.engine_atlasIndex);
+
+  if (vertex.engine_atlasIndex == 1000u) {
+    // rectangle - return a solid color
+    return vec4f(1,1,1,1) * vertex.engine_tint;
+  } else if (vertex.engine_atlasIndex == 1001u) {
+    // circle:
+    // edge width is 4 logical pixels
+    let edgeWidth = 4. / max(engineUniform.resolution.x, engineUniform.resolution.y);
+    // distance from center of the quad ranging from [0,1]
+    let centerDistance = 2 * distance(vec2f(0.5, 0.5), original_uv);
+    // alpha is 1 before edgeWidth and 0 after edgeWidth
+    let alpha = 1. - smoothstep(1. - edgeWidth, 1. + edgeWidth, centerDistance);
+    return vec4f(vertex.engine_tint.rgb, alpha * vertex.engine_tint.a);
+  } else {
+    // texture:
+    return color * vertex.engine_tint;
+  }
+}
+`;