Renderer

The renderer is responsible for rendering shapes and text on the screen. It has a very simple API:

TypeScript

export interface Renderer {
  rectangle(
    color: Vec4,
    position: Vec2,
    size: Vec2,
    corners: Vec4,
    borderWidth: Vec4,
    borderColor: Vec4,
    clipStart: Vec2,
    clipSize: Vec2,
    clipCorners: Vec4,
  ): void;

  render(commandEncoder: GPUCommandEncoder): void;

  text(
    text: string,
    position: Vec2,
    fontName: string,
    fontSize: number,
    color: Vec4,
    textAlignment: TextAlign,
    clipStart: Vec2,
    clipSize: Vec2,
    options?: { lineHeight?: number; maxWidth?: number },
  ): void;
}

Overview

For each rectangle on the screen, an instance of a full-screen quad is renderered, which is then assigned to proper positions based on data stored in storage buffer. Fragment shader uses SDF to calculate border radius.

API

interface

Renderer

/renderer/Renderer.ts ↗

Method

Type and description

rectangle

(color: Vec4, position: Vec2, size: Vec2, corners: Vec4, borderWidth: Vec4, borderColor: Vec4, clipStart: Vec2, clipSize: Vec2, clipCorners: Vec4) => void

render

(context: any) => void

text

(text: string, position: Vec2, fontName: string, fontSize: number, color: Vec4, textAlignment: TextAlign, clipStart: Vec2, clipSize: Vec2, options?: { ...; }) => void

class

CanvasRenderer

/renderer/CanvasRenderer.ts ↗

method

rectangle

Parameter

Type and description

color

Vec4

position

Vec2

size

Vec2

corners

Vec4

borderWidth

Vec4

borderColor

Vec4

clipStart

Vec2

clipSize

Vec2

clipCorners

Vec4

returns

void

Type declaration

TypeScript

(color: Vec4, position: Vec2, size: Vec2, corners: Vec4, borderWidth: Vec4, borderColor: Vec4, clipStart: Vec2, clipSize: Vec2, clipCorners: Vec4) => void

method

render

Parameter

Type and description

context

CanvasRenderingContext2D

returns

void

Type declaration

TypeScript

(context: CanvasRenderingContext2D) => void

method

text

Parameter

Type and description

text

string

position

Vec2

fontName

string

fontSize

number

color

Vec4

textAlignment

TextAlign

clipStart

Vec2

clipSize

Vec2

options

{ lineHeight?: number; maxWidth?: number; noWrap?: boolean; }

returns

void

Type declaration

TypeScript

(text: string, position: Vec2, fontName: string, fontSize: number, color: Vec4, textAlignment: TextAlign, clipStart: Vec2, clipSize: Vec2, options?: { ...; }) => void

class

WebGLRenderer

/renderer/WebGLRenderer.ts ↗

Field

Type and description

WebGL2RenderingContext

program

WebGLProgram

vertexAttributes

number[]

Buffer using strides.

Position - In pixels [0, width], [0, height].
UV - In range [0, 1].
Color - In range [0, 1].
Corner - Bottom left corner. new Vec2(-1, -1) for non-rectangles.
Rectangle size - In pixels. new Vec2(-1, -1) for non-rectangles.
Radius - In pixels. Top, right, bottom, left. new Vec4(-1, -1, -1, -1) for non-rectangles. - Border width - In pixels. Top, right, bottom, left. new Vec4(-1, -1, -1, -1) for non-rectangles. - Border color - In range [0, 1].

fontAtlasTexture

WebGLTexture

vao

WebGLVertexArrayObject

interleavedBuffer

WebGLBuffer

contextHeight

number

Updated in clear().

method

line

Parameter

Type and description

points

Vec2[]

thickness

number

color

Vec4

returns

void

Type declaration

TypeScript

(points: Vec2[], thickness: number, color: Vec4) => void

method

polygon

Parameter

Type and description

points

Vec2[]

color

Vec4

returns

void

Type declaration

TypeScript

(points: Vec2[], color: Vec4) => void

method

triangles

Parameter

Type and description

points

Vec2[]

color

Vec4

returns

void

Type declaration

TypeScript

(points: Vec2[], color: Vec4) => void

method

rectangle

Parameter

Type and description

color

Vec4

position

Vec2

size

Vec2

corners

Vec4

borderWidth

Vec4

borderColor

Vec4

clipStart

Vec2

clipSize

Vec2

clipCorners

Vec4

returns

void

Type declaration

TypeScript

(color: Vec4, position: Vec2, size: Vec2, corners: Vec4, borderWidth: Vec4, borderColor: Vec4, clipStart: Vec2, clipSize: Vec2, clipCorners: Vec4) => void

method

clear

Type declaration

TypeScript

() => void

method

text

Parameter

Type and description

text

string

position

Vec2

fontName

string

fontSize

number

color

Vec4

textAlign

TextAlign

clipStart

Vec2

clipSize

Vec2

options

{ lineHeight?: number; maxWidth?: number; noWrap?: boolean; }

returns

void

Type declaration

TypeScript

(text: string, position: Vec2, fontName: string, fontSize: number, color: Vec4, textAlign: TextAlign, clipStart: Vec2, clipSize: Vec2, options?: { ...; }) => void

method

render

Type declaration

TypeScript

() => void

class

WebGPURenderer

/renderer/WebGPURenderer.ts ↗

Field

Type and description

drawingMode

DrawingMode

drawingIndices

number[]

rectangleData

Float32Array

rectangleCount

number

glyphData

Float32Array

glyphCount

number

vertexBuffer

GPUBuffer

rectangleBuffer

GPUBuffer

textBuffer

GPUBuffer

textBindGroupLayout

GPUBindGroupLayout

rectangleBindGroup

GPUBindGroup

textBindGroup

GPUBindGroup

rectanglePipeline

GPURenderPipeline

textPipeline

GPURenderPipeline

sampler

GPUSampler

method

rectangle

Parameter

Type and description

color

Vec4

position

Vec2

size

Vec2

corners

Vec4

borderWidth

Vec4

borderColor

Vec4

clipStart

Vec2

clipSize

Vec2

clipCorners

Vec4

returns

void

Type declaration

TypeScript

(color: Vec4, position: Vec2, size: Vec2, corners: Vec4, borderWidth: Vec4, borderColor: Vec4, clipStart: Vec2, clipSize: Vec2, clipCorners: Vec4) => void

method

text

Parameter

Type and description

text

string

position

Vec2

fontName

string

fontSize

number

color

Vec4

textAlign

TextAlign

clipStart

Vec2

clipSize

Vec2

options

{ lineHeight?: number; maxWidth?: number; noWrap?: boolean; }

returns

void

Type declaration

TypeScript

(text: string, position: Vec2, fontName: string, fontSize: number, color: Vec4, textAlign: TextAlign, clipStart: Vec2, clipSize: Vec2, options?: { ...; }) => void

method

render

Parameter

Type and description

commandEncoder

GPUCommandEncoder

returns

void

Type declaration

TypeScript

(commandEncoder: GPUCommandEncoder) => void

Text rendering

Text uses SDF font rendering to display glyphs from a font atlas. See Text Rendering page for more information.

I wrote a blogpost that goes more in depth – Drawing Text in WebGPU Using Just the Font File.