UWAL / MSDFText

Classes

MSDFText

Utility class to write some text onto a GPUBuffer and then use a GPUTexture to output it to a canvas. Note: This class will probably get deprecated once HTML in Canvas is widely adopted.

See

MSDF Text and Curtains examples for reference.

Constructors

Constructor

new MSDFText(label?): MSDFText;

Parameters

Parameter	Type	Default value	Description
label?	string	"MSDFText"	Name of the text

Returns

MSDFText

Methods

CreateRenderPipeline()

CreateRenderPipeline(Renderer, descriptor?): Promise<RenderPipelineInstance>;

Create an internal pipeline to render text.

Parameters

Parameter	Type	Description
Renderer	RenderStage	Renderer instance to create the pipeline
descriptor?	BasePipelineDescriptor & RenderPipelineState & Record<"renderBundleDescriptor", RenderBundleDescriptor | undefined> & Record<"colorTargets", GPUColorTargetState | GPUColorTargetState[] | undefined>	Additional pipeline settings

Returns

Promise<RenderPipelineInstance>

LoadFont()

LoadFont(
   url, 
   generated?, 
requestOptions?): Promise<MSDFFont>;

Load and use an MSDFFont.

Parameters

Parameter	Type	Default value	Description
url	string	undefined	URL to load the font from
generated?	boolean	false	Whether the font was generated with this tool
requestOptions?	RequestInit	undefined	Optional fetch request options

Returns

Promise<MSDFFont>

See

https://github.com/UstymUkhman/uwal/issues/9

Write()

Write(
   string, 
   color?, 
   scale?, 
   centered?): GPUBuffer;

Write a text string to a GPUBuffer.

Parameters

Parameter	Type	Default value	Description
string	string	undefined	String to write
color?	ColorValue	0x000000	Text color
scale?	number	0.01	Text scale
centered?	boolean	false	Set to true to center the text

Returns

GPUBuffer

SetTranslation()

SetTranslation(translation, textBuffer): void;

Set the text translation matrix.

Parameters

Parameter	Type	Description
translation	Float32Array<ArrayBufferLike>	Translation matrix
textBuffer	GPUBuffer	Text buffer to update

Returns

void

SetColor()

SetColor(color, textBuffer): void;

Set the text color.

Parameters

Parameter	Type	Description
color	ColorValue	Color value
textBuffer	GPUBuffer	Text buffer to update

Returns

void

SetScale()

SetScale(scale, textBuffer): void;

Set the text scale.

Parameters

Parameter	Type	Description
scale	number	Scale value
textBuffer	GPUBuffer	Text buffer to update

Returns

void

Clear()

Clear(textBuffer?): void;

Destroy the text buffer and reset its color and scale. Remove the pipeline's bind groups and reset its render bundles.

Parameters

Parameter	Type	Description
textBuffer?	GPUBuffer	Text buffer to remove

Returns

void

Destroy()

Destroy(): void;

Remove the rendering pipeline, destroy the font, and reset the internal state. Only unlinking is performed; the Destroy method on the removed pipeline is not called.

Returns

void

Accessors

CameraMatrixBuffer

Set Signature

set CameraMatrixBuffer(cameraBuffer): void;

Set a PrerspectiveCamera buffer to render the text.

See

https://github.com/UstymUkhman/uwal/issues/9

Parameters

Parameter	Type	Description
cameraBuffer	GPUBuffer	Camera buffer

Returns

void

Pipeline

Get Signature

get Pipeline(): RenderPipelineInstance | undefined;

Returns

RenderPipelineInstance | undefined

Pipeline used for text rendering.

Font

Get Signature

get Font(): MSDFFont | undefined;

Returns

MSDFFont | undefined

MSDFFont instance.

Set Signature

set Font(font): void;

Dynamically set the text font. Called internaly by the LoadFont method.

Parameters

Parameter	Type	Description
font	MSDFFont	MSDFFont to use

Returns

void