@gjsify/webgl 0.1.8 → 0.1.9

package/lib/esm/canvas-webgl-widget.js

@@ -11,6 +11,7 @@ const CanvasWebGLWidget = GObject.registerClass(
       super(params);
       this._canvas = null;
       this._readyCallbacks = [];
+      this._resizeCallbacks = [];
       this._renderTag = null;
       this._tickCallbackId = null;
       this._frameCallback = null;
@@ -22,7 +23,7 @@ const CanvasWebGLWidget = GObject.registerClass(
       this.set_required_version(3, 2);
       this.set_has_depth_buffer(true);
       this.set_has_stencil_buffer(true);
-      attachEventControllers(this, () => this._canvas);
+      attachEventControllers(this, () => this._canvas, { captureKeys: true });
       const initId = this.connect("render", () => {
         this.disconnect(initId);
         this.make_current();
@@ -30,6 +31,7 @@ const CanvasWebGLWidget = GObject.registerClass(
         if (globalThis.document?.body) {
           globalThis.document.body.appendChild(this._canvas);
         }
+        this._canvas.getContext("webgl2");
         const gl = this._canvas.getContext("webgl");
         if (gl) {
           for (const cb of this._readyCallbacks) {
@@ -40,9 +42,14 @@ const CanvasWebGLWidget = GObject.registerClass(
         return true;
       });
       this.connect("resize", () => {
+        const width = this.get_allocated_width();
+        const height = this.get_allocated_height();
         if (this._canvas) {
           this._canvas.dispatchEvent(new Event("resize"));
         }
+        for (const cb of this._resizeCallbacks) {
+          cb(width, height);
+        }
         if (this._frameCallback) {
           this.requestAnimationFrame(this._frameCallback);
         }
@@ -83,6 +90,16 @@ const CanvasWebGLWidget = GObject.registerClass(
     onWebGLReady(cb) {
       this.onReady(cb);
     }
+    /**
+     * Register a callback invoked whenever the GTK widget is resized.
+     * The callback fires alongside the native 'resize' GObject signal and
+     * after the DOM 'resize' event has been dispatched on the canvas.
+     * Canvas buffer dimensions are NOT automatically updated — consumers
+     * should set `canvas.width`/`canvas.height` themselves if desired.
+     */
+    onResize(cb) {
+      this._resizeCallbacks.push(cb);
+    }
     /**
      * Schedules a single animation frame callback, matching the browser `requestAnimationFrame` API.
      * Backed by GTK frame clock (vsync-synced) + the GLArea render signal.
@@ -94,10 +111,13 @@ const CanvasWebGLWidget = GObject.registerClass(
         this._tickCallbackId = this.add_tick_callback((_widget, _frameClock) => {
           this._tickCallbackId = null;
           if (this._renderTag === null) {
-            this._renderTag = this.connect("render", () => {
+            this._renderTag = this.connect("render", (_widget2) => {
               this.disconnect(this._renderTag);
               this._renderTag = null;
               const time = (GLib.get_monotonic_time() - this._timeOrigin) / 1e3;
+              if (globalThis.__GJSIFY_DEBUG_RAF === true) {
+                console.log(`[rAF] frame callback fires t=${time.toFixed(1)}`);
+              }
               this._frameCallback?.(time);
               return true;
             });
@@ -115,6 +135,9 @@ const CanvasWebGLWidget = GObject.registerClass(
      */
     installGlobals() {
       globalThis.requestAnimationFrame = (cb) => this.requestAnimationFrame(cb);
+      globalThis.cancelAnimationFrame = (_id) => {
+        this._frameCallback = null;
+      };
       const timeOrigin = this._timeOrigin;
       globalThis.performance = {
         now: () => (GLib.get_monotonic_time() - timeOrigin) / 1e3,

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

@@ -253,6 +253,29 @@ var uniforms_spec_default = async () => {
         ]);
         expect(gl.getError()).toBe(gl.NO_ERROR);
       });
+      await it("getUniformLocation resolves bare array name (without [0] suffix)", async () => {
+        const prog = makeProgram(gl, VS, FS_ARR);
+        gl.useProgram(prog);
+        const locBare = gl.getUniformLocation(prog, "u_arr");
+        expect(locBare).not.toBeNull();
+        expect(gl.getError()).toBe(gl.NO_ERROR);
+        gl.uniform1fv(locBare, [0.7, 0.8, 0.9]);
+        expect(gl.getError()).toBe(gl.NO_ERROR);
+        const val = gl.getUniform(prog, locBare);
+        expect(Math.abs(val - 0.7) < 1e-3).toBe(true);
+      });
+      await it("bare array name and indexed [0] name resolve to equivalent locations", async () => {
+        const prog = makeProgram(gl, VS, FS_ARR);
+        gl.useProgram(prog);
+        const locBare = gl.getUniformLocation(prog, "u_arr");
+        const locIndexed = gl.getUniformLocation(prog, "u_arr[0]");
+        expect(locBare).not.toBeNull();
+        expect(locIndexed).not.toBeNull();
+        gl.uniform1fv(locBare, [0.42, 0.43, 0.44]);
+        expect(gl.getError()).toBe(gl.NO_ERROR);
+        const val = gl.getUniform(prog, locIndexed);
+        expect(Math.abs(val - 0.42) < 1e-3).toBe(true);
+      });
       await it("calling uniform* before useProgram generates INVALID_OPERATION", async () => {
         const prog = makeProgram(gl, VS, FS_ARR);
         gl.useProgram(null);

package/lib/esm/html-canvas-element.js

@@ -24,6 +24,14 @@ class HTMLCanvasElement extends BaseHTMLCanvasElement {
   get clientHeight() {
     return this.height;
   }
+  /** CSS layout width — same as the GTK-allocated pixel width for a full-window canvas. */
+  get offsetWidth() {
+    return this.width;
+  }
+  /** CSS layout height — same as the GTK-allocated pixel height for a full-window canvas. */
+  get offsetHeight() {
+    return this.height;
+  }
   /** Returns the underlying Gtk.GLArea. Used by WebGLRenderingContext for GLSL version detection. */
   getGlArea() {
     return this.gtkGlArea;
@@ -36,11 +44,17 @@ class HTMLCanvasElement extends BaseHTMLCanvasElement {
    */
   getContext(contextId, options) {
     if (contextId === "webgl" || contextId === "experimental-webgl") {
-      this._webgl ??= new OurWebGLRenderingContext(this, options);
+      if (!this._webgl) {
+        this.gtkGlArea.make_current();
+        this._webgl = new OurWebGLRenderingContext(this, options);
+      }
       return this._webgl;
     }
     if (contextId === "webgl2") {
-      this._webgl2 ??= new OurWebGL2RenderingContext(this, options);
+      if (!this._webgl2) {
+        this.gtkGlArea.make_current();
+        this._webgl2 = new OurWebGL2RenderingContext(this, options);
+      }
       return this._webgl2;
     }
     return super.getContext(contextId, options);

package/lib/esm/utils.js

@@ -133,7 +133,7 @@ const extractImageData = (pixels) => {
     let context = null;
     if (typeof pixels.getContext === "function") {
       context = pixels.getContext("2d");
-    } else if (typeof pixels.isPixbuf()) {
+    } else if (typeof pixels.isPixbuf === "function" && pixels.isPixbuf()) {
       return pixels.getImageData();
     } else if (typeof pixels.src !== "undefined" && typeof document === "object" && typeof document.createElement === "function") {
       const canvas = document.createElement("canvas");
@@ -190,6 +190,17 @@ function flag(options, name, dflt) {
   }
   return !!options[name];
 }
+function premultiplyAlpha(data) {
+  const out = new Uint8Array(data.length);
+  for (let i = 0; i < data.length; i += 4) {
+    const a = data[i + 3] / 255;
+    out[i] = Math.round(data[i] * a);
+    out[i + 1] = Math.round(data[i + 1] * a);
+    out[i + 2] = Math.round(data[i + 2] * a);
+    out[i + 3] = data[i + 3];
+  }
+  return out;
+}
 export {
   Uint8ArrayToVariant,
   arrayToUint8Array,
@@ -205,6 +216,7 @@ export {
   isTypedArray,
   isValidString,
   listToArray,
+  premultiplyAlpha,
   typeSize,
   uniformTypeSize,
   validCubeTarget,

package/lib/esm/webgl-context-base.js

@@ -20,7 +20,8 @@ import {
   uniformTypeSize,
   vertexCount,
   typeSize,
-  Uint8ArrayToVariant
+  Uint8ArrayToVariant,
+  premultiplyAlpha
 } from "./utils.js";
 import { getOESElementIndexUint } from "./extensions/oes-element-index-unit.js";
 import { getOESStandardDerivatives } from "./extensions/oes-standard-derivatives.js";
@@ -97,6 +98,7 @@ class WebGLContextBase {
     this._unpackAlignment = 4;
     this._packAlignment = 4;
     this._unpackFlipY = false;
+    this._unpackPremultAlpha = false;
     // Viewport and scissor — tracked in JS to avoid crashing native getParameterx for array returns
     this._viewport = new Int32Array([0, 0, 0, 0]);
     this._scissorBox = new Int32Array([0, 0, 0, 0]);
@@ -161,6 +163,7 @@ class WebGLContextBase {
     this._unpackAlignment = 4;
     this._packAlignment = 4;
     this._unpackFlipY = false;
+    this._unpackPremultAlpha = false;
     this.bindBuffer(this.ARRAY_BUFFER, null);
     this.bindBuffer(this.ELEMENT_ARRAY_BUFFER, null);
     this.bindFramebuffer(this.FRAMEBUFFER, null);
@@ -1166,6 +1169,9 @@ class WebGLContextBase {
       this.setError(this.INVALID_VALUE);
       return;
     }
+    if (this._unpackPremultAlpha && data && format === this.RGBA) {
+      data = premultiplyAlpha(data);
+    }
     if (this._unpackFlipY && data && width > 0 && height > 0) {
       const flipped = new Uint8Array(data.length);
       for (let row = 0; row < height; row++) {
@@ -1266,6 +1272,9 @@ class WebGLContextBase {
       this.setError(this.INVALID_OPERATION);
       return;
     }
+    if (this._unpackPremultAlpha && data && format === this.RGBA) {
+      data = premultiplyAlpha(data);
+    }
     if (this._unpackFlipY && data && width > 0 && height > 0) {
       const flipped = new Uint8Array(data.length);
       for (let row = 0; row < height; row++) {
@@ -2817,27 +2826,32 @@ class WebGLContextBase {
         if (/\[\d+\]$/.test(name)) {
           searchName = name.replace(/\[\d+\]$/, "[0]");
         }
+        const arraySearchName = searchName + "[0]";
         let info = null;
         for (let i = 0; i < program._uniforms.length; ++i) {
           const infoItem = program._uniforms[i];
-          if (infoItem.name === searchName) {
+          if (infoItem.name === searchName || infoItem.name === arraySearchName) {
             info = {
               size: infoItem.size,
               type: infoItem.type,
               name: infoItem.name
             };
+            break;
           }
         }
         if (!info) {
-          return null;
+          info = { name: searchName, type: 0, size: 1 };
         }
         const result = new WebGLUniformLocation(
           loc,
           program,
           info
         );
-        if (/\[0\]$/.test(name)) {
-          const baseName = name.replace(/\[0\]$/, "");
+        const callerBracketMatch = name.match(/\[(\d+)\]$/);
+        const callerIndex = callerBracketMatch ? +callerBracketMatch[1] : -1;
+        const infoIsArray = /\[0\]$/.test(info.name);
+        if (infoIsArray && (callerIndex === -1 || callerIndex === 0)) {
+          const baseName = info.name.replace(/\[0\]$/, "");
           const arrayLocs = [];
           this._saveError();
           for (let i = 0; this.getError() === this.NO_ERROR; ++i) {
@@ -2852,13 +2866,8 @@ class WebGLContextBase {
           }
           this._restoreError(this.NO_ERROR);
           result._array = arrayLocs;
-        } else if (name && /\[(\d+)\]$/.test(name)) {
-          const _regexExec = /\[(\d+)\]$/.exec(name);
-          if (!_regexExec || _regexExec.length <= 0) {
-            return null;
-          }
-          const offset = +_regexExec[1];
-          if (offset < 0 || offset >= info.size) {
+        } else if (callerIndex > 0) {
+          if (callerIndex >= info.size) {
             return null;
           }
         }
@@ -3011,6 +3020,7 @@ class WebGLContextBase {
       this._unpackFlipY = !!param;
       return;
     } else if (pname === this.UNPACK_PREMULTIPLY_ALPHA_WEBGL) {
+      this._unpackPremultAlpha = !!param;
       return;
     }
     return this._gl.pixelStorei(pname, param);

package/lib/esm/webgl2-rendering-context.js

@@ -10,7 +10,7 @@ import { WebGLActiveInfo } from "./webgl-active-info.js";
 import { WebGLTexture } from "./webgl-texture.js";
 import { WebGLRenderbuffer } from "./webgl-renderbuffer.js";
 import { WebGLFramebuffer } from "./webgl-framebuffer.js";
-import { Uint8ArrayToVariant, arrayToUint8Array, vertexCount, convertPixels, extractImageData, checkObject } from "./utils.js";
+import { Uint8ArrayToVariant, arrayToUint8Array, vertexCount, convertPixels, extractImageData, checkObject, premultiplyAlpha } from "./utils.js";
 import { warnNotImplemented } from "@gjsify/utils";
 class WebGL2RenderingContext extends WebGLContextBase {
   constructor(canvas, options = {}) {
@@ -618,6 +618,9 @@ class WebGL2RenderingContext extends WebGLContextBase {
       return;
     }
     let data = convertPixels(pixels);
+    if (this._unpackPremultAlpha && data && format === this.RGBA) {
+      data = premultiplyAlpha(data);
+    }
     if (this._unpackFlipY && data && width > 0 && height > 0) {
       const pixelSize = this._computePixelSize(type, format);
       if (pixelSize > 0) {
@@ -691,6 +694,9 @@ class WebGL2RenderingContext extends WebGLContextBase {
       this.setError(this.INVALID_OPERATION);
       return;
     }
+    if (this._unpackPremultAlpha && data && format === this.RGBA) {
+      data = premultiplyAlpha(data);
+    }
     if (this._unpackFlipY && data && width > 0 && height > 0) {
       const pixelSize = this._computePixelSize(type, format);
       if (pixelSize > 0) {
@@ -724,6 +730,10 @@ class WebGL2RenderingContext extends WebGLContextBase {
     if (!this._framebufferOk()) return;
     if (count === 0 || instanceCount === 0) return;
     if (!this._checkVertexAttribState(count + first - 1 >>> 0)) return;
+    if (globalThis.__GJSIFY_DEBUG_GL) {
+      const n = this.__drawInstCount = (this.__drawInstCount | 0) + 1;
+      if (n <= 5 || n % 100 === 0) console.log(`[WebGL] drawArraysInstanced #${n} count=${rc} instances=${instanceCount} fbo=${this._activeFramebuffer?._ ?? "_gtkFbo"}`);
+    }
     this._native2.drawArraysInstanced(mode, first, rc, instanceCount);
   }
   drawElementsInstanced(mode, count, type, offset, instanceCount) {
@@ -826,7 +836,87 @@ class WebGL2RenderingContext extends WebGLContextBase {
     this.drawElements(mode, count, type, offset);
   }
   blitFramebuffer(srcX0, srcY0, srcX1, srcY1, dstX0, dstY0, dstX1, dstY1, mask, filter) {
+    if (globalThis.__GJSIFY_DEBUG_GL) {
+      const errBefore = this._gl.getError();
+      if (errBefore !== 0) console.log(`[WebGL] blitFramebuffer PRE-ERROR 0x${errBefore.toString(16)}`);
+    }
     this._native2.blitFramebuffer(srcX0, srcY0, srcX1, srcY1, dstX0, dstY0, dstX1, dstY1, mask, filter);
+    if (globalThis.__GJSIFY_DEBUG_GL) {
+      const err = this._gl.getError();
+      const n = this.__blitCount = (this.__blitCount | 0) + 1;
+      if (n <= 5) console.log(`[WebGL] blitFramebuffer #${n} src=(${srcX0},${srcY0},${srcX1},${srcY1}) readFbo=${this._activeReadFramebuffer?._ ?? "_gtkFbo"} err=${err === 0 ? "OK" : "0x" + err.toString(16)}`);
+    }
+  }
+  // clearBuffer{fv,iv,uiv,fi} — WebGL2 methods for clearing specific
+  // framebuffer attachments. The native Vala binding does not expose the
+  // glClearBuffer* entry points yet, so we emulate the common cases via
+  // glClearColor/glClearDepth/glClearStencil + glClear. This is equivalent
+  // when the DRAW_FRAMEBUFFER has a single attachment per buffer type,
+  // which matches Excalibur's ExcaliburGraphicsContextWebGL.blitToScreen.
+  //
+  // Buffer target constants per WebGL2 spec (not on our class):
+  //   COLOR         = 0x1800
+  //   DEPTH         = 0x1801
+  //   STENCIL       = 0x1802
+  //   DEPTH_STENCIL = 0x84F9
+  clearBufferfv(buffer, drawbuffer, values, _srcOffset) {
+    const n2 = this._native2;
+    if (typeof n2.clearBufferfv === "function") {
+      n2.clearBufferfv(buffer, drawbuffer, Array.from(values));
+      return;
+    }
+    const v = values;
+    if (buffer === 6144) {
+      const prev = this.getParameter(this.COLOR_CLEAR_VALUE);
+      this.clearColor(v[0] ?? 0, v[1] ?? 0, v[2] ?? 0, v[3] ?? 0);
+      this.clear(this.COLOR_BUFFER_BIT);
+      if (prev) this.clearColor(prev[0], prev[1], prev[2], prev[3]);
+    } else if (buffer === 6145) {
+      const prev = this.getParameter(this.DEPTH_CLEAR_VALUE);
+      this.clearDepth(v[0] ?? 1);
+      this.clear(this.DEPTH_BUFFER_BIT);
+      if (prev !== null) this.clearDepth(prev);
+    }
+  }
+  clearBufferiv(buffer, drawbuffer, values, _srcOffset) {
+    const n2 = this._native2;
+    if (typeof n2.clearBufferiv === "function") {
+      n2.clearBufferiv(buffer, drawbuffer, Array.from(values));
+      return;
+    }
+    if (buffer === 6146) {
+      const v = values;
+      const prev = this.getParameter(this.STENCIL_CLEAR_VALUE);
+      this.clearStencil(v[0] ?? 0);
+      this.clear(this.STENCIL_BUFFER_BIT);
+      if (prev !== null) this.clearStencil(prev);
+    }
+  }
+  clearBufferuiv(buffer, drawbuffer, values, _srcOffset) {
+    const n2 = this._native2;
+    if (typeof n2.clearBufferuiv === "function") {
+      n2.clearBufferuiv(buffer, drawbuffer, Array.from(values));
+      return;
+    }
+    void buffer;
+    void drawbuffer;
+  }
+  clearBufferfi(buffer, drawbuffer, depth, stencil) {
+    const n2 = this._native2;
+    if (typeof n2.clearBufferfi === "function") {
+      n2.clearBufferfi(buffer, drawbuffer, depth, stencil);
+      return;
+    }
+    if (buffer === 34041) {
+      const prevDepth = this.getParameter(this.DEPTH_CLEAR_VALUE);
+      const prevStencil = this.getParameter(this.STENCIL_CLEAR_VALUE);
+      this.clearDepth(depth);
+      this.clearStencil(stencil);
+      this.clear(this.DEPTH_BUFFER_BIT | this.STENCIL_BUFFER_BIT);
+      if (prevDepth !== null) this.clearDepth(prevDepth);
+      if (prevStencil !== null) this.clearStencil(prevStencil);
+    }
+    void drawbuffer;
   }
   invalidateFramebuffer(target, attachments) {
     this._native2.invalidateFramebuffer(target, Array.from(attachments));

package/lib/esm/webgl2.spec.js

@@ -1126,6 +1126,112 @@ void main(){c0=vec4(1.,0.,0.,1.);c1=vec4(0.,0.,1.,1.);}`;
         gl2.deleteProgram(prog);
       });
     });
+    await describe("WebGL2 Excalibur-style VAO draw + READ/DRAW blitToScreen", async () => {
+      beforeEach(async () => {
+        glArea.make_current();
+      });
+      await it("VAO draw to source FBO survives clearBufferfv+blit pipeline", async () => {
+        const W = 4;
+        const H = 4;
+        const gl = gl2;
+        const srcFbo = gl2.createFramebuffer();
+        const srcTex = gl2.createTexture();
+        gl2.bindTexture(gl2.TEXTURE_2D, srcTex);
+        gl2.texImage2D(gl2.TEXTURE_2D, 0, gl2.RGBA, W, H, 0, gl2.RGBA, gl2.UNSIGNED_BYTE, null);
+        gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_MIN_FILTER, gl2.NEAREST);
+        gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_MAG_FILTER, gl2.NEAREST);
+        gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_WRAP_S, gl2.CLAMP_TO_EDGE);
+        gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_WRAP_T, gl2.CLAMP_TO_EDGE);
+        gl2.bindTexture(gl2.TEXTURE_2D, null);
+        gl2.bindFramebuffer(gl2.FRAMEBUFFER, srcFbo);
+        gl2.framebufferTexture2D(gl2.FRAMEBUFFER, gl2.COLOR_ATTACHMENT0, gl2.TEXTURE_2D, srcTex, 0);
+        expect(gl2.checkFramebufferStatus(gl2.FRAMEBUFFER)).toBe(gl2.FRAMEBUFFER_COMPLETE);
+        const dstFbo = gl2.createFramebuffer();
+        const dstTex = gl2.createTexture();
+        gl2.bindTexture(gl2.TEXTURE_2D, dstTex);
+        gl2.texImage2D(gl2.TEXTURE_2D, 0, gl2.RGBA, W, H, 0, gl2.RGBA, gl2.UNSIGNED_BYTE, null);
+        gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_MIN_FILTER, gl2.NEAREST);
+        gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_MAG_FILTER, gl2.NEAREST);
+        gl2.bindTexture(gl2.TEXTURE_2D, null);
+        gl2.bindFramebuffer(gl2.FRAMEBUFFER, dstFbo);
+        gl2.framebufferTexture2D(gl2.FRAMEBUFFER, gl2.COLOR_ATTACHMENT0, gl2.TEXTURE_2D, dstTex, 0);
+        expect(gl2.checkFramebufferStatus(gl2.FRAMEBUFFER)).toBe(gl2.FRAMEBUFFER_COMPLETE);
+        gl2.bindFramebuffer(gl2.FRAMEBUFFER, null);
+        const vs300 = `#version 300 es
+in vec2 a_pos;
+void main(){gl_Position=vec4(a_pos,0.,1.);}`;
+        const fs300 = `#version 300 es
+precision mediump float;
+out vec4 c;
+void main(){c=vec4(0.,1.,0.,1.);}`;
+        const prog = makeProgram(gl, vs300, fs300);
+        expect(gl2.getProgramParameter(prog, gl2.LINK_STATUS)).toBeTruthy();
+        const vao = gl2.createVertexArray();
+        gl2.bindVertexArray(vao);
+        const vbo = gl2.createBuffer();
+        gl2.bindBuffer(gl2.ARRAY_BUFFER, vbo);
+        gl2.bufferData(gl2.ARRAY_BUFFER, new Float32Array([
+          -1,
+          -1,
+          3,
+          -1,
+          -1,
+          3
+          // large triangle covering clip space
+        ]), gl2.STATIC_DRAW);
+        const aPos = gl2.getAttribLocation(prog, "a_pos");
+        gl2.enableVertexAttribArray(aPos);
+        gl2.vertexAttribPointer(aPos, 2, gl2.FLOAT, false, 0, 0);
+        gl2.bindVertexArray(null);
+        gl2.bindFramebuffer(gl2.FRAMEBUFFER, srcFbo);
+        gl2.viewport(0, 0, W, H);
+        gl2.clearColor(0, 0, 1, 1);
+        gl2.clear(gl2.COLOR_BUFFER_BIT);
+        gl2.useProgram(prog);
+        gl2.bindVertexArray(vao);
+        gl2.drawArrays(gl2.TRIANGLES, 0, 3);
+        gl2.bindVertexArray(null);
+        expect(gl2.getError()).toBe(gl2.NO_ERROR);
+        const READ_FRAMEBUFFER = 36008;
+        const DRAW_FRAMEBUFFER = 36009;
+        gl2.bindFramebuffer(READ_FRAMEBUFFER, srcFbo);
+        gl2.bindFramebuffer(DRAW_FRAMEBUFFER, dstFbo);
+        expect(gl2.getError()).toBe(gl2.NO_ERROR);
+        gl2.clearBufferfv(gl2.COLOR, 0, [0, 0, 1, 1]);
+        expect(gl2.getError()).toBe(gl2.NO_ERROR);
+        gl2.blitFramebuffer(0, 0, W, H, 0, 0, W, H, gl2.COLOR_BUFFER_BIT, gl2.LINEAR);
+        expect(gl2.getError()).toBe(gl2.NO_ERROR);
+        gl2.bindFramebuffer(gl2.FRAMEBUFFER, dstFbo);
+        const pixels = new Uint8Array(4);
+        gl2.readPixels(0, 0, 1, 1, gl2.RGBA, gl2.UNSIGNED_BYTE, pixels);
+        expect(gl2.getError()).toBe(gl2.NO_ERROR);
+        gl2.bindFramebuffer(gl2.FRAMEBUFFER, srcFbo);
+        const srcPixels = new Uint8Array(4);
+        gl2.readPixels(0, 0, 1, 1, gl2.RGBA, gl2.UNSIGNED_BYTE, srcPixels);
+        expect(gl2.getError()).toBe(gl2.NO_ERROR);
+        gl2.bindVertexArray(null);
+        gl2.deleteVertexArray(vao);
+        gl2.deleteBuffer(vbo);
+        gl2.deleteProgram(prog);
+        gl2.bindFramebuffer(gl2.FRAMEBUFFER, srcFbo);
+        gl2.framebufferTexture2D(gl2.FRAMEBUFFER, gl2.COLOR_ATTACHMENT0, gl2.TEXTURE_2D, null, 0);
+        gl2.bindFramebuffer(gl2.FRAMEBUFFER, dstFbo);
+        gl2.framebufferTexture2D(gl2.FRAMEBUFFER, gl2.COLOR_ATTACHMENT0, gl2.TEXTURE_2D, null, 0);
+        gl2.bindFramebuffer(gl2.FRAMEBUFFER, null);
+        gl2.deleteTexture(srcTex);
+        gl2.deleteTexture(dstTex);
+        gl2.deleteFramebuffer(srcFbo);
+        gl2.deleteFramebuffer(dstFbo);
+        expect(pixels[0]).toBe(0);
+        expect(pixels[1]).toBe(255);
+        expect(pixels[2]).toBe(0);
+        expect(pixels[3]).toBe(255);
+        expect(srcPixels[0]).toBe(0);
+        expect(srcPixels[1]).toBe(255);
+        expect(srcPixels[2]).toBe(0);
+        expect(srcPixels[3]).toBe(255);
+      });
+    });
     await describe("WebGL2 bufferSubData with UNIFORM_BUFFER", async () => {
       beforeEach(async () => {
         glArea.make_current();

package/lib/types/canvas-webgl-widget.d.ts

@@ -27,6 +27,7 @@ export declare const CanvasWebGLWidget: {
     new (params?: Partial<Gtk.GLArea.ConstructorProps>): {
         _canvas: OurHTMLCanvasElement | null;
         _readyCallbacks: WebGLReadyCallback[];
+        _resizeCallbacks: ((width: number, height: number) => void)[];
         _renderTag: number | null;
         _tickCallbackId: number | null;
         _frameCallback: FrameRequestCallback | null;
@@ -42,6 +43,14 @@ export declare const CanvasWebGLWidget: {
          * @deprecated Use `onReady()` instead.
          */
         onWebGLReady(cb: WebGLReadyCallback): void;
+        /**
+         * Register a callback invoked whenever the GTK widget is resized.
+         * The callback fires alongside the native 'resize' GObject signal and
+         * after the DOM 'resize' event has been dispatched on the canvas.
+         * Canvas buffer dimensions are NOT automatically updated — consumers
+         * should set `canvas.width`/`canvas.height` themselves if desired.
+         */
+        onResize(cb: (width: number, height: number) => void): void;
         /**
          * Schedules a single animation frame callback, matching the browser `requestAnimationFrame` API.
          * Backed by GTK frame clock (vsync-synced) + the GLArea render signal.
@@ -141,7 +150,7 @@ export declare const CanvasWebGLWidget: {
         vfunc_get_id(): string;
         vfunc_get_internal_child<T = GObject.Object>(builder: Gtk.Builder, childname: string): T;
         vfunc_parser_finished(builder: Gtk.Builder): void;
-        vfunc_set_buildable_property(builder: Gtk.Builder, name: string, value: GObject.Value | any): void;
+        vfunc_set_buildable_property(builder: Gtk.Builder, name: string, value: unknown): void;
         vfunc_set_id(id: string): void;
         bind_property(source_property: string, target: GObject.Object, target_property: string, flags: GObject.BindingFlags | null): GObject.Binding;
         bind_property_full(source_property: string, target: GObject.Object, target_property: string, flags: GObject.BindingFlags | null, transform_to?: GObject.BindingTransformFunc | null, transform_from?: GObject.BindingTransformFunc | null, notify?: GLib.DestroyNotify | null): GObject.Binding;
@@ -169,9 +178,9 @@ export declare const CanvasWebGLWidget: {
         vfunc_dispatch_properties_changed(n_pspecs: number, pspecs: GObject.ParamSpec): void;
         vfunc_dispose(): void;
         vfunc_finalize(): void;
-        vfunc_get_property(property_id: number, value: GObject.Value | any, pspec: GObject.ParamSpec): void;
+        vfunc_get_property(property_id: number, value: unknown, pspec: GObject.ParamSpec): void;
         vfunc_notify(pspec: GObject.ParamSpec): void;
-        vfunc_set_property(property_id: number, value: GObject.Value | any, pspec: GObject.ParamSpec): void;
+        vfunc_set_property(property_id: number, value: unknown, pspec: GObject.ParamSpec): void;
         disconnect(id: number): void;
         set(properties: {
             [key: string]: any;
@@ -477,7 +486,7 @@ export declare const CanvasWebGLWidget: {
     set_default_direction(dir: Gtk.TextDirection): void;
     add_shortcut(shortcut: Gtk.Shortcut): void;
     bind_template_callback_full(callback_name: string, callback_symbol: GObject.Callback): void;
-    bind_template_child_full(name: string, internal_child: boolean, struct_offset: number): void;
+    bind_template_child_full(name: string, internal_child: boolean, struct_offset: bigint | number): void;
     get_accessible_role(): Gtk.AccessibleRole;
     get_activate_signal(): number;
     get_css_name(): string;
@@ -494,7 +503,7 @@ export declare const CanvasWebGLWidget: {
     set_template_from_resource(resource_name: string): void;
     set_template_scope(scope: Gtk.BuilderScope): void;
     newv(object_type: GObject.GType, parameters: GObject.Parameter[]): GObject.Object;
-    compat_control(what: number, data?: any | null): number;
+    compat_control(what: bigint | number, data?: any | null): number;
     interface_find_property(g_iface: GObject.TypeInterface, property_name: string): GObject.ParamSpec;
     interface_install_property(g_iface: GObject.TypeInterface, pspec: GObject.ParamSpec): void;
     interface_list_properties(g_iface: GObject.TypeInterface): GObject.ParamSpec[];

package/lib/types/html-canvas-element.d.ts

@@ -15,6 +15,10 @@ export declare class HTMLCanvasElement extends BaseHTMLCanvasElement {
     set height(_height: number);
     get clientWidth(): number;
     get clientHeight(): number;
+    /** CSS layout width — same as the GTK-allocated pixel width for a full-window canvas. */
+    get offsetWidth(): number;
+    /** CSS layout height — same as the GTK-allocated pixel height for a full-window canvas. */
+    get offsetHeight(): number;
     /** Returns the underlying Gtk.GLArea. Used by WebGLRenderingContext for GLSL version detection. */
     getGlArea(): Gtk.GLArea;
     /**

package/lib/types/utils.d.ts

@@ -28,3 +28,12 @@ export declare function convertPixels(pixels: ArrayBuffer | Uint8Array | Uint16A
 export declare function checkFormat(gl: WebGLContextBase, format: GLenum): format is 6406 | 6407 | 6408 | 6409 | 6410;
 export declare function validCubeTarget(gl: WebGLContextBase, target: GLenum): target is 34069 | 34070 | 34071 | 34072 | 34073 | 34074;
 export declare function flag<T = Record<string, any>>(options: T, name: keyof T, dflt: boolean): boolean;
+/**
+ * Premultiply RGB channels by the alpha channel (in-place copy).
+ * Required when UNPACK_PREMULTIPLY_ALPHA_WEBGL is set.
+ * Excalibur uses blendFunc(ONE, ONE_MINUS_SRC_ALPHA) (premultiplied alpha
+ * blending), so textures must have RGB already multiplied by alpha before
+ * upload. Without this, transparent-background PNGs (alpha=0 but RGB=255)
+ * bleed through as white rectangles.
+ */
+export declare function premultiplyAlpha(data: Uint8Array): Uint8Array;

package/lib/types/webgl-context-base.d.ts

@@ -56,6 +56,7 @@ export declare abstract class WebGLContextBase {
     _unpackAlignment: number;
     _packAlignment: number;
     _unpackFlipY: boolean;
+    _unpackPremultAlpha: boolean;
     _viewport: Int32Array;
     _scissorBox: Int32Array;
     _gtkFboId: number;

package/lib/types/webgl2-rendering-context.d.ts

@@ -152,6 +152,10 @@ export declare class WebGL2RenderingContext extends WebGLContextBase implements
     drawBuffers(buffers: GLenum[]): void;
     drawRangeElements(mode: GLenum, start: GLuint, end: GLuint, count: GLsizei, type: GLenum, offset: GLintptr): void;
     blitFramebuffer(srcX0: GLint, srcY0: GLint, srcX1: GLint, srcY1: GLint, dstX0: GLint, dstY0: GLint, dstX1: GLint, dstY1: GLint, mask: GLbitfield, filter: GLenum): void;
+    clearBufferfv(buffer: GLenum, drawbuffer: GLint, values: Float32List, _srcOffset?: GLuint): void;
+    clearBufferiv(buffer: GLenum, drawbuffer: GLint, values: Int32List, _srcOffset?: GLuint): void;
+    clearBufferuiv(buffer: GLenum, drawbuffer: GLint, values: Uint32List, _srcOffset?: GLuint): void;
+    clearBufferfi(buffer: GLenum, drawbuffer: GLint, depth: GLfloat, stencil: GLint): void;
     invalidateFramebuffer(target: GLenum, attachments: GLenum[]): void;
     invalidateSubFramebuffer(target: GLenum, attachments: GLenum[], x: GLint, y: GLint, width: GLsizei, height: GLsizei): void;
     readBuffer(src: GLenum): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjsify/webgl",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "WebGL module for Gjs",
   "module": "lib/esm/index.js",
   "types": "lib/types/index.d.ts",
@@ -39,19 +39,19 @@
     "WebGL"
   ],
   "devDependencies": {
-    "@gjsify/cli": "^0.1.8",
-    "@gjsify/unit": "^0.1.8",
+    "@gjsify/cli": "^0.1.9",
+    "@gjsify/unit": "^0.1.9",
     "@types/bit-twiddle": "^1.0.3",
-    "@types/node": "^25.5.2",
+    "@types/node": "^25.6.0",
     "typescript": "^6.0.2"
   },
   "dependencies": {
-    "@girs/gjs": "^4.0.0-rc.1",
-    "@girs/gtk-4.0": "^4.23.0-4.0.0-rc.1",
-    "@girs/gwebgl-0.1": "^0.1.0-4.0.0-rc.1",
-    "@gjsify/dom-elements": "^0.1.8",
-    "@gjsify/event-bridge": "^0.1.8",
-    "@gjsify/utils": "^0.1.8",
+    "@girs/gjs": "^4.0.0-rc.2",
+    "@girs/gtk-4.0": "^4.23.0-4.0.0-rc.2",
+    "@girs/gwebgl-0.1": "^0.1.0-4.0.0-rc.2",
+    "@gjsify/dom-elements": "^0.1.9",
+    "@gjsify/event-bridge": "^0.1.9",
+    "@gjsify/utils": "^0.1.9",
     "bit-twiddle": "^1.0.2",
     "glsl-tokenizer": "^2.1.5"
   }