@driftengine/core 4.4.1 → 4.5.0

package/src/render/gpudriven/materialTable.ts

@@ -1,6 +1,7 @@
-/** A GPU-driven material as the shading pass reads it: five blocks, one of them integers. */
+/** A GPU-driven material as the shading pass reads it: seven blocks, one of them integers. */
 
 import type { GpuDrivenMaterial } from '../backend/webgpu/gpuDrivenPass.ts';
+import { resolveGlass, type ResolvedGlass } from '../glass.ts';
 import { DECODE_NO_PROGRAM } from '../shaders/gpudriven/decode.wgsl.ts';
 import type { GpuDrivenProgram } from './decodeTables.ts';
 
@@ -34,17 +35,18 @@ export interface GpuDrivenTextures {
 
 /**
  * Words a material entry: tint and emissive, the surface scalars, four program indices, the UV
- * scale and two strengths, the two ORM scales with the cutout and blend flags, and
- * the opacity with three spare.
+ * scale and two strengths, the two ORM scales with the cutout and blend flags, the opacity with the
+ * glass's transmission and frost and one spare, and the glass's tint with one spare.
  *
  * **It was eight until 2026-09-17**, and metalness took its last spare lane the same day, so the
  * programs and the scales needed three more blocks rather than squeezing into what was left. It
  * became twenty-four on 2026-09-18, when transparency arrived and there was nowhere left to put an
  * opacity: the cutout took lane 18 and the blend flag took 19, and lane 11 is a reserved program
  * slot rather than a gap. A sixteen-byte block is 1 kB across the whole table, against the 64 kB a
- * uniform buffer may hold.
+ * uniform buffer may hold. **Twenty-eight on 2026-09-29**, for glass: its transmission and frost
+ * took two of the opacity block's spares and its tint needed a block of its own.
  */
-export const GPU_DRIVEN_MATERIAL_FLOATS = 24;
+export const GPU_DRIVEN_MATERIAL_FLOATS = 28;
 
 /**
  * Below this base-colour alpha the raster discards a fragment. Zero means no test.
@@ -74,6 +76,16 @@ export const MATERIAL_BLEND = 19;
  */
 export const MATERIAL_OPACITY = 20;
 
+/**
+ * Glass (`glass.ts`): how much light passes, and how milky it is. Zero transmission is not glass,
+ * and a material that is glass is drawn in the blended half whatever `blend` says — a visibility
+ * buffer holds one surface a pixel, and glass is two.
+ */
+export const MATERIAL_GLASS_TRANSMISSION = 21;
+export const MATERIAL_GLASS_FROST = 22;
+/** The colour light takes through the glass: three lanes, white where the material is not glass. */
+export const MATERIAL_GLASS_TINT = 24;
+
 /**
  * Where a material's emissive program is: the fourth program lane, which the table reserved and
  * initialised to none before anything used it.
@@ -155,10 +167,20 @@ export function writeMaterialTable(
     float(m, 17, textures?.metallicScale ?? 1);
     /* Zero is off, so a material that says nothing about cutout writes the table it wrote before. */
     float(m, MATERIAL_ALPHA_CUTOFF, material.alphaCutoff ?? 0);
+    /* Glass A's clamps and its test of what is glass at all, so both pipelines agree on it. */
+    const glass = resolveGlass(material.glass, glassScratch);
     /* Zero is opaque, so a material that says nothing about blending stays in the opaque half. */
-    float(m, MATERIAL_BLEND, material.blend === true ? 1 : 0);
+    float(m, MATERIAL_BLEND, material.blend === true || glass ? 1 : 0);
     /* One, so a material that asked to blend and said nothing else is as solid as an opaque one. */
     float(m, MATERIAL_OPACITY, material.opacity ?? 1);
+    float(m, MATERIAL_GLASS_TRANSMISSION, glassScratch.transmission);
+    float(m, MATERIAL_GLASS_FROST, glassScratch.frost);
+    float(m, MATERIAL_GLASS_TINT, glassScratch.tint[0]);
+    float(m, MATERIAL_GLASS_TINT + 1, glassScratch.tint[1]);
+    float(m, MATERIAL_GLASS_TINT + 2, glassScratch.tint[2]);
   });
   return buffer;
 }
+
+/** One resolution every material's glass is read through. */
+const glassScratch: ResolvedGlass = { transmission: 0, frost: 0, tint: [1, 1, 1] };

package/src/render/gpudriven/pipeline.ts

@@ -132,11 +132,11 @@ export const GPU_DRIVEN_PASSES = [
   'phaseTwoCull',
   'phaseTwoDraw',
   'blendCull',
-  'blendDraw',
   'visibilityCopy',
   'bin',
   'cursorCopy',
   'shade',
+  'blendDraw',
   'blendResolve',
 ] as const;
 
@@ -230,10 +230,11 @@ function edgesFor(res: GpuDrivenResources): {
     /*
      * **It reads the depth the opaque half wrote and does not write it.** A pane behind a wall is
      * rejected at the wall; nothing here writes depth, so two panes do not hide each other and
-     * there is something left to blend.
+     * there is something left to blend. **And it reads the shaded colour**, because glass shows the
+     * opaque picture behind it — which is why it is recorded after `shade` rather than before.
      */
     blendDraw: [
-      [res.blendList, res.clusters, res.depth],
+      [res.blendList, res.clusters, res.depth, res.colour],
       [res.oitAccum, res.oitReveal],
     ],
     visibilityCopy: [[res.visibility], [res.visibilityCopy]],

package/src/render/gpudriven/sunGlass.ts

@@ -0,0 +1,117 @@
+/**
+ * The second pipeline's sunlight through glass, as a reference: `glassTintAt` over the glass depth
+ * and tint maps the GPU-driven pass draws from the sun, for `shade.wgsl.ts`'s lookup to be read
+ * against.
+ *
+ * **The forward path's rule, not a second one** (`glassShadow.ts`, and `sunGlassLookup` in
+ * `flat/directionalShadow.ts`): the outline from taps at the base filter radius that count a pane
+ * only where the receiver is behind it, and the colour from spread taps read coarse, unmixed from
+ * the ground around the pane by its clarity and weighed by its share. Frost widens only the
+ * colour's taps, so the light a frosted pane passes is the light a clear one does.
+ *
+ * **What differs is where two numbers come from.** A compute invocation has no derivatives, so the
+ * map's scale in metres is the caller's (`uvPerMetre`, which an orthographic light matrix states
+ * outright); and a coarse level here is a box average over the spread's footprint, which is what a
+ * mip level approximates on the device. `scripts/gpu-parity.mjs` holds the device's per-tap
+ * arithmetic to `glassShadow.ts`; the sampling is what the glass page measures.
+ */
+import { frostRadius, spreadTint, unmixTint, type GlassTexel } from '../glassShadow.ts';
+import { SHADOW_DEPTH_BIAS, SHADOW_PCF_OFFSETS, SHADOW_TEXEL_SCALE } from './shadow.ts';
+
+/** The two maps the sun's glass pass draws, square, row-major from v = 0. */
+export interface SunGlassMaps {
+  readonly size: number;
+  /** The nearest pane's depth a texel, 1 where no pane was drawn. */
+  readonly glassDepth: Float32Array;
+  /** What the panes on a texel's ray let through, and their clarity: four floats a texel. */
+  readonly tint: Float32Array;
+}
+
+export interface SunGlassSettings {
+  /** Metres the light's depth range spans, which turns a depth difference into a distance. */
+  readonly depthSpan: number;
+  /** Map units a metre across the light, which turns a spread in metres into one on the map. */
+  readonly uvPerMetre: number;
+  readonly taps: number;
+}
+
+const centre: GlassTexel = { r: 1, g: 1, b: 1, clarity: 1 };
+const coarse: GlassTexel = { r: 1, g: 1, b: 1, clarity: 1 };
+const pane: GlassTexel = { r: 1, g: 1, b: 1, clarity: 1 };
+const found: GlassTexel = { r: 0, g: 0, b: 0, clarity: 0 };
+
+function index(maps: SunGlassMaps, u: number, v: number): number {
+  const x = Math.min(maps.size - 1, Math.max(0, Math.floor(u * maps.size)));
+  const y = Math.min(maps.size - 1, Math.max(0, Math.floor(v * maps.size)));
+  return y * maps.size + x;
+}
+
+/** The average of every texel within `radius` of (u, v): a mip level's footprint, in the large. */
+function coarseAt(maps: SunGlassMaps, u: number, v: number, radius: number, out: GlassTexel): void {
+  const reach = radius * maps.size;
+  const x0 = Math.max(0, Math.floor(u * maps.size - reach));
+  const x1 = Math.min(maps.size - 1, Math.floor(u * maps.size + reach));
+  const y0 = Math.max(0, Math.floor(v * maps.size - reach));
+  const y1 = Math.min(maps.size - 1, Math.floor(v * maps.size + reach));
+  out.r = 0;
+  out.g = 0;
+  out.b = 0;
+  out.clarity = 0;
+  let n = 0;
+  for (let y = y0; y <= y1; y++) {
+    for (let x = x0; x <= x1; x++) {
+      const at = (y * maps.size + x) * 4;
+      out.r += maps.tint[at] as number;
+      out.g += maps.tint[at + 1] as number;
+      out.b += maps.tint[at + 2] as number;
+      out.clarity += maps.tint[at + 3] as number;
+      n++;
+    }
+  }
+  out.r /= n;
+  out.g /= n;
+  out.b /= n;
+  out.clarity /= n;
+}
+
+/** What the sun keeps through glass at a receiver at map position (u, v) and light depth `depth`. */
+export function glassTintAt(
+  u: number,
+  v: number,
+  depth: number,
+  maps: SunGlassMaps,
+  settings: SunGlassSettings,
+  out: GlassTexel,
+): GlassTexel {
+  out.r = 1;
+  out.g = 1;
+  out.b = 1;
+  out.clarity = 1;
+  if (u < 0 || u > 1 || v < 0 || v > 1) return out;
+  const texel = SHADOW_TEXEL_SCALE / maps.size;
+  const bias = SHADOW_DEPTH_BIAS / settings.depthSpan;
+  const taps = Math.min(settings.taps, SHADOW_PCF_OFFSETS.length);
+
+  const at = index(maps, u, v);
+  centre.clarity = maps.tint[at * 4 + 3] as number;
+  const behind = Math.max(depth - (maps.glassDepth[at] as number), 0) * settings.depthSpan;
+  const radius = frostRadius(centre.clarity, behind * settings.uvPerMetre, texel);
+
+  let cover = 0;
+  found.r = 0;
+  found.g = 0;
+  found.b = 0;
+  let shares = 0;
+  for (let i = 0; i < taps; i++) {
+    const offset = SHADOW_PCF_OFFSETS[i] as readonly [number, number];
+    const nearest = maps.glassDepth[index(maps, u + offset[0] * texel, v + offset[1] * texel)];
+    if (depth > (nearest as number) + bias) cover++;
+    coarseAt(maps, u + offset[0] * radius, v + offset[1] * radius, radius, coarse);
+    const share = unmixTint(coarse, centre.clarity, pane);
+    found.r += pane.r * share;
+    found.g += pane.g * share;
+    found.b += pane.b * share;
+    shares += share;
+  }
+  return spreadTint(cover / Math.max(taps, 1), found, shares, out);
+}

package/src/render/lightBudget.ts

@@ -38,13 +38,14 @@ export const MAX_POINT_LIGHTS = 16;
 export const LIVE_POINT_SHADOW_MAPS = 2;
 
 /**
- * Texture units the directional cascade binds: static, its depth peel, and dynamic.
+ * Texture units the sun's shadow binds: one, for its static, moving and peeled layers.
  *
- * Named because the shading pass's total unit count has to be compared against what a
- * device offers, and a budget assembled from three literals scattered across two files
- * is a budget nobody can check. See the guard in `Renderer`'s constructor.
+ * **It was three**, a `sampler2D` per map, until 4.5.0 folded them into one `sampler2DArray`
+ * (`shadowMap.ts`) the way the lamps' twelve cubemaps became one — which is where the two tints
+ * glass casts with found their units. Named because the shading pass's total has to be compared
+ * against what a device offers; see the guard in `Renderer`'s constructor.
  */
-export const DIRECTIONAL_SHADOW_UNITS = 3;
+export const DIRECTIONAL_SHADOW_UNITS = 1;
 
 /**
  * Texture units every point light's shadow binds: one, for all of them.
@@ -230,6 +231,19 @@ export const REFRACT_SCENE_TEXTURE_UNIT = COOKIE_ATLAS_TEXTURE_UNIT + 1;
 export const DRIFT_LIGHT_INDEX_TEXTURE_UNIT = REFRACT_SCENE_TEXTURE_UNIT + 1;
 export const DRIFT_LIGHT_ATLAS_TEXTURE_UNIT = DRIFT_LIGHT_INDEX_TEXTURE_UNIT + 1;
 
+/**
+ * What the sun keeps through glass (`sunGlassTint.ts`), the lit program's fourteenth fragment
+ * sampler: the unit the sun's three maps gave back when they became one array.
+ */
+export const SUN_GLASS_TINT_TEXTURE_UNIT = DRIFT_LIGHT_ATLAS_TEXTURE_UNIT + 1;
+
+/**
+ * What each lamp keeps through glass (`pointGlassTint.ts`), the lit program's fifteenth fragment
+ * sampler and the last one that leaves a sixteenth spare. Unit sixteen of the combined pool, which
+ * WebGL2 guarantees thirty-two of; what a stage may declare is the sixteen, and this is fifteen.
+ */
+export const POINT_GLASS_TINT_TEXTURE_UNIT = SUN_GLASS_TINT_TEXTURE_UNIT + 1;
+
 /**
  * A cookie's tile, in texels a side.
  *

package/src/render/pointGlassTint.ts

@@ -0,0 +1,250 @@
+import { mat3 } from 'gl-matrix';
+
+import { createEmptyTexture2D } from './emptyTexture.ts';
+import { pointShadowFaceRotation } from './pointShadowImage.ts';
+import { compileProgram, uniformLocations } from './shader.ts';
+import {
+  OCTAHEDRAL_RESOLVE_TINT_FRAG,
+  OCTAHEDRAL_RESOLVE_VERT,
+} from './shaders/octahedralResolve.ts';
+
+/** Filled per resolved face, at module scope, because a bake runs inside the frame's budget. */
+const faceRotation = mat3.create();
+const CLEAR = new Float32Array([1, 1, 1, 1]);
+
+/**
+ * What a lamp's light keeps through glass: an RGBA8 array of one layer a light, parallel to the
+ * point shadow array and indexed by the light, not by the interleaved depth layer. RGB is the
+ * product of every pane's `transmission × (1 − F) × tint`, A the product of their clarities
+ * (`glassShadow.ts`).
+ *
+ * **Drawn a face at a time, as the depth is**: into a face-sized colour scratch cleared to white,
+ * with a multiplying blend and no depth test, then resolved into the face's region of the layer by
+ * `OCTAHEDRAL_RESOLVE_TINT_FRAG`. One scratch for the whole engine, for the reason
+ * `PointShadowArray` gives for its own.
+ *
+ * **Which faces hold glass is remembered, six bits a layer**, so a face with no glass and none to
+ * forget costs nothing, and a face that inherited a previous owner's glass is cleared. **The chain
+ * frost reads is rebuilt once a round**, for the layers the round touched, through a 2D staging
+ * chain: `generateMipmap` on an array rebuilds every layer, which is the whole pool's texels for one
+ * lamp's glass. What that costs is one layer of memory with its chain — 5.6 MB at 1024, 1.4 MB at
+ * `'half'` — and a copy out and back per touched layer.
+ */
+export class PointGlassTint {
+  readonly texture: WebGLTexture;
+  readonly edge: number;
+
+  private readonly layers: number;
+  private readonly levels: number;
+  private readonly faceSize: number;
+  private readonly scratch: WebGLTexture;
+  private readonly scratchFramebuffer: WebGLFramebuffer;
+  private readonly staging: WebGLTexture;
+  private readonly framebuffer: WebGLFramebuffer;
+  private readonly readFramebuffer: WebGLFramebuffer;
+  /** Parked on the resolve's unit while the scratch is a render target; see `beginFace`. */
+  private readonly parked: WebGLTexture;
+  private readonly program: WebGLProgram;
+  private readonly uniforms: Record<string, WebGLUniformLocation>;
+  private readonly vao: WebGLVertexArrayObject;
+  /** Six bits a layer: which faces' regions hold glass. */
+  private readonly heldFaces: Uint8Array;
+  /** Layers whose level 0 changed since the chain was last rebuilt. */
+  private readonly dirty: Uint8Array;
+
+  constructor(gl: WebGL2RenderingContext, faceSize: number, edge: number, layers: number) {
+    this.edge = edge;
+    this.layers = layers;
+    this.faceSize = faceSize;
+    this.levels = Math.floor(Math.log2(Math.max(1, edge))) + 1;
+    this.heldFaces = new Uint8Array(layers);
+    this.dirty = new Uint8Array(layers);
+
+    this.texture = colourTexture(gl, gl.TEXTURE_2D_ARRAY, this.levels, edge, layers);
+    this.scratch = colourTexture(gl, gl.TEXTURE_2D, 1, faceSize, 1);
+    this.staging = colourTexture(gl, gl.TEXTURE_2D, this.levels, edge, 1);
+    this.parked = createEmptyTexture2D(gl);
+    this.scratchFramebuffer = framebufferOf(gl);
+    this.framebuffer = framebufferOf(gl);
+    this.readFramebuffer = framebufferOf(gl);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.scratchFramebuffer);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.scratch, 0);
+
+    this.program = compileProgram(
+      gl,
+      OCTAHEDRAL_RESOLVE_VERT,
+      OCTAHEDRAL_RESOLVE_TINT_FRAG,
+      'octahedralResolveTint',
+    );
+    this.uniforms = uniformLocations(gl, this.program, 'octahedralResolveTint');
+    const vao = gl.createVertexArray();
+    if (vao === null) throw new Error('PointGlassTint: createVertexArray failed');
+    this.vao = vao;
+
+    /* Every layer born clear: a light no pane has reached lets everything through. */
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+    for (let layer = 0; layer < layers; layer++) {
+      gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, this.texture, 0, layer);
+      gl.clearBufferfv(gl.COLOR, 0, CLEAR);
+    }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    /* Once, for every layer: white all the way down. */
+    gl.bindTexture(gl.TEXTURE_2D_ARRAY, this.texture);
+    gl.generateMipmap(gl.TEXTURE_2D_ARRAY);
+    gl.bindTexture(gl.TEXTURE_2D_ARRAY, null);
+  }
+
+  /** Whether `face` of `layer` holds glass: a face that does must be cleared before it is reused. */
+  held(layer: number, face: number): boolean {
+    return (((this.heldFaces[layer] ?? 0) >> face) & 1) === 1;
+  }
+
+  /**
+   * Bind the colour scratch, clear it to white, and set the multiplying state.
+   *
+   * The previous resolve left the scratch bound for sampling on unit 0, and it is about to be the
+   * target: parked first, for the reason `PointShadowArray.beginFace` gives.
+   */
+  beginFace(gl: WebGL2RenderingContext): void {
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.parked);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.scratchFramebuffer);
+    gl.viewport(0, 0, this.faceSize, this.faceSize);
+    gl.clearBufferfv(gl.COLOR, 0, CLEAR);
+    gl.disable(gl.DEPTH_TEST);
+    gl.depthMask(false);
+    gl.enable(gl.BLEND);
+    gl.blendEquation(gl.FUNC_ADD);
+    gl.blendFuncSeparate(gl.DST_COLOR, gl.ZERO, gl.DST_ALPHA, gl.ZERO);
+  }
+
+  /**
+   * Copy the scratch into `face`'s region of `layer`, and remember whether it held glass.
+   *
+   * Leaves depth testing and writing on, which is what the next face's casters expect: the depth
+   * resolve that runs before them turns both on, and this one ran after it and turned them off.
+   */
+  resolveFace(gl: WebGL2RenderingContext, layer: number, face: number, drawn: boolean): void {
+    gl.disable(gl.BLEND);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+    gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, this.texture, 0, layer);
+    gl.viewport(0, 0, this.edge, this.edge);
+    gl.useProgram(this.program);
+    gl.bindVertexArray(this.vao);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.scratch);
+    gl.uniform1i(this.uniforms['uFace'] ?? null, 0);
+    gl.uniform1i(this.uniforms['uFaceIndex'] ?? null, face);
+    gl.uniformMatrix3fv(
+      this.uniforms['uFaceRotation'] ?? null,
+      false,
+      pointShadowFaceRotation(face, faceRotation),
+    );
+    gl.uniform1f(this.uniforms['uEdge'] ?? null, this.edge);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    gl.bindVertexArray(null);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.enable(gl.DEPTH_TEST);
+    gl.depthMask(true);
+
+    const bit = 1 << face;
+    const was = this.heldFaces[layer] ?? 0;
+    this.heldFaces[layer] = drawn ? was | bit : was & ~bit;
+    this.dirty[layer] = 1;
+  }
+
+  /** Rebuild the chain of every layer touched since the last call, one layer at a time. */
+  fillMips(gl: WebGL2RenderingContext): void {
+    for (let layer = 0; layer < this.layers; layer++) {
+      if (this.dirty[layer] !== 1) continue;
+      this.dirty[layer] = 0;
+      /* Level 0 out into the staging chain, which mipmaps as one 2D texture. */
+      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this.readFramebuffer);
+      gl.framebufferTextureLayer(gl.READ_FRAMEBUFFER, gl.COLOR_ATTACHMENT0, this.texture, 0, layer);
+      gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this.framebuffer);
+      gl.framebufferTexture2D(
+        gl.DRAW_FRAMEBUFFER,
+        gl.COLOR_ATTACHMENT0,
+        gl.TEXTURE_2D,
+        this.staging,
+        0,
+      );
+      blit(gl, this.edge, this.edge);
+      gl.bindTexture(gl.TEXTURE_2D, this.staging);
+      gl.generateMipmap(gl.TEXTURE_2D);
+      gl.bindTexture(gl.TEXTURE_2D, null);
+      /* And every level after it back into the layer. */
+      for (let level = 1; level < this.levels; level++) {
+        const size = Math.max(1, this.edge >> level);
+        gl.framebufferTexture2D(
+          gl.READ_FRAMEBUFFER,
+          gl.COLOR_ATTACHMENT0,
+          gl.TEXTURE_2D,
+          this.staging,
+          level,
+        );
+        gl.framebufferTextureLayer(
+          gl.DRAW_FRAMEBUFFER,
+          gl.COLOR_ATTACHMENT0,
+          this.texture,
+          level,
+          layer,
+        );
+        blit(gl, size, size);
+      }
+      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
+      gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
+    }
+  }
+
+  dispose(gl: WebGL2RenderingContext): void {
+    gl.deleteFramebuffer(this.scratchFramebuffer);
+    gl.deleteFramebuffer(this.framebuffer);
+    gl.deleteFramebuffer(this.readFramebuffer);
+    gl.deleteTexture(this.texture);
+    gl.deleteTexture(this.scratch);
+    gl.deleteTexture(this.staging);
+    gl.deleteTexture(this.parked);
+    gl.deleteProgram(this.program);
+    gl.deleteVertexArray(this.vao);
+  }
+}
+
+/** A colour texture with `levels` levels: nearest for a single level, trilinear for a chain. */
+function colourTexture(
+  gl: WebGL2RenderingContext,
+  target: number,
+  levels: number,
+  edge: number,
+  layers: number,
+): WebGLTexture {
+  const texture = gl.createTexture();
+  if (texture === null) throw new Error('PointGlassTint: createTexture failed');
+  gl.bindTexture(target, texture);
+  if (target === gl.TEXTURE_2D_ARRAY) {
+    gl.texStorage3D(target, levels, gl.RGBA8, edge, edge, layers);
+  } else {
+    gl.texStorage2D(target, levels, gl.RGBA8, edge, edge);
+  }
+  gl.texParameteri(
+    target,
+    gl.TEXTURE_MIN_FILTER,
+    levels > 1 ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST,
+  );
+  gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, levels > 1 ? gl.LINEAR : gl.NEAREST);
+  gl.texParameteri(target, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(target, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.bindTexture(target, null);
+  return texture;
+}
+
+function framebufferOf(gl: WebGL2RenderingContext): WebGLFramebuffer {
+  const framebuffer = gl.createFramebuffer();
+  if (framebuffer === null) throw new Error('PointGlassTint: createFramebuffer failed');
+  return framebuffer;
+}
+
+/** The bound read framebuffer's colour into the bound draw framebuffer's, texel for texel. */
+function blit(gl: WebGL2RenderingContext, width: number, height: number): void {
+  gl.blitFramebuffer(0, 0, width, height, 0, 0, width, height, gl.COLOR_BUFFER_BIT, gl.NEAREST);
+}