@gjsify/webgl 0.1.1 → 0.1.3

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

@@ -1,5 +1,6 @@
 import Gwebgl from "@girs/gwebgl-0.1";
-import { WebGLRenderingContext } from "./webgl-rendering-context.js";
+import GdkPixbuf from "gi://GdkPixbuf?version=2.0";
+import { WebGLContextBase } from "./webgl-context-base.js";
 import { WebGLQuery } from "./webgl-query.js";
 import { WebGLSampler } from "./webgl-sampler.js";
 import { WebGLSync } from "./webgl-sync.js";
@@ -8,9 +9,10 @@ import { WebGLVertexArrayObject } from "./webgl-vertex-array-object.js";
 import { WebGLActiveInfo } from "./webgl-active-info.js";
 import { WebGLTexture } from "./webgl-texture.js";
 import { WebGLRenderbuffer } from "./webgl-renderbuffer.js";
-import { Uint8ArrayToVariant, arrayToUint8Array, vertexCount } from "./utils.js";
+import { WebGLFramebuffer } from "./webgl-framebuffer.js";
+import { Uint8ArrayToVariant, arrayToUint8Array, vertexCount, convertPixels, extractImageData, checkObject } from "./utils.js";
 import { warnNotImplemented } from "@gjsify/utils";
-class WebGL2RenderingContext extends WebGLRenderingContext {
+class WebGL2RenderingContext extends WebGLContextBase {
   constructor(canvas, options = {}) {
     super(canvas, options);
     this._queries = {};
@@ -18,20 +20,118 @@ class WebGL2RenderingContext extends WebGLRenderingContext {
     this._transformFeedbacks = {};
     this._vertexArrayObjects = {};
     this._syncs = {};
+    this._activeReadFramebuffer = null;
+    this._activeDrawFramebuffer = null;
     this._native2 = new Gwebgl.WebGL2RenderingContext({});
+    this._init();
+  }
+  get _gl() {
+    return this._native2;
   }
   _getGlslVersion(es) {
     return es ? "300 es" : "130";
   }
   // ─── WebGL2 overrides for WebGL1 validation that's too strict ─────────
+  /**
+   * WebGL2 delegates framebuffer completeness to the native GL driver.
+   * Called by _framebufferOk() before draw calls and by _updateFramebufferAttachments.
+   * The base class version uses JS-side format whitelists that reject valid WebGL2 formats.
+   */
   /** WebGL2 allows COLOR_ATTACHMENT1–15 as framebuffer attachment points. */
   _validFramebufferAttachment(attachment) {
     if (super._validFramebufferAttachment(attachment)) return true;
     return attachment >= 36065 && attachment <= 36079;
   }
+  static {
+    // ─── MRT: native COLOR_ATTACHMENT0–15 support ────────────────────────
+    this._WGL2_ALL_COLOR_ATTACHMENTS = [
+      36064,
+      36065,
+      36066,
+      36067,
+      36068,
+      36069,
+      36070,
+      36071,
+      36072,
+      36073,
+      36074,
+      36075,
+      36076,
+      36077,
+      36078,
+      36079
+    ];
+  }
+  _getColorAttachments() {
+    return WebGL2RenderingContext._WGL2_ALL_COLOR_ATTACHMENTS;
+  }
+  /**
+   * WebGL2 extends the base-class framebuffer completeness pre-check to
+   * accept WebGL2-specific formats that the WebGL1 whitelist rejects.
+   *
+   * NOTE: This is called by _updateFramebufferAttachments BEFORE the native
+   * GL attachments are set, so we must NOT query glCheckFramebufferStatus
+   * here (it would see an empty FBO and always return INCOMPLETE).
+   * Instead we extend the JS-side format whitelist to cover WebGL2 formats.
+   */
+  _preCheckFramebufferStatus(framebuffer) {
+    const attachments = framebuffer._attachments;
+    let bestWidth = 0;
+    let bestHeight = 0;
+    const allEnums = [
+      this.COLOR_ATTACHMENT0,
+      this.DEPTH_ATTACHMENT,
+      this.STENCIL_ATTACHMENT,
+      this.DEPTH_STENCIL_ATTACHMENT,
+      ...WebGL2RenderingContext._WGL2_ALL_COLOR_ATTACHMENTS
+    ];
+    for (const enumVal of allEnums) {
+      const attach = attachments[enumVal];
+      if (!attach) continue;
+      if (attach instanceof WebGLTexture) {
+        const level = framebuffer._attachmentLevel[enumVal] ?? 0;
+        const w = attach._levelWidth[level] ?? 0;
+        const h = attach._levelHeight[level] ?? 0;
+        if (w > 0 && h > 0) {
+          bestWidth = w;
+          bestHeight = h;
+          break;
+        }
+      } else if (attach instanceof WebGLRenderbuffer) {
+        if (attach._width > 0 && attach._height > 0) {
+          bestWidth = attach._width;
+          bestHeight = attach._height;
+          break;
+        }
+      }
+    }
+    if (bestWidth > 0 && bestHeight > 0) {
+      framebuffer._width = bestWidth;
+      framebuffer._height = bestHeight;
+      return this.FRAMEBUFFER_COMPLETE;
+    }
+    return this.FRAMEBUFFER_INCOMPLETE_ATTACHMENT;
+  }
   /**
-   * Apply COLOR_ATTACHMENT1–15 to the native GL FBO when they have attachments.
-   * The base class only knows about CA0, DEPTH, STENCIL, DEPTH_STENCIL.
+   * WebGL2 completely replaces the base class framebuffer attachment flow.
+   *
+   * The base class flow is: (1) pre-check formats in JS → (2) set native
+   * attachments only if pre-check passes. This is wrong for WebGL2 because
+   * the JS pre-check uses WebGL1 format whitelists that reject valid WebGL2
+   * formats.
+   *
+   * WebGL2 flow: (1) always set native attachments first → (2) query native
+   * glCheckFramebufferStatus to determine completeness. This delegates all
+   * format validation to the native GL driver, matching browser behavior.
+   *
+   * Also handles COLOR_ATTACHMENT1–15 (WebGL2 MRT) that the base class
+   * doesn't know about.
+   */
+  /**
+   * Apply COLOR_ATTACHMENT1–15 to the native GL FBO (WebGL2 MRT).
+   * The base class handles CA0, DEPTH, STENCIL, DEPTH_STENCIL and calls
+   * _preCheckFramebufferStatus (which we override to query native GL).
    */
   _updateFramebufferAttachments(framebuffer) {
     super._updateFramebufferAttachments(framebuffer);
@@ -43,11 +143,11 @@ class WebGL2RenderingContext extends WebGLRenderingContext {
       if (attachment instanceof WebGLTexture) {
         const face = framebuffer._attachmentFace[attachmentEnum] || this.TEXTURE_2D;
         const level = framebuffer._attachmentLevel[attachmentEnum] ?? 0;
-        this._native.framebufferTexture2D(this.FRAMEBUFFER, attachmentEnum, face, attachment._ | 0, level | 0);
+        this._gl.framebufferTexture2D(this.FRAMEBUFFER, attachmentEnum, face, attachment._ | 0, level | 0);
       } else if (attachment instanceof WebGLRenderbuffer) {
-        this._native.framebufferRenderbuffer(this.FRAMEBUFFER, attachmentEnum, this.RENDERBUFFER, attachment._ | 0);
+        this._gl.framebufferRenderbuffer(this.FRAMEBUFFER, attachmentEnum, this.RENDERBUFFER, attachment._ | 0);
       } else {
-        this._native.framebufferTexture2D(this.FRAMEBUFFER, attachmentEnum, this.TEXTURE_2D, 0, 0);
+        this._gl.framebufferTexture2D(this.FRAMEBUFFER, attachmentEnum, this.TEXTURE_2D, 0, 0);
       }
     }
   }
@@ -56,11 +156,63 @@ class WebGL2RenderingContext extends WebGLRenderingContext {
     const isWebGL2Target = target === 35345 || target === 35982 || target === 36662 || target === 36663;
     if (isWebGL2Target) {
       const id = buffer ? buffer._ | 0 : 0;
-      this._native.bindBuffer(target, id);
+      this._gl.bindBuffer(target, id);
       return;
     }
     super.bindBuffer(target, buffer);
   }
+  /**
+   * WebGL2 adds READ_FRAMEBUFFER (0x8CA8) and DRAW_FRAMEBUFFER (0x8CA9) targets.
+   * The base class only accepts FRAMEBUFFER; this override handles the two new targets
+   * and keeps _activeReadFramebuffer / _activeDrawFramebuffer in sync.
+   */
+  bindFramebuffer(target, framebuffer) {
+    if (target === 36008 || target === 36009) {
+      if (!checkObject(framebuffer)) {
+        throw new TypeError("bindFramebuffer(GLenum, WebGLFramebuffer)");
+      }
+      if (framebuffer && framebuffer._pendingDelete) return;
+      if (framebuffer && !this._checkWrapper(framebuffer, WebGLFramebuffer)) return;
+      const id = framebuffer ? framebuffer._ | 0 : this._gtkFboId;
+      this._gl.bindFramebuffer(target, id);
+      if (target === 36008) {
+        const prev = this._activeReadFramebuffer;
+        if (prev !== framebuffer) {
+          if (prev) {
+            prev._refCount -= 1;
+            prev._checkDelete();
+          }
+          if (framebuffer) framebuffer._refCount += 1;
+        }
+        this._activeReadFramebuffer = framebuffer;
+      } else {
+        const prev = this._activeDrawFramebuffer;
+        if (prev !== framebuffer) {
+          if (prev) {
+            prev._refCount -= 1;
+            prev._checkDelete();
+          }
+          if (framebuffer) framebuffer._refCount += 1;
+        }
+        this._activeDrawFramebuffer = framebuffer;
+        this._activeFramebuffer = framebuffer;
+      }
+      return;
+    }
+    super.bindFramebuffer(this.FRAMEBUFFER, framebuffer);
+    this._activeReadFramebuffer = framebuffer;
+    this._activeDrawFramebuffer = framebuffer;
+  }
+  /** WebGL2 also unbinds from read/draw framebuffer slots when deleting. */
+  deleteFramebuffer(framebuffer) {
+    if (this._activeReadFramebuffer === framebuffer) {
+      this.bindFramebuffer(36008, null);
+    }
+    if (this._activeDrawFramebuffer === framebuffer) {
+      this.bindFramebuffer(36009, null);
+    }
+    super.deleteFramebuffer(framebuffer);
+  }
   /** WebGL2 adds READ/COPY buffer usages and additional buffer targets. */
   bufferData(target, dataOrSize, usage) {
     const isWebGL2Target = target === 35345 || target === 35982 || target === 36662 || target === 36663;
@@ -68,37 +220,60 @@ class WebGL2RenderingContext extends WebGLRenderingContext {
     const remappedUsage = isReadOrCopy ? this.STATIC_DRAW : usage;
     if (isWebGL2Target) {
       if (typeof dataOrSize === "number") {
-        if (dataOrSize >= 0) this._native.bufferDataSizeOnly(target, dataOrSize, remappedUsage);
+        if (dataOrSize >= 0) this._gl.bufferDataSizeOnly(target, dataOrSize, remappedUsage);
       } else if (dataOrSize !== null && typeof dataOrSize === "object") {
         const u8Data = arrayToUint8Array(dataOrSize);
-        this._native.bufferData(target, Uint8ArrayToVariant(u8Data), remappedUsage);
+        this._gl.bufferData(target, Uint8ArrayToVariant(u8Data), remappedUsage);
       }
       return;
     }
     super.bufferData(target, dataOrSize, remappedUsage);
   }
+  /** WebGL2 adds UNIFORM_BUFFER, TRANSFORM_FEEDBACK_BUFFER, COPY_READ/WRITE targets. */
+  bufferSubData(target, offset, data) {
+    const isWebGL2Target = target === 35345 || target === 35982 || target === 36662 || target === 36663;
+    if (isWebGL2Target) {
+      if (offset < 0) {
+        this.setError(this.INVALID_VALUE);
+        return;
+      }
+      if (!data) {
+        this.setError(this.INVALID_VALUE);
+        return;
+      }
+      const u8Data = arrayToUint8Array(data);
+      this._gl.bufferSubData(target, offset, Uint8ArrayToVariant(u8Data));
+      return;
+    }
+    super.bufferSubData(target, offset, data);
+  }
   /** WebGL2 adds TEXTURE_3D and TEXTURE_2D_ARRAY target support. */
   bindTexture(target, texture) {
     if (target === 32879 || target === 35866) {
       const id = texture ? texture._ | 0 : 0;
-      this._native.bindTexture(target, id);
+      this._gl.bindTexture(target, id);
       if (texture) texture._binding = target;
       return;
     }
     super.bindTexture(target, texture);
   }
-  /** WebGL2 adds TEXTURE_3D/TEXTURE_2D_ARRAY targets and TEXTURE_WRAP_R pname. */
+  /** WebGL2 adds TEXTURE_3D/TEXTURE_2D_ARRAY targets and many new pnames. */
   texParameteri(target, pname, param) {
     if (target === 32879 || target === 35866) {
-      this._native.texParameteri(target, pname, param);
+      this._gl.texParameteri(target, pname, param);
       return;
     }
-    if (pname === 32882) {
-      this._native.texParameteri(target, pname, param);
+    const isWebGL2Pname = pname === 32882 || pname === 34892 || pname === 34893 || pname === 33084 || pname === 33085 || pname === 33083 || pname === 33082;
+    if (isWebGL2Pname) {
+      this._gl.texParameteri(target, pname, param);
       return;
     }
     super.texParameteri(target, pname, param);
   }
+  /**
+   * In WebGL2/GLES3 the attribute-0 requirement from WebGL1 does not apply.
+   * Override drawArrays to skip the attrib0 hack and call glDrawArrays directly.
+   */
   /**
    * In WebGL2/GLES3 the attribute-0 requirement from WebGL1 does not apply.
    * Override drawArrays to skip the attrib0 hack and call glDrawArrays directly.
@@ -116,8 +291,82 @@ class WebGL2RenderingContext extends WebGLRenderingContext {
     }
     if (!this._framebufferOk()) return;
     if (count === 0) return;
-    if (this._checkVertexAttribState(count + first - 1 >>> 0)) {
-      this._native.drawArrays(mode, first, rc);
+    if (!this._checkVertexAttribState(count + first - 1 >>> 0)) return;
+    this._native2.drawArrays(mode, first, rc);
+  }
+  /**
+   * In WebGL2, UNSIGNED_INT element indices are a core feature — no extension needed.
+   * Override drawElements to skip the oes_element_index_uint extension check.
+   */
+  drawElements(mode = 0, count = 0, type = 0, offset = 0) {
+    if (count < 0 || offset < 0) {
+      this.setError(this.INVALID_VALUE);
+      return;
+    }
+    if (!this._checkStencilState()) return;
+    const elementBuffer = this._vertexObjectState._elementArrayBufferBinding;
+    if (!elementBuffer) {
+      this.setError(this.INVALID_OPERATION);
+      return;
+    }
+    let elementData = null;
+    let adjustedOffset = offset;
+    if (type === this.UNSIGNED_SHORT) {
+      if (adjustedOffset % 2) {
+        this.setError(this.INVALID_OPERATION);
+        return;
+      }
+      adjustedOffset >>= 1;
+      elementData = new Uint16Array(elementBuffer._elements.buffer);
+    } else if (type === this.UNSIGNED_INT) {
+      if (adjustedOffset % 4) {
+        this.setError(this.INVALID_OPERATION);
+        return;
+      }
+      adjustedOffset >>= 2;
+      elementData = new Uint32Array(elementBuffer._elements.buffer);
+    } else if (type === this.UNSIGNED_BYTE) {
+      elementData = elementBuffer._elements;
+    } else {
+      this.setError(this.INVALID_ENUM);
+      return;
+    }
+    let reducedCount = count;
+    switch (mode) {
+      case this.TRIANGLES:
+        if (count % 3) reducedCount -= count % 3;
+        break;
+      case this.LINES:
+        if (count % 2) reducedCount -= count % 2;
+        break;
+      case this.POINTS:
+        break;
+      case this.LINE_LOOP:
+      case this.LINE_STRIP:
+        if (count < 2) {
+          this.setError(this.INVALID_OPERATION);
+          return;
+        }
+        break;
+      case this.TRIANGLE_FAN:
+      case this.TRIANGLE_STRIP:
+        if (count < 3) {
+          this.setError(this.INVALID_OPERATION);
+          return;
+        }
+        break;
+      default:
+        this.setError(this.INVALID_ENUM);
+        return;
+    }
+    if (!this._framebufferOk()) return;
+    if (count === 0) return;
+    let maxIndex = 0;
+    for (let i = adjustedOffset; i < adjustedOffset + reducedCount; ++i) {
+      if (i < elementData.length && elementData[i] > maxIndex) maxIndex = elementData[i];
+    }
+    if (this._checkVertexAttribState(maxIndex)) {
+      this._native2.drawElements(mode, reducedCount, type, offset);
     }
   }
   // ─── Vertex Array Objects ─────────────────────────────────────────────
@@ -322,19 +571,238 @@ class WebGL2RenderingContext extends WebGLRenderingContext {
   }
   texStorage2D(target, levels, internalformat, width, height) {
     this._native2.texStorage2D(target, levels, internalformat, width, height);
+    const texture = this._getTexImage(target);
+    if (texture) {
+      for (let lvl = 0; lvl < levels; lvl++) {
+        texture._levelWidth[lvl] = Math.max(1, width >> lvl);
+        texture._levelHeight[lvl] = Math.max(1, height >> lvl);
+      }
+      texture._format = this.RGBA;
+      texture._type = this.UNSIGNED_BYTE;
+    }
   }
   texStorage3D(target, levels, internalformat, width, height, depth) {
     this._native2.texStorage3D(target, levels, internalformat, width, height, depth);
   }
+  texImage2D(target = 0, level = 0, internalFormat = 0, formatOrWidth = 0, typeOrHeight = 0, sourceOrBorder = 0, _format = 0, type = 0, pixels) {
+    let width = 0;
+    let height = 0;
+    let format = 0;
+    let border = 0;
+    if (arguments.length === 6) {
+      type = typeOrHeight;
+      format = formatOrWidth;
+      if (sourceOrBorder instanceof GdkPixbuf.Pixbuf) {
+        const pixbuf = sourceOrBorder;
+        width = pixbuf.get_width();
+        height = pixbuf.get_height();
+        pixels = pixbuf.get_pixels();
+      } else {
+        const imageData = extractImageData(sourceOrBorder);
+        if (imageData == null) {
+          throw new TypeError("texImage2D(GLenum, GLint, GLenum, GLint, GLenum, GLenum, ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement)");
+        }
+        width = imageData.width;
+        height = imageData.height;
+        pixels = imageData.data;
+      }
+    } else if (arguments.length >= 9) {
+      width = formatOrWidth;
+      height = typeOrHeight;
+      border = sourceOrBorder;
+      format = _format;
+    }
+    const texture = this._getTexImage(target);
+    if (!texture) {
+      this.setError(this.INVALID_OPERATION);
+      return;
+    }
+    let data = convertPixels(pixels);
+    if (this._unpackFlipY && data && width > 0 && height > 0) {
+      const pixelSize = this._computePixelSize(type, format);
+      if (pixelSize > 0) {
+        const rowStride = this._computeRowStride(width, pixelSize);
+        const flipped = new Uint8Array(data.length);
+        for (let row = 0; row < height; row++) {
+          const srcOffset = row * rowStride;
+          const dstOffset = (height - 1 - row) * rowStride;
+          flipped.set(data.subarray(srcOffset, srcOffset + rowStride), dstOffset);
+        }
+        data = flipped;
+      }
+    }
+    this._saveError();
+    this._gl.texImage2D(target, level, internalFormat, width, height, border, format, type, Uint8ArrayToVariant(data));
+    const error = this.getError();
+    this._restoreError(error);
+    if (error !== this.NO_ERROR) return;
+    texture._levelWidth[level] = width;
+    texture._levelHeight[level] = height;
+    texture._format = format;
+    texture._type = type;
+    const activeFramebuffer = this._activeFramebuffer;
+    if (activeFramebuffer) {
+      let needsUpdate = false;
+      const attachments = this._getAttachments();
+      for (let i = 0; i < attachments.length; ++i) {
+        if (activeFramebuffer._attachments[attachments[i]] === texture) {
+          needsUpdate = true;
+          break;
+        }
+      }
+      if (needsUpdate && this._activeFramebuffer) {
+        this._updateFramebufferAttachments(this._activeFramebuffer);
+      }
+    }
+  }
+  texSubImage2D(target = 0, level = 0, xoffset = 0, yoffset = 0, formatOrWidth = 0, typeOrHeight = 0, sourceOrFormat = 0, type = 0, pixels) {
+    let width = 0;
+    let height = 0;
+    let format = 0;
+    if (arguments.length === 7) {
+      type = typeOrHeight;
+      format = formatOrWidth;
+      if (sourceOrFormat instanceof GdkPixbuf.Pixbuf) {
+        const pixbuf = sourceOrFormat;
+        width = pixbuf.get_width();
+        height = pixbuf.get_height();
+        pixels = pixbuf.get_pixels();
+      } else {
+        const imageData = extractImageData(sourceOrFormat);
+        if (imageData == null) {
+          throw new TypeError("texSubImage2D(GLenum, GLint, GLint, GLint, GLenum, GLenum, ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement)");
+        }
+        width = imageData.width;
+        height = imageData.height;
+        pixels = imageData.data;
+      }
+    } else {
+      width = formatOrWidth;
+      height = typeOrHeight;
+      format = sourceOrFormat;
+    }
+    const texture = this._getTexImage(target);
+    if (!texture) {
+      this.setError(this.INVALID_OPERATION);
+      return;
+    }
+    let data = convertPixels(pixels);
+    if (!data) {
+      this.setError(this.INVALID_OPERATION);
+      return;
+    }
+    if (this._unpackFlipY && data && width > 0 && height > 0) {
+      const pixelSize = this._computePixelSize(type, format);
+      if (pixelSize > 0) {
+        const rowStride = this._computeRowStride(width, pixelSize);
+        const flipped = new Uint8Array(data.length);
+        for (let row = 0; row < height; row++) {
+          const srcOffset = row * rowStride;
+          const dstOffset = (height - 1 - row) * rowStride;
+          flipped.set(data.subarray(srcOffset, srcOffset + rowStride), dstOffset);
+        }
+        data = flipped;
+      }
+    }
+    this._gl.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, Uint8ArrayToVariant(data));
+  }
   framebufferTextureLayer(target, attachment, texture, level, layer) {
     this._native2.framebufferTextureLayer(target, attachment, texture ? texture._ : 0, level, layer);
   }
   // ─── Instancing & Advanced Draw ───────────────────────────────────────
   drawArraysInstanced(mode, first, count, instanceCount) {
-    this._native2.drawArraysInstanced(mode, first, count, instanceCount);
+    if (first < 0 || count < 0 || instanceCount < 0) {
+      this.setError(this.INVALID_VALUE);
+      return;
+    }
+    if (!this._checkStencilState()) return;
+    const rc = vertexCount(this, mode, count);
+    if (rc < 0) {
+      this.setError(this.INVALID_ENUM);
+      return;
+    }
+    if (!this._framebufferOk()) return;
+    if (count === 0 || instanceCount === 0) return;
+    if (!this._checkVertexAttribState(count + first - 1 >>> 0)) return;
+    this._native2.drawArraysInstanced(mode, first, rc, instanceCount);
   }
   drawElementsInstanced(mode, count, type, offset, instanceCount) {
-    this._native2.drawElementsInstanced(mode, count, type, offset, instanceCount);
+    if (count < 0 || offset < 0 || instanceCount < 0) {
+      this.setError(this.INVALID_VALUE);
+      return;
+    }
+    if (!this._checkStencilState()) return;
+    const elementBuffer = this._vertexObjectState._elementArrayBufferBinding;
+    if (!elementBuffer) {
+      this.setError(this.INVALID_OPERATION);
+      return;
+    }
+    let elementData = null;
+    let adjustedOffset = offset;
+    if (type === this.UNSIGNED_SHORT) {
+      if (adjustedOffset % 2) {
+        this.setError(this.INVALID_OPERATION);
+        return;
+      }
+      adjustedOffset >>= 1;
+      elementData = new Uint16Array(elementBuffer._elements.buffer);
+    } else if (type === this.UNSIGNED_INT) {
+      if (adjustedOffset % 4) {
+        this.setError(this.INVALID_OPERATION);
+        return;
+      }
+      adjustedOffset >>= 2;
+      elementData = new Uint32Array(elementBuffer._elements.buffer);
+    } else if (type === this.UNSIGNED_BYTE) {
+      elementData = elementBuffer._elements;
+    } else {
+      this.setError(this.INVALID_ENUM);
+      return;
+    }
+    let reducedCount = count;
+    switch (mode) {
+      case this.TRIANGLES:
+        if (count % 3) reducedCount -= count % 3;
+        break;
+      case this.LINES:
+        if (count % 2) reducedCount -= count % 2;
+        break;
+      case this.POINTS:
+        break;
+      case this.LINE_LOOP:
+      case this.LINE_STRIP:
+        if (count < 2) {
+          this.setError(this.INVALID_OPERATION);
+          return;
+        }
+        break;
+      case this.TRIANGLE_FAN:
+      case this.TRIANGLE_STRIP:
+        if (count < 3) {
+          this.setError(this.INVALID_OPERATION);
+          return;
+        }
+        break;
+      default:
+        this.setError(this.INVALID_ENUM);
+        return;
+    }
+    if (!this._framebufferOk()) return;
+    if (reducedCount === 0 || instanceCount === 0) {
+      this._checkVertexAttribState(0);
+      return;
+    }
+    if (reducedCount + adjustedOffset >>> 0 > elementData.length) {
+      this.setError(this.INVALID_OPERATION);
+      return;
+    }
+    let maxIndex = 0;
+    for (let i = adjustedOffset; i < adjustedOffset + reducedCount; ++i) {
+      if (elementData[i] > maxIndex) maxIndex = elementData[i];
+    }
+    if (this._checkVertexAttribState(maxIndex)) {
+      this._native2.drawElementsInstanced(mode, reducedCount, type, offset, instanceCount);
+    }
   }
   vertexAttribDivisor(index, divisor) {
     this._native2.vertexAttribDivisor(index, divisor);
@@ -343,10 +811,19 @@ class WebGL2RenderingContext extends WebGLRenderingContext {
     this._native2.vertexAttribIPointer(index, size, type, stride, offset);
   }
   drawBuffers(buffers) {
-    this._native2.drawBuffers(Array.from(buffers));
+    const mapped = buffers.map((b) => b === 1029 ? this.COLOR_ATTACHMENT0 : b);
+    this._native2.drawBuffers(Array.from(mapped));
   }
   drawRangeElements(mode, start, end, count, type, offset) {
-    this._native2.drawRangeElements(mode, start, end, count, type, offset);
+    if (count < 0 || offset < 0) {
+      this.setError(this.INVALID_VALUE);
+      return;
+    }
+    if (end < start) {
+      this.setError(this.INVALID_VALUE);
+      return;
+    }
+    this.drawElements(mode, count, type, offset);
   }
   blitFramebuffer(srcX0, srcY0, srcX1, srcY1, dstX0, dstY0, dstX1, dstY1, mask, filter) {
     this._native2.blitFramebuffer(srcX0, srcY0, srcX1, srcY1, dstX0, dstY0, dstX1, dstY1, mask, filter);
@@ -360,8 +837,24 @@ class WebGL2RenderingContext extends WebGLRenderingContext {
   readBuffer(src) {
     this._native2.readBuffer(src);
   }
-  renderbufferStorageMultisample(target, samples, internalformat, width, height) {
-    this._native2.renderbufferStorageMultisample(target, samples, internalformat, width, height);
+  renderbufferStorageMultisample(target, samples, internalFormat, width, height) {
+    if (target !== this.RENDERBUFFER) {
+      this.setError(this.INVALID_ENUM);
+      return;
+    }
+    const renderbuffer = this._activeRenderbuffer;
+    if (!renderbuffer) {
+      this.setError(this.INVALID_OPERATION);
+      return;
+    }
+    this._saveError();
+    this._native2.renderbufferStorageMultisample(target, samples, internalFormat, width, height);
+    const error = this.getError();
+    this._restoreError(error);
+    if (error !== this.NO_ERROR) return;
+    renderbuffer._width = width;
+    renderbuffer._height = height;
+    renderbuffer._format = internalFormat;
   }
   // ─── Unsigned Integer Uniforms ────────────────────────────────────────
   uniform1ui(location, v0) {
@@ -439,7 +932,7 @@ class WebGL2RenderingContext extends WebGLRenderingContext {
     const isUintType = type === UINT || type === UVEC2 || type === UVEC3 || type === UVEC4;
     if (!isUintType) return super.getUniform(program, location);
     if (!program || !location) return null;
-    const data = this._native.getUniformi(program._ | 0, location._ | 0);
+    const data = this._gl.getUniformi(program._ | 0, location._ | 0);
     if (!data) return null;
     if (type === UINT) return data[0] >>> 0;
     if (type === UVEC2) return new Uint32Array([data[0] >>> 0, data[1] >>> 0]);
@@ -482,6 +975,8 @@ class WebGL2RenderingContext extends WebGLRenderingContext {
       warnNotImplemented("WebGL2RenderingContext.getParameter(GL_EXTENSIONS)");
       return "";
     }
+    if (pname === 36006) return this._activeDrawFramebuffer;
+    if (pname === 36010) return this._activeReadFramebuffer;
     switch (pname) {
       case 36183:
       // MAX_SAMPLES
@@ -545,8 +1040,6 @@ class WebGL2RenderingContext extends WebGLRenderingContext {
       // PIXEL_UNPACK_BUFFER_BINDING
       case 3074:
       // READ_BUFFER
-      case 36010:
-      // READ_FRAMEBUFFER_BINDING
       case 32874:
       // TEXTURE_BINDING_3D
       case 35869:
@@ -585,6 +1078,103 @@ class WebGL2RenderingContext extends WebGLRenderingContext {
     const s = this._native2.getStringi(name, index);
     return s.length > 0 ? s : null;
   }
+  // ─── WebGL2 overrides for format validation ────────────────────────────
+  /**
+   * WebGL2 supports ~30+ renderbuffer formats (R8, RG8, RGBA8, RGBA16F,
+   * DEPTH_COMPONENT24, DEPTH32F_STENCIL8, etc.). The WebGL1 base class
+   * only allows 7 formats. Delegate format validation to native GL.
+   */
+  renderbufferStorage(target, internalFormat, width, height) {
+    if (target !== this.RENDERBUFFER) {
+      this.setError(this.INVALID_ENUM);
+      return;
+    }
+    const renderbuffer = this._activeRenderbuffer;
+    if (!renderbuffer) {
+      this.setError(this.INVALID_OPERATION);
+      return;
+    }
+    if (width < 0 || height < 0) {
+      this.setError(this.INVALID_VALUE);
+      return;
+    }
+    while (this._gl.getError() !== this.NO_ERROR) {
+    }
+    this._gl.renderbufferStorage(target, internalFormat, width, height);
+    if (this._gl.getError() !== this.NO_ERROR) return;
+    renderbuffer._width = width;
+    renderbuffer._height = height;
+    renderbuffer._format = internalFormat;
+    const activeFramebuffer = this._activeFramebuffer;
+    if (activeFramebuffer) {
+      const attachments = this._getAttachments();
+      let needsUpdate = false;
+      for (let i = 0; i < attachments.length; ++i) {
+        if (activeFramebuffer._attachments[attachments[i]] === renderbuffer) {
+          needsUpdate = true;
+          break;
+        }
+      }
+      if (needsUpdate) this._updateFramebufferAttachments(activeFramebuffer);
+    }
+  }
+  /**
+   * WebGL2 makes several WebGL1 extensions part of the core spec.
+   * EXT_color_buffer_float and EXT_color_buffer_half_float are always
+   * available in WebGL2 contexts. Append them if the base class didn't.
+   */
+  getSupportedExtensions() {
+    const exts = super.getSupportedExtensions();
+    const ensure = ["EXT_color_buffer_float", "EXT_color_buffer_half_float", "OES_texture_half_float"];
+    for (const ext of ensure) {
+      if (exts.indexOf(ext) === -1) exts.push(ext);
+    }
+    return exts;
+  }
+  /**
+   * WebGL2 allows reading pixels in many more format/type combinations
+   * than WebGL1's strict RGBA/UNSIGNED_BYTE. Delegate validation to native.
+   */
+  readPixels(x, y, width, height, format, type, pixels) {
+    if (!pixels) return;
+    if (width < 0 || height < 0) {
+      this.setError(this.INVALID_VALUE);
+      return;
+    }
+    if (!this._framebufferOk()) return;
+    const componentCount = format === 6408 || format === 32856 ? 4 : format === 6407 ? 3 : format === 33319 ? 2 : 1;
+    const bytesPerComponent = type === 5126 ? 4 : type === 5131 || type === 36193 ? 2 : type === 5125 || type === 5124 ? 4 : type === 5123 || type === 5122 ? 2 : 1;
+    const byteCount = width * height * componentCount * bytesPerComponent;
+    const pixelData = new Uint8Array(byteCount);
+    this._saveError();
+    const result = this._gl.readPixels(x, y, width, height, format, type, Uint8ArrayToVariant(pixelData));
+    const error = this.getError();
+    this._restoreError(error);
+    if (error !== this.NO_ERROR) return;
+    const src = result && result.length > 0 ? result : pixelData;
+    if (pixels instanceof Uint8Array) {
+      pixels.set(src);
+    } else if (pixels instanceof Float32Array) {
+      const floatView = new Float32Array(src.buffer, 0, pixels.length);
+      pixels.set(floatView);
+    }
+  }
+  // framebufferTexture2D: inherits from base class. WebGL2 allows level>0 for
+  // mipmap attachments, but Three.js only uses level=0. The base class level===0
+  // check is acceptable for now. If needed, override to skip level validation.
+  /**
+   * WebGL2 never blocks draw calls on JS-side framebuffer format checks.
+   * The native GL (Mesa/libepoxy) handles completeness and generates
+   * INVALID_FRAMEBUFFER_OPERATION for truly incomplete FBOs at draw time.
+   * This matches headless-gl's approach: _framebufferOk() always returns true.
+   *
+   * The base class rejects valid WebGL2 formats (RGBA16F/HALF_FLOAT, depth
+   * textures, WebGL2 renderbuffer formats) causing silent rendering failures
+   * for postprocessing effects and environment maps.
+   */
+  _framebufferOk() {
+    return true;
+  }
 }
 export {
   WebGL2RenderingContext