Main application entry point handling WebGPU visualization, map integration, and UI controls
Members
# inner constant canvas
WebGPU initialization and pipeline setup Handles canvas context, shaders, and buffer creation
# inner constant observer
ResizeObserver callback for canvas resizing Updates canvas dimensions and triggers re-render
# inner constant staticUnitSize
Unit size for static vertex data in bytes
# inner constant uniformBufferSize
Uniform buffer layout in bytes
Methods
# inner createCircleVertices(numSegments)
Create a circle with a given number of segments and radius without an index buffer. The first vertex is the center of the circle. The next vertex is the top point on the circle.
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
numSegments |
32 | The number of segments to use for the circle. |
# async inner fetchStipples(type) → {Promise.<DensityFunction2D>}
Fetches and processes stipple data from the API
Parameters:
| Name | Type | Description |
|---|---|---|
type |
DataSetType
|
Dataset type to fetch |
Processed density function
Promise.<DensityFunction2D>
# inner generateFrame()
Generates and submits a new frame for rendering Updates uniforms and executes the render pass
# inner hexcodeToVec4(hexcode) → {Float32Array}
Converts a hex color code to a WebGPU-compatible vec4 array.
Parameters:
| Name | Type | Description |
|---|---|---|
hexcode |
string
|
A hex color code (e.g., "#FFFFFF"). |
A normalized vec4 array representing the color.
Float32Array
# inner initializeMap()
Initializes the Leaflet map with OpenStreetMap tiles
# inner onFidelityScaleChange()
Updates fidelity values based on scale input X = scale * 3, Y = scale * 4 to maintain aspect ratio
# inner updateUniform()
Updates uniform buffer with current state Handles screen size, MVP matrix, point size, and colors
# inner updateVertexBuffer(newData)
Updates the vertex buffer with new data
Parameters:
| Name | Type | Description |
|---|---|---|
newData |
Float32Array
|
New vertex data to upload |