webgraphiclibrary 2.0.0-beta.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ahmerhh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,247 @@
+# webgraphiclibrary
+
+Small, type-safe WebGL utilities for people who still like working close to the graphics API.
+
+webgraphiclibrary is not a scene graph, renderer, game engine, or replacement for Three.js. It is a set of focused wrappers around WebGL resources that are easy to reason about, easy to clean up, and small enough to drop into rendering experiments, post-processing pipelines, teaching projects, and custom engines.
+
+The first v2 module is the framebuffer wrapper. It turns the noisy WebGL framebuffer setup flow into a small lifecycle API while keeping the underlying WebGL objects available when you need direct control.
+
+![Framebuffer workflow](docs/assets/fbo-workflow.png)
+
+## Project snapshots
+
+The screenshots below are generated with Playwright from this repository's current API examples and verification commands.
+
+![Scoped framebuffer code snippet](docs/screenshots/code-snippet.png)
+
+![Release verification terminal](docs/screenshots/terminal-verification.png)
+
+![Framebuffer workflow card](docs/screenshots/fbo-workflow-card.png)
+
+## Install
+
+```bash
+npm install webgraphiclibrary@beta
+```
+
+```bash
+pnpm add webgraphiclibrary@beta
+```
+
+## Imports
+
+```ts
+import { Framebuffer } from "webgraphiclibrary/fbo";
+import { WebGLError } from "webgraphiclibrary/core";
+```
+
+The package uses subpath exports so each module stays explicit. The current beta exports:
+
+- `webgraphiclibrary/fbo`
+- `webgraphiclibrary/core`
+
+## Framebuffer quick start
+
+```ts
+import { Framebuffer } from "webgraphiclibrary/fbo";
+
+const canvas = document.querySelector("canvas");
+if (!(canvas instanceof HTMLCanvasElement)) {
+  throw new Error("Canvas element was not found.");
+}
+
+const gl = canvas.getContext("webgl");
+if (gl === null) {
+  throw new Error("WebGL is not available.");
+}
+
+const fbo = new Framebuffer(gl, {
+  width: 512,
+  height: 512,
+  depth: true
+});
+
+fbo.withBound(() => {
+  gl.viewport(0, 0, fbo.width, fbo.height);
+  gl.clearColor(0, 0, 0, 1);
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  // Draw the off-screen scene here.
+});
+
+gl.viewport(0, 0, canvas.width, canvas.height);
+gl.bindTexture(gl.TEXTURE_2D, fbo.texture);
+
+// Draw a fullscreen quad here and sample fbo.texture in the fragment shader.
+
+fbo.dispose();
+```
+
+## Framebuffer API
+
+### `new Framebuffer(gl, options)`
+
+Creates a color framebuffer target backed by a `WebGLTexture`.
+
+```ts
+const fbo = new Framebuffer(gl, {
+  width: 1024,
+  height: 1024,
+  depth: true
+});
+```
+
+Options:
+
+| Option           | Type      | Default            | Notes                                        |
+| ---------------- | --------- | ------------------ | -------------------------------------------- |
+| `width`          | `number`  | required           | Positive integer width in pixels             |
+| `height`         | `number`  | required           | Positive integer height in pixels            |
+| `internalFormat` | `number`  | `gl.RGBA`          | Texture internal format                      |
+| `format`         | `number`  | `gl.RGBA`          | Texture data format                          |
+| `type`           | `number`  | `gl.UNSIGNED_BYTE` | Texture data type                            |
+| `minFilter`      | `number`  | `gl.LINEAR`        | Texture minification filter                  |
+| `magFilter`      | `number`  | `gl.LINEAR`        | Texture magnification filter                 |
+| `wrapS`          | `number`  | `gl.CLAMP_TO_EDGE` | Horizontal texture wrapping                  |
+| `wrapT`          | `number`  | `gl.CLAMP_TO_EDGE` | Vertical texture wrapping                    |
+| `depth`          | `boolean` | `false`            | Adds a `DEPTH_COMPONENT16` renderbuffer      |
+| `stencil`        | `boolean` | `false`            | Adds a combined `DEPTH_STENCIL` renderbuffer |
+
+### Properties
+
+| Property       | Type                                              | Notes                             |
+| -------------- | ------------------------------------------------- | --------------------------------- |
+| `gl`           | `WebGLRenderingContext \| WebGL2RenderingContext` | Context passed to the constructor |
+| `width`        | `number`                                          | Current framebuffer width         |
+| `height`       | `number`                                          | Current framebuffer height        |
+| `framebuffer`  | `WebGLFramebuffer`                                | Underlying framebuffer object     |
+| `texture`      | `WebGLTexture`                                    | Color attachment texture          |
+| `renderbuffer` | `WebGLRenderbuffer \| null`                       | Depth or depth-stencil storage    |
+| `disposed`     | `boolean`                                         | `true` after disposal             |
+
+### Methods
+
+#### `bind()`
+
+Binds the framebuffer so future draw calls write into `texture`.
+
+#### `unbind()`
+
+Binds the default screen framebuffer.
+
+#### `withBound(render)`
+
+Binds the framebuffer, runs the callback, and unbinds in a `finally` block. This keeps render passes compact and still makes the WebGL state change explicit.
+
+```ts
+fbo.withBound(() => {
+  renderScene();
+});
+```
+
+#### `resize({ width, height })`
+
+Reallocates texture and renderbuffer storage while keeping the same framebuffer object.
+
+```ts
+fbo.resize({ width: canvas.width, height: canvas.height });
+```
+
+#### `resizeToCanvas(canvas)`
+
+Convenience wrapper for matching a framebuffer to a canvas backing-store size.
+
+```ts
+fbo.resizeToCanvas(canvas);
+```
+
+#### `readPixels()`
+
+Reads the color attachment into a `Uint8Array` of length `width * height * 4`.
+
+```ts
+const pixels = fbo.readPixels();
+const firstPixel = pixels.slice(0, 4);
+```
+
+#### `dispose()`
+
+Deletes the framebuffer, color texture, and optional renderbuffer. Disposal is idempotent, so repeated calls are safe.
+
+## Compatibility alias
+
+The v2 API prefers the descriptive `Framebuffer` name, but the shorter `FBO` alias is exported too:
+
+```ts
+import { FBO } from "webgraphiclibrary/fbo";
+
+const target = new FBO(gl, { width: 512, height: 512 });
+```
+
+## Error behavior
+
+The library throws early for invalid usage:
+
+- non-WebGL context values
+- non-integer or non-positive dimensions
+- failed WebGL resource allocation
+- incomplete framebuffer status
+- use after `dispose()`
+
+Base WebGL-related failures extend `WebGLError`. Use-after-dispose failures throw `DisposedResourceError`.
+
+## Development
+
+```bash
+pnpm install
+pnpm lint
+pnpm typecheck
+pnpm test
+pnpm build
+pnpm screenshots
+```
+
+`pnpm prepublishOnly` runs the full local release check: lint, typecheck, tests, and build.
+
+`pnpm screenshots` regenerates the README screenshots with Playwright.
+
+## npm package
+
+The current release target is the beta package:
+
+```bash
+npm publish --tag beta
+```
+
+The package ships compiled ESM output, TypeScript declarations, README assets, and examples.
+
+## Roadmap
+
+The older WebGraphicLibrary packages are being rebuilt around the same small, typed-resource approach. The next modules are:
+
+- shader compilation
+- program linking and uniform helpers
+- typed vertex/index buffers
+- texture upload helpers
+- texture display debugging utilities
+
+Sprite-style helpers are intentionally outside the first v2 scope. They fit better as examples built on top of the low-level modules.
+
+## Related repositories
+
+This repository is the new home for the v2 work. The original package repositories are still useful for history and comparison:
+
+| Repository                                                                                               | Notes                            |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| [WebGraphicLibrary-fixedbaseoperator](https://github.com/ahmerhabib/WebGraphicLibrary-fixedbaseoperator) | Original framebuffer/FBO package |
+| [WebGraphicLibrary-texture-display](https://github.com/ahmerhabib/WebGraphicLibrary-texture-display)     | Texture display helper           |
+| [WebGraphicLibrary-buffer](https://github.com/ahmerhabib/WebGraphicLibrary-buffer)                       | WebGL buffer wrapper             |
+| [WebGraphicLibrary-sprite](https://github.com/ahmerhabib/WebGraphicLibrary-sprite)                       | Sprite template package          |
+| [webgraphiclibrary-program](https://github.com/ahmerhabib/webgraphiclibrary-program)                     | WebGL program wrapper            |
+| [WebGraphicLibrary-texture](https://github.com/ahmerhabib/WebGraphicLibrary-texture)                     | WebGL texture wrapper            |
+| [WebGraphicLibrary-context](https://github.com/ahmerhabib/WebGraphicLibrary-context)                     | Canvas context helper            |
+| [WebGraphicLibrary-shader](https://github.com/ahmerhabib/WebGraphicLibrary-shader)                       | WebGL shader wrapper             |
+
+## License
+
+MIT

package/dist/core.d.ts

@@ -0,0 +1,14 @@
+export { G as GLContext, g as getFramebufferStatusMessage, i as isWebGL2, a as isWebGLContext } from './gl-D_qLxkHO.js';
+
+declare function assertPositiveIntegerDimension(name: "width" | "height", value: number): number;
+
+declare function assertNotDisposed(resourceName: string, disposed: boolean): void;
+
+declare class WebGLError extends Error {
+    constructor(message: string);
+}
+declare class DisposedResourceError extends WebGLError {
+    constructor(resourceName: string);
+}
+
+export { DisposedResourceError, WebGLError, assertNotDisposed, assertPositiveIntegerDimension };

package/dist/core.js

@@ -0,0 +1,57 @@
+// packages/core/src/dimensions.ts
+function assertPositiveIntegerDimension(name, value) {
+  if (!Number.isInteger(value)) {
+    throw new TypeError(`${name} must be an integer.`);
+  }
+  if (value <= 0) {
+    throw new RangeError(`${name} must be greater than 0.`);
+  }
+  return value;
+}
+
+// packages/core/src/errors.ts
+var WebGLError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "WebGLError";
+  }
+};
+var DisposedResourceError = class extends WebGLError {
+  constructor(resourceName) {
+    super(`${resourceName} has been disposed.`);
+    this.name = "DisposedResourceError";
+  }
+};
+
+// packages/core/src/disposable.ts
+function assertNotDisposed(resourceName, disposed) {
+  if (disposed) {
+    throw new DisposedResourceError(resourceName);
+  }
+}
+
+// packages/core/src/gl.ts
+function isWebGLContext(value) {
+  if (value === null || typeof value !== "object") {
+    return false;
+  }
+  const candidate = value;
+  return typeof candidate.createFramebuffer === "function" && typeof candidate.bindFramebuffer === "function" && typeof candidate.checkFramebufferStatus === "function";
+}
+function isWebGL2(gl) {
+  return "texStorage2D" in gl && typeof gl.texStorage2D === "function";
+}
+function getFramebufferStatusMessage(gl, status) {
+  const statuses = /* @__PURE__ */ new Map([
+    [gl.FRAMEBUFFER_COMPLETE, "Framebuffer is complete."],
+    [gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT, "Framebuffer has an incomplete attachment."],
+    [gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT, "Framebuffer has no image attached to it."],
+    [gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS, "Framebuffer attachments have mismatched dimensions."],
+    [gl.FRAMEBUFFER_UNSUPPORTED, "Framebuffer configuration is unsupported by this context."]
+  ]);
+  return statuses.get(status) ?? `Unknown framebuffer status: ${status}.`;
+}
+
+export { DisposedResourceError, WebGLError, assertNotDisposed, assertPositiveIntegerDimension, getFramebufferStatusMessage, isWebGL2, isWebGLContext };
+//# sourceMappingURL=core.js.map
+//# sourceMappingURL=core.js.map

package/dist/core.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/core/src/dimensions.ts","../packages/core/src/errors.ts","../packages/core/src/disposable.ts","../packages/core/src/gl.ts"],"names":[],"mappings":";AAAO,SAAS,8BAAA,CAA+B,MAA0B,KAAA,EAAuB;AAC9F,EAAA,IAAI,CAAC,MAAA,CAAO,SAAA,CAAU,KAAK,CAAA,EAAG;AAC5B,IAAA,MAAM,IAAI,SAAA,CAAU,CAAA,EAAG,IAAI,CAAA,oBAAA,CAAsB,CAAA;AAAA,EACnD;AAEA,EAAA,IAAI,SAAS,CAAA,EAAG;AACd,IAAA,MAAM,IAAI,UAAA,CAAW,CAAA,EAAG,IAAI,CAAA,wBAAA,CAA0B,CAAA;AAAA,EACxD;AAEA,EAAA,OAAO,KAAA;AACT;;;ACVO,IAAM,UAAA,GAAN,cAAyB,KAAA,CAAM;AAAA,EACpC,YAAY,OAAA,EAAiB;AAC3B,IAAA,KAAA,CAAM,OAAO,CAAA;AACb,IAAA,IAAA,CAAK,IAAA,GAAO,YAAA;AAAA,EACd;AACF;AAEO,IAAM,qBAAA,GAAN,cAAoC,UAAA,CAAW;AAAA,EACpD,YAAY,YAAA,EAAsB;AAChC,IAAA,KAAA,CAAM,CAAA,EAAG,YAAY,CAAA,mBAAA,CAAqB,CAAA;AAC1C,IAAA,IAAA,CAAK,IAAA,GAAO,uBAAA;AAAA,EACd;AACF;;;ACVO,SAAS,iBAAA,CAAkB,cAAsB,QAAA,EAAyB;AAC/E,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,MAAM,IAAI,sBAAsB,YAAY,CAAA;AAAA,EAC9C;AACF;;;ACEO,SAAS,eAAe,KAAA,EAAoC;AACjE,EAAA,IAAI,KAAA,KAAU,IAAA,IAAQ,OAAO,KAAA,KAAU,QAAA,EAAU;AAC/C,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,MAAM,SAAA,GAAY,KAAA;AAClB,EAAA,OACE,OAAO,SAAA,CAAU,iBAAA,KAAsB,UAAA,IACvC,OAAO,UAAU,eAAA,KAAoB,UAAA,IACrC,OAAO,SAAA,CAAU,sBAAA,KAA2B,UAAA;AAEhD;AAEO,SAAS,SAAS,EAAA,EAA6C;AACpE,EAAA,OAAO,cAAA,IAAkB,EAAA,IAAM,OAAO,EAAA,CAAG,YAAA,KAAiB,UAAA;AAC5D;AAEO,SAAS,2BAAA,CAA4B,IAAe,MAAA,EAAwB;AACjF,EAAA,MAAM,QAAA,uBAAe,GAAA,CAAoB;AAAA,IACvC,CAAC,EAAA,CAAG,oBAAA,EAAsB,0BAA0B,CAAA;AAAA,IACpD,CAAC,EAAA,CAAG,iCAAA,EAAmC,2CAA2C,CAAA;AAAA,IAClF,CAAC,EAAA,CAAG,yCAAA,EAA2C,0CAA0C,CAAA;AAAA,IACzF,CAAC,EAAA,CAAG,iCAAA,EAAmC,qDAAqD,CAAA;AAAA,IAC5F,CAAC,EAAA,CAAG,uBAAA,EAAyB,2DAA2D;AAAA,GACzF,CAAA;AAED,EAAA,OAAO,QAAA,CAAS,GAAA,CAAI,MAAM,CAAA,IAAK,+BAA+B,MAAM,CAAA,CAAA,CAAA;AACtE","file":"core.js","sourcesContent":["export function assertPositiveIntegerDimension(name: \"width\" | \"height\", value: number): number {\n  if (!Number.isInteger(value)) {\n    throw new TypeError(`${name} must be an integer.`);\n  }\n\n  if (value <= 0) {\n    throw new RangeError(`${name} must be greater than 0.`);\n  }\n\n  return value;\n}\n","export class WebGLError extends Error {\n  constructor(message: string) {\n    super(message);\n    this.name = \"WebGLError\";\n  }\n}\n\nexport class DisposedResourceError extends WebGLError {\n  constructor(resourceName: string) {\n    super(`${resourceName} has been disposed.`);\n    this.name = \"DisposedResourceError\";\n  }\n}\n","import { DisposedResourceError } from \"./errors\";\n\nexport function assertNotDisposed(resourceName: string, disposed: boolean): void {\n  if (disposed) {\n    throw new DisposedResourceError(resourceName);\n  }\n}\n","export type GLContext = WebGLRenderingContext | WebGL2RenderingContext;\n\ntype WebGLLike = {\n  createFramebuffer: unknown;\n  bindFramebuffer: unknown;\n  checkFramebufferStatus: unknown;\n};\n\nexport function isWebGLContext(value: unknown): value is GLContext {\n  if (value === null || typeof value !== \"object\") {\n    return false;\n  }\n\n  const candidate = value as Partial<WebGLLike>;\n  return (\n    typeof candidate.createFramebuffer === \"function\" &&\n    typeof candidate.bindFramebuffer === \"function\" &&\n    typeof candidate.checkFramebufferStatus === \"function\"\n  );\n}\n\nexport function isWebGL2(gl: GLContext): gl is WebGL2RenderingContext {\n  return \"texStorage2D\" in gl && typeof gl.texStorage2D === \"function\";\n}\n\nexport function getFramebufferStatusMessage(gl: GLContext, status: number): string {\n  const statuses = new Map<number, string>([\n    [gl.FRAMEBUFFER_COMPLETE, \"Framebuffer is complete.\"],\n    [gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT, \"Framebuffer has an incomplete attachment.\"],\n    [gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT, \"Framebuffer has no image attached to it.\"],\n    [gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS, \"Framebuffer attachments have mismatched dimensions.\"],\n    [gl.FRAMEBUFFER_UNSUPPORTED, \"Framebuffer configuration is unsupported by this context.\"]\n  ]);\n\n  return statuses.get(status) ?? `Unknown framebuffer status: ${status}.`;\n}\n"]}

package/dist/fbo.d.ts

@@ -0,0 +1,46 @@
+import { G as GLContext } from './gl-D_qLxkHO.js';
+
+interface FramebufferOptions {
+    width: number;
+    height: number;
+    internalFormat?: number;
+    format?: number;
+    type?: number;
+    minFilter?: number;
+    magFilter?: number;
+    wrapS?: number;
+    wrapT?: number;
+    depth?: boolean;
+    stencil?: boolean;
+}
+interface FramebufferResizeOptions {
+    width: number;
+    height: number;
+}
+type FramebufferCanvasSize = Pick<HTMLCanvasElement, "width" | "height">;
+declare class Framebuffer {
+    readonly gl: GLContext;
+    readonly framebuffer: WebGLFramebuffer;
+    readonly texture: WebGLTexture;
+    readonly renderbuffer: WebGLRenderbuffer | null;
+    width: number;
+    height: number;
+    private readonly options;
+    private isDisposed;
+    constructor(gl: GLContext, options: FramebufferOptions);
+    get disposed(): boolean;
+    bind(): void;
+    unbind(): void;
+    withBound<T>(render: () => T): T;
+    resize(options: FramebufferResizeOptions): void;
+    resizeToCanvas(canvas: FramebufferCanvasSize): void;
+    readPixels(): Uint8Array;
+    dispose(): void;
+    private createRenderbuffer;
+    private configureAttachments;
+    private allocateTextureStorage;
+    private allocateRenderbufferStorage;
+    private assertComplete;
+}
+
+export { Framebuffer as FBO, Framebuffer, type FramebufferCanvasSize, type FramebufferOptions, type FramebufferResizeOptions };

package/dist/fbo.js

@@ -0,0 +1,221 @@
+// packages/core/src/dimensions.ts
+function assertPositiveIntegerDimension(name, value) {
+  if (!Number.isInteger(value)) {
+    throw new TypeError(`${name} must be an integer.`);
+  }
+  if (value <= 0) {
+    throw new RangeError(`${name} must be greater than 0.`);
+  }
+  return value;
+}
+
+// packages/core/src/errors.ts
+var WebGLError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "WebGLError";
+  }
+};
+var DisposedResourceError = class extends WebGLError {
+  constructor(resourceName) {
+    super(`${resourceName} has been disposed.`);
+    this.name = "DisposedResourceError";
+  }
+};
+
+// packages/core/src/disposable.ts
+function assertNotDisposed(resourceName, disposed) {
+  if (disposed) {
+    throw new DisposedResourceError(resourceName);
+  }
+}
+
+// packages/core/src/gl.ts
+function isWebGLContext(value) {
+  if (value === null || typeof value !== "object") {
+    return false;
+  }
+  const candidate = value;
+  return typeof candidate.createFramebuffer === "function" && typeof candidate.bindFramebuffer === "function" && typeof candidate.checkFramebufferStatus === "function";
+}
+function getFramebufferStatusMessage(gl, status) {
+  const statuses = /* @__PURE__ */ new Map([
+    [gl.FRAMEBUFFER_COMPLETE, "Framebuffer is complete."],
+    [gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT, "Framebuffer has an incomplete attachment."],
+    [gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT, "Framebuffer has no image attached to it."],
+    [gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS, "Framebuffer attachments have mismatched dimensions."],
+    [gl.FRAMEBUFFER_UNSUPPORTED, "Framebuffer configuration is unsupported by this context."]
+  ]);
+  return statuses.get(status) ?? `Unknown framebuffer status: ${status}.`;
+}
+
+// packages/fbo/src/framebuffer.ts
+var Framebuffer = class {
+  gl;
+  framebuffer;
+  texture;
+  renderbuffer;
+  width;
+  height;
+  options;
+  isDisposed = false;
+  constructor(gl, options) {
+    if (!isWebGLContext(gl)) {
+      throw new TypeError("gl must be a WebGL rendering context.");
+    }
+    this.gl = gl;
+    this.width = assertPositiveIntegerDimension("width", options.width);
+    this.height = assertPositiveIntegerDimension("height", options.height);
+    this.options = {
+      internalFormat: options.internalFormat ?? gl.RGBA,
+      format: options.format ?? gl.RGBA,
+      type: options.type ?? gl.UNSIGNED_BYTE,
+      minFilter: options.minFilter ?? gl.LINEAR,
+      magFilter: options.magFilter ?? gl.LINEAR,
+      wrapS: options.wrapS ?? gl.CLAMP_TO_EDGE,
+      wrapT: options.wrapT ?? gl.CLAMP_TO_EDGE,
+      depth: options.depth ?? false,
+      stencil: options.stencil ?? false
+    };
+    const framebuffer = gl.createFramebuffer();
+    const texture = gl.createTexture();
+    if (framebuffer === null) {
+      throw new WebGLError("Failed to create framebuffer.");
+    }
+    if (texture === null) {
+      gl.deleteFramebuffer(framebuffer);
+      throw new WebGLError("Failed to create framebuffer texture.");
+    }
+    this.framebuffer = framebuffer;
+    this.texture = texture;
+    this.renderbuffer = this.createRenderbuffer();
+    this.configureAttachments();
+    this.assertComplete();
+    this.unbind();
+  }
+  get disposed() {
+    return this.isDisposed;
+  }
+  bind() {
+    assertNotDisposed("Framebuffer", this.isDisposed);
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer);
+  }
+  unbind() {
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
+  }
+  withBound(render) {
+    this.bind();
+    try {
+      return render();
+    } finally {
+      this.unbind();
+    }
+  }
+  resize(options) {
+    assertNotDisposed("Framebuffer", this.isDisposed);
+    this.width = assertPositiveIntegerDimension("width", options.width);
+    this.height = assertPositiveIntegerDimension("height", options.height);
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer);
+    this.allocateTextureStorage();
+    if (this.renderbuffer !== null) {
+      this.allocateRenderbufferStorage();
+    }
+    this.assertComplete();
+    this.unbind();
+  }
+  resizeToCanvas(canvas) {
+    this.resize({ width: canvas.width, height: canvas.height });
+  }
+  readPixels() {
+    assertNotDisposed("Framebuffer", this.isDisposed);
+    const pixels = new Uint8Array(this.width * this.height * 4);
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer);
+    this.gl.readPixels(
+      0,
+      0,
+      this.width,
+      this.height,
+      this.options.format,
+      this.options.type,
+      pixels
+    );
+    this.unbind();
+    return pixels;
+  }
+  dispose() {
+    if (this.isDisposed) {
+      return;
+    }
+    this.gl.deleteFramebuffer(this.framebuffer);
+    this.gl.deleteTexture(this.texture);
+    if (this.renderbuffer !== null) {
+      this.gl.deleteRenderbuffer(this.renderbuffer);
+    }
+    this.isDisposed = true;
+  }
+  createRenderbuffer() {
+    if (!this.options.depth && !this.options.stencil) {
+      return null;
+    }
+    const renderbuffer = this.gl.createRenderbuffer();
+    if (renderbuffer === null) {
+      throw new WebGLError("Failed to create framebuffer renderbuffer.");
+    }
+    return renderbuffer;
+  }
+  configureAttachments() {
+    const gl = this.gl;
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, this.options.minFilter);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this.options.magFilter);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, this.options.wrapS);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, this.options.wrapT);
+    this.allocateTextureStorage();
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);
+    if (this.renderbuffer !== null) {
+      this.allocateRenderbufferStorage();
+    }
+  }
+  allocateTextureStorage() {
+    this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
+    this.gl.texImage2D(
+      this.gl.TEXTURE_2D,
+      0,
+      this.options.internalFormat,
+      this.width,
+      this.height,
+      0,
+      this.options.format,
+      this.options.type,
+      null
+    );
+    this.gl.bindTexture(this.gl.TEXTURE_2D, null);
+  }
+  allocateRenderbufferStorage() {
+    if (this.renderbuffer === null) {
+      return;
+    }
+    const attachment = this.options.stencil ? this.gl.DEPTH_STENCIL_ATTACHMENT : this.gl.DEPTH_ATTACHMENT;
+    const storage = this.options.stencil ? this.gl.DEPTH_STENCIL : this.gl.DEPTH_COMPONENT16;
+    this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, this.renderbuffer);
+    this.gl.renderbufferStorage(this.gl.RENDERBUFFER, storage, this.width, this.height);
+    this.gl.framebufferRenderbuffer(
+      this.gl.FRAMEBUFFER,
+      attachment,
+      this.gl.RENDERBUFFER,
+      this.renderbuffer
+    );
+    this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, null);
+  }
+  assertComplete() {
+    const status = this.gl.checkFramebufferStatus(this.gl.FRAMEBUFFER);
+    if (status !== this.gl.FRAMEBUFFER_COMPLETE) {
+      throw new WebGLError(getFramebufferStatusMessage(this.gl, status));
+    }
+  }
+};
+
+export { Framebuffer as FBO, Framebuffer };
+//# sourceMappingURL=fbo.js.map
+//# sourceMappingURL=fbo.js.map

package/dist/fbo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/core/src/dimensions.ts","../packages/core/src/errors.ts","../packages/core/src/disposable.ts","../packages/core/src/gl.ts","../packages/fbo/src/framebuffer.ts"],"names":[],"mappings":"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","file":"fbo.js","sourcesContent":["export function assertPositiveIntegerDimension(name: \"width\" | \"height\", value: number): number {\n  if (!Number.isInteger(value)) {\n    throw new TypeError(`${name} must be an integer.`);\n  }\n\n  if (value <= 0) {\n    throw new RangeError(`${name} must be greater than 0.`);\n  }\n\n  return value;\n}\n","export class WebGLError extends Error {\n  constructor(message: string) {\n    super(message);\n    this.name = \"WebGLError\";\n  }\n}\n\nexport class DisposedResourceError extends WebGLError {\n  constructor(resourceName: string) {\n    super(`${resourceName} has been disposed.`);\n    this.name = \"DisposedResourceError\";\n  }\n}\n","import { DisposedResourceError } from \"./errors\";\n\nexport function assertNotDisposed(resourceName: string, disposed: boolean): void {\n  if (disposed) {\n    throw new DisposedResourceError(resourceName);\n  }\n}\n","export type GLContext = WebGLRenderingContext | WebGL2RenderingContext;\n\ntype WebGLLike = {\n  createFramebuffer: unknown;\n  bindFramebuffer: unknown;\n  checkFramebufferStatus: unknown;\n};\n\nexport function isWebGLContext(value: unknown): value is GLContext {\n  if (value === null || typeof value !== \"object\") {\n    return false;\n  }\n\n  const candidate = value as Partial<WebGLLike>;\n  return (\n    typeof candidate.createFramebuffer === \"function\" &&\n    typeof candidate.bindFramebuffer === \"function\" &&\n    typeof candidate.checkFramebufferStatus === \"function\"\n  );\n}\n\nexport function isWebGL2(gl: GLContext): gl is WebGL2RenderingContext {\n  return \"texStorage2D\" in gl && typeof gl.texStorage2D === \"function\";\n}\n\nexport function getFramebufferStatusMessage(gl: GLContext, status: number): string {\n  const statuses = new Map<number, string>([\n    [gl.FRAMEBUFFER_COMPLETE, \"Framebuffer is complete.\"],\n    [gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT, \"Framebuffer has an incomplete attachment.\"],\n    [gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT, \"Framebuffer has no image attached to it.\"],\n    [gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS, \"Framebuffer attachments have mismatched dimensions.\"],\n    [gl.FRAMEBUFFER_UNSUPPORTED, \"Framebuffer configuration is unsupported by this context.\"]\n  ]);\n\n  return statuses.get(status) ?? `Unknown framebuffer status: ${status}.`;\n}\n","import {\n  WebGLError,\n  assertNotDisposed,\n  assertPositiveIntegerDimension,\n  getFramebufferStatusMessage,\n  isWebGLContext\n} from \"../../core/src/index\";\nimport type { GLContext } from \"../../core/src/index\";\n\nexport interface FramebufferOptions {\n  width: number;\n  height: number;\n  internalFormat?: number;\n  format?: number;\n  type?: number;\n  minFilter?: number;\n  magFilter?: number;\n  wrapS?: number;\n  wrapT?: number;\n  depth?: boolean;\n  stencil?: boolean;\n}\n\nexport interface FramebufferResizeOptions {\n  width: number;\n  height: number;\n}\n\nexport type FramebufferCanvasSize = Pick<HTMLCanvasElement, \"width\" | \"height\">;\n\ntype TextureOptions = Required<\n  Pick<\n    FramebufferOptions,\n    \"internalFormat\" | \"format\" | \"type\" | \"minFilter\" | \"magFilter\" | \"wrapS\" | \"wrapT\"\n  >\n> &\n  Required<Pick<FramebufferOptions, \"depth\" | \"stencil\">>;\n\nexport class Framebuffer {\n  public readonly gl: GLContext;\n  public readonly framebuffer: WebGLFramebuffer;\n  public readonly texture: WebGLTexture;\n  public readonly renderbuffer: WebGLRenderbuffer | null;\n  public width: number;\n  public height: number;\n\n  private readonly options: TextureOptions;\n  private isDisposed = false;\n\n  constructor(gl: GLContext, options: FramebufferOptions) {\n    if (!isWebGLContext(gl)) {\n      throw new TypeError(\"gl must be a WebGL rendering context.\");\n    }\n\n    this.gl = gl;\n    this.width = assertPositiveIntegerDimension(\"width\", options.width);\n    this.height = assertPositiveIntegerDimension(\"height\", options.height);\n    this.options = {\n      internalFormat: options.internalFormat ?? gl.RGBA,\n      format: options.format ?? gl.RGBA,\n      type: options.type ?? gl.UNSIGNED_BYTE,\n      minFilter: options.minFilter ?? gl.LINEAR,\n      magFilter: options.magFilter ?? gl.LINEAR,\n      wrapS: options.wrapS ?? gl.CLAMP_TO_EDGE,\n      wrapT: options.wrapT ?? gl.CLAMP_TO_EDGE,\n      depth: options.depth ?? false,\n      stencil: options.stencil ?? false\n    };\n\n    const framebuffer = gl.createFramebuffer() as WebGLFramebuffer | null;\n    const texture = gl.createTexture() as WebGLTexture | null;\n\n    if (framebuffer === null) {\n      throw new WebGLError(\"Failed to create framebuffer.\");\n    }\n\n    if (texture === null) {\n      gl.deleteFramebuffer(framebuffer);\n      throw new WebGLError(\"Failed to create framebuffer texture.\");\n    }\n\n    this.framebuffer = framebuffer;\n    this.texture = texture;\n    this.renderbuffer = this.createRenderbuffer();\n\n    this.configureAttachments();\n    this.assertComplete();\n    this.unbind();\n  }\n\n  public get disposed(): boolean {\n    return this.isDisposed;\n  }\n\n  public bind(): void {\n    assertNotDisposed(\"Framebuffer\", this.isDisposed);\n    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer);\n  }\n\n  public unbind(): void {\n    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);\n  }\n\n  public withBound<T>(render: () => T): T {\n    this.bind();\n\n    try {\n      return render();\n    } finally {\n      this.unbind();\n    }\n  }\n\n  public resize(options: FramebufferResizeOptions): void {\n    assertNotDisposed(\"Framebuffer\", this.isDisposed);\n    this.width = assertPositiveIntegerDimension(\"width\", options.width);\n    this.height = assertPositiveIntegerDimension(\"height\", options.height);\n\n    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer);\n    this.allocateTextureStorage();\n\n    if (this.renderbuffer !== null) {\n      this.allocateRenderbufferStorage();\n    }\n\n    this.assertComplete();\n    this.unbind();\n  }\n\n  public resizeToCanvas(canvas: FramebufferCanvasSize): void {\n    this.resize({ width: canvas.width, height: canvas.height });\n  }\n\n  public readPixels(): Uint8Array {\n    assertNotDisposed(\"Framebuffer\", this.isDisposed);\n\n    const pixels = new Uint8Array(this.width * this.height * 4);\n    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer);\n    this.gl.readPixels(\n      0,\n      0,\n      this.width,\n      this.height,\n      this.options.format,\n      this.options.type,\n      pixels\n    );\n    this.unbind();\n    return pixels;\n  }\n\n  public dispose(): void {\n    if (this.isDisposed) {\n      return;\n    }\n\n    this.gl.deleteFramebuffer(this.framebuffer);\n    this.gl.deleteTexture(this.texture);\n\n    if (this.renderbuffer !== null) {\n      this.gl.deleteRenderbuffer(this.renderbuffer);\n    }\n\n    this.isDisposed = true;\n  }\n\n  private createRenderbuffer(): WebGLRenderbuffer | null {\n    if (!this.options.depth && !this.options.stencil) {\n      return null;\n    }\n\n    const renderbuffer = this.gl.createRenderbuffer() as WebGLRenderbuffer | null;\n    if (renderbuffer === null) {\n      throw new WebGLError(\"Failed to create framebuffer renderbuffer.\");\n    }\n\n    return renderbuffer;\n  }\n\n  private configureAttachments(): void {\n    const gl = this.gl;\n\n    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);\n    gl.bindTexture(gl.TEXTURE_2D, this.texture);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, this.options.minFilter);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this.options.magFilter);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, this.options.wrapS);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, this.options.wrapT);\n    this.allocateTextureStorage();\n    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);\n\n    if (this.renderbuffer !== null) {\n      this.allocateRenderbufferStorage();\n    }\n  }\n\n  private allocateTextureStorage(): void {\n    this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);\n    this.gl.texImage2D(\n      this.gl.TEXTURE_2D,\n      0,\n      this.options.internalFormat,\n      this.width,\n      this.height,\n      0,\n      this.options.format,\n      this.options.type,\n      null\n    );\n    this.gl.bindTexture(this.gl.TEXTURE_2D, null);\n  }\n\n  private allocateRenderbufferStorage(): void {\n    if (this.renderbuffer === null) {\n      return;\n    }\n\n    const attachment = this.options.stencil\n      ? this.gl.DEPTH_STENCIL_ATTACHMENT\n      : this.gl.DEPTH_ATTACHMENT;\n    const storage = this.options.stencil ? this.gl.DEPTH_STENCIL : this.gl.DEPTH_COMPONENT16;\n\n    this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, this.renderbuffer);\n    this.gl.renderbufferStorage(this.gl.RENDERBUFFER, storage, this.width, this.height);\n    this.gl.framebufferRenderbuffer(\n      this.gl.FRAMEBUFFER,\n      attachment,\n      this.gl.RENDERBUFFER,\n      this.renderbuffer\n    );\n    this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, null);\n  }\n\n  private assertComplete(): void {\n    const status = this.gl.checkFramebufferStatus(this.gl.FRAMEBUFFER);\n\n    if (status !== this.gl.FRAMEBUFFER_COMPLETE) {\n      throw new WebGLError(getFramebufferStatusMessage(this.gl, status));\n    }\n  }\n}\n"]}

package/dist/gl-D_qLxkHO.d.ts

@@ -0,0 +1,6 @@
+type GLContext = WebGLRenderingContext | WebGL2RenderingContext;
+declare function isWebGLContext(value: unknown): value is GLContext;
+declare function isWebGL2(gl: GLContext): gl is WebGL2RenderingContext;
+declare function getFramebufferStatusMessage(gl: GLContext, status: number): string;
+
+export { type GLContext as G, isWebGLContext as a, getFramebufferStatusMessage as g, isWebGL2 as i };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { FBO, FBO as Framebuffer, FramebufferCanvasSize, FramebufferOptions, FramebufferResizeOptions } from './fbo.js';
+import './gl-D_qLxkHO.js';

package/dist/index.js

@@ -0,0 +1,221 @@
+// packages/core/src/dimensions.ts
+function assertPositiveIntegerDimension(name, value) {
+  if (!Number.isInteger(value)) {
+    throw new TypeError(`${name} must be an integer.`);
+  }
+  if (value <= 0) {
+    throw new RangeError(`${name} must be greater than 0.`);
+  }
+  return value;
+}
+
+// packages/core/src/errors.ts
+var WebGLError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "WebGLError";
+  }
+};
+var DisposedResourceError = class extends WebGLError {
+  constructor(resourceName) {
+    super(`${resourceName} has been disposed.`);
+    this.name = "DisposedResourceError";
+  }
+};
+
+// packages/core/src/disposable.ts
+function assertNotDisposed(resourceName, disposed) {
+  if (disposed) {
+    throw new DisposedResourceError(resourceName);
+  }
+}
+
+// packages/core/src/gl.ts
+function isWebGLContext(value) {
+  if (value === null || typeof value !== "object") {
+    return false;
+  }
+  const candidate = value;
+  return typeof candidate.createFramebuffer === "function" && typeof candidate.bindFramebuffer === "function" && typeof candidate.checkFramebufferStatus === "function";
+}
+function getFramebufferStatusMessage(gl, status) {
+  const statuses = /* @__PURE__ */ new Map([
+    [gl.FRAMEBUFFER_COMPLETE, "Framebuffer is complete."],
+    [gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT, "Framebuffer has an incomplete attachment."],
+    [gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT, "Framebuffer has no image attached to it."],
+    [gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS, "Framebuffer attachments have mismatched dimensions."],
+    [gl.FRAMEBUFFER_UNSUPPORTED, "Framebuffer configuration is unsupported by this context."]
+  ]);
+  return statuses.get(status) ?? `Unknown framebuffer status: ${status}.`;
+}
+
+// packages/fbo/src/framebuffer.ts
+var Framebuffer = class {
+  gl;
+  framebuffer;
+  texture;
+  renderbuffer;
+  width;
+  height;
+  options;
+  isDisposed = false;
+  constructor(gl, options) {
+    if (!isWebGLContext(gl)) {
+      throw new TypeError("gl must be a WebGL rendering context.");
+    }
+    this.gl = gl;
+    this.width = assertPositiveIntegerDimension("width", options.width);
+    this.height = assertPositiveIntegerDimension("height", options.height);
+    this.options = {
+      internalFormat: options.internalFormat ?? gl.RGBA,
+      format: options.format ?? gl.RGBA,
+      type: options.type ?? gl.UNSIGNED_BYTE,
+      minFilter: options.minFilter ?? gl.LINEAR,
+      magFilter: options.magFilter ?? gl.LINEAR,
+      wrapS: options.wrapS ?? gl.CLAMP_TO_EDGE,
+      wrapT: options.wrapT ?? gl.CLAMP_TO_EDGE,
+      depth: options.depth ?? false,
+      stencil: options.stencil ?? false
+    };
+    const framebuffer = gl.createFramebuffer();
+    const texture = gl.createTexture();
+    if (framebuffer === null) {
+      throw new WebGLError("Failed to create framebuffer.");
+    }
+    if (texture === null) {
+      gl.deleteFramebuffer(framebuffer);
+      throw new WebGLError("Failed to create framebuffer texture.");
+    }
+    this.framebuffer = framebuffer;
+    this.texture = texture;
+    this.renderbuffer = this.createRenderbuffer();
+    this.configureAttachments();
+    this.assertComplete();
+    this.unbind();
+  }
+  get disposed() {
+    return this.isDisposed;
+  }
+  bind() {
+    assertNotDisposed("Framebuffer", this.isDisposed);
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer);
+  }
+  unbind() {
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
+  }
+  withBound(render) {
+    this.bind();
+    try {
+      return render();
+    } finally {
+      this.unbind();
+    }
+  }
+  resize(options) {
+    assertNotDisposed("Framebuffer", this.isDisposed);
+    this.width = assertPositiveIntegerDimension("width", options.width);
+    this.height = assertPositiveIntegerDimension("height", options.height);
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer);
+    this.allocateTextureStorage();
+    if (this.renderbuffer !== null) {
+      this.allocateRenderbufferStorage();
+    }
+    this.assertComplete();
+    this.unbind();
+  }
+  resizeToCanvas(canvas) {
+    this.resize({ width: canvas.width, height: canvas.height });
+  }
+  readPixels() {
+    assertNotDisposed("Framebuffer", this.isDisposed);
+    const pixels = new Uint8Array(this.width * this.height * 4);
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer);
+    this.gl.readPixels(
+      0,
+      0,
+      this.width,
+      this.height,
+      this.options.format,
+      this.options.type,
+      pixels
+    );
+    this.unbind();
+    return pixels;
+  }
+  dispose() {
+    if (this.isDisposed) {
+      return;
+    }
+    this.gl.deleteFramebuffer(this.framebuffer);
+    this.gl.deleteTexture(this.texture);
+    if (this.renderbuffer !== null) {
+      this.gl.deleteRenderbuffer(this.renderbuffer);
+    }
+    this.isDisposed = true;
+  }
+  createRenderbuffer() {
+    if (!this.options.depth && !this.options.stencil) {
+      return null;
+    }
+    const renderbuffer = this.gl.createRenderbuffer();
+    if (renderbuffer === null) {
+      throw new WebGLError("Failed to create framebuffer renderbuffer.");
+    }
+    return renderbuffer;
+  }
+  configureAttachments() {
+    const gl = this.gl;
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, this.options.minFilter);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this.options.magFilter);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, this.options.wrapS);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, this.options.wrapT);
+    this.allocateTextureStorage();
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);
+    if (this.renderbuffer !== null) {
+      this.allocateRenderbufferStorage();
+    }
+  }
+  allocateTextureStorage() {
+    this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
+    this.gl.texImage2D(
+      this.gl.TEXTURE_2D,
+      0,
+      this.options.internalFormat,
+      this.width,
+      this.height,
+      0,
+      this.options.format,
+      this.options.type,
+      null
+    );
+    this.gl.bindTexture(this.gl.TEXTURE_2D, null);
+  }
+  allocateRenderbufferStorage() {
+    if (this.renderbuffer === null) {
+      return;
+    }
+    const attachment = this.options.stencil ? this.gl.DEPTH_STENCIL_ATTACHMENT : this.gl.DEPTH_ATTACHMENT;
+    const storage = this.options.stencil ? this.gl.DEPTH_STENCIL : this.gl.DEPTH_COMPONENT16;
+    this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, this.renderbuffer);
+    this.gl.renderbufferStorage(this.gl.RENDERBUFFER, storage, this.width, this.height);
+    this.gl.framebufferRenderbuffer(
+      this.gl.FRAMEBUFFER,
+      attachment,
+      this.gl.RENDERBUFFER,
+      this.renderbuffer
+    );
+    this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, null);
+  }
+  assertComplete() {
+    const status = this.gl.checkFramebufferStatus(this.gl.FRAMEBUFFER);
+    if (status !== this.gl.FRAMEBUFFER_COMPLETE) {
+      throw new WebGLError(getFramebufferStatusMessage(this.gl, status));
+    }
+  }
+};
+
+export { Framebuffer as FBO, Framebuffer };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/core/src/dimensions.ts","../packages/core/src/errors.ts","../packages/core/src/disposable.ts","../packages/core/src/gl.ts","../packages/fbo/src/framebuffer.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["export function assertPositiveIntegerDimension(name: \"width\" | \"height\", value: number): number {\n  if (!Number.isInteger(value)) {\n    throw new TypeError(`${name} must be an integer.`);\n  }\n\n  if (value <= 0) {\n    throw new RangeError(`${name} must be greater than 0.`);\n  }\n\n  return value;\n}\n","export class WebGLError extends Error {\n  constructor(message: string) {\n    super(message);\n    this.name = \"WebGLError\";\n  }\n}\n\nexport class DisposedResourceError extends WebGLError {\n  constructor(resourceName: string) {\n    super(`${resourceName} has been disposed.`);\n    this.name = \"DisposedResourceError\";\n  }\n}\n","import { DisposedResourceError } from \"./errors\";\n\nexport function assertNotDisposed(resourceName: string, disposed: boolean): void {\n  if (disposed) {\n    throw new DisposedResourceError(resourceName);\n  }\n}\n","export type GLContext = WebGLRenderingContext | WebGL2RenderingContext;\n\ntype WebGLLike = {\n  createFramebuffer: unknown;\n  bindFramebuffer: unknown;\n  checkFramebufferStatus: unknown;\n};\n\nexport function isWebGLContext(value: unknown): value is GLContext {\n  if (value === null || typeof value !== \"object\") {\n    return false;\n  }\n\n  const candidate = value as Partial<WebGLLike>;\n  return (\n    typeof candidate.createFramebuffer === \"function\" &&\n    typeof candidate.bindFramebuffer === \"function\" &&\n    typeof candidate.checkFramebufferStatus === \"function\"\n  );\n}\n\nexport function isWebGL2(gl: GLContext): gl is WebGL2RenderingContext {\n  return \"texStorage2D\" in gl && typeof gl.texStorage2D === \"function\";\n}\n\nexport function getFramebufferStatusMessage(gl: GLContext, status: number): string {\n  const statuses = new Map<number, string>([\n    [gl.FRAMEBUFFER_COMPLETE, \"Framebuffer is complete.\"],\n    [gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT, \"Framebuffer has an incomplete attachment.\"],\n    [gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT, \"Framebuffer has no image attached to it.\"],\n    [gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS, \"Framebuffer attachments have mismatched dimensions.\"],\n    [gl.FRAMEBUFFER_UNSUPPORTED, \"Framebuffer configuration is unsupported by this context.\"]\n  ]);\n\n  return statuses.get(status) ?? `Unknown framebuffer status: ${status}.`;\n}\n","import {\n  WebGLError,\n  assertNotDisposed,\n  assertPositiveIntegerDimension,\n  getFramebufferStatusMessage,\n  isWebGLContext\n} from \"../../core/src/index\";\nimport type { GLContext } from \"../../core/src/index\";\n\nexport interface FramebufferOptions {\n  width: number;\n  height: number;\n  internalFormat?: number;\n  format?: number;\n  type?: number;\n  minFilter?: number;\n  magFilter?: number;\n  wrapS?: number;\n  wrapT?: number;\n  depth?: boolean;\n  stencil?: boolean;\n}\n\nexport interface FramebufferResizeOptions {\n  width: number;\n  height: number;\n}\n\nexport type FramebufferCanvasSize = Pick<HTMLCanvasElement, \"width\" | \"height\">;\n\ntype TextureOptions = Required<\n  Pick<\n    FramebufferOptions,\n    \"internalFormat\" | \"format\" | \"type\" | \"minFilter\" | \"magFilter\" | \"wrapS\" | \"wrapT\"\n  >\n> &\n  Required<Pick<FramebufferOptions, \"depth\" | \"stencil\">>;\n\nexport class Framebuffer {\n  public readonly gl: GLContext;\n  public readonly framebuffer: WebGLFramebuffer;\n  public readonly texture: WebGLTexture;\n  public readonly renderbuffer: WebGLRenderbuffer | null;\n  public width: number;\n  public height: number;\n\n  private readonly options: TextureOptions;\n  private isDisposed = false;\n\n  constructor(gl: GLContext, options: FramebufferOptions) {\n    if (!isWebGLContext(gl)) {\n      throw new TypeError(\"gl must be a WebGL rendering context.\");\n    }\n\n    this.gl = gl;\n    this.width = assertPositiveIntegerDimension(\"width\", options.width);\n    this.height = assertPositiveIntegerDimension(\"height\", options.height);\n    this.options = {\n      internalFormat: options.internalFormat ?? gl.RGBA,\n      format: options.format ?? gl.RGBA,\n      type: options.type ?? gl.UNSIGNED_BYTE,\n      minFilter: options.minFilter ?? gl.LINEAR,\n      magFilter: options.magFilter ?? gl.LINEAR,\n      wrapS: options.wrapS ?? gl.CLAMP_TO_EDGE,\n      wrapT: options.wrapT ?? gl.CLAMP_TO_EDGE,\n      depth: options.depth ?? false,\n      stencil: options.stencil ?? false\n    };\n\n    const framebuffer = gl.createFramebuffer() as WebGLFramebuffer | null;\n    const texture = gl.createTexture() as WebGLTexture | null;\n\n    if (framebuffer === null) {\n      throw new WebGLError(\"Failed to create framebuffer.\");\n    }\n\n    if (texture === null) {\n      gl.deleteFramebuffer(framebuffer);\n      throw new WebGLError(\"Failed to create framebuffer texture.\");\n    }\n\n    this.framebuffer = framebuffer;\n    this.texture = texture;\n    this.renderbuffer = this.createRenderbuffer();\n\n    this.configureAttachments();\n    this.assertComplete();\n    this.unbind();\n  }\n\n  public get disposed(): boolean {\n    return this.isDisposed;\n  }\n\n  public bind(): void {\n    assertNotDisposed(\"Framebuffer\", this.isDisposed);\n    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer);\n  }\n\n  public unbind(): void {\n    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);\n  }\n\n  public withBound<T>(render: () => T): T {\n    this.bind();\n\n    try {\n      return render();\n    } finally {\n      this.unbind();\n    }\n  }\n\n  public resize(options: FramebufferResizeOptions): void {\n    assertNotDisposed(\"Framebuffer\", this.isDisposed);\n    this.width = assertPositiveIntegerDimension(\"width\", options.width);\n    this.height = assertPositiveIntegerDimension(\"height\", options.height);\n\n    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer);\n    this.allocateTextureStorage();\n\n    if (this.renderbuffer !== null) {\n      this.allocateRenderbufferStorage();\n    }\n\n    this.assertComplete();\n    this.unbind();\n  }\n\n  public resizeToCanvas(canvas: FramebufferCanvasSize): void {\n    this.resize({ width: canvas.width, height: canvas.height });\n  }\n\n  public readPixels(): Uint8Array {\n    assertNotDisposed(\"Framebuffer\", this.isDisposed);\n\n    const pixels = new Uint8Array(this.width * this.height * 4);\n    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer);\n    this.gl.readPixels(\n      0,\n      0,\n      this.width,\n      this.height,\n      this.options.format,\n      this.options.type,\n      pixels\n    );\n    this.unbind();\n    return pixels;\n  }\n\n  public dispose(): void {\n    if (this.isDisposed) {\n      return;\n    }\n\n    this.gl.deleteFramebuffer(this.framebuffer);\n    this.gl.deleteTexture(this.texture);\n\n    if (this.renderbuffer !== null) {\n      this.gl.deleteRenderbuffer(this.renderbuffer);\n    }\n\n    this.isDisposed = true;\n  }\n\n  private createRenderbuffer(): WebGLRenderbuffer | null {\n    if (!this.options.depth && !this.options.stencil) {\n      return null;\n    }\n\n    const renderbuffer = this.gl.createRenderbuffer() as WebGLRenderbuffer | null;\n    if (renderbuffer === null) {\n      throw new WebGLError(\"Failed to create framebuffer renderbuffer.\");\n    }\n\n    return renderbuffer;\n  }\n\n  private configureAttachments(): void {\n    const gl = this.gl;\n\n    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);\n    gl.bindTexture(gl.TEXTURE_2D, this.texture);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, this.options.minFilter);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this.options.magFilter);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, this.options.wrapS);\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, this.options.wrapT);\n    this.allocateTextureStorage();\n    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);\n\n    if (this.renderbuffer !== null) {\n      this.allocateRenderbufferStorage();\n    }\n  }\n\n  private allocateTextureStorage(): void {\n    this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);\n    this.gl.texImage2D(\n      this.gl.TEXTURE_2D,\n      0,\n      this.options.internalFormat,\n      this.width,\n      this.height,\n      0,\n      this.options.format,\n      this.options.type,\n      null\n    );\n    this.gl.bindTexture(this.gl.TEXTURE_2D, null);\n  }\n\n  private allocateRenderbufferStorage(): void {\n    if (this.renderbuffer === null) {\n      return;\n    }\n\n    const attachment = this.options.stencil\n      ? this.gl.DEPTH_STENCIL_ATTACHMENT\n      : this.gl.DEPTH_ATTACHMENT;\n    const storage = this.options.stencil ? this.gl.DEPTH_STENCIL : this.gl.DEPTH_COMPONENT16;\n\n    this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, this.renderbuffer);\n    this.gl.renderbufferStorage(this.gl.RENDERBUFFER, storage, this.width, this.height);\n    this.gl.framebufferRenderbuffer(\n      this.gl.FRAMEBUFFER,\n      attachment,\n      this.gl.RENDERBUFFER,\n      this.renderbuffer\n    );\n    this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, null);\n  }\n\n  private assertComplete(): void {\n    const status = this.gl.checkFramebufferStatus(this.gl.FRAMEBUFFER);\n\n    if (status !== this.gl.FRAMEBUFFER_COMPLETE) {\n      throw new WebGLError(getFramebufferStatusMessage(this.gl, status));\n    }\n  }\n}\n"]}

package/docs/assets/fbo-workflow.svg

@@ -0,0 +1,57 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="620" viewBox="0 0 1200 620" role="img" aria-labelledby="title desc">
+  <title id="title">Framebuffer Object render workflow</title>
+  <desc id="desc">A visual walkthrough of rendering into an off-screen framebuffer texture and sampling it on the screen pass.</desc>
+  <defs>
+    <linearGradient id="screen" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#14324a"/>
+      <stop offset="1" stop-color="#1d6f8d"/>
+    </linearGradient>
+    <linearGradient id="texture" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#8bd3ff"/>
+      <stop offset="0.55" stop-color="#f0ca50"/>
+      <stop offset="1" stop-color="#df5b57"/>
+    </linearGradient>
+    <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
+      <feDropShadow dx="0" dy="12" stdDeviation="12" flood-color="#0b1720" flood-opacity="0.18"/>
+    </filter>
+  </defs>
+  <rect width="1200" height="620" fill="#f7fafc"/>
+  <text x="72" y="78" font-family="Inter, Arial, sans-serif" font-size="34" font-weight="700" fill="#17212b">Framebuffer pass, then screen pass</text>
+  <text x="72" y="114" font-family="Inter, Arial, sans-serif" font-size="18" fill="#52616f">Render once into a texture, then use that texture in a second shader pass.</text>
+
+  <g filter="url(#shadow)">
+    <rect x="72" y="178" width="332" height="272" rx="18" fill="#ffffff" stroke="#d8e1e8"/>
+    <text x="104" y="226" font-family="Inter, Arial, sans-serif" font-size="22" font-weight="700" fill="#1d2a35">1. Off-screen target</text>
+    <rect x="104" y="258" width="268" height="142" rx="12" fill="#e9f4fb" stroke="#aac7d8"/>
+    <rect x="132" y="288" width="92" height="82" rx="8" fill="url(#texture)"/>
+    <rect x="246" y="288" width="92" height="82" rx="8" fill="#1f2933" opacity="0.86"/>
+    <text x="142" y="419" font-family="Inter, Arial, sans-serif" font-size="15" fill="#52616f">color texture</text>
+    <text x="253" y="419" font-family="Inter, Arial, sans-serif" font-size="15" fill="#52616f">depth buffer</text>
+  </g>
+
+  <path d="M430 314 C490 314 508 314 568 314" fill="none" stroke="#49758f" stroke-width="4" stroke-linecap="round"/>
+  <path d="M568 314 L546 300 L546 328 Z" fill="#49758f"/>
+  <text x="456" y="286" font-family="Inter, Arial, sans-serif" font-size="15" font-weight="700" fill="#34566a">sample texture</text>
+
+  <g filter="url(#shadow)">
+    <rect x="594" y="178" width="332" height="272" rx="18" fill="#ffffff" stroke="#d8e1e8"/>
+    <text x="626" y="226" font-family="Inter, Arial, sans-serif" font-size="22" font-weight="700" fill="#1d2a35">2. Screen framebuffer</text>
+    <rect x="626" y="258" width="268" height="142" rx="12" fill="url(#screen)"/>
+    <circle cx="707" cy="329" r="42" fill="#8bd3ff" opacity="0.9"/>
+    <circle cx="782" cy="329" r="42" fill="#f0ca50" opacity="0.9"/>
+    <circle cx="857" cy="329" r="42" fill="#df5b57" opacity="0.9"/>
+    <text x="672" y="419" font-family="Inter, Arial, sans-serif" font-size="15" fill="#52616f">post-process quad</text>
+  </g>
+
+  <g filter="url(#shadow)">
+    <rect x="970" y="178" width="158" height="272" rx="18" fill="#ffffff" stroke="#d8e1e8"/>
+    <text x="1001" y="226" font-family="Inter, Arial, sans-serif" font-size="22" font-weight="700" fill="#1d2a35">API</text>
+    <text x="1002" y="272" font-family="SFMono-Regular, Menlo, monospace" font-size="14" fill="#34566a">bind()</text>
+    <text x="1002" y="306" font-family="SFMono-Regular, Menlo, monospace" font-size="14" fill="#34566a">resize()</text>
+    <text x="1002" y="340" font-family="SFMono-Regular, Menlo, monospace" font-size="14" fill="#34566a">readPixels()</text>
+    <text x="1002" y="374" font-family="SFMono-Regular, Menlo, monospace" font-size="14" fill="#34566a">dispose()</text>
+  </g>
+
+  <rect x="72" y="506" width="1056" height="56" rx="14" fill="#e9f4fb" stroke="#c6d9e7"/>
+  <text x="104" y="541" font-family="SFMono-Regular, Menlo, monospace" font-size="17" fill="#1d4d64">fbo.bind() -> draw scene -> fbo.unbind() -> bind fbo.texture -> draw fullscreen quad</text>
+</svg>

package/examples/fbo-postprocess/README.md

@@ -0,0 +1,15 @@
+# FBO post-process workflow
+
+This is the first visual acceptance target for webgraphiclibrary v2.
+
+The intended workflow is:
+
+1. Create a `Framebuffer` with a color texture and optional depth storage.
+2. Render a scene while the framebuffer is bound.
+3. Unbind the framebuffer.
+4. Sample `framebuffer.texture` in a screen-space pass.
+5. Resize and dispose the framebuffer with the rest of the render lifecycle.
+
+![FBO workflow](../../docs/assets/fbo-workflow.png)
+
+This example starts as a documented workflow target. The next package slice will add the shader, program, buffer, and texture helpers needed for a complete browser demo without raw WebGL setup code in the example.

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "webgraphiclibrary",
+  "version": "2.0.0-beta.1",
+  "description": "Small, type-safe WebGL utilities for low-level rendering workflows.",
+  "type": "module",
+  "private": false,
+  "license": "MIT",
+  "author": "ahmerhabib",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ahmerhabib/webgraphiclibrary.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ahmerhabib/webgraphiclibrary/issues"
+  },
+  "homepage": "https://github.com/ahmerhabib/webgraphiclibrary#readme",
+  "engines": {
+    "node": ">=22"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE.md",
+    "docs/assets",
+    "docs/screenshots",
+    "examples"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.js"
+    },
+    "./fbo": {
+      "types": "./dist/fbo.d.ts",
+      "import": "./dist/fbo.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rimraf dist packages/*/dist coverage",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc -p tsconfig.base.json --noEmit",
+    "prepublishOnly": "pnpm lint && pnpm typecheck && pnpm test && pnpm build",
+    "screenshots": "node scripts/capture-readme-screenshots.mjs"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^22.19.1",
+    "@vitest/coverage-v8": "^3.2.4",
+    "eslint": "^9.39.1",
+    "playwright": "^1.61.1",
+    "prettier": "^3.7.4",
+    "rimraf": "^6.1.2",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.49.0",
+    "vitest": "^3.2.4"
+  },
+  "packageManager": "pnpm@10.33.0",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "keywords": [
+    "webgl",
+    "framebuffer",
+    "fbo",
+    "graphics",
+    "rendering",
+    "typescript",
+    "offscreen-rendering"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "tag": "beta"
+  }
+}