@driftengine/core 3.61.0

package/src/render/billboard.ts

@@ -0,0 +1,108 @@
+/** Model matrices for geometry that turns to face the viewer. */
+
+import { mat4 } from 'gl-matrix';
+import type { Camera } from './camera.ts';
+
+/**
+ * Orient a mesh so its +Z faces the camera, writing the model matrix in place.
+ *
+ * The two variants are a real distinction rather than a convenience pair, and picking
+ * the wrong one is the classic billboard mistake:
+ *
+ * - **Cylindrical** (`billboardMatrixY`) spins about the world Y axis only. Anything
+ *   standing on the ground uses this — a figure, a sign, a tree. Look down at it from
+ *   above and it stays upright, because a thing with feet does not tilt to face you.
+ * - **Spherical** (`billboardMatrix`) faces the camera on every axis. For something with
+ *   no up of its own: a spark, a puff of smoke, a glow.
+ *
+ * Allocation-free: the caller owns the matrix and it is overwritten, so a frame drawing
+ * a hundred of these allocates nothing.
+ */
+export function billboardMatrixY(
+  out: mat4,
+  x: number,
+  y: number,
+  z: number,
+  cameraX: number,
+  cameraZ: number,
+  scaleX = 1,
+  scaleY = 1,
+): void {
+  /*
+   * Yaw from the camera's *horizontal* offset only. Using the full 3D direction is what
+   * makes a standing figure lean back as the camera rises above it.
+   */
+  const angle = Math.atan2(cameraX - x, cameraZ - z);
+  const sin = Math.sin(angle);
+  const cos = Math.cos(angle);
+
+  out[0] = cos * scaleX;
+  out[1] = 0;
+  out[2] = -sin * scaleX;
+  out[3] = 0;
+
+  out[4] = 0;
+  out[5] = scaleY;
+  out[6] = 0;
+  out[7] = 0;
+
+  out[8] = sin;
+  out[9] = 0;
+  out[10] = cos;
+  out[11] = 0;
+
+  out[12] = x;
+  out[13] = y;
+  out[14] = z;
+  out[15] = 1;
+}
+
+/**
+ * Face the camera on every axis, for geometry with no up of its own.
+ *
+ * Built from the camera's own basis rather than from the direction to the eye, so a row
+ * of these stays mutually parallel instead of fanning out toward the viewer — the
+ * difference is obvious the moment two are near each other at the screen edge.
+ */
+export function billboardMatrix(
+  out: mat4,
+  x: number,
+  y: number,
+  z: number,
+  camera: Camera,
+  scaleX = 1,
+  scaleY = 1,
+): void {
+  // The view matrix's upper 3x3 is the camera basis, transposed; its rows are the
+  // world-space right/up/forward we want the quad's axes to be.
+  const view = camera.view;
+  const rightX = view[0];
+  const rightY = view[4];
+  const rightZ = view[8];
+  const upX = view[1];
+  const upY = view[5];
+  const upZ = view[9];
+  const forwardX = view[2];
+  const forwardY = view[6];
+  const forwardZ = view[10];
+
+  out[0] = rightX * scaleX;
+  out[1] = rightY * scaleX;
+  out[2] = rightZ * scaleX;
+  out[3] = 0;
+
+  out[4] = upX * scaleY;
+  out[5] = upY * scaleY;
+  out[6] = upZ * scaleY;
+  out[7] = 0;
+
+  out[8] = forwardX;
+  out[9] = forwardY;
+  out[10] = forwardZ;
+  out[11] = 0;
+
+  out[12] = x;
+  out[13] = y;
+  out[14] = z;
+  out[15] = 1;
+}

package/src/render/bloomChain.ts

@@ -0,0 +1,101 @@
+/**
+ * How wide the bloom pyramid is, how far it reaches, and where it stops.
+ *
+ * **Backend-neutral because both backends build the same pyramid**, and a difference in any of
+ * these three numbers is a difference in the picture that nothing else would explain. The WebGL2
+ * pass held the only copy and the WebGPU composite was written without it, which is how one
+ * backend ended up running the first stage of eleven and calling it bloom: it drew, it validated,
+ * and the frame it produced was a thresholded image with no blur in it at all. Measured on
+ * night-court, that was 7,512 pixels moved against WebGL2's 47,574.
+ *
+ * `bloomPass.ts` binds these on one side and `webgpu/renderer.ts` on the other.
+ */
+
+/**
+ * How many halvings the chain may take.
+ *
+ * Six covers a 4K frame down to about 30 pixels across, which is where a level stops describing
+ * a halo and starts describing the whole screen. Fewer would put an end on the falloff; more
+ * would spend draws on levels that add a flat tint.
+ */
+export const BLOOM_LEVELS = 6;
+
+/** Below this a level is too small to describe anything but an average of the frame. */
+export const BLOOM_MIN_SIDE = 8;
+
+/**
+ * How far the tent reaches on the way back up, in UV.
+ *
+ * In UV rather than in texels, so the spread is the same fraction of the picture on every
+ * display and at every level of the chain. This is the "one radius" of the three numbers this
+ * effect is allowed: it is fixed rather than exposed because nobody has asked to move it, and a
+ * caller who does gets it as a construction-time option rather than as a magic literal here.
+ */
+export const BLOOM_FILTER_RADIUS_UV = 0.005;
+
+/**
+ * What is wrong with a profile that asked for bloom, in words, or null when nothing is.
+ *
+ * **Shared because it is a fact about the profile rather than about a backend**, and because a
+ * warning that only one backend says is a warning half the consumers never see. WebGL2 said both
+ * of these at init and this backend said something else entirely from its setters — that the
+ * composite did not exist yet, which stopped being true the day it landed and went on being
+ * printed. A stale warning is worse than none: it tells somebody a working feature is broken.
+ *
+ * Not a clamp and not a refusal. The effect still runs and still spreads whatever passes its
+ * threshold. What it cannot do is separate a light from a white wall, because on a target that
+ * does not keep the range they arrive as the same colour. That is the class of fault this engine
+ * has shipped twice under other names — a shadow strength of zero behind an enabled shadow pass,
+ * an exposure with no curve to be exposed into — where everything is switched on, nothing is
+ * wrong, and nothing happens.
+ */
+export function bloomProfileWarning(quality: {
+  readonly bloom: number;
+  readonly screenEffects: boolean;
+  readonly hdrScene: boolean;
+  readonly bloomThreshold: number;
+}): string | null {
+  if (quality.bloom <= 0) return null;
+  if (!quality.screenEffects) {
+    return (
+      'bloom needs screenEffects, since without the off-screen target there is no finished ' +
+      'frame to threshold. It is off.'
+    );
+  }
+  if (!quality.hdrScene) {
+    return (
+      `bloom is on with hdrScene off, so the scene is clipped to 0..1 before the composite ` +
+      `sees it and a threshold of ${quality.bloomThreshold} in scene units can only mean ` +
+      `whiteness. Turn hdrScene on, or set a threshold below 1.`
+    );
+  }
+  return null;
+}
+
+/** One level of the pyramid: level 0 is half the frame and each one after it half again. */
+export interface BloomLevelSize {
+  readonly width: number;
+  readonly height: number;
+}
+
+/**
+ * The pyramid for a frame of this size, largest first, or an empty list where none would fit.
+ *
+ * Empty is a real answer rather than a failure: a frame small enough that its half is under
+ * `BLOOM_MIN_SIDE` has nowhere for a halo to live, and a caller reads that as "no bloom this
+ * frame" exactly as it reads a target that would not allocate.
+ */
+export function bloomLevelSizes(width: number, height: number): BloomLevelSize[] {
+  const sizes: BloomLevelSize[] = [];
+  let levelWidth = width;
+  let levelHeight = height;
+  for (let level = 0; level < BLOOM_LEVELS; level++) {
+    levelWidth = Math.floor(levelWidth / 2);
+    levelHeight = Math.floor(levelHeight / 2);
+    /* Below this a level is a handful of texels describing the whole frame, which adds a
+       flat tint rather than a halo, and one more halving of a 3-pixel side is 1. */
+    if (levelWidth < BLOOM_MIN_SIDE || levelHeight < BLOOM_MIN_SIDE) break;
+    sizes.push({ width: levelWidth, height: levelHeight });
+  }
+  return sizes;
+}

package/src/render/bloomPass.ts

@@ -0,0 +1,256 @@
+import {
+  BLOOM_DOWNSAMPLE_FRAG,
+  BLOOM_PREFILTER_FRAG,
+  BLOOM_UPSAMPLE_FRAG,
+} from './shaders/bloom.ts';
+import { FULLSCREEN_VERT } from './shaders/fullscreen.ts';
+import { compileProgram, uniformLocations } from './shader.ts';
+import { BLOOM_FILTER_RADIUS_UV, bloomLevelSizes } from './bloomChain.ts';
+
+/**
+ * The bloom chain: threshold the frame, halve it repeatedly, and add it back up.
+ *
+ * Its own module rather than more of `SceneTarget`, for the same reason `AmbientOcclusionPass`
+ * is: that class owns where the frame lands and how it reaches the canvas, and this owns one
+ * effect's targets and programs. The composite adds the texture this returns and knows nothing
+ * else about it.
+ *
+ * **A pyramid rather than one wide blur.** A gaussian broad enough to look like glare is
+ * hundreds of taps at full resolution. Halving the frame six times and adding the levels back
+ * costs about a third of a full-resolution pass in total, and the sum of the octaves is a
+ * falloff with no end to it, which is what a real glare has and a single kernel does not.
+ */
+export class BloomPass {
+  /** The chain, level 0 at half the frame and each one after it half again. */
+  private readonly levels: {
+    texture: WebGLTexture;
+    framebuffer: WebGLFramebuffer;
+    width: number;
+    height: number;
+  }[] = [];
+  private width = 0;
+  private height = 0;
+  /**
+   * Set once if a target will not complete, after which this pass does nothing and says so once.
+   *
+   * The alternative to an honest "off" is a frame with a texture nobody wrote added into it,
+   * and the last time an effect here sampled an unwritten target the failure presented as the
+   * driver being at fault. See `sceneTarget.ts`.
+   */
+  private unavailable = false;
+  /** Half floats where the part will render to them. See the note in `allocate`. */
+  private readonly floatColor: boolean;
+
+  private readonly prefilterProgram: WebGLProgram;
+  private readonly prefilterUniforms: Record<string, WebGLUniformLocation | null>;
+  private readonly downsampleProgram: WebGLProgram;
+  private readonly downsampleUniforms: Record<string, WebGLUniformLocation | null>;
+  private readonly upsampleProgram: WebGLProgram;
+  private readonly upsampleUniforms: Record<string, WebGLUniformLocation | null>;
+  private readonly vao: WebGLVertexArrayObject;
+  /** Scratch for the source texel size, so a per-frame pass allocates nothing. */
+  private readonly texel = new Float32Array(2);
+
+  constructor(private readonly gl: WebGL2RenderingContext) {
+    /*
+     * The same extension the scene target asks for, and asked for here too rather than passed
+     * in: a chain of eight-bit levels would clip the very values it exists to spread, so a
+     * threshold above 1 would produce a black bloom on a part that has the extension for the
+     * scene and not for this. Without it the levels are eight-bit and bloom still works on
+     * whatever survives below 1, which is what the scene target itself is doing in that case.
+     */
+    this.floatColor = gl.getExtension('EXT_color_buffer_float') !== null;
+
+    this.prefilterProgram = compileProgram(
+      gl,
+      FULLSCREEN_VERT,
+      BLOOM_PREFILTER_FRAG,
+      'bloomPrefilter',
+    );
+    this.prefilterUniforms = uniformLocations(gl, this.prefilterProgram, 'bloomPrefilter');
+    this.downsampleProgram = compileProgram(
+      gl,
+      FULLSCREEN_VERT,
+      BLOOM_DOWNSAMPLE_FRAG,
+      'bloomDownsample',
+    );
+    this.downsampleUniforms = uniformLocations(gl, this.downsampleProgram, 'bloomDownsample');
+    this.upsampleProgram = compileProgram(
+      gl,
+      FULLSCREEN_VERT,
+      BLOOM_UPSAMPLE_FRAG,
+      'bloomUpsample',
+    );
+    this.upsampleUniforms = uniformLocations(gl, this.upsampleProgram, 'bloomUpsample');
+
+    const vao = gl.createVertexArray();
+    if (vao === null) throw new Error('BloomPass: createVertexArray failed');
+    this.vao = vao;
+  }
+
+  private ensureSize(width: number, height: number): boolean {
+    if (this.unavailable) return false;
+    if (this.width === width && this.height === height && this.levels.length > 0) return true;
+    const { gl } = this;
+    this.width = width;
+    this.height = height;
+    this.release();
+
+    /* The shape of the pyramid is shared, so the other backend cannot build a different one. */
+    for (const { width: levelWidth, height: levelHeight } of bloomLevelSizes(width, height)) {
+      const texture = this.allocate(levelWidth, levelHeight);
+      const framebuffer = gl.createFramebuffer();
+      if (texture === null || framebuffer === null) break;
+      gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+      if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
+        gl.deleteFramebuffer(framebuffer);
+        gl.deleteTexture(texture);
+        break;
+      }
+      this.levels.push({ texture, framebuffer, width: levelWidth, height: levelHeight });
+    }
+
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+
+    if (this.levels.length === 0) {
+      this.unavailable = true;
+      console.warn(
+        'BloomPass: no level of the chain would allocate, so bloom is off. The frame itself ' +
+          'is unaffected.',
+      );
+      return false;
+    }
+    return true;
+  }
+
+  private allocate(width: number, height: number): WebGLTexture | null {
+    const { gl } = this;
+    const texture = gl.createTexture();
+    if (texture === null) return null;
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    /*
+     * `RGBA16F` where it is renderable. Half floats are filterable in WebGL2 without an
+     * extension — it is *rendering* to them that needs `EXT_color_buffer_float` — so linear
+     * filtering below is safe either way.
+     */
+    if (this.floatColor) {
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA16F, width, height, 0, gl.RGBA, gl.HALF_FLOAT, null);
+    } else {
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+    }
+    /* Linear, because every stage samples between texels on purpose: that is where the spread
+       comes from, and NEAREST here would show the pyramid as blocks. */
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    /* Clamped, or a tap past the edge pulls the opposite side of the screen into the corner —
+       and at the deepest level, where one texel is a large part of the frame, that is a bright
+       smear from somewhere the viewer is not looking. */
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    return texture;
+  }
+
+  /**
+   * Build the frame's bloom. Returns the texture to add, or null if this pass could not run,
+   * which the caller must read as "no bloom" rather than as black.
+   *
+   * `threshold` is in scene units, so it only separates a light from white paint on a target
+   * that kept the range. The caller owns that decision and the warning that goes with it.
+   */
+  run(scene: WebGLTexture, width: number, height: number, threshold: number): WebGLTexture | null {
+    if (!this.ensureSize(width, height)) return null;
+    const { gl } = this;
+    const levels = this.levels;
+    const top = levels[0];
+    if (top === undefined) return null;
+
+    /* One triangle over targets with no depth attachment. Anything inherited from the scene
+       pass would be tested against a buffer that is not there. */
+    gl.disable(gl.DEPTH_TEST);
+    gl.disable(gl.BLEND);
+    gl.disable(gl.CULL_FACE);
+    gl.depthMask(false);
+    gl.bindVertexArray(this.vao);
+    gl.activeTexture(gl.TEXTURE0);
+
+    /* Threshold, full resolution into level 0. The only stage that reads the scene. */
+    gl.useProgram(this.prefilterProgram);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, top.framebuffer);
+    gl.viewport(0, 0, top.width, top.height);
+    gl.bindTexture(gl.TEXTURE_2D, scene);
+    gl.uniform1i(this.prefilterUniforms['uSource'] ?? null, 0);
+    gl.uniform1f(this.prefilterUniforms['uThreshold'] ?? null, threshold);
+    this.uploadTexel(this.prefilterUniforms, width, height);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+
+    /* Down the chain. Each level reads the one above it, which was written a draw ago. */
+    gl.useProgram(this.downsampleProgram);
+    gl.uniform1i(this.downsampleUniforms['uSource'] ?? null, 0);
+    for (let index = 1; index < levels.length; index++) {
+      const target = levels[index];
+      const source = levels[index - 1];
+      if (target === undefined || source === undefined) break;
+      gl.bindFramebuffer(gl.FRAMEBUFFER, target.framebuffer);
+      gl.viewport(0, 0, target.width, target.height);
+      gl.bindTexture(gl.TEXTURE_2D, source.texture);
+      this.uploadTexel(this.downsampleUniforms, source.width, source.height);
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+    }
+
+    /*
+     * And back up, adding into each level rather than replacing it, so level 0 ends up holding
+     * every octave at once. Additive blending rather than a second target to ping-pong through:
+     * a level is only ever read while a *different* level is bound, so there is no feedback.
+     */
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE);
+    gl.useProgram(this.upsampleProgram);
+    gl.uniform1i(this.upsampleUniforms['uSource'] ?? null, 0);
+    gl.uniform1f(this.upsampleUniforms['uRadius'] ?? null, BLOOM_FILTER_RADIUS_UV);
+    for (let index = levels.length - 1; index > 0; index--) {
+      const target = levels[index - 1];
+      const source = levels[index];
+      if (target === undefined || source === undefined) break;
+      gl.bindFramebuffer(gl.FRAMEBUFFER, target.framebuffer);
+      gl.viewport(0, 0, target.width, target.height);
+      gl.bindTexture(gl.TEXTURE_2D, source.texture);
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+    }
+
+    gl.disable(gl.BLEND);
+    gl.bindVertexArray(null);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    return top.texture;
+  }
+
+  /** One source texel in UV, which is what the thirteen taps are laid out in. */
+  private uploadTexel(
+    uniforms: Record<string, WebGLUniformLocation | null>,
+    width: number,
+    height: number,
+  ): void {
+    this.texel[0] = 1 / width;
+    this.texel[1] = 1 / height;
+    this.gl.uniform2fv(uniforms['uTexel'] ?? null, this.texel);
+  }
+
+  private release(): void {
+    const { gl } = this;
+    for (const level of this.levels) {
+      gl.deleteFramebuffer(level.framebuffer);
+      gl.deleteTexture(level.texture);
+    }
+    this.levels.length = 0;
+  }
+
+  dispose(): void {
+    const { gl } = this;
+    this.release();
+    gl.deleteProgram(this.prefilterProgram);
+    gl.deleteProgram(this.downsampleProgram);
+    gl.deleteProgram(this.upsampleProgram);
+    gl.deleteVertexArray(this.vao);
+  }
+}

package/src/render/boltBatch.ts

@@ -0,0 +1,141 @@
+import { compileProgram, uniformLocations } from './shader.ts';
+import { BOLT_FRAG, BOLT_VERT } from './shaders/bolt.ts';
+import { buildSegmentQuads, expandBoltSegments } from './segmentQuads.ts';
+import type { BoltSegments } from './boltPool.ts';
+
+/**
+ * One draw call for a pool of electrical arcs.
+ *
+ * Four vertices per segment rather than instancing, because a segment's two
+ * endpoints *are* its geometry — there is no repeated base shape to instance, and
+ * an instanced version would upload the same two positions per vertex anyway.
+ *
+ * Additive and depth-tested without writing depth, like every other emissive
+ * effect here: an arc adds light to what is behind it and must not occlude
+ * whatever is drawn next.
+ */
+export class BoltBatch {
+  readonly program: WebGLProgram;
+  readonly uniforms: Record<string, WebGLUniformLocation>;
+
+  private readonly vao: WebGLVertexArrayObject;
+  private readonly buffers: WebGLBuffer[] = [];
+  private readonly fromBuffer: WebGLBuffer;
+  private readonly toBuffer: WebGLBuffer;
+  private readonly arcBuffer: WebGLBuffer;
+  /** Scratch, expanded from the pool's per-segment arrays to per-vertex ones. */
+  private readonly from: Float32Array;
+  private readonly to: Float32Array;
+  private readonly arc: Float32Array;
+  private readonly capacity: number;
+
+  constructor(gl: WebGL2RenderingContext, capacity: number, label: string) {
+    this.program = compileProgram(gl, BOLT_VERT, BOLT_FRAG, label);
+    this.uniforms = uniformLocations(gl, this.program, 'boltBatch');
+    this.capacity = capacity;
+
+    const verts = capacity * 4;
+    this.from = new Float32Array(verts * 3);
+    this.to = new Float32Array(verts * 3);
+    this.arc = new Float32Array(verts * 4);
+
+    /*
+     * The corner layout and the index list are the only static data: which end of
+     * the segment a vertex sits at, and which side of it. Everything else arrives
+     * per frame. Built in `segmentQuads.ts`, so both backends draw one arc.
+     */
+    const { corners, indices } = buildSegmentQuads(capacity);
+
+    const vao = gl.createVertexArray();
+    if (vao === null) throw new Error(`${label}: createVertexArray failed`);
+    this.vao = vao;
+    gl.bindVertexArray(vao);
+    this.fromBuffer = this.dynamic(gl, 0, verts * 3, 3, label);
+    this.toBuffer = this.dynamic(gl, 1, verts * 3, 3, label);
+    this.staticAttr(gl, 2, corners, 2, label);
+    this.arcBuffer = this.dynamic(gl, 3, verts * 4, 4, label);
+
+    const indexBuffer = gl.createBuffer();
+    if (indexBuffer === null) throw new Error(`${label}: createBuffer failed`);
+    this.buffers.push(indexBuffer);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
+    gl.bindVertexArray(null);
+  }
+
+  /**
+   * Send this frame's arcs, expanding each segment to its four vertices.
+   *
+   * The expansion is `segmentQuads.ts`'s because it is a fact about how the geometry is drawn
+   * rather than about GL — the pool is deliberately GL-free and testable, and the WebGPU batch
+   * needs exactly the same four vertices.
+   */
+  upload(gl: WebGL2RenderingContext, data: BoltSegments): number {
+    const count = expandBoltSegments(data, this.capacity, this.from, this.to, this.arc);
+    if (count === 0) return 0;
+    const verts = count * 4;
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.fromBuffer);
+    gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.from, 0, verts * 3);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.toBuffer);
+    gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.to, 0, verts * 3);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.arcBuffer);
+    gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.arc, 0, verts * 4);
+    return count;
+  }
+
+  drawTo(gl: WebGL2RenderingContext, segmentCount: number): void {
+    if (segmentCount === 0) return;
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
+    gl.depthMask(false);
+    gl.disable(gl.CULL_FACE);
+
+    gl.bindVertexArray(this.vao);
+    gl.drawElements(gl.TRIANGLES, segmentCount * 6, gl.UNSIGNED_INT, 0);
+    gl.bindVertexArray(null);
+
+    gl.enable(gl.CULL_FACE);
+    gl.depthMask(true);
+    gl.disable(gl.BLEND);
+  }
+
+  dispose(gl: WebGL2RenderingContext): void {
+    for (const buffer of this.buffers) gl.deleteBuffer(buffer);
+    this.buffers.length = 0;
+    gl.deleteVertexArray(this.vao);
+    gl.deleteProgram(this.program);
+  }
+
+  private dynamic(
+    gl: WebGL2RenderingContext,
+    location: number,
+    floats: number,
+    size: number,
+    label: string,
+  ): WebGLBuffer {
+    const buffer = gl.createBuffer();
+    if (buffer === null) throw new Error(`${label}: createBuffer failed`);
+    this.buffers.push(buffer);
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, floats * 4, gl.DYNAMIC_DRAW);
+    gl.enableVertexAttribArray(location);
+    gl.vertexAttribPointer(location, size, gl.FLOAT, false, 0, 0);
+    return buffer;
+  }
+
+  private staticAttr(
+    gl: WebGL2RenderingContext,
+    location: number,
+    data: Float32Array,
+    size: number,
+    label: string,
+  ): void {
+    const buffer = gl.createBuffer();
+    if (buffer === null) throw new Error(`${label}: createBuffer failed`);
+    this.buffers.push(buffer);
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(location);
+    gl.vertexAttribPointer(location, size, gl.FLOAT, false, 0, 0);
+  }
+}