Skip to main content

Class: WebGLShapesRenderer

Defined in: webgl/WebGLShapesRenderer.ts:54

WebGL renderer for two-dimensional shape clouds

Shapes are rasterized on the GPU via a scanline-based algorithm. Each shapes object is represented by a full-screen quad whose fragment shader samples a scanline data texture to determine polygon membership, fill colors, and stroke colors.

Every object owns its textures. Synchronizing compares the current model state against the state those textures were built from, and rebuilds only the ones whose inputs changed.

Extends

Constructors

Constructor

new WebGLShapesRenderer(context, options?): WebGLShapesRenderer

Defined in: webgl/WebGLShapesRenderer.ts:82

Creates the shader program and retrieves uniform locations

Parameters

context

WebGLContext

The WebGL context to use for rendering

options?

Optional render options

renderOptions?

WebGLShapesRenderOptions

Returns

WebGLShapesRenderer

Overrides

WebGLRendererBase< Shapes, ShapesData, RenderedShapes >.constructor

Properties

context

readonly context: WebGLContext

Defined in: webgl/WebGLRendererBase.ts:40

Inherited from

WebGLRendererBase.context


renderedObjects

protected renderedObjects: RenderedShapes[] = []

Defined in: webgl/WebGLRendererBase.ts:42

Inherited from

WebGLRendererBase.renderedObjects


viewport

protected viewport: Rect

Defined in: webgl/WebGLRendererBase.ts:41

Inherited from

WebGLRendererBase.viewport

Methods

destroy()

destroy(): void

Defined in: webgl/WebGLShapesRenderer.ts:295

Releases the shader program and all per-object GPU textures

Returns

void


draw()

draw(): void

Defined in: webgl/WebGLShapesRenderer.ts:224

Issues the WebGL draw calls for all synchronized shapes

Renders each shapes object as a full-screen quad whose fragment shader performs scanline-based polygon rasterization using the per-object scanline data texture.

Returns

void

Throws

Error if the renderer has not been initialized


getRenderedBounds()

protected getRenderedBounds(): Rect | null

Defined in: webgl/WebGLRendererBase.ts:277

Gets the bounding box of all rendered objects, in world coordinates

Returns

Rect | null

The bounds, or null if no objects are rendered

Inherited from

WebGLRendererBase.getRenderedBounds


getViewport()

getViewport(): Rect

Defined in: webgl/WebGLRendererBase.ts:68

Gets the current viewport

Returns

Rect

Inherited from

WebGLRendererBase.getViewport


loadObjects()

protected loadObjects(layers, objects, tables, loadObject, loadTable, options?): Promise<ObjectRef<Shapes, ShapesData>[]>

Defined in: webgl/WebGLRendererBase.ts:111

Concurrently loads the data of all objects to be rendered on the given layers

An object assigned to a layer by layer ID is loaded for that layer only, an object assigned per item by a table column is loaded for every layer, with the items on each layer resolved from the table (see _getLayerItemsInfos). The data of an object, and of a table, is loaded once, no matter how many references it is shared by.

The returned references are ordered by layer and then by object. Objects whose data or table failed to load are logged and skipped. Objects without items on a layer are skipped silently, which also covers empty objects and objects whose table is empty - those are legitimate states, not failures.

Parameters

layers

Layer[]

The layers to load objects for

objects

Shapes[]

The objects (points or shapes) to load

tables

Table[]

The tables that the objects resolve their item layers from

loadObject

(object, options?) => Promise<ShapesData>

A function to load the data of an object

loadTable

(table, options?) => Promise<TableData>

A function to load the data of a table

options?

Optional abort signal

signal?

AbortSignal

Returns

Promise<ObjectRef<Shapes, ShapesData>[]>

A promise that resolves to one reference per loaded object and layer

Inherited from

WebGLRendererBase.loadObjects


setRenderOptions()

setRenderOptions(options): object

Defined in: webgl/WebGLShapesRenderer.ts:130

Sets the render options, and reports what they require to take effect

The stroke width is a shader uniform, so changing it only requires a redraw. The number of scanlines is not: the scanline data textures are rasterized for a fixed number of scanlines, so they are discarded here and rebuilt by the requested resynchronization.

Parameters

options

WebGLShapesRenderOptions

The options to set for the renderer

Returns

object

Whether the renderer has to be resynchronized and/or redrawn

redraw

redraw: boolean

resync

resync: boolean


setViewport()

setViewport(viewport): boolean

Defined in: webgl/WebGLRendererBase.ts:81

Sets the viewport for the renderer

Does not redraw, the caller is expected to redraw whenever the viewport changed.

Parameters

viewport

Rect

The new viewport to set

Returns

boolean

True if the viewport was changed, false otherwise

Inherited from

WebGLRendererBase.setViewport


synchronize()

synchronize(layers, shapes, tables, colorMaps, visibilityMaps, opacityMaps, loadShapes, loadTable, options?): Promise<Rect | null>

Defined in: webgl/WebGLShapesRenderer.ts:174

Synchronizes GPU textures with the current model state

Loads all shapes data for the given layers, removes GPU resources for shapes that are no longer needed, and creates or updates scanline data textures and color textures for the remaining ones.

Parameters

layers

Layer[]

Layers to render

shapes

Shapes[]

Shapes data objects

tables

Table[]

Tables that the shapes objects resolve their properties from

colorMaps

GroupValueMap<Color>[]

Project-global color maps for GroupByConfig resolution

visibilityMaps

GroupValueMap<boolean>[]

Project-global visibility maps

opacityMaps

GroupValueMap<number>[]

Project-global opacity maps

loadShapes

(shapes, options?) => Promise<ShapesData>

Async getter for shapes data

loadTable

(table, options?) => Promise<TableData>

Async getter for table data

options?

Optional abort signal

signal?

AbortSignal

Returns

Promise<Rect | null>

The bounding box of all rendered shapes in world coordinates, or null if nothing is rendered