Skip to content

UWAL / MSDFText

Classes ​

MSDFText ​

Utility class to write some text into a storage GPUBuffer. When combined with the MSDFText shader, the buffer content can be outputted to a screen or into a GPUTexture. Note: This class will probably be deprecated once HTML in Canvas gets widely adopted.

See ​

MSDF Text and Curtains for reference.

Constructors ​

Constructor ​
ts
new MSDFText(label?): MSDFText;
Parameters ​
ParameterTypeDefault valueDescription
label?string"MSDFText"Text label.
Returns ​

MSDFText

Methods ​

CreatePipeline() ​
ts
CreatePipeline(Renderer, descriptor?): Promise<PipelineInstance>;

Create an internal render pipeline to output the text.

Parameters ​
ParameterTypeDescription
RendererRenderStageRenderer instance to create the pipeline.
descriptor?PipelineDescriptor & RenderPipelineState & Record<"renderBundleDescriptor", RenderBundleDescriptor | undefined> & Record<"colorTargets", GPUColorTargetState | GPUColorTargetState[] | undefined>Optional pipeline descriptor.
Returns ​

Promise<PipelineInstance>

LoadFont() ​
ts
LoadFont(
   source, 
   generated?, 
   requestOptions?
): Promise<void>;

Load and use an MSDFFont.

Parameters ​
ParameterTypeDefault valueDescription
sourcestringundefinedFont source path.
generated?booleanfalseWhether the font was generated here.
requestOptions?RequestInitundefinedfetch request options.
Returns ​

Promise<void>

See ​

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

Throws ​

ERROR.PIPELINE_NOT_FOUND if called before CreatePipeline.

Write() ​
ts
Write(
   text, 
   color?, 
   scale?, 
   centered?
): GPUBuffer;

Write a text string into a storage GPUBuffer.

Parameters ​
ParameterTypeDefault valueDescription
textstringundefinedText to write.
color?ColorValue0x000000Text color.
scale?number0.01Text scale.
centered?booleanfalseWhether the text should be centered.
Returns ​

GPUBuffer

Throws ​

ERROR.PIPELINE_NOT_FOUND if called before CreatePipeline, ERROR.FONT_NOT_FOUND if called before LoadFont, and ERROR.CAMERA_BUFFER_NOT_FOUND if a PerspectiveCamera buffer hasn't been set yet with CameraMatrixBuffer.

SetTranslation() ​
ts
SetTranslation(translation, buffer): void;

Set the text translation.

Parameters ​
ParameterTypeDescription
translationFloat32Array<ArrayBufferLike>Translation matrix.
bufferGPUBufferText buffer to update.
Returns ​

void

SetColor() ​
ts
SetColor(color, buffer): void;

Set the text color.

Parameters ​
ParameterTypeDescription
colorColorValueColor value.
bufferGPUBufferText buffer to update.
Returns ​

void

SetScale() ​
ts
SetScale(scale, buffer): void;

Set the text scale.

Parameters ​
ParameterTypeDescription
scalenumberScale value.
bufferGPUBufferText buffer to update.
Returns ​

void

Clear() ​
ts
Clear(buffer?): void;

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

Parameters ​
ParameterTypeDescription
buffer?GPUBufferText buffer to remove.
Returns ​

void

Destroy() ​
ts
Destroy(): void;

Destroy and remove the render pipeline, destroy the font, and reset the internal state.

Returns ​

void

Accessors ​

CameraMatrixBuffer ​
Set Signature ​
ts
set CameraMatrixBuffer(buffer): void;

Set a PerspectiveCamera buffer to render the text.

See ​

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

Parameters ​
ParameterTypeDescription
bufferGPUBufferCamera buffer.
Returns ​

void

Pipeline ​
Get Signature ​
ts
get Pipeline(): RenderPipelineInstance | undefined;
Returns ​

RenderPipelineInstance | undefined

Internal pipeline used to render the text.

Released under the MIT License.