Encapsulate WebGPU - 2D

[sholloway]

Create a 2D API backed by WebGPU and WGSL

---

Define an API for drawing in a 2D Context.

2D API Operations

Operation	Description	Supports
get_context	Provides a canvas that can be drawn on.
clear	Clears the canvas with a provided color.	color
pan	Moves the 2D camera.	direction, distance
circle	Draws a circle.	center, radius, stroke, fill
square	Draws an axis-aligned square.	origin=(CENTER, UPPER_LEFT, UPPER_RIGHT, ...) , edge_size: float, stroke, fill
rect	Draws an axis-aligned rectangle.	origin=(CENTER, UPPER_LEFT, UPPER_RIGHT, ...) , edge_size: float, stroke, fill
poly	Draws a polygon
line	Draws a line
bézier	Draws a curve.
spline	Draws a spline curve.
text	Draws text.
grid	Draws a grid

Advanced Features

• Parallax Rendering
• Sprite Sheet based animation.
• Rendering Text

Considerations

• Representing shaders in a Python code project. I want syntax highlighting and code hints.

References

• [Processing 2D API]()
• three.js 2D API
• vello 2D Graphics Engine

Resources

Rectangles

• Blurred rounded rectangles

Lines

• Drawing Lines is Hard
• three-meshline

Curves

• Coding Curves
• Parallel curves of cubic Béziers
• Simplifying Bézier paths
• Cleaner parallel curves with Euler spirals
• Fitting cubic Bézier curves
• Flattening quadratic Béziers
• An update on spline licensing
• spiro, A Python spline library.
• How long is that Bézier?
• A new spline
• Secrets of smooth Béziers revealed
• General Information

Engine Architecture

• Fast 2D rendering on GPU
• A sort-middle architecture for 2D graphics
• 2D Graphics on Modern GPU
• A crate I want: 2d graphics
• Deferred Rendering Example
• RT Ray Tracing Example

Text Rendering

• Sub-pixel Distance Transform
• WebGPU Text Rendering Stackoverflow
• Rendering Vector Art on the GPU
• wgpu-text
• glyphon

Examples

• WebGPU Samples

WebGPU Information

• WebGPU: All the cores, none of the canvas
• I want to talk about WebGPU
• WebGPU C++ Guide
• WebGPU Spec
• WGSL Spec

Tooling

• wgsl-analyzer VSCode Extension
• Debugging wgpu Applications

[sholloway]

Switching to a GPU based rendering is going to require making some changes to the overall architecture.

• The way that renderers are currently declared will need to be replaced.
• The default sims renderer is going to need to leverage instancing for having a large number of sims running around.
• Panning and zooming should be easier with a camera model.
• Will probably need to replace the current grid coordinate system.
  • Real-Time Rendering - Ray Tracing Chapter: "Hash tables can be employed to create an infinite virtual grid, where only the occupied cells store data in memory (Section 25.1.2). Another strategy is to store, in empty cells, the distance in grid units to the closest non-empty cell. This system is called proximity clouds [14]. During the traversal, these distances allow us to safely skip many cells in the line marching routine that are guaranteed to be empty. Recently, irregular grids [64] elaborate on the idea of skipping empty space efficiently."
• I'd like to have architecture support swapping out rendering pipelines for a sim. For example, raster, real-time ray tracing, voxel.

Compute Shader Potential

What part of the pipeline can leverage compute shaders?

• Perhaps the view frustum should shift to a compute shader.
• Calculation of AABBs?
• Construction of any spatial data structures (e.g. kd-trees, BVH).

[sholloway]

Debugging

Debugging shaders is a major pain in the Python ecosystem. The debug tools that work with Rust don't work with Python. I want a way to get debug information out of shaders.

Ideas

• Have a debug buffer that is available to all shaders in a pipeline. Use this buffer to write debug information.
• Option A: Write the debug buffer to the STDOUT. This can be directed to the terminal or a log file.
• Option B: Have an additional render pipeline that writes the debug information into screen space.
• Option C: Make the primary render pipeline be deferred. Each render pass writes to a temporary texture. An optional DEBUG texture can be used to overlay debug text over the frame.

Challenges

• If each vert/frag shader can write to a debug buffer then the data generated could quickly get larger than what can be displaced on screen.
• I haven't solved how to displaying text with WebGPU yet.
• Deferred rendering has general complexities with dealing with shadows.
• Deferred rendering is more memory hungry.
• Writing a buffer to a file. The PPM format may be an easy option.
• Shader Debug Example
• WGPU PR #4297