@gjsify/webgl 0.1.1 → 0.1.3

package/lib/esm/conformance/rendering.spec.js

@@ -0,0 +1,424 @@
+import { describe, it, expect, beforeEach, on } from "@gjsify/unit";
+import {
+  makeProgram,
+  drawTriangle,
+  makeTestFBO,
+  destroyTestFBO,
+  makeTestFBOWithDepth,
+  destroyTestFBOWithDepth,
+  pixelClose
+} from "../test-utils.js";
+import { createGLSetup } from "./setup.js";
+const VS = `
+    precision mediump float;
+    attribute vec2 position;
+    void main() { gl_Position = vec4(position, 0.0, 1.0); }`;
+const VS_DEPTH = `
+    attribute vec2 position;
+    uniform float depth;
+    void main() { gl_Position = vec4(position, depth, 1.0); }`;
+const FS_COLOR = `
+    precision mediump float;
+    uniform vec4 color;
+    void main() { gl_FragColor = color; }`;
+var rendering_spec_default = async () => {
+  await on("Display", async () => {
+    const setup = createGLSetup();
+    if (!setup) {
+      console.warn("WebGL context not available \u2014 skipping conformance/rendering tests");
+      return;
+    }
+    const { gl, glArea } = setup;
+    glArea.make_current();
+    await describe("rendering/blending", async () => {
+      beforeEach(async () => {
+        glArea.make_current();
+      });
+      const W = 2, H = 2;
+      function runBlendTest(t) {
+        const fbo = makeTestFBO(gl, W, H);
+        const fsSrc = `
+                    precision mediump float;
+                    void main() { gl_FragColor = vec4(${t.srcColor[0]},${t.srcColor[1]},${t.srcColor[2]},${t.srcColor[3]}); }`;
+        gl.clearColor(t.dstColor[0], t.dstColor[1], t.dstColor[2], t.dstColor[3]);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        const prog = makeProgram(gl, VS, fsSrc);
+        gl.useProgram(prog);
+        gl.enable(gl.BLEND);
+        gl.blendEquation(t.equation);
+        gl.blendFunc(t.srcFactor, t.dstFactor);
+        drawTriangle(gl);
+        gl.disable(gl.BLEND);
+        const pixels = new Uint8Array(W * H * 4);
+        gl.readPixels(0, 0, W, H, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+        destroyTestFBO(gl, fbo);
+        const expected255 = t.expected.map((v) => Math.round(v * 255));
+        for (let i = 0; i < W * H * 4; i += 4) {
+          if (!pixelClose(pixels.subarray(i, i + 4), expected255, 4)) {
+            return false;
+          }
+        }
+        return true;
+      }
+      await it("FUNC_ADD ONE ONE: dst=[0.5,0.5,0.5,1] + src=[0.5,0.5,0.5,1] = [1,1,1,1]", async () => {
+        expect(runBlendTest({
+          name: "ADD ONE ONE",
+          equation: gl.FUNC_ADD,
+          srcFactor: gl.ONE,
+          dstFactor: gl.ONE,
+          dstColor: [0.5, 0.5, 0.5, 1],
+          srcColor: [0.5, 0.5, 0.5, 1],
+          expected: [1, 1, 1, 1]
+        })).toBe(true);
+        expect(gl.getError()).toBe(gl.NO_ERROR);
+      });
+      await it("FUNC_ADD ONE ZERO: dst=[0.5,0.5,0.5,0.5] + src=[0.2,0.2,0.2,1] = [0.2,0.2,0.2,1]", async () => {
+        expect(runBlendTest({
+          name: "ADD ONE ZERO",
+          equation: gl.FUNC_ADD,
+          srcFactor: gl.ONE,
+          dstFactor: gl.ZERO,
+          dstColor: [0.5, 0.5, 0.5, 0.5],
+          srcColor: [0.2, 0.2, 0.2, 1],
+          expected: [0.2, 0.2, 0.2, 1]
+        })).toBe(true);
+        expect(gl.getError()).toBe(gl.NO_ERROR);
+      });
+      await it("FUNC_ADD ZERO SRC_COLOR: dst=[0.8,0.8,0.8,1] * src=[0.5,0.5,0.5,0.5] = [0.4,0.4,0.4,0.5]", async () => {
+        expect(runBlendTest({
+          name: "ADD ZERO SRC_COLOR",
+          equation: gl.FUNC_ADD,
+          srcFactor: gl.ZERO,
+          dstFactor: gl.SRC_COLOR,
+          dstColor: [0.8, 0.8, 0.8, 1],
+          srcColor: [0.5, 0.5, 0.5, 0.5],
+          expected: [0.4, 0.4, 0.4, 0.5]
+        })).toBe(true);
+        expect(gl.getError()).toBe(gl.NO_ERROR);
+      });
+      await it("FUNC_ADD DST_COLOR ZERO: dst=[0.8,0.8,0.8,1] src=[0.5,0.5,0.5,0.5] = [0.4,0.4,0.4,0.5]", async () => {
+        expect(runBlendTest({
+          name: "ADD DST_COLOR ZERO",
+          equation: gl.FUNC_ADD,
+          srcFactor: gl.DST_COLOR,
+          dstFactor: gl.ZERO,
+          dstColor: [0.8, 0.8, 0.8, 1],
+          srcColor: [0.5, 0.5, 0.5, 0.5],
+          expected: [0.4, 0.4, 0.4, 0.5]
+        })).toBe(true);
+        expect(gl.getError()).toBe(gl.NO_ERROR);
+      });
+      await it("FUNC_ADD SRC_ALPHA ONE_MINUS_SRC_ALPHA: alpha=0.5 blend", async () => {
+        expect(runBlendTest({
+          name: "ADD SRC_ALPHA ONE_MINUS_SRC_ALPHA",
+          equation: gl.FUNC_ADD,
+          srcFactor: gl.SRC_ALPHA,
+          dstFactor: gl.ONE_MINUS_SRC_ALPHA,
+          dstColor: [0.5, 0, 0.5, 1],
+          srcColor: [0.5, 1, 0, 0.5],
+          expected: [0.5, 0.5, 0.25, 0.75]
+        })).toBe(true);
+        expect(gl.getError()).toBe(gl.NO_ERROR);
+      });
+    });
+    await describe("rendering/depth-buffer", async () => {
+      beforeEach(async () => {
+        glArea.make_current();
+      });
+      await it("DEPTH_TEST NOTEQUAL: both passes render because depths differ", async () => {
+        const W = 50, H = 50;
+        const fbo = makeTestFBOWithDepth(gl, W, H);
+        gl.clearColor(0, 0, 0, 0);
+        gl.clearDepth(1);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        gl.enable(gl.DEPTH_TEST);
+        gl.depthFunc(gl.NOTEQUAL);
+        const prog = makeProgram(gl, VS_DEPTH, FS_COLOR);
+        gl.useProgram(prog);
+        gl.uniform1f(gl.getUniformLocation(prog, "depth"), 0);
+        gl.uniform4f(gl.getUniformLocation(prog, "color"), 1, 0, 0, 1);
+        drawTriangle(gl);
+        gl.uniform1f(gl.getUniformLocation(prog, "depth"), 1);
+        gl.uniform4f(gl.getUniformLocation(prog, "color"), 0, 1, 0, 1);
+        drawTriangle(gl);
+        gl.disable(gl.DEPTH_TEST);
+        const pixels = new Uint8Array(W * H * 4);
+        gl.readPixels(0, 0, W, H, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+        destroyTestFBOWithDepth(gl, fbo);
+        let allGreen = true;
+        for (let i = 0; i < W * H * 4; i += 4) {
+          if (!pixelClose(
+            pixels.subarray(i, i + 4),
+            [0, 255, 0, 255],
+            3
+          )) {
+            allGreen = false;
+            break;
+          }
+        }
+        expect(allGreen).toBe(true);
+        expect(gl.getError()).toBe(gl.NO_ERROR);
+      });
+      await it("DEPTH_TEST LESS: closer triangle overwrites farther", async () => {
+        const W = 20, H = 20;
+        const fbo = makeTestFBOWithDepth(gl, W, H);
+        gl.clearColor(0, 0, 0, 0);
+        gl.clearDepth(1);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        gl.enable(gl.DEPTH_TEST);
+        gl.depthFunc(gl.LESS);
+        const prog = makeProgram(gl, VS_DEPTH, FS_COLOR);
+        gl.useProgram(prog);
+        gl.uniform1f(gl.getUniformLocation(prog, "depth"), 0.5);
+        gl.uniform4f(gl.getUniformLocation(prog, "color"), 0, 0, 1, 1);
+        drawTriangle(gl);
+        gl.uniform1f(gl.getUniformLocation(prog, "depth"), 0.25);
+        gl.uniform4f(gl.getUniformLocation(prog, "color"), 0, 1, 0, 1);
+        drawTriangle(gl);
+        gl.uniform1f(gl.getUniformLocation(prog, "depth"), 0.75);
+        gl.uniform4f(gl.getUniformLocation(prog, "color"), 1, 0, 0, 1);
+        drawTriangle(gl);
+        gl.disable(gl.DEPTH_TEST);
+        const pixels = new Uint8Array(W * H * 4);
+        gl.readPixels(0, 0, W, H, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+        destroyTestFBOWithDepth(gl, fbo);
+        let allGreen = true;
+        for (let i = 0; i < W * H * 4; i += 4) {
+          if (!pixelClose(
+            pixels.subarray(i, i + 4),
+            [0, 255, 0, 255],
+            3
+          )) {
+            allGreen = false;
+            break;
+          }
+        }
+        expect(allGreen).toBe(true);
+        expect(gl.getError()).toBe(gl.NO_ERROR);
+      });
+      await it("depthMask(false) prevents depth writes", async () => {
+        const W = 10, H = 10;
+        const fbo = makeTestFBOWithDepth(gl, W, H);
+        gl.clearColor(0, 0, 0, 0);
+        gl.clearDepth(1);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        gl.enable(gl.DEPTH_TEST);
+        gl.depthFunc(gl.LESS);
+        const prog = makeProgram(gl, VS_DEPTH, FS_COLOR);
+        gl.useProgram(prog);
+        gl.depthMask(false);
+        gl.uniform1f(gl.getUniformLocation(prog, "depth"), 0.5);
+        gl.uniform4f(gl.getUniformLocation(prog, "color"), 1, 0, 0, 1);
+        drawTriangle(gl);
+        gl.depthMask(true);
+        gl.uniform1f(gl.getUniformLocation(prog, "depth"), 0.75);
+        gl.uniform4f(gl.getUniformLocation(prog, "color"), 0, 1, 0, 1);
+        drawTriangle(gl);
+        gl.disable(gl.DEPTH_TEST);
+        const pixels = new Uint8Array(W * H * 4);
+        gl.readPixels(0, 0, W, H, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+        destroyTestFBOWithDepth(gl, fbo);
+        let allGreen = true;
+        for (let i = 0; i < W * H * 4; i += 4) {
+          if (!pixelClose(
+            pixels.subarray(i, i + 4),
+            [0, 255, 0, 255],
+            3
+          )) {
+            allGreen = false;
+            break;
+          }
+        }
+        expect(allGreen).toBe(true);
+        expect(gl.getError()).toBe(gl.NO_ERROR);
+      });
+    });
+    await describe("rendering/scissor", async () => {
+      beforeEach(async () => {
+        glArea.make_current();
+      });
+      await it("scissor test clips rendering to specified rectangle", async () => {
+        const W = 20, H = 20;
+        const fbo = makeTestFBO(gl, W, H);
+        gl.clearColor(1, 0, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.enable(gl.SCISSOR_TEST);
+        gl.scissor(0, 0, W / 2, H);
+        gl.clearColor(0, 1, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.disable(gl.SCISSOR_TEST);
+        const pixels = new Uint8Array(W * H * 4);
+        gl.readPixels(0, 0, W, H, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+        destroyTestFBO(gl, fbo);
+        let ok = true;
+        for (let y = 0; y < H; y++) {
+          for (let x = 0; x < W; x++) {
+            const i = (y * W + x) * 4;
+            const pix = pixels.subarray(i, i + 4);
+            if (x < W / 2) {
+              if (!pixelClose(pix, [0, 255, 0, 255])) {
+                ok = false;
+                break;
+              }
+            } else {
+              if (!pixelClose(pix, [255, 0, 0, 255])) {
+                ok = false;
+                break;
+              }
+            }
+          }
+          if (!ok) break;
+        }
+        expect(ok).toBe(true);
+        expect(gl.getError()).toBe(gl.NO_ERROR);
+      });
+    });
+    await describe("rendering/mapbox-ansis", async () => {
+      beforeEach(async () => {
+        glArea.make_current();
+      });
+      await it("depthRange: green at range(0,0.1) survives blue at range(0.9,1) with LEQUAL", async () => {
+        const W = 4, H = 4;
+        const vsSrc = `
+                    precision mediump float;
+                    uniform float u_z;
+                    attribute vec2 a_position;
+                    void main() { gl_Position = vec4(a_position, u_z, 1.0); }`;
+        const fsSrc = `
+                    precision mediump float;
+                    uniform vec4 u_color;
+                    void main() { gl_FragColor = u_color; }`;
+        const fb = gl.createFramebuffer();
+        const colorTex = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, colorTex);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, W, H, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        const depthRb = gl.createRenderbuffer();
+        gl.bindRenderbuffer(gl.RENDERBUFFER, depthRb);
+        gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, W, H);
+        gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorTex, 0);
+        gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthRb);
+        gl.viewport(0, 0, W, H);
+        gl.clearColor(1, 0, 0, 1);
+        gl.clearDepth(1);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        gl.enable(gl.DEPTH_TEST);
+        gl.depthFunc(gl.LEQUAL);
+        const prog = makeProgram(gl, vsSrc, fsSrc);
+        gl.useProgram(prog);
+        const buf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+          -1,
+          -1,
+          1,
+          -1,
+          -1,
+          1,
+          -1,
+          1,
+          1,
+          -1,
+          1,
+          1
+        ]), gl.STATIC_DRAW);
+        const aPos = gl.getAttribLocation(prog, "a_position");
+        gl.enableVertexAttribArray(aPos);
+        gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+        const uColor = gl.getUniformLocation(prog, "u_color");
+        const uZ = gl.getUniformLocation(prog, "u_z");
+        gl.uniform1f(uZ, 0.5);
+        gl.uniform4fv(uColor, [0, 1, 0, 1]);
+        gl.depthRange(0, 0.1);
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+        gl.uniform1f(uZ, 0.5);
+        gl.uniform4fv(uColor, [0, 0, 1, 1]);
+        gl.depthRange(0.9, 1);
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+        gl.depthRange(0, 1);
+        gl.disable(gl.DEPTH_TEST);
+        const pixels = new Uint8Array(W * H * 4);
+        gl.readPixels(0, 0, W, H, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        gl.deleteBuffer(buf);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, null, 0);
+        gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, null);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.deleteTexture(colorTex);
+        gl.deleteRenderbuffer(depthRb);
+        gl.deleteFramebuffer(fb);
+        expect(gl.getError()).toBe(gl.NO_ERROR);
+        let allGreen = true;
+        for (let i = 0; i < W * H * 4; i += 4) {
+          if (pixels[i] !== 0 || pixels[i + 1] !== 255 || pixels[i + 2] !== 0 || pixels[i + 3] !== 255) {
+            allGreen = false;
+            break;
+          }
+        }
+        expect(allGreen).toBe(true);
+      });
+    });
+    await describe("rendering/viewport", async () => {
+      beforeEach(async () => {
+        glArea.make_current();
+      });
+      await it("viewport restricts rendering region", async () => {
+        const W = 20, H = 20;
+        const fbo = makeTestFBO(gl, W, H);
+        gl.clearColor(1, 0, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        const HW = W / 2;
+        gl.viewport(0, 0, HW, H / 2);
+        const fsGreen = `precision mediump float; void main() { gl_FragColor = vec4(0,1,0,1); }`;
+        const prog = makeProgram(gl, VS, fsGreen);
+        gl.useProgram(prog);
+        drawTriangle(gl);
+        gl.viewport(0, 0, W, H);
+        const pixels = new Uint8Array(W * H * 4);
+        gl.readPixels(0, 0, W, H, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+        destroyTestFBO(gl, fbo);
+        let ok = true;
+        for (let y = 0; y < H; y++) {
+          for (let x = 0; x < W; x++) {
+            const i = (y * W + x) * 4;
+            const pix = pixels.subarray(i, i + 4);
+            if (x < HW && y < H / 2) {
+              if (!pixelClose(pix, [0, 255, 0, 255])) {
+                ok = false;
+                break;
+              }
+            } else {
+              if (!pixelClose(pix, [255, 0, 0, 255])) {
+                ok = false;
+                break;
+              }
+            }
+          }
+          if (!ok) break;
+        }
+        expect(ok).toBe(true);
+        expect(gl.getError()).toBe(gl.NO_ERROR);
+      });
+      await it("getParameter(VIEWPORT) returns current viewport", async () => {
+        const fbo = makeTestFBO(gl, 16, 16);
+        gl.viewport(2, 3, 10, 12);
+        const v = gl.getParameter(gl.VIEWPORT);
+        expect(v[0]).toBe(2);
+        expect(v[1]).toBe(3);
+        expect(v[2]).toBe(10);
+        expect(v[3]).toBe(12);
+        gl.viewport(0, 0, 16, 16);
+        destroyTestFBO(gl, fbo);
+        expect(gl.getError()).toBe(gl.NO_ERROR);
+      });
+    });
+  });
+};
+export {
+  rendering_spec_default as default
+};

package/lib/esm/conformance/setup.js

@@ -0,0 +1,36 @@
+import { CanvasWebGLWidget } from "@gjsify/webgl";
+import GLib from "@girs/glib-2.0";
+import Gtk from "@girs/gtk-4.0";
+function createGLSetup() {
+  Gtk.init();
+  let result = null;
+  const readyLoop = new GLib.MainLoop(null, false);
+  const win = new Gtk.Window({});
+  win.set_default_size(200, 200);
+  const glArea = new CanvasWebGLWidget();
+  glArea.onReady((canvas, g) => {
+    try {
+      const gl = g;
+      let gl2 = null;
+      try {
+        gl2 = canvas.getContext("webgl2");
+      } catch (_) {
+      }
+      result = { gl, gl2, glArea, win };
+    } finally {
+      readyLoop.quit();
+    }
+  });
+  win.set_child(glArea);
+  win.present();
+  const giveUpId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 1e4, () => {
+    readyLoop.quit();
+    return GLib.SOURCE_REMOVE;
+  });
+  readyLoop.run();
+  GLib.source_remove(giveUpId);
+  return result;
+}
+export {
+  createGLSetup
+};