webgl

The luma.gl v9 WebGL2 backend. WebGLBackend draws render layers via a GroupRenderer (palette-texture color keyed by drawableId, a mat3 transform uniform, texture-write recolor), with GPU picking, clipFromView view math, and toPNG export.

import { WebGLBackend } from "@mapequation/d3gl/webgl";

const backend = await WebGLBackend.create(canvasEl, { width, height });
backend.setLayers(layers); // RenderLayer[] built from a Scene's buffers
backend.render();

Classes

Class	Description
GroupRenderer	Renders one Scene group on the GPU. Geometry is uploaded once; pan/zoom is a transform-uniform update and recolor/visibility is a palette/flags texture update — neither touches the geometry buffers. Appends are O(new): the geometry buffers grow by capacity-doubling (GrowBuffer) and the color/flags textures grow with partial uploads (or a recreate when their texel dimensions change).
InstancedArrows	-
InstancedCircles	-
InstancedLines	-
WebGLBackend	A renderer for a Scene, implemented per target (WebGL / Canvas / SVG).

Interfaces

Interface	Description
PaletteDimensions	-

Functions

Function	Description
clipFromView	Build a column-major 3x3 matrix mapping reference pixel coordinates (origin top-left, y down, the space d3 projections / geoPath produce) through a d3-zoom transform and into WebGL clip space [-1, 1] (origin center, y up).
decodePickColor	Decode RGB pick bytes back to a drawableId (-1 for the cleared background).
encodePickColor	Encode a drawableId into RGB bytes for GPU color-picking. Offset by +1 so that a cleared (black) pick buffer decodes to -1 (“no drawable”).
padFlags	Flags (1 byte/drawable) laid into a width*height buffer, zero-padded.
padPalette	RGBA colors (4 bytes/drawable) laid into a widthheight4 buffer, zero-padded.
paletteDimensions	Texel dimensions for a per-drawable side-table of count entries. A single row up to maxWidth, then wrapping into rows. drawableId -> texel is therefore (id % width, floor(id / width)); the shader recovers width via textureSize().
pickAt	Render the pick pass and read the drawableId under a screen pixel.
toPNG	Read a rendered framebuffer back to a PNG data URL. WebGL readback is bottom-left origin, so rows are flipped to top-left for the image. Browser only (uses a 2D canvas to encode). Render into framebuffer before calling.

References

ViewTransform

Re-exports ViewTransform