@bloopjs/toodle 0.0.103 → 0.1.1

package/src/backends/webgl2/WebGLQuadShader.ts

@@ -0,0 +1,278 @@
+import type { EngineUniform } from "../../coreTypes/EngineUniform";
+import type { SceneNode } from "../../scene/SceneNode";
+import { assert } from "../../utils/assert";
+import type { IBackendShader } from "../IBackendShader";
+import type { ITextureAtlas } from "../ITextureAtlas";
+import { fragmentShader, vertexShader } from "./glsl/quad.glsl";
+import type { WebGLBackend } from "./WebGLBackend";
+
+// Instance data size in floats (must match WGSL shader)
+// model (12) + tint (4) + uvOffsetAndScale (4) + cropOffsetAndScale (4) + atlasIndex (1) + padding (3) = 28
+const INSTANCE_FLOATS = 28;
+const INSTANCE_BYTES = INSTANCE_FLOATS * Float32Array.BYTES_PER_ELEMENT;
+
+/**
+ * WebGL 2 implementation of quad shader for instanced rendering.
+ */
+export class WebGLQuadShader implements IBackendShader {
+  readonly label: string;
+
+  #backend: WebGLBackend;
+  #atlas: ITextureAtlas;
+  #program: WebGLProgram;
+  #vao: WebGLVertexArrayObject;
+  #instanceBuffer: WebGLBuffer;
+  #cpuBuffer: Float32Array;
+  #instanceCount: number;
+  #instanceIndex = 0;
+
+  // Uniform locations
+  #uViewProjection: WebGLUniformLocation | null = null;
+  #uResolution: WebGLUniformLocation | null = null;
+  #uTextureArray: WebGLUniformLocation | null = null;
+
+  constructor(
+    label: string,
+    backend: WebGLBackend,
+    instanceCount: number,
+    userFragmentShader?: string,
+    atlasId?: string,
+  ) {
+    const atlas = backend.getTextureAtlas(atlasId ?? "default");
+    if (!atlas) {
+      throw new Error(`Atlas "${atlasId ?? "default"}" not found`);
+    }
+
+    this.#atlas = atlas;
+    this.label = label;
+    this.#backend = backend;
+    this.#instanceCount = instanceCount;
+
+    const gl = backend.gl;
+
+    // Compile shaders
+    const vs = this.#compileShader(gl, gl.VERTEX_SHADER, vertexShader);
+    const fs = this.#compileShader(
+      gl,
+      gl.FRAGMENT_SHADER,
+      userFragmentShader ?? fragmentShader,
+    );
+
+    // Create program
+    const program = gl.createProgram();
+    assert(program, "Failed to create WebGL program");
+    gl.attachShader(program, vs);
+    gl.attachShader(program, fs);
+    gl.linkProgram(program);
+
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      const info = gl.getProgramInfoLog(program);
+      throw new Error(`Failed to link shader program: ${info}`);
+    }
+
+    this.#program = program;
+
+    // Get uniform locations
+    this.#uViewProjection = gl.getUniformLocation(program, "u_viewProjection");
+    this.#uResolution = gl.getUniformLocation(program, "u_resolution");
+    this.#uTextureArray = gl.getUniformLocation(program, "u_textureArray");
+
+    // Create VAO
+    const vao = gl.createVertexArray();
+    assert(vao, "Failed to create WebGL VAO");
+    this.#vao = vao;
+
+    // Create instance buffer
+    const instanceBuffer = gl.createBuffer();
+    assert(instanceBuffer, "Failed to create WebGL instance buffer");
+    this.#instanceBuffer = instanceBuffer;
+
+    // Allocate CPU buffer
+    this.#cpuBuffer = new Float32Array(instanceCount * INSTANCE_FLOATS);
+
+    // Set up VAO
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, instanceBuffer);
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      instanceCount * INSTANCE_BYTES,
+      gl.DYNAMIC_DRAW,
+    );
+
+    // Set up instance attributes
+    // Each vec4 attribute takes up 16 bytes
+    // model0 at location 0
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 4, gl.FLOAT, false, INSTANCE_BYTES, 0);
+    gl.vertexAttribDivisor(0, 1);
+
+    // model1 at location 1
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, INSTANCE_BYTES, 16);
+    gl.vertexAttribDivisor(1, 1);
+
+    // model2 at location 2
+    gl.enableVertexAttribArray(2);
+    gl.vertexAttribPointer(2, 4, gl.FLOAT, false, INSTANCE_BYTES, 32);
+    gl.vertexAttribDivisor(2, 1);
+
+    // tint at location 3
+    gl.enableVertexAttribArray(3);
+    gl.vertexAttribPointer(3, 4, gl.FLOAT, false, INSTANCE_BYTES, 48);
+    gl.vertexAttribDivisor(3, 1);
+
+    // uvOffsetAndScale at location 4
+    gl.enableVertexAttribArray(4);
+    gl.vertexAttribPointer(4, 4, gl.FLOAT, false, INSTANCE_BYTES, 64);
+    gl.vertexAttribDivisor(4, 1);
+
+    // cropOffsetAndScale at location 5
+    gl.enableVertexAttribArray(5);
+    gl.vertexAttribPointer(5, 4, gl.FLOAT, false, INSTANCE_BYTES, 80);
+    gl.vertexAttribDivisor(5, 1);
+
+    // atlasIndex at location 6 (integer attribute - use vertexAttribIPointer)
+    gl.enableVertexAttribArray(6);
+    gl.vertexAttribIPointer(6, 1, gl.UNSIGNED_INT, INSTANCE_BYTES, 96);
+    gl.vertexAttribDivisor(6, 1);
+
+    gl.bindVertexArray(null);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+    // Cleanup shaders (they're linked to the program now)
+    gl.deleteShader(vs);
+    gl.deleteShader(fs);
+  }
+
+  #cachedUniform: EngineUniform | null = null;
+
+  startFrame(uniform: EngineUniform): void {
+    this.#instanceIndex = 0;
+    // Cache uniform for use in processBatch - WebGL state is global,
+    // so we need to set program/uniforms/textures right before drawing
+    this.#cachedUniform = uniform;
+  }
+
+  #bindState(): void {
+    const gl = this.#backend.gl;
+    const uniform = this.#cachedUniform;
+    if (!uniform)
+      throw new Error("Tried to bind state but engine uniform is not set");
+
+    gl.useProgram(this.#program);
+
+    // Set uniforms
+    if (this.#uViewProjection) {
+      // wgpu-matrix mat3 is stored as 12 floats (3 columns × 4 floats with padding)
+      // WebGL uniformMatrix3fv expects 9 floats, so extract the relevant values
+      const m = uniform.viewProjectionMatrix;
+      const mat3x3 = new Float32Array([
+        m[0],
+        m[1],
+        m[2], // column 0
+        m[4],
+        m[5],
+        m[6], // column 1
+        m[8],
+        m[9],
+        m[10], // column 2
+      ]);
+      gl.uniformMatrix3fv(this.#uViewProjection, false, mat3x3);
+    }
+
+    if (this.#uResolution) {
+      gl.uniform2f(
+        this.#uResolution,
+        uniform.resolution.width,
+        uniform.resolution.height,
+      );
+    }
+
+    // Bind texture array to texture unit 0
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.#atlas.handle as WebGLTexture);
+    if (this.#uTextureArray) {
+      gl.uniform1i(this.#uTextureArray, 0);
+    }
+  }
+
+  processBatch(nodes: SceneNode[]): number {
+    const gl = this.#backend.gl;
+
+    // Bind program, uniforms, and textures right before drawing
+    // (WebGL state is global, so this must happen per-batch)
+    this.#bindState();
+
+    if (nodes.length > this.#instanceCount) {
+      throw new Error(
+        `ToodleInstanceCap: ${nodes.length} instances enqueued, max is ${this.#instanceCount} for ${this.label} shader`,
+      );
+    }
+
+    let instanceCount = 0;
+
+    // WebGL2 doesn't support firstInstance in drawArraysInstanced,
+    // so we always write starting at offset 0 for each batch
+    for (let i = 0; i < nodes.length; i++) {
+      const instance = nodes[i];
+      assert(instance.renderComponent, "instance has no render component");
+      const floatOffset = instanceCount * INSTANCE_FLOATS;
+
+      instanceCount += instance.renderComponent.writeInstance(
+        instance,
+        this.#cpuBuffer,
+        floatOffset,
+      );
+    }
+
+    // Upload instance data to GPU starting at offset 0
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.#instanceBuffer);
+
+    gl.bufferSubData(
+      gl.ARRAY_BUFFER,
+      0,
+      this.#cpuBuffer,
+      0,
+      instanceCount * INSTANCE_FLOATS,
+    );
+
+    // Draw instances from offset 0
+    gl.bindVertexArray(this.#vao);
+    gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, instanceCount);
+    gl.bindVertexArray(null);
+
+    return 1;
+  }
+
+  endFrame(): void {
+    // Nothing to do
+  }
+
+  #compileShader(
+    gl: WebGL2RenderingContext,
+    type: number,
+    source: string,
+  ): WebGLShader {
+    const shader = gl.createShader(type);
+    assert(shader, "Failed to create WebGL shader");
+
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      const info = gl.getShaderInfoLog(shader);
+      const typeStr = type === gl.VERTEX_SHADER ? "vertex" : "fragment";
+      gl.deleteShader(shader);
+      throw new Error(`Failed to compile ${typeStr} shader: ${info}`);
+    }
+
+    return shader;
+  }
+
+  destroy(): void {
+    const gl = this.#backend.gl;
+    gl.deleteProgram(this.#program);
+    gl.deleteVertexArray(this.#vao);
+    gl.deleteBuffer(this.#instanceBuffer);
+  }
+}

package/src/backends/webgl2/glsl/quad.glsl.ts

@@ -0,0 +1,114 @@
+export const vertexShader = /*glsl*/ `#version 300 es
+precision highp float;
+
+// Engine uniforms
+uniform mat3 u_viewProjection;
+uniform vec2 u_resolution;
+
+// Instance data attributes
+// location 0-2 are the model matrix for this instanced quad (mat3 as 3 vec3s)
+layout(location = 0) in vec4 a_model0;
+layout(location = 1) in vec4 a_model1;
+layout(location = 2) in vec4 a_model2;
+// location 3 is the tint color
+layout(location = 3) in vec4 a_tint;
+// location 4 is the uv offset and scale
+layout(location = 4) in vec4 a_uvOffsetAndScale;
+// location 5 is the crop offset and scale
+layout(location = 5) in vec4 a_cropOffsetAndScale;
+// location 6 is the atlas index (integer attribute)
+layout(location = 6) in uint a_atlasIndex;
+
+// Outputs to fragment shader
+out vec4 v_uv; // xy = atlas uv, zw = original uv
+out vec4 v_tint;
+flat out int v_atlasIndex;
+
+// Lookup tables for unit quad positions and UVs
+const vec2 posLookup[4] = vec2[4](
+  vec2(-0.5, 0.5),
+  vec2(-0.5, -0.5),
+  vec2(0.5, 0.5),
+  vec2(0.5, -0.5)
+);
+
+const vec2 uvLookup[4] = vec2[4](
+  vec2(0.0, 0.0),
+  vec2(0.0, 1.0),
+  vec2(1.0, 0.0),
+  vec2(1.0, 1.0)
+);
+
+void main() {
+  // Reconstruct model matrix from instance data
+  mat3 modelMatrix = mat3(a_model0.xyz, a_model1.xyz, a_model2.xyz);
+
+  // Transform vertex position
+  vec2 localPosition = posLookup[gl_VertexID];
+  vec2 cropOffset = a_cropOffsetAndScale.xy;
+  vec2 cropScale = a_cropOffsetAndScale.zw;
+  vec2 croppedPosition = localPosition * cropScale + cropOffset;
+  vec3 worldPosition = modelMatrix * vec3(croppedPosition, 1.0);
+  vec3 clipPosition = u_viewProjection * worldPosition;
+  gl_Position = vec4(clipPosition.xy, 0.0, 1.0);
+
+  // Set UV coordinates
+  vec2 originalUv = uvLookup[gl_VertexID];
+  vec2 atlasUv = originalUv * a_uvOffsetAndScale.zw * cropScale + a_uvOffsetAndScale.xy;
+  v_uv = vec4(atlasUv, originalUv);
+
+  // Pass through tint and atlas index
+  v_tint = a_tint;
+  v_atlasIndex = int(a_atlasIndex);
+}
+
+`;
+
+/**
+ * Default fragment shader for WebGL2 quad rendering.
+ * Custom fragment shaders must follow the same contract:
+ * - Required uniforms: u_resolution, u_textureArray
+ * - Required inputs: v_uv (vec4), v_tint (vec4), v_atlasIndex (flat int)
+ * - Required output: fragColor (vec4)
+ */
+export const fragmentShader = /*glsl*/ `#version 300 es
+precision highp float;
+precision highp sampler2DArray;
+
+// Engine uniforms
+uniform vec2 u_resolution;
+
+// Texture array sampler
+uniform sampler2DArray u_textureArray;
+
+// Inputs from vertex shader
+in vec4 v_uv; // xy = atlas uv, zw = original uv
+in vec4 v_tint;
+flat in int v_atlasIndex;
+
+// Output color
+out vec4 fragColor;
+
+void main() {
+  vec2 atlasUv = v_uv.xy;
+  vec2 originalUv = v_uv.zw;
+
+  if (v_atlasIndex == 1000) {
+    // Rectangle - return solid color
+    fragColor = vec4(1.0, 1.0, 1.0, 1.0) * v_tint;
+  } else if (v_atlasIndex == 1001) {
+    // Circle
+    float edgeWidth = 4.0 / max(u_resolution.x, u_resolution.y);
+    float centerDistance = 2.0 * distance(vec2(0.5, 0.5), originalUv);
+    float alpha = 1.0 - smoothstep(1.0 - edgeWidth, 1.0 + edgeWidth, centerDistance);
+    fragColor = vec4(v_tint.rgb, alpha * v_tint.a);
+  } else {
+    // Texture - sample from texture array
+    vec4 color = texture(u_textureArray, vec3(atlasUv, float(v_atlasIndex)));
+    fragColor = color * v_tint;
+  }
+}
+`;
+
+/** Alias for users who want to extend the default shader */
+export const defaultFragmentShader = fragmentShader;

package/src/backends/webgl2/mod.ts

@@ -0,0 +1,2 @@
+export { WebGLBackend, type WebGLBackendOptions } from "./WebGLBackend";
+export { WebGLQuadShader } from "./WebGLQuadShader";

package/src/{textures → backends/webgpu}/TextureComputeShader.ts

@@ -1,12 +1,11 @@
-import computeShader from "./pixel-scraping.wgsl";
-import type { TextureWithMetadata } from "./types";
+import type { TextureWithMetadata } from "../../textures/types";
+import computeShader from "./wgsl/pixel-scraping.wgsl";
 
 // Constants
 const BOUNDING_BOX_SIZE = 4 * Uint32Array.BYTES_PER_ELEMENT;
 const WORKGROUP_SIZE = 8;
 const MAX_BOUND = 0xffffffff;
 const MIN_BOUND = 0x00000000;
-const BYTES_PER_PIXEL = 4;
 
 /**
  * The data returned by the compute shader that represents the opaque pixels in a texture.
@@ -260,51 +259,6 @@ export class TextureComputeShader {
     };
   }
 
-  /**
-   * Converts a GPUTexture to an ImageBitmap for display or further use.
-   */
-  async #textureToBitmap(
-    texture: GPUTexture,
-    width: number,
-    height: number,
-  ): Promise<ImageBitmap> {
-    const paddedBytesPerRow = Math.ceil((width * BYTES_PER_PIXEL) / 256) * 256;
-    const bufferSize = paddedBytesPerRow * height;
-
-    const readBuffer = this.#device.createBuffer({
-      size: bufferSize,
-      usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
-    });
-
-    const encoder = this.#device.createCommandEncoder();
-    encoder.copyTextureToBuffer(
-      { texture },
-      { buffer: readBuffer, bytesPerRow: paddedBytesPerRow },
-      { width, height, depthOrArrayLayers: 1 },
-    );
-    this.#device.queue.submit([encoder.finish()]);
-
-    await readBuffer.mapAsync(GPUMapMode.READ);
-    const raw = readBuffer.getMappedRange();
-    const rawArray = new Uint8Array(raw);
-
-    const pixelData = new Uint8ClampedArray(width * height * 4);
-    for (let y = 0; y < height; y++) {
-      const src = y * paddedBytesPerRow;
-      const dst = y * width * 4;
-      pixelData.set(rawArray.subarray(src, src + width * 4), dst);
-    }
-    readBuffer.unmap();
-
-    const canvas = document.createElement("canvas");
-    canvas.width = width;
-    canvas.height = height;
-    const ctx = canvas.getContext("2d")!;
-    ctx.putImageData(new ImageData(pixelData, width, height), 0, 0);
-
-    return await createImageBitmap(canvas);
-  }
-
   // Bind group helpers
 
   #boundsBindGroup(inputTexture: GPUTexture): GPUBindGroup {