@babylonjs/lite-gl 0.1.0

package/README.md

@@ -0,0 +1,135 @@
+# @babylonjs/lite-gl
+
+A tiny, **function-based, tree-shakeable WebGL2 micro-engine** for fullscreen
+shader effects, sprites and dynamic textures — the WebGL counterpart of
+[`@babylonjs/lite`](https://github.com/BabylonJS/Babylon-Lite). No classes, no
+scene graph: you call plain functions against an opaque `GLEngineContext`, so a
+bundler keeps only what you import.
+
+It is a focused subset of Babylon.js' rendering primitives, validated to render
+**near-identically** (within ±1–2 LSB ANGLE / SwiftShader codegen noise) to
+Babylon's `ThinEngine` / `EffectRenderer` / `SpriteRenderer` / `HtmlElementTexture`
+path — every feature has a side-by-side parity scene in `tests/gl/parity/` (and,
+downstream, the NeonBrush effect suite). Swapping `@babylonjs/core` for lite-gl
+typically shrinks an effect's shipped bundle **~10–16×** (≈4–6 KB gzip vs
+≈40–80 KB).
+
+> **WebGL2 only.** The context is created with `canvas.getContext("webgl2")`.
+
+## Install
+
+```bash
+npm install @babylonjs/lite-gl
+```
+
+## Quick start — an animated fullscreen effect
+
+```ts
+import {
+    createGLEngine,
+    createEffectWrapper,
+    isEffectReady,
+    applyEffectWrapper,
+    drawEffect,
+    setViewport,
+    setEffectFloat,
+    runRenderLoop,
+    resizeGLEngine,
+} from "@babylonjs/lite-gl";
+
+const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
+const engine = createGLEngine(canvas, { alpha: false });
+
+// The wrapper compiles + owns the effect. `vertexSource` defaults to a built-in
+// fullscreen-quad shader (exposing a `vUv` varying), so only `fragmentSource`
+// is required.
+const wrapper = createEffectWrapper(engine, {
+    name: "gradient",
+    fragmentSource: `#version 300 es
+        precision highp float;
+        in vec2 vUv;
+        out vec4 glFragColor;
+        uniform float uTime;
+        void main() {
+            glFragColor = vec4(0.5 + 0.5 * cos(uTime + vUv.xyx + vec3(0.0, 2.0, 4.0)), 1.0);
+        }`,
+    uniformNames: ["uTime"],
+});
+
+const start = performance.now();
+runRenderLoop(engine, () => {
+    if (!isEffectReady(engine, wrapper.effect)) return; // shaders compile async
+    resizeGLEngine(engine);
+    setViewport(engine);
+    applyEffectWrapper(wrapper);
+    setEffectFloat(engine, wrapper.effect, "uTime", (performance.now() - start) / 1000);
+    drawEffect(engine);
+});
+```
+
+## Entry points
+
+The full public API is available from the main `@babylonjs/lite-gl` barrel.
+`/sprites`, `/html-texture`, `/render-target`, `/mesh`, `/depth-stencil`,
+`/scissor` and `/dynamic-texture` are **also** exposed as dedicated sub-entries
+for consumers who prefer an explicit import — the package is `sideEffects: false`,
+so a bundler tree-shakes away whichever features you don't use no matter which
+path you import from.
+
+| Import | Provides |
+| --- | --- |
+| `@babylonjs/lite-gl` | Everything: engine + render loop, effects & uniform setters, textures (incl. float / HDR + dynamic), the `EffectWrapper` fullscreen-quad renderer, render targets, meshes / vertex-index buffers + instancing, depth / stencil / color-mask / clear, scissor, blend modes, the sprite renderer, and HTML-element textures. |
+| `@babylonjs/lite-gl/sprites` | Just the sprite / instanced-quad renderer (`createSpriteRenderer`, `renderSprites`, `setSpriteRendererTexture`, `disposeSpriteRenderer`, `GLSprite`) — the lite-gl equivalent of Babylon's `SpriteRenderer`. |
+| `@babylonjs/lite-gl/html-texture` | Just textures backed by a `<canvas>` / `<img>` / `<video>` element (`createHtmlElementTexture`, `updateHtmlElementTexture`, `GLSamplingMode`). |
+| `@babylonjs/lite-gl/render-target` | Render-to-texture (FBO) + a ping-pong feedback helper (`createRenderTarget`, `createFloatRenderTarget`, `bindRenderTarget`, `resizeRenderTarget`, `generateRenderTargetMipMaps`, `readRenderTargetPixels`, `disposeRenderTarget`, `createPingPong`, `resizePingPong`, `disposePingPong`) — the lite-gl equivalent of Babylon's `RenderTargetTexture` / `createRenderTargetTexture`, for multi-pass and self-feedback effects. |
+| `@babylonjs/lite-gl/mesh` | Vertex / index buffers, attribute binding and instanced `drawIndexed` (`createVertexBuffer`, `updateVertexBuffer`, `createIndexBuffer`, `bindAttributes`, `drawIndexed`, …) — the lite-gl equivalent of Babylon's `VertexBuffer` / `Geometry`. |
+| `@babylonjs/lite-gl/depth-stencil` | Cached depth / stencil / cull / color-mask state + `clearEngine` (`setDepthState`, `setStencilState`, `setCullState`, `setColorMask`, `clearEngine`). |
+| `@babylonjs/lite-gl/scissor` | The cached scissor-test rectangle (`setScissor`, `disableScissor`). |
+| `@babylonjs/lite-gl/dynamic-texture` | Textures whose pixels are replayed from a retained source on context-restore (`createDynamicTexture`, `updateDynamicTexture`, `clearDynamicTextureSource`). |
+
+### Core API (`@babylonjs/lite-gl`)
+
+- **Engine / lifecycle** — `createGLEngine`, `disposeGLEngine`, `resizeGLEngine`,
+  `getRenderWidth`, `getRenderHeight`, `get/setHardwareScalingLevel`,
+  `getRenderingCanvas`, and `on/offContextLost` + `on/offContextRestored`
+  (context-loss is handled: effects and textures are rebuilt on restore).
+- **Render loop** — `runRenderLoop`, `stopRenderLoop`.
+- **Effects** — `createEffect`, `isEffectReady`, `executeWhenCompiled`,
+  `useEffect`, `disposeEffect`, and the cached uniform setters
+  `setEffectFloat` / `…Float2` / `…Float3` / `…Float4` / `…Int` /
+  `…Color3` / `…Color4` / `…Texture`.
+- **Fullscreen renderer** — `createEffectWrapper`, `applyEffectWrapper`,
+  `drawEffect`, `setViewport`, `disposeEffectWrapper`.
+- **Textures** — `createRawTexture` (typed-array upload, LDR byte formats),
+  `createFloatTexture` (float / half-float HDR opt-in), `generateTextureMipMaps`,
+  `loadTexture2D` (async URL upload with a 1×1 placeholder), `bindTexture`,
+  `disposeTexture`, plus `updateRawTexture`, `updateTextureSamplingMode`,
+  `updateTextureWrapMode`, `createTextureFromHandle`.
+- **Dynamic textures** — `createDynamicTexture`, `updateDynamicTexture`,
+  `clearDynamicTextureSource` (the retained source is replayed on context-restore).
+  Also at `@babylonjs/lite-gl/dynamic-texture`.
+- **Render targets** — `createRenderTarget` (RGBA8 FBO with a sampleable color
+  `GLTexture` + optional depth / stencil renderbuffer), `createFloatRenderTarget`
+  (float / half-float HDR opt-in), `bindRenderTarget` (cached, null = the canvas),
+  `resizeRenderTarget`, `generateRenderTargetMipMaps`, `readRenderTargetPixels`,
+  `disposeRenderTarget`, plus the `createPingPong` / `resizePingPong` /
+  `disposePingPong` feedback helper. Also at `@babylonjs/lite-gl/render-target`.
+- **Meshes / buffers** — `createVertexBuffer`, `updateVertexBuffer`,
+  `createIndexBuffer`, `bindAttributes`, `drawIndexed` (instanced), `disposeBuffer`.
+  Also at `@babylonjs/lite-gl/mesh`.
+- **Depth / stencil / scissor** — `setDepthState`, `setStencilState`,
+  `setCullState`, `setColorMask`, `clearEngine` (also at
+  `@babylonjs/lite-gl/depth-stencil`); `setScissor`, `disableScissor` (also at
+  `@babylonjs/lite-gl/scissor`).
+- **Blend** — `setBlendMode` + `GLBlendMode` (`DISABLE` / `ADD` / `ALPHA` /
+  `PREMULTIPLIED`), matching Babylon's `setAlphaMode` parameters.
+
+## Demos
+
+Runnable scenes for every feature live in the repo's GL **lab**
+(`lab/gl/`) — fullscreen effects, textures, sprites, blend modes,
+HTML-element textures and render-to-texture round-trips.
+
+## License
+
+Apache-2.0

package/depth-stencil.d.ts

@@ -0,0 +1,231 @@
+/**
+ * Clear the currently-bound framebuffer's color / depth / stencil buffers — the
+ * lite-gl equivalent of Babylon's `clear(color, backBuffer, depth, stencil)`.
+ * Depth/stencil clears respect the current write masks (set them first via
+ * {@link setDepthState} / {@link setStencilState}). No-op when nothing is
+ * requested or the context is lost/disposed.
+ *
+ * @param engine - The engine.
+ * @param options - Which buffers to clear (and the color value).
+ */
+export declare function clearEngine(engine: GLEngineContext, options: GLClearOptions): void;
+
+/**
+ * Opt-in: give a `/render-target` {@link GLRenderTarget} a stencil attachment,
+ * replacing the core's depth-only `DEPTH_COMPONENT16` renderbuffer with either a
+ * packed **`DEPTH24_STENCIL8`** buffer (default — depth *and* stencil) or a
+ * stencil-only **`STENCIL_INDEX8`** buffer.
+ *
+ * Stencil is intentionally NOT a {@link createRenderTarget} option: keeping this
+ * helper in the `/depth-stencil` sub-entry means the stencil/packed renderbuffer
+ * code tree-shakes out of every bundle that only needs a color (and optional
+ * depth) target.
+ *
+ * The attachment is **restore-correct**: it is rebuilt automatically — at the new
+ * size on {@link resizeRenderTarget}, and into the fresh framebuffer after a
+ * `webglcontextrestored` event — so the stencil survives for the life of the
+ * target, and {@link disposeRenderTarget} releases it along with the target.
+ *
+ * No-op on a lost/disposed context or a disposed target.
+ *
+ * @param engine - The engine that owns `rt`.
+ * @param rt - The render target to attach the stencil buffer to.
+ * @param options - `depth` (default `true`): when `true` the attachment is a
+ *  packed depth+stencil buffer (`DEPTH24_STENCIL8` on `DEPTH_STENCIL_ATTACHMENT`)
+ *  — the common case, and the correct choice when the target was created with
+ *  `generateDepthBuffer: true`. When `false` the attachment is stencil-only
+ *  (`STENCIL_INDEX8` on `STENCIL_ATTACHMENT`).
+ * @throws If a renderbuffer handle could not be allocated or the framebuffer is
+ *  incomplete after attaching.
+ */
+export declare function generateRenderTargetStencil(engine: GLEngineContext, rt: GLRenderTarget, options?: {
+    depth?: boolean;
+}): void;
+
+/** Options for {@link clearEngine}. */
+export declare interface GLClearOptions {
+    /** When set, clears the color buffer to this RGBA color (alpha default 1). */
+    color?: {
+        r: number;
+        g: number;
+        b: number;
+        a?: number;
+    };
+    /** Clear the depth buffer (respects the current depth write mask). */
+    depth?: boolean;
+    /** Clear the stencil buffer (respects the current stencil write mask). */
+    stencil?: boolean;
+}
+
+/** Depth-buffer configuration for {@link setDepthState}. Omitted fields are
+ *  left unchanged. */
+export declare interface GLDepthState {
+    /** Enable/disable the depth test (`gl.enable/disable(DEPTH_TEST)`). */
+    test?: boolean;
+    /** Enable/disable depth writes (`gl.depthMask`). */
+    write?: boolean;
+    /** Depth comparison function (`gl.depthFunc`), e.g. `gl.LESS`. */
+    func?: GLenum;
+}
+
+/** Read-only WebGL2 capability limits, queried once at context creation. */
+declare interface GLEngineCaps {
+    /** `gl.MAX_TEXTURE_SIZE` — largest supported texture dimension, in texels. */
+    readonly maxTextureSize: number;
+    /** `gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS` — number of sampler binding slots. */
+    readonly maxTextureUnits: number;
+    /** The `KHR_parallel_shader_compile` extension used for async link polling,
+     *  or null when unsupported — linking is then treated as synchronous. */
+    readonly parallelShaderCompile: {
+        COMPLETION_STATUS_KHR: number;
+    } | null;
+    /** True when 32-bit float color attachments are renderable
+     *  (`EXT_color_buffer_float`). Mirrors Babylon's `caps.textureFloatRender`. */
+    readonly textureFloatRender: boolean;
+    /** True when 32-bit float textures support linear filtering
+     *  (`OES_texture_float_linear`). Mirrors `caps.textureFloatLinearFiltering`. */
+    readonly textureFloatLinearFiltering: boolean;
+    /** True when 16-bit half-float color attachments are renderable
+     *  (`EXT_color_buffer_float` or `EXT_color_buffer_half_float`). Mirrors
+     *  `caps.textureHalfFloatRender`. */
+    readonly textureHalfFloatRender: boolean;
+    /** Half-float linear filtering — always `true` in WebGL2 (it is core).
+     *  Kept as a field to mirror Babylon's `caps.textureHalfFloatLinearFiltering`. */
+    readonly textureHalfFloatLinearFiltering: boolean;
+    /** Whether non-power-of-two textures need POT dimensions for mips / wrap.
+     *  Always `false` in WebGL2 (NPOT is core). Mirrors `engine.needPOTTextures`. */
+    readonly needPOTTextures: boolean;
+}
+
+/**
+ * Pure-state handle for a WebGL2 canvas + its cached GL state.
+ *
+ * INVARIANT: consumers MUST NOT mutate GL state directly through `engine.gl`.
+ * Doing so silently corrupts the cache in `_state`. The package owns every
+ * GL call. (`engine.gl` is exposed only so downstream code that already has the
+ * pattern of poking `engine._gl.getExtension(...)` can do that, but must NOT
+ * call `bindTexture`/`useProgram`/`bindBuffer`/`viewport`/etc.)
+ */
+declare interface GLEngineContext {
+    /** The canvas the WebGL2 context was acquired from. An `OffscreenCanvas` is
+     *  supported for worker render paths (e.g. the Lottie player); it has no CSS
+     *  box, so it must be sized explicitly via `setGLEngineSize` rather than the
+     *  CSS-derived `resizeGLEngine`. */
+    readonly canvas: HTMLCanvasElement | OffscreenCanvas;
+    /** The raw WebGL2 context. Do NOT mutate GL state through it — see the
+     *  type-level invariant above; the package owns every state-changing call. */
+    readonly gl: WebGL2RenderingContext;
+    /** Queried capability limits for this context. */
+    readonly caps: GLEngineCaps;
+
+/**
+ * An offscreen render target — a `WebGLFramebuffer` wrapping a color
+ * {@link GLTexture} and an optional depth / stencil renderbuffer. The lite-gl
+ * counterpart of Babylon's `RenderTargetWrapper`.
+ */
+declare interface GLRenderTarget {
+    /** The color attachment, sampleable like any other {@link GLTexture}
+     *  (`setEffectTexture` / `bindTexture`). For an owned attachment its handle
+     *  is swapped on `webglcontextrestored` while consumers keep this same
+     *  reference. */
+    texture: GLTexture_2;
+    /** Color attachment width in texels. */
+    width: number;
+    /** Color attachment height in texels. */
+    height: number;
+    /** True once the color attachment + framebuffer are allocated. */
+    isReady: boolean;
+
+/** Stencil configuration for {@link setStencilState}. Omitted fields are left
+ *  unchanged. The `func`/`ref`/`funcMask` triple and the
+ *  `opFail`/`opZFail`/`opZPass` triple are each applied as a unit (any member
+ *  present re-issues that GL call, merging the unspecified members from cache). */
+export declare interface GLStencilState {
+    /** Enable/disable the stencil test (`gl.enable/disable(STENCIL_TEST)`). */
+    test?: boolean;
+    /** Stencil write mask (`gl.stencilMask`). */
+    mask?: number;
+    /** Comparison function (`gl.stencilFunc` arg 1), e.g. `gl.ALWAYS`. */
+    func?: GLenum;
+    /** Reference value (`gl.stencilFunc` arg 2). */
+    ref?: number;
+    /** Comparison mask (`gl.stencilFunc` arg 3). */
+    funcMask?: number;
+    /** Op when the stencil test fails (`gl.stencilOp` arg 1). */
+    opFail?: GLenum;
+    /** Op when the stencil test passes but depth fails (`gl.stencilOp` arg 2). */
+    opZFail?: GLenum;
+    /** Op when both stencil and depth pass (`gl.stencilOp` arg 3). */
+    opZPass?: GLenum;
+}
+
+/**
+ * Pure-state texture handle. The `handle` field is MUTABLE so the same logical
+ * texture survives a `webglcontextrestored` event — every consumer keeps the
+ * same `GLTexture` reference; only the internal `WebGLTexture` is swapped.
+ *
+ * `loadTexture2D` also uses the same handle for the 1×1 placeholder upload AND
+ * the final image upload — so a `bindTexture(engine, unit, tex)` made before the
+ * image has decoded remains valid once the image arrives.
+ */
+declare interface GLTexture_2 {
+    /** The live `WebGLTexture`. MUTABLE — swapped for a fresh handle on
+     *  `webglcontextrestored` while consumers keep the same `GLTexture` reference. */
+    handle: WebGLTexture;
+    /** GL texture target (always `gl.TEXTURE_2D` for this package). */
+    readonly target: GLenum;
+    /** Texture width in texels. Updated once an async upload resolves. */
+    width: number;
+    /** Texture height in texels. Updated once an async upload resolves. */
+    height: number;
+    /** True when the texture is safe to sample with final content (placeholders
+     *  read as not-ready until their image/upload completes). */
+    isReady: boolean;
+
+/**
+ * Buffer the color write mask into the DESIRED state — the lite-gl equivalent of
+ * Babylon's `setColorWrite` (which passes the same flag to all four channels).
+ * Flushed to GL (`gl.colorMask`) by `applyGLStates` before the next draw /
+ * clear.
+ *
+ * @param engine - The engine.
+ * @param r - Write red.
+ * @param g - Write green.
+ * @param b - Write blue.
+ * @param a - Write alpha.
+ */
+export declare function setColorMask(engine: GLEngineContext, r: boolean, g: boolean, b: boolean, a: boolean): void;
+
+/**
+ * Enable/disable face culling and (optionally) set the cull face — the lite-gl
+ * equivalent of `engine.depthCullingState.cull` + `cullFace`.
+ *
+ * @param engine - The engine.
+ * @param enabled - Enable (`true`) or disable (`false`) `gl.CULL_FACE`.
+ * @param face - Optional cull face (`gl.BACK` / `gl.FRONT` / `gl.FRONT_AND_BACK`).
+ */
+export declare function setCullState(engine: GLEngineContext, enabled: boolean, face?: GLenum): void;
+
+/**
+ * Buffer depth-buffer state (test enable, write mask, comparison function) into
+ * the DESIRED state — the lite-gl equivalent of mutating Babylon's
+ * `engine.depthCullingState.{depthTest,depthMask,depthFunc}`. Flushed to GL by
+ * `applyGLStates` before the next draw / clear; omitted fields are untouched.
+ *
+ * @param engine - The engine.
+ * @param state - The depth fields to change. Omitted fields are untouched.
+ */
+export declare function setDepthState(engine: GLEngineContext, state: GLDepthState): void;
+
+/**
+ * Buffer stencil state (test enable, write mask, comparison func triple, op
+ * triple) into the DESIRED state — the lite-gl equivalent of mutating Babylon's
+ * `engine.stencilState.*`. Flushed by `applyGLStates` before the next draw /
+ * clear; omitted fields are untouched (merge-from-desired).
+ *
+ * @param engine - The engine.
+ * @param state - The stencil fields to change. Omitted fields are untouched.
+ */
+export declare function setStencilState(engine: GLEngineContext, state: GLStencilState): void;
+
+export { }

package/depth-stencil.js

@@ -0,0 +1,277 @@
+import { R as RS_DEPTH_TEST, b as RS_DESIRED, c as RS_DEPTH_MASK, d as RS_DEPTH_FUNC, e as RS_CULL_ENABLED, f as RS_CULL_FACE, g as RS_STENCIL_TEST, h as RS_STENCIL_MASK, i as RS_STENCIL_FUNC_FUNC, j as RS_STENCIL_FUNC_REF, k as RS_STENCIL_FUNC_MASK, l as RS_STENCIL_OP_FAIL, m as RS_STENCIL_OP_ZFAIL, n as RS_STENCIL_OP_ZPASS, o as RS_COLOR_MASK, p as RS_CLEAR_R, q as RS_CLEAR_G, r as RS_CLEAR_B, s as RS_CLEAR_A, a as applyGLStates } from "./state--j_ncWIi.js";
+const COLOR_BUFFER_BIT = 16384;
+const DEPTH_BUFFER_BIT = 256;
+const STENCIL_BUFFER_BIT = 1024;
+const DEPTH_TEST = 2929;
+const CULL_FACE = 2884;
+const STENCIL_TEST = 2960;
+const FRAMEBUFFER = 36160;
+const RENDERBUFFER = 36161;
+const DEPTH24_STENCIL8 = 35056;
+const STENCIL_INDEX8 = 36168;
+const DEPTH_STENCIL_ATTACHMENT = 33306;
+const STENCIL_ATTACHMENT = 36128;
+const DEPTH_ATTACHMENT = 36096;
+const FRAMEBUFFER_COMPLETE = 36053;
+function setDepthState(engine, state) {
+  if (engine._isLost || engine._disposed) {
+    return;
+  }
+  const s = engine._state;
+  if (state.test !== void 0) {
+    s.rs[RS_DEPTH_TEST + RS_DESIRED] = state.test ? 1 : 0;
+  }
+  if (state.write !== void 0) {
+    s.rs[RS_DEPTH_MASK + RS_DESIRED] = state.write ? 1 : 0;
+  }
+  if (state.func !== void 0) {
+    s.rs[RS_DEPTH_FUNC + RS_DESIRED] = state.func;
+  }
+  s._flushDepthCull = flushDepthCull;
+  s.statesDirty = true;
+}
+function setCullState(engine, enabled, face) {
+  if (engine._isLost || engine._disposed) {
+    return;
+  }
+  const s = engine._state;
+  s.rs[RS_CULL_ENABLED + RS_DESIRED] = enabled ? 1 : 0;
+  if (face !== void 0) {
+    s.rs[RS_CULL_FACE + RS_DESIRED] = face;
+  }
+  s._flushDepthCull = flushDepthCull;
+  s.statesDirty = true;
+}
+function setStencilState(engine, state) {
+  if (engine._isLost || engine._disposed) {
+    return;
+  }
+  const s = engine._state;
+  if (state.test !== void 0) {
+    s.rs[RS_STENCIL_TEST + RS_DESIRED] = state.test ? 1 : 0;
+  }
+  if (state.mask !== void 0) {
+    s.rs[RS_STENCIL_MASK + RS_DESIRED] = state.mask;
+  }
+  if (state.func !== void 0) {
+    s.rs[RS_STENCIL_FUNC_FUNC + RS_DESIRED] = state.func;
+  }
+  if (state.ref !== void 0) {
+    s.rs[RS_STENCIL_FUNC_REF + RS_DESIRED] = state.ref;
+  }
+  if (state.funcMask !== void 0) {
+    s.rs[RS_STENCIL_FUNC_MASK + RS_DESIRED] = state.funcMask;
+  }
+  if (state.opFail !== void 0) {
+    s.rs[RS_STENCIL_OP_FAIL + RS_DESIRED] = state.opFail;
+  }
+  if (state.opZFail !== void 0) {
+    s.rs[RS_STENCIL_OP_ZFAIL + RS_DESIRED] = state.opZFail;
+  }
+  if (state.opZPass !== void 0) {
+    s.rs[RS_STENCIL_OP_ZPASS + RS_DESIRED] = state.opZPass;
+  }
+  s._flushStencil = flushStencil;
+  s.statesDirty = true;
+}
+function setColorMask(engine, r, g, b, a) {
+  if (engine._isLost || engine._disposed) {
+    return;
+  }
+  const packed = (r ? 8 : 0) | (g ? 4 : 0) | (b ? 2 : 0) | (a ? 1 : 0);
+  const s = engine._state;
+  s.rs[RS_COLOR_MASK + RS_DESIRED] = packed;
+  s._flushColorMask = flushColorMask;
+  s.statesDirty = true;
+}
+function clearEngine(engine, options) {
+  if (engine._isLost || engine._disposed) {
+    return;
+  }
+  const gl = engine.gl;
+  let mask = 0;
+  if (options.color !== void 0) {
+    const c = options.color;
+    const a = c.a ?? 1;
+    const rs = engine._state.rs;
+    if (rs[RS_CLEAR_R] !== c.r || rs[RS_CLEAR_G] !== c.g || rs[RS_CLEAR_B] !== c.b || rs[RS_CLEAR_A] !== a) {
+      gl.clearColor(c.r, c.g, c.b, a);
+      rs[RS_CLEAR_R] = c.r;
+      rs[RS_CLEAR_G] = c.g;
+      rs[RS_CLEAR_B] = c.b;
+      rs[RS_CLEAR_A] = a;
+    }
+    mask |= COLOR_BUFFER_BIT;
+  }
+  if (options.depth === true) {
+    mask |= DEPTH_BUFFER_BIT;
+  }
+  if (options.stencil === true) {
+    mask |= STENCIL_BUFFER_BIT;
+  }
+  if (mask !== 0) {
+    applyGLStates(engine);
+    gl.clear(mask);
+  }
+}
+function flushDepthCull(engine) {
+  const gl = engine.gl;
+  const rs = engine._state.rs;
+  const dTest = rs[RS_DEPTH_TEST + RS_DESIRED];
+  if (dTest !== rs[RS_DEPTH_TEST]) {
+    rs[RS_DEPTH_TEST] = dTest;
+    if (dTest === 1) {
+      gl.enable(DEPTH_TEST);
+    } else {
+      gl.disable(DEPTH_TEST);
+    }
+  }
+  const dMask = rs[RS_DEPTH_MASK + RS_DESIRED];
+  if (dMask !== rs[RS_DEPTH_MASK]) {
+    rs[RS_DEPTH_MASK] = dMask;
+    gl.depthMask(dMask === 1);
+  }
+  const dFunc = rs[RS_DEPTH_FUNC + RS_DESIRED];
+  if (dFunc !== rs[RS_DEPTH_FUNC]) {
+    rs[RS_DEPTH_FUNC] = dFunc;
+    gl.depthFunc(dFunc);
+  }
+  const dCull = rs[RS_CULL_ENABLED + RS_DESIRED];
+  if (dCull !== rs[RS_CULL_ENABLED]) {
+    rs[RS_CULL_ENABLED] = dCull;
+    if (dCull === 1) {
+      gl.enable(CULL_FACE);
+    } else {
+      gl.disable(CULL_FACE);
+    }
+  }
+  const dCullFace = rs[RS_CULL_FACE + RS_DESIRED];
+  if (dCullFace !== rs[RS_CULL_FACE]) {
+    rs[RS_CULL_FACE] = dCullFace;
+    gl.cullFace(dCullFace);
+  }
+}
+function flushStencil(engine) {
+  const gl = engine.gl;
+  const rs = engine._state.rs;
+  const dTest = rs[RS_STENCIL_TEST + RS_DESIRED];
+  if (dTest !== rs[RS_STENCIL_TEST]) {
+    rs[RS_STENCIL_TEST] = dTest;
+    if (dTest === 1) {
+      gl.enable(STENCIL_TEST);
+    } else {
+      gl.disable(STENCIL_TEST);
+    }
+  }
+  const dMask = rs[RS_STENCIL_MASK + RS_DESIRED];
+  if (dMask !== rs[RS_STENCIL_MASK]) {
+    rs[RS_STENCIL_MASK] = dMask;
+    gl.stencilMask(dMask);
+  }
+  const dFuncFunc = rs[RS_STENCIL_FUNC_FUNC + RS_DESIRED];
+  const dFuncRef = rs[RS_STENCIL_FUNC_REF + RS_DESIRED];
+  const dFuncMask = rs[RS_STENCIL_FUNC_MASK + RS_DESIRED];
+  if (dFuncFunc !== rs[RS_STENCIL_FUNC_FUNC] || dFuncRef !== rs[RS_STENCIL_FUNC_REF] || dFuncMask !== rs[RS_STENCIL_FUNC_MASK]) {
+    rs[RS_STENCIL_FUNC_FUNC] = dFuncFunc;
+    rs[RS_STENCIL_FUNC_REF] = dFuncRef;
+    rs[RS_STENCIL_FUNC_MASK] = dFuncMask;
+    gl.stencilFunc(dFuncFunc, dFuncRef, dFuncMask);
+  }
+  const dOpFail = rs[RS_STENCIL_OP_FAIL + RS_DESIRED];
+  const dOpZFail = rs[RS_STENCIL_OP_ZFAIL + RS_DESIRED];
+  const dOpZPass = rs[RS_STENCIL_OP_ZPASS + RS_DESIRED];
+  if (dOpFail !== rs[RS_STENCIL_OP_FAIL] || dOpZFail !== rs[RS_STENCIL_OP_ZFAIL] || dOpZPass !== rs[RS_STENCIL_OP_ZPASS]) {
+    rs[RS_STENCIL_OP_FAIL] = dOpFail;
+    rs[RS_STENCIL_OP_ZFAIL] = dOpZFail;
+    rs[RS_STENCIL_OP_ZPASS] = dOpZPass;
+    gl.stencilOp(dOpFail, dOpZFail, dOpZPass);
+  }
+}
+function flushColorMask(engine) {
+  const rs = engine._state.rs;
+  const dColorMask = rs[RS_COLOR_MASK + RS_DESIRED];
+  if (dColorMask !== rs[RS_COLOR_MASK]) {
+    rs[RS_COLOR_MASK] = dColorMask;
+    engine.gl.colorMask((dColorMask & 8) !== 0, (dColorMask & 4) !== 0, (dColorMask & 2) !== 0, (dColorMask & 1) !== 0);
+  }
+}
+function generateRenderTargetStencil(engine, rt, options) {
+  if (engine._isLost || engine._disposed || rt._disposed) {
+    return;
+  }
+  const packDepth = (options == null ? void 0 : options.depth) ?? true;
+  const attachment = packDepth ? DEPTH_STENCIL_ATTACHMENT : STENCIL_ATTACHMENT;
+  const format = packDepth ? DEPTH24_STENCIL8 : STENCIL_INDEX8;
+  const build = (e) => {
+    const gl = e.gl;
+    const prevFb = e._state.boundFramebuffer;
+    const newRb = gl.createRenderbuffer();
+    if (newRb === null) {
+      throw new Error("lite-gl: gl.createRenderbuffer returned null (render target stencil)");
+    }
+    let committed = false;
+    try {
+      gl.bindFramebuffer(FRAMEBUFFER, rt._framebuffer);
+      e._state.boundFramebuffer = rt._framebuffer;
+      gl.bindRenderbuffer(RENDERBUFFER, newRb);
+      gl.renderbufferStorage(RENDERBUFFER, format, rt.width, rt.height);
+      gl.framebufferRenderbuffer(FRAMEBUFFER, attachment, RENDERBUFFER, newRb);
+      gl.bindRenderbuffer(RENDERBUFFER, null);
+      const status = gl.checkFramebufferStatus(FRAMEBUFFER);
+      if (status !== FRAMEBUFFER_COMPLETE) {
+        throw new Error(`lite-gl: render target framebuffer incomplete after stencil attach (status 0x${status.toString(16)})`);
+      }
+      if (rt._depthStencil !== null) {
+        gl.deleteRenderbuffer(rt._depthStencil);
+      }
+      rt._depthStencil = newRb;
+      committed = true;
+    } finally {
+      if (!committed) {
+        gl.framebufferRenderbuffer(FRAMEBUFFER, attachment, RENDERBUFFER, null);
+        gl.deleteRenderbuffer(newRb);
+      }
+      if (e._state.boundFramebuffer !== prevFb) {
+        gl.bindFramebuffer(FRAMEBUFFER, prevFb);
+        e._state.boundFramebuffer = prevFb;
+      }
+    }
+  };
+  const prevHook = rt._rebuildDepthStencil;
+  const prevDepthStencil = rt._depthStencil;
+  try {
+    build(engine);
+  } catch (err) {
+    rt._rebuildDepthStencil = prevHook;
+    try {
+      if (prevHook !== void 0) {
+        prevHook(engine);
+      } else if (prevDepthStencil !== null) {
+        reattachCoreDepthBuffer(engine, rt, prevDepthStencil);
+      }
+    } catch {
+    }
+    throw err;
+  }
+  rt._rebuildDepthStencil = build;
+}
+function reattachCoreDepthBuffer(engine, rt, depthBuffer) {
+  const gl = engine.gl;
+  const prevFb = engine._state.boundFramebuffer;
+  gl.bindFramebuffer(FRAMEBUFFER, rt._framebuffer);
+  engine._state.boundFramebuffer = rt._framebuffer;
+  gl.framebufferRenderbuffer(FRAMEBUFFER, DEPTH_ATTACHMENT, RENDERBUFFER, depthBuffer);
+  if (engine._state.boundFramebuffer !== prevFb) {
+    gl.bindFramebuffer(FRAMEBUFFER, prevFb);
+    engine._state.boundFramebuffer = prevFb;
+  }
+}
+export {
+  clearEngine,
+  generateRenderTargetStencil,
+  setColorMask,
+  setCullState,
+  setDepthState,
+  setStencilState
+};
+//# sourceMappingURL=depth-stencil.js.map