xbintsc 0.5.31 → 0.5.36

package/dist/tests/e2e/gui-webgl2-3d.test.js

@@ -0,0 +1,264 @@
+/**
+ * End-to-end tests for WebGL 2 3D and 2D-array textures.
+ */
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { createGuiHarness, guiAvailable } from "./gui-helpers.js";
+const harness = createGuiHarness();
+const PAGE = `
+<html><head><title>webgl2-3d</title></head>
+<body style="margin:0">
+  <canvas id="c" width="64" height="64"></canvas>
+</body></html>`;
+describe.skipIf(!guiAvailable)("gui extension — WebGL 2 3D textures", () => {
+    beforeAll(() => harness.setup());
+    afterAll(() => harness.cleanup());
+    it("samples 2D-array and 3D texture layers", () => {
+        const { value, stderr } = harness.compileAndRun("webgl2-3d", `
+      import { createWindow } from "gui";
+      import page from "./page.html";
+
+      const win = createWindow({ title: "3d", width: 320, height: 240 });
+      const label = (name: string, value: any): void => console.log(name + "=" + value);
+
+      win.on("ready", () => {
+        const canvas: any = document.getElementById("c");
+        const gl: any = canvas.getContext("webgl2");
+        if (gl == null) {
+          console.log("webgl2=false");
+          win.close();
+          return;
+        }
+        label("max-3d", gl.getParameter(gl.MAX_3D_TEXTURE_SIZE));
+        label("max-layers", gl.getParameter(gl.MAX_ARRAY_TEXTURE_LAYERS));
+
+        const vs: any = gl.createShader(gl.VERTEX_SHADER);
+        gl.shaderSource(vs, "#version 300 es\\n" +
+          "in vec2 a_pos; out vec2 v_uv;" +
+          "void main() { v_uv = a_pos * 0.5 + 0.5;" +
+          "  gl_Position = vec4(a_pos, 0.0, 1.0); }");
+        gl.compileShader(vs);
+        const make_program = (fs_source: string): any => {
+          const fs: any = gl.createShader(gl.FRAGMENT_SHADER);
+          gl.shaderSource(fs, fs_source);
+          gl.compileShader(fs);
+          const program: any = gl.createProgram();
+          gl.attachShader(program, vs);
+          gl.attachShader(program, fs);
+          gl.linkProgram(program);
+          return program;
+        };
+        const array_program: any = make_program("#version 300 es\\n" +
+          "precision highp float; precision highp sampler2DArray;" +
+          "in vec2 v_uv; uniform sampler2DArray u_arr; uniform float u_layer;" +
+          "out vec4 fragColor;" +
+          "void main() { fragColor = texture(u_arr, vec3(v_uv, u_layer)); }");
+        const volume_program: any = make_program("#version 300 es\\n" +
+          "precision highp float; precision highp sampler3D;" +
+          "in vec2 v_uv; uniform sampler3D u_vol; uniform float u_z;" +
+          "out vec4 fragColor;" +
+          "void main() { fragColor = texture(u_vol, vec3(v_uv, u_z)); }");
+        label("programs", gl.getProgramParameter(array_program, gl.LINK_STATUS) === true &&
+          gl.getProgramParameter(volume_program, gl.LINK_STATUS) === true);
+
+        const quad = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quad);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+          -1, -1,  3, -1,  -1, 3,
+        ]), gl.STATIC_DRAW);
+        const bind_quad = (program: any): void => {
+          gl.useProgram(program);
+          const pos: any = gl.getAttribLocation(program, "a_pos");
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 8, 0);
+        };
+        const px = new Uint8Array(4);
+        const probe = (): string => {
+          gl.readPixels(32, 32, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, px);
+          return px[0] + "," + px[1] + "," + px[2] + "," + px[3];
+        };
+        const red = [255, 0, 0, 255];
+        const green = [0, 255, 0, 255];
+        const layer = (color: number[]): number[] => {
+          return color.concat(color).concat(color).concat(color);
+        };
+        const data = new Uint8Array(layer(red).concat(layer(green)));
+
+        gl.viewport(0, 0, 64, 64);
+
+        // --- 2D array -----------------------------------------------------
+        const array: any = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, array);
+        gl.texImage3D(gl.TEXTURE_2D_ARRAY, 0, gl.RGBA, 2, 2, 2, 0,
+          gl.RGBA, gl.UNSIGNED_BYTE, data);
+        gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        bind_quad(array_program);
+        gl.uniform1i(gl.getUniformLocation(array_program, "u_arr"), 0);
+        const array_layer: any = gl.getUniformLocation(array_program, "u_layer");
+        gl.clearColor(0, 0, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.uniform1f(array_layer, 0);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+        label("array-0", probe());
+        gl.uniform1f(array_layer, 1);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+        label("array-1", probe());
+
+        // --- 3D -----------------------------------------------------------
+        const volume: any = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_3D, volume);
+        gl.texImage3D(gl.TEXTURE_3D, 0, gl.RGBA, 2, 2, 2, 0,
+          gl.RGBA, gl.UNSIGNED_BYTE, data);
+        gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        bind_quad(volume_program);
+        gl.uniform1i(gl.getUniformLocation(volume_program, "u_vol"), 0);
+        const z: any = gl.getUniformLocation(volume_program, "u_z");
+        gl.uniform1f(z, 0.25);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+        label("volume-0", probe());
+        gl.uniform1f(z, 0.75);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+        label("volume-1", probe());
+        label("error", gl.getError());
+        win.close();
+      });
+
+      win.loadHTML(page);
+      `, { files: { "page.html": PAGE }, autocloseMs: 10000 });
+        expect(value("max-3d")).toBe("2048");
+        expect(value("max-layers")).toBe("256");
+        expect(value("programs")).toBe("true");
+        expect(value("array-0")).toBe("255,0,0,255");
+        expect(value("array-1")).toBe("0,255,0,255");
+        expect(value("volume-0")).toBe("255,0,0,255");
+        expect(value("volume-1")).toBe("0,255,0,255");
+        expect(value("error")).toBe("0");
+        expect(stderr).not.toContain("pipeline creation failed");
+    });
+    it("updates array layers with texSubImage3D and renders with framebufferTextureLayer", () => {
+        const { value, stderr } = harness.compileAndRun("webgl2-3d-layer", `
+      import { createWindow } from "gui";
+      import page from "./page.html";
+
+      const win = createWindow({ title: "3d-layer", width: 320, height: 240 });
+      const label = (name: string, value: any): void => console.log(name + "=" + value);
+
+      win.on("ready", () => {
+        const canvas: any = document.getElementById("c");
+        const gl: any = canvas.getContext("webgl2");
+        if (gl == null) {
+          console.log("webgl2=false");
+          win.close();
+          return;
+        }
+        const vs: any = gl.createShader(gl.VERTEX_SHADER);
+        gl.shaderSource(vs, "#version 300 es\\n" +
+          "in vec2 a_pos; out vec2 v_uv;" +
+          "void main() { v_uv = a_pos * 0.5 + 0.5;" +
+          "  gl_Position = vec4(a_pos, 0.0, 1.0); }");
+        gl.compileShader(vs);
+        const flat: any = gl.createProgram();
+        {
+          const fs: any = gl.createShader(gl.FRAGMENT_SHADER);
+          gl.shaderSource(fs, "#version 300 es\\n" +
+            "precision highp float; uniform vec4 u_color; out vec4 fragColor;" +
+            "void main() { fragColor = u_color; }");
+          gl.compileShader(fs);
+          gl.attachShader(flat, vs);
+          gl.attachShader(flat, fs);
+          gl.linkProgram(flat);
+        }
+        const sampler: any = gl.createProgram();
+        {
+          const fs: any = gl.createShader(gl.FRAGMENT_SHADER);
+          gl.shaderSource(fs, "#version 300 es\\n" +
+            "precision highp float; precision highp sampler2DArray;" +
+            "in vec2 v_uv; uniform sampler2DArray u_arr; uniform float u_layer;" +
+            "out vec4 fragColor;" +
+            "void main() { fragColor = texture(u_arr, vec3(v_uv, u_layer)); }");
+          gl.compileShader(fs);
+          gl.attachShader(sampler, vs);
+          gl.attachShader(sampler, fs);
+          gl.linkProgram(sampler);
+        }
+        label("programs", gl.getProgramParameter(flat, gl.LINK_STATUS) === true &&
+          gl.getProgramParameter(sampler, gl.LINK_STATUS) === true);
+
+        const quad = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quad);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+          -1, -1,  3, -1,  -1, 3,
+        ]), gl.STATIC_DRAW);
+        const bind = (program: any): void => {
+          gl.useProgram(program);
+          const pos: any = gl.getAttribLocation(program, "a_pos");
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 8, 0);
+        };
+        const px = new Uint8Array(4);
+        const probe = (): string => {
+          gl.readPixels(32, 32, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, px);
+          return px[0] + "," + px[1] + "," + px[2] + "," + px[3];
+        };
+        const red = new Uint8Array(16);
+        const green = new Uint8Array(16);
+        for (let i = 0; i < 4; i++) {
+          red[i * 4] = 255;
+          red[i * 4 + 3] = 255;
+          green[i * 4 + 1] = 255;
+          green[i * 4 + 3] = 255;
+        }
+
+        const array: any = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D_ARRAY, array);
+        gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.RGBA, 2, 2, 2);
+        gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, 0, 2, 2, 1,
+          gl.RGBA, gl.UNSIGNED_BYTE, red);
+        gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, 1, 2, 2, 1,
+          gl.RGBA, gl.UNSIGNED_BYTE, green);
+        gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        const sample_layer = (layer: number): string => {
+          gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+          gl.viewport(0, 0, 64, 64);
+          gl.clearColor(0, 0, 0, 1);
+          gl.clear(gl.COLOR_BUFFER_BIT);
+          bind(sampler);
+          gl.uniform1i(gl.getUniformLocation(sampler, "u_arr"), 0);
+          gl.uniform1f(gl.getUniformLocation(sampler, "u_layer"), layer);
+          gl.bindTexture(gl.TEXTURE_2D_ARRAY, array);
+          gl.drawArrays(gl.TRIANGLES, 0, 3);
+          return probe();
+        };
+        label("sub-0", sample_layer(0));
+        label("sub-1", sample_layer(1));
+
+        const fbo: any = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+        gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, array, 0, 1);
+        label("fbo", gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE);
+        gl.viewport(0, 0, 2, 2);
+        bind(flat);
+        gl.uniform4f(gl.getUniformLocation(flat, "u_color"), 0, 0, 1, 1);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+        label("rendered", sample_layer(1));
+        label("untouched", sample_layer(0));
+        label("error", gl.getError());
+        win.close();
+      });
+
+      win.loadHTML(page);
+      `, { files: { "page.html": PAGE }, autocloseMs: 10000 });
+        expect(value("programs")).toBe("true");
+        expect(value("sub-0")).toBe("255,0,0,255");
+        expect(value("sub-1")).toBe("0,255,0,255");
+        expect(value("fbo")).toBe("true");
+        expect(value("rendered")).toBe("0,0,255,255");
+        expect(value("untouched")).toBe("255,0,0,255");
+        expect(value("error")).toBe("0");
+        expect(stderr).not.toContain("pipeline creation failed");
+    });
+});
+//# sourceMappingURL=gui-webgl2-3d.test.js.map

package/dist/tests/e2e/gui-webgl2-3d.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gui-webgl2-3d.test.js","sourceRoot":"","sources":["../../../tests/e2e/gui-webgl2-3d.test.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAElE,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;AAEnC,MAAM,IAAI,GAAG;;;;eAIE,CAAC;AAEhB,QAAQ,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC,CAAC,qCAAqC,EAAE,GAAG,EAAE;IACzE,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;IACjC,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;IAElC,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;QAChD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,aAAa,CAC7C,WAAW,EACX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiHC,EACD,EAAE,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,CACrD,CAAC;QAEF,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACrC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACvC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC7C,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC7C,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC9C,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC9C,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACjC,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,0BAA0B,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kFAAkF,EAAE,GAAG,EAAE;QAC1F,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,aAAa,CAC7C,iBAAiB,EACjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgHC,EACD,EAAE,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,CACrD,CAAC;QAEF,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACvC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC3C,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC3C,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAClC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC9C,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC/C,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACjC,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,0BAA0B,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/tests/e2e/gui-webgl2-blit.test.d.ts

@@ -0,0 +1,10 @@
+/**
+ * End-to-end tests for WebGL 2 framebuffer blits and scissored clears.
+ *
+ * A blit or a scissored clear only writes the region it covers; the pixels
+ * around it must keep their previous contents. A destination load-op of
+ * DONT_CARE breaks that on a tile-based backend (Metal's
+ * MTLLoadActionDontCare discards the whole attachment), so these probes read
+ * back both the written region and the untouched one.
+ */
+export {};

package/dist/tests/e2e/gui-webgl2-blit.test.js

@@ -0,0 +1,262 @@
+/**
+ * End-to-end tests for WebGL 2 framebuffer blits and scissored clears.
+ *
+ * A blit or a scissored clear only writes the region it covers; the pixels
+ * around it must keep their previous contents. A destination load-op of
+ * DONT_CARE breaks that on a tile-based backend (Metal's
+ * MTLLoadActionDontCare discards the whole attachment), so these probes read
+ * back both the written region and the untouched one.
+ */
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { createGuiHarness, guiAvailable } from "./gui-helpers.js";
+const harness = createGuiHarness();
+const PAGE = `
+<html><head><title>webgl2-blit</title></head>
+<body style="margin:0">
+  <canvas id="c" width="64" height="64"></canvas>
+</body></html>`;
+/**
+ * Compare a `readPixels` result with the expected RGBA bytes. Depth sampled
+ * back through an RGBA8 target differs by one or two bytes between backends
+ * (0.5 arrives as 127 or 128), so those values use a tolerance.
+ */
+function near(actual, expected, tolerance) {
+    const parts = actual.split(",").map((part) => Number(part));
+    expect(parts.length).toBe(expected.length);
+    for (let i = 0; i < expected.length; i++) {
+        const actual = parts[i] ?? Number.POSITIVE_INFINITY;
+        const want = expected[i] ?? Number.POSITIVE_INFINITY;
+        expect(Math.abs(actual - want)).toBeLessThanOrEqual(tolerance);
+    }
+}
+describe.skipIf(!guiAvailable)("gui extension — WebGL 2 blits", () => {
+    beforeAll(() => harness.setup());
+    afterAll(() => harness.cleanup());
+    it("blits framebuffers and clears a scissor rectangle", () => {
+        const { value, stderr } = harness.compileAndRun("webgl2-blit", `
+      import { createWindow } from "gui";
+      import page from "./page.html";
+
+      const win = createWindow({ title: "blit", width: 320, height: 240 });
+      const label = (name: string, value: any): void => console.log(name + "=" + value);
+
+      win.on("ready", () => {
+        const canvas: any = document.getElementById("c");
+        const gl: any = canvas.getContext("webgl2");
+        if (gl == null) {
+          console.log("webgl2=false");
+          win.close();
+          return;
+        }
+        const px = new Uint8Array(4);
+        const probe = (x: number, y: number): string => {
+          gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, px);
+          return px[0] + "," + px[1] + "," + px[2] + "," + px[3];
+        };
+        const red = (x: number, y: number): string => {
+          gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, px);
+          return "" + px[0];
+        };
+
+        const make_program = (vs_source: string, fs_source: string): any => {
+          const vs: any = gl.createShader(gl.VERTEX_SHADER);
+          gl.shaderSource(vs, vs_source);
+          gl.compileShader(vs);
+          const fs: any = gl.createShader(gl.FRAGMENT_SHADER);
+          gl.shaderSource(fs, fs_source);
+          gl.compileShader(fs);
+          const program: any = gl.createProgram();
+          gl.attachShader(program, vs);
+          gl.attachShader(program, fs);
+          gl.linkProgram(program);
+          return program;
+        };
+        const flat = make_program(
+          "#version 300 es\\nin vec2 a_pos; uniform float u_z;" +
+          "void main() { gl_Position = vec4(a_pos, u_z, 1.0); }",
+          "#version 300 es\\nprecision highp float; uniform vec4 u_color;" +
+          "out vec4 fragColor; void main() { fragColor = u_color; }");
+        const sampler = make_program(
+          "#version 300 es\\nin vec2 a_pos; out vec2 v_uv;" +
+          "void main() { v_uv = a_pos * 0.5 + 0.5;" +
+          "  gl_Position = vec4(a_pos, 0.0, 1.0); }",
+          "#version 300 es\\nprecision highp float; in vec2 v_uv;" +
+          "uniform sampler2D u_tex; out vec4 fragColor;" +
+          "void main() { fragColor = vec4(vec3(texture(u_tex, v_uv).r), 1.0); }");
+        label("programs", gl.getProgramParameter(flat, gl.LINK_STATUS) === true &&
+          gl.getProgramParameter(sampler, gl.LINK_STATUS) === true);
+
+        const quad = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quad);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+          -1, -1,  3, -1,  -1, 3,
+        ]), gl.STATIC_DRAW);
+        const draw_flat = (r: number, g: number, b: number, z: number): void => {
+          gl.useProgram(flat);
+          gl.bindBuffer(gl.ARRAY_BUFFER, quad);
+          gl.enableVertexAttribArray(gl.getAttribLocation(flat, "a_pos"));
+          gl.vertexAttribPointer(gl.getAttribLocation(flat, "a_pos"), 2, gl.FLOAT, false, 8, 0);
+          gl.uniform1f(gl.getUniformLocation(flat, "u_z"), z);
+          gl.uniform4f(gl.getUniformLocation(flat, "u_color"), r, g, b, 1);
+          gl.drawArrays(gl.TRIANGLES, 0, 3);
+        };
+        const show_depth = (depth: any): string => {
+          gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+          gl.viewport(0, 0, 64, 64);
+          gl.useProgram(sampler);
+          gl.uniform1i(gl.getUniformLocation(sampler, "u_tex"), 0);
+          gl.bindTexture(gl.TEXTURE_2D, depth);
+          gl.clearColor(0, 0, 0, 1);
+          gl.clear(gl.COLOR_BUFFER_BIT);
+          gl.drawArrays(gl.TRIANGLES, 0, 3);
+          return red(8, 32) + "," + red(56, 32) + "," + red(32, 8) + "," + red(32, 56);
+        };
+
+        // --- scissored colour clear ---------------------------------------
+        gl.viewport(0, 0, 64, 64);
+        gl.clearColor(1, 0, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.enable(gl.SCISSOR_TEST);
+        gl.scissor(8, 8, 16, 16);
+        gl.clearColor(0, 0, 1, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.disable(gl.SCISSOR_TEST);
+        label("scissor-inside", probe(16, 16));
+        label("scissor-outside", probe(2, 2));
+
+        // --- render to a texture and blit it back -------------------------
+        const target = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, target);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 32, 32, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        const fbo = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, target, 0);
+        label("fbo", gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE);
+        gl.viewport(0, 0, 32, 32);
+        gl.clearColor(0, 1, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        draw_flat(0, 0, 1, 0);
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, fbo);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
+        gl.blitFramebuffer(0, 0, 32, 32, 0, 0, 64, 64, gl.COLOR_BUFFER_BIT, gl.NEAREST);
+        label("blit", probe(32, 32));
+
+        // --- scissored depth clear ---------------------------------------
+        const depth = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, depth);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT24, 32, 32, 0,
+          gl.DEPTH_COMPONENT, gl.UNSIGNED_INT, null);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        const depth_color = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, depth_color);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 32, 32, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        const depth_fbo = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, depth_fbo);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, depth_color, 0);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depth, 0);
+        gl.viewport(0, 0, 32, 32);
+        gl.clearDepth(1);
+        gl.clearColor(0, 0, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        gl.enable(gl.DEPTH_TEST);
+        gl.depthFunc(gl.LESS);
+        draw_flat(1, 1, 1, 0.5);
+        gl.disable(gl.DEPTH_TEST);
+        label("depth-initial", show_depth(depth));
+
+        gl.bindFramebuffer(gl.FRAMEBUFFER, depth_fbo);
+        gl.viewport(0, 0, 32, 32);
+        gl.enable(gl.SCISSOR_TEST);
+        gl.scissor(0, 0, 16, 32);
+        gl.clearDepth(0);
+        gl.clear(gl.DEPTH_BUFFER_BIT);
+        gl.disable(gl.SCISSOR_TEST);
+        label("depth-half", show_depth(depth));
+
+        gl.bindFramebuffer(gl.FRAMEBUFFER, depth_fbo);
+        gl.enable(gl.SCISSOR_TEST);
+        gl.scissor(0, 0, 32, 32);
+        gl.clearDepth(1);
+        gl.clear(gl.DEPTH_BUFFER_BIT);
+        gl.disable(gl.SCISSOR_TEST);
+        label("depth-full", show_depth(depth));
+        label("error", gl.getError());
+        win.close();
+      });
+
+      win.loadHTML(page);
+      `, { files: { "page.html": PAGE }, autocloseMs: 12000 });
+        expect(value("programs")).toBe("true");
+        expect(value("scissor-inside")).toBe("0,0,255,255");
+        expect(value("scissor-outside")).toBe("255,0,0,255");
+        expect(value("fbo")).toBe("true");
+        expect(value("blit")).toBe("0,0,255,255");
+        // Depth is sampled back through an RGBA8 target: 0.5 arrives as 127 or 128
+        // depending on the backend's float -> UNORM rounding, so compare with a
+        // tolerance rather than an exact byte value.
+        near(value("depth-initial"), [128, 128, 128, 128], 2);
+        near(value("depth-half"), [0, 128, 128, 128], 2);
+        near(value("depth-full"), [255, 255, 255, 255], 2);
+        expect(value("error")).toBe("0");
+        expect(stderr).not.toContain("pipeline creation failed");
+    });
+    it("preserves pixels outside a partial framebuffer blit", () => {
+        const { value, stderr } = harness.compileAndRun("webgl2-partial-blit", `
+      import { createWindow } from "gui";
+      import page from "./page.html";
+
+      const win = createWindow({ title: "partial-blit", width: 320, height: 240 });
+      const label = (name: string, value: any): void => console.log(name + "=" + value);
+
+      win.on("ready", () => {
+        const canvas: any = document.getElementById("c");
+        const gl: any = canvas.getContext("webgl2");
+        if (gl == null) {
+          console.log("webgl2=false");
+          win.close();
+          return;
+        }
+        const px = new Uint8Array(4);
+        const probe = (x: number, y: number): string => {
+          gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, px);
+          return px[0] + "," + px[1] + "," + px[2] + "," + px[3];
+        };
+
+        // The whole canvas is red; the blit source is blue.
+        gl.viewport(0, 0, 64, 64);
+        gl.clearColor(1, 0, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+
+        const target = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, target);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 32, 32, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        const fbo = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, target, 0);
+        gl.viewport(0, 0, 32, 32);
+        gl.clearColor(0, 0, 1, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+
+        // Only the bottom-left quarter of the canvas: everywhere else has to
+        // keep the red it had. A blit whose destination load-op discards the
+        // attachment (Metal's MTLLoadActionDontCare) leaves those pixels
+        // undefined, which is what this probe catches.
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, fbo);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
+        gl.blitFramebuffer(0, 0, 32, 32, 0, 0, 16, 16, gl.COLOR_BUFFER_BIT, gl.NEAREST);
+        label("blit-inside", probe(8, 8));
+        label("blit-outside", probe(48, 48));
+        label("error", gl.getError());
+        win.close();
+      });
+
+      win.loadHTML(page);
+      `, { files: { "page.html": PAGE }, autocloseMs: 10000 });
+        expect(value("blit-inside")).toBe("0,0,255,255");
+        expect(value("blit-outside")).toBe("255,0,0,255");
+        expect(value("error")).toBe("0");
+        expect(stderr).not.toContain("pipeline creation failed");
+    });
+});
+//# sourceMappingURL=gui-webgl2-blit.test.js.map

package/dist/tests/e2e/gui-webgl2-blit.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gui-webgl2-blit.test.js","sourceRoot":"","sources":["../../../tests/e2e/gui-webgl2-blit.test.ts"],"names":[],"mappings":"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"}

package/dist/tests/e2e/gui-webgl2-formats.test.d.ts

@@ -0,0 +1,6 @@
+/**
+ * End-to-end tests for the WebGL 2 format additions: stencil, float/depth
+ * textures, `ImageBitmap` uploads and compressed textures. Framebuffer blits
+ * and scissored clears live in `gui-webgl2-blit.test.ts`.
+ */
+export {};