Type a label and select distance or round to see bands every three screen pixels. Distances stop at reach, which grows with size; wider outlines or glows fill the glyph quad.
HTML labels over a canvas cannot move from kernels, hide behind the scene or run on React Native. GPU text needs glyph layout and an atlas. @pmndrs/glyph shapes strings at runtime with 1.4 MB of WebAssembly, which Hermes cannot run.
Bake fonts with Glyph at build time. It produces a multi-channel signed distance field, or MSDF, atlas and JSON with advances and kerning. On the device, JavaScript lays out text and the GPU draws one instanced quad per glyph.
Uploads a baked font atlas and glyph quads for text sets. The font also provides advances and
kerning for CPU layout. Throws if the bake version is not 1 or the atlas byte count does not
match its dimensions.
@owns ― a texture, a buffer: the atlas, and each glyph's quad
@param ― baked the bake's JSON and the atlas's bytes, as read returns them
@returns ― a font you destroy after the text sets that draw with it
Validates JSON from typegpu-kit-bake-font and pairs it with atlas bytes. Throws with the
field name for invalid data or versions, or if the atlas size does not match.
@param ― json the JSON, as text or parsed
@param ― atlas the atlas's bytes, 4 a texel
@returns ― the bake, as create takes it; it throws, naming the field, on JSON of another shape or
version, and on an atlas of another size
Creates labels drawn from a baked MSDF font atlas. The CPU lays out each string, and instanced
glyph quads place it in world or screen space. Throws unless capacity and length are
integers of at least 1.
@injects ― per-instance move, setLabel, setQuad, quadAt and erase, for kernels piped
with it
@owns ― 2 buffers, a sampler: the quads and the labels
@binds ― 3 storage, 1 uniform: the drawing, the quads, the labels and the font's glyphs, and
passes.pixels with text.screen or text.pinned
@binds ― 1 storage: move or setLabel, the labels
@binds ― 1 storage: setQuad, quadAt or erase, the quads
@records ― drawing, added to passes, after the passes that move the labels.
@param ― font the font it draws with, which it borrows
@param ― options.place a 'use gpu' function; it and shade carry the fills of what they read
beside the camera, such as tgpu.fn(lifted).pipe(scene.inject())
@returns ― a set of labels you destroy before its font
create(
constroot:TgpuRoot
root,
constsans:font.Font
sans,{
Options.camera?:cameras.CameraBase|undefined
Supplies the camera for facing, flat and pinned, unless the pass description injects
its own. Screen text needs no camera. Default none, which requires camera-dependent text to
use a description that injects a camera.
camera:
constview:cameras.OrbitCamera
view,
Options.capacity: number
Sets the number of labels to an integer of at least 1.
capacity:16,
Options.length: number
Limits glyphs drawn per label to an integer of at least 1. Spaces use no glyph slot; glyphs
beyond the limit are omitted.
length:24,
Options.place?:text.Place|undefined
Places glyph corners with facing, flat, pinned, screen or a custom function. Default
facing.
place:
import text
text.
constpinned:(position:v3f,offset:v2f)=>v4f
Places text at a world point with constant screen size. em uses points.
Describes the targets and outputs for scene passes. With a surface such as the canvas, writes
only each renderer's colour. With a target set, writes colour into the target marked color,
depth into the target marked depth, and other outputs into their named targets. Multisampled
targets resolve according to resolve. Targets with layers draw one pass per layer, and every
target the description draws into needs the same layers. add builds a renderer's drawing.
begin starts a pass. pipe supplies fills such as a camera.
@param ― screen the surface, or the targets, which give the formats; each one the description
names is drawn into
@param ― writes what fills each target, by its key in screen
@returns ― a description you destroy, which holds the pipelines it builds
Adds fill after existing fills and returns a description of the same passes. Piped fills
take precedence over a drawing's own. For example, passes.create(…).pipe(view.inject()) uses
the camera from view.
pipe(
constview:cameras.OrbitCamera
view.
CameraBase.inject(): Inject
Fills cameras.current for the pipelines created from the configuration it is piped into.
Builds a pipeline for drawing that writes every described output and returns its draw
methods. If the drawing cannot supply the fields an output needs, type checking fails with
that output's name. Use without to leave it out or instead to replace it.
add(
consttags:text.TextSet
tags.
TextSet.drawing: passes.Drawing<WgslStruct<{
position:Vec4f;
uv:Vec2f;
bounds:Vec4f;
color:Vec4f;
label:U32;
glyph:U32;
local:Vec2f;
}>,{
label: number;
color: v4f;
}>
Draws all labels when added to a canvas or scene pass description. It tests depth without
writing it.
Lays out and uploads only the specified label. Use write(label, '') to empty it. Returns
the layout, valid until the next write. Throws for a label outside the set or an em value
that is not greater than 0.
write(0,'Lantern',{
Options.em: number
Sets positive units per em. World text uses world units. Text placed with screen or
pinned uses points, scaled by the text set pixelRatio.
Sets the vertical anchor at the first line top, the top of its capitals, block middle, first
baseline or last line bottom. Default middle.
baseline:'bottom'});
consttags:text.TextSet
tags.
TextSet.labels: TgpuBuffer<WgslArray<WgslStruct<{
position:Vec3f;
color:Vec4f;
}>>>& StorageFlag
Holds label anchors and colours, initially at the origin and white. Use TypeGPU patch to
upload selected fields, or move and setLabel to write from a kernel.
Runs the loop on each scheduled frame. Time advances by at most maxDt per frame, never steps
back, and stops while the surface is paused. Destroying the animation keeps the loop alive.
Another animation on the same loop continues from its recorded time. A frame error stops the
animation.
@param ― loop the loop to run on each unpaused frame. Continues from its seconds if it ran before
@returns ― an animation you destroy to stop the frames
Begins a pass, draws drawn or each drawing in a list in order, then ends the pass. Reuse the
list to avoid allocating each frame. Call begin yourself when you need to choose drawings
per frame. Records nothing while enabled is false.
record(
frame:frames.Frame
frame,
constdrawn:passes.Drawn
drawn);
}),
);
A set holds capacity labels with at most length glyphs each. write(label, text, options) lays out one label and uploads its glyphs. Spaces use no glyph slots. Glyphs beyond length are omitted.
labels stores anchors and linear colours, initially white at the origin. Move or fade labels with TypeGPU’s patch, which uploads only supplied fields. Kernels can use tags.move(label, position) and tags.setLabel(label, value). These updates do not repeat layout.
This label uses 18 points per em. Their pixel size is em times the pass’s pixels per point, the surface’s pixelRatio, giving a consistent size across screens. Labels centre on their anchor. Use baseline: 'bottom' to place their bottom at the anchor.
canvas.add(tags.drawing) builds the pipeline into a pass description. One draw renders capacity * length instances. Empty slots still run four vertices each.
Load font bytes in your code. See Loading a font for each platform.
The solar system example bends its labels around each planet with a custom place, and types them on glyph by glyph.
A kernel created from root.pipe(tags.inject()) can write glyphs. quads stores length entries per label in label order. Each entry is a text.Quad:
tags.setQuad(label, k, quad) sets glyph k. Its pen and em use the units expected by place. glyph is the font index plus 1, or 0 to hide it. Read indices and advances from font.glyphOf and font.advance.
tags.erase(label) hides all of a label’s glyphs. Erase a label before a kernel writes fewer glyphs than write did.
tags.quadAt(label, k) reads glyph k. To show text a kernel picks, write each choice once into a set you never draw, and copy the chosen label’s quads with setQuad(0, k, bank.quadAt(choice, k)) from a kernel piped with both sets. The stampede names the horse under the pointer this way.
The package includes baked Inter SemiBold in @typegpu/kit/fonts/inter.json and inter.rgba. Baking a font produces the same two files. Pass the JSON as text or parsed data, plus atlas bytes, to font.read(json, atlas). It returns a Baked with data, a FontData, and atlas for font.create. It throws for versions other than 1, missing or mistyped fields, or an atlas size other than 4 bytes per texel at the JSON dimensions. Field errors name the field.
Vite serves package files at their own URLs with ?url in development and builds, as in the opening example. Use types from vite/client. Fetch your own baked font from public/ by its path.
Metro bundles the JSON as a module, and the atlas as an asset once rgba is in its assetExts:
Uploads a baked font atlas and glyph quads for text sets. The font also provides advances and
kerning for CPU layout. Throws if the bake version is not 1 or the atlas byte count does not
match its dimensions.
@owns ― a texture, a buffer: the atlas, and each glyph's quad
@param ― baked the bake's JSON and the atlas's bytes, as read returns them
@returns ― a font you destroy after the text sets that draw with it
Validates JSON from typegpu-kit-bake-font and pairs it with atlas bytes. Throws with the
field name for invalid data or versions, or if the atlas size does not match.
@param ― json the JSON, as text or parsed
@param ― atlas the atlas's bytes, 4 a texel
@returns ― the bake, as create takes it; it throws, naming the field, on JSON of another shape or
version, and on an atlas of another size
read(
import data
data,
constbytes:ArrayBuffer
bytes));
Use Expo 58’s expo-asset and expo-file-system to load the font files.
Use readFileSync in tests or scripts to load both files. Resolve a package file with new URL(import.meta.resolve('@typegpu/kit/fonts/inter.rgba')). font.read accepts JSON from readFileSync(url, 'utf8') and atlas bytes as a Buffer.
The command writes inter.json and inter.rgba. They include printable ASCII, the supplied --characters and a fallback glyph that advances without drawing.
It warns of characters given that the font has no glyph for.
Glyph bakes only static fonts. Pin variable-font axes first, for example with fonttools varLib.instancer Font.ttf wght=600.
The shipped Inter is baked with … at the defaults below, under the SIL Open Font License.
Flag
bake
Default
--characters
characters
Additional characters beyond printable ASCII. Only Latin text is supported because runtime layout does not shape glyphs.
--em-size
emSize
40
Atlas texels per em. Larger values keep corners sharper on large text and make a larger atlas.
--pixel-range
pixelRange
8
Distance range in atlas texels. It limits how far outlines and glows can extend.
--font-face-index
fontFaceIndex
0
The face of a collection.
In a build script, import bake(options) from @typegpu/kit/bake. Pass the font file as input with the options above. The result contains Baked for font.create and absent, the requested characters missing from the font. format(data) produces the command’s JSON format, with one line per glyph and kerning pair.
Asynchronously writes data to a file, replacing the file if it already exists. data can be a string, a buffer, an
AsyncIterable, or an
Iterable object.
The encoding option is ignored if data is a buffer.
If options is a string, then it specifies the encoding.
The mode option only affects the newly created file. See fs.open() for more details.
Any specified FileHandle has to support writing.
It is unsafe to use fsPromises.writeFile() multiple times on the same file
without waiting for the promise to be settled.
Similarly to fsPromises.readFile - fsPromises.writeFile is a convenience
method that performs multiple write calls internally to write the buffer
passed to it. For performance sensitive code consider using fs.createWriteStream() or filehandle.createWriteStream().
It is possible to use an AbortSignal to cancel an fsPromises.writeFile().
Cancelation is "best effort", and some amount of data is likely still
to be written.
constpromise=writeFile('message.txt', data,{ signal });
// Abort the request before the promise settles.
controller.abort();
await promise;
}catch(err){
// When a request is aborted - err is an AbortError
console.error(err);
}
Aborting an ongoing request does not abort individual operating
system requests but rather the internal buffering fs.writeFile performs.
@since ― v10.0.0
@param ― file filename or FileHandle
@return ― Fulfills with undefined upon success.
writeFile}from'node:fs/promises';
import{
functionbake(options:BakeOptions):Promise<Bake>
Bakes printable ASCII and characters from a font file into an atlas and metrics. Requires a
static font and a single uncompressed RGBA8 atlas page. Unsupported font or atlas data throw.
@param ― options the font file, and what to bake beside ASCII
@returns ― the JSON font.create reads, the atlas's RGBA bytes, and the characters the font lacks
bake,
functionformat(data:FontData):string
Formats baked font JSON with one line per glyph and kerning pair so diffs show individual
changes.
@param ― data the font's metrics, glyphs and kerning: what bake returns as data
@returns ― the JSON text
format}from'@typegpu/kit/bake';
const{
constdata:FontData
data,
constatlas:Uint8Array<ArrayBufferLike>
Holds RGBA texels in rows from top to bottom, with 4 bytes per texel. The median of the
first three distance channels preserves corners. The fourth channel rounds corners.
atlas,
constabsent:string
Lists requested characters that the font lacks. They use the missing glyph.
absent}=await
functionbake(options:BakeOptions):Promise<Bake>
Bakes printable ASCII and characters from a font file into an atlas and metrics. Requires a
static font and a single uncompressed RGBA8 atlas page. Unsupported font or atlas data throw.
@param ― options the font file, and what to bake beside ASCII
@returns ― the JSON font.create reads, the atlas's RGBA bytes, and the characters the font lacks
bake({
BakeOptions.input: string
Selects a static TTF, OTF, TTC or OTC file. glyph cannot bake variable fonts.
input:'Inter-SemiBold.ttf',
BakeOptions.characters?: string |undefined
Adds characters to printable ASCII, such as …°é. Only Latin text is supported because the
runtime performs no shaping. Default none.
characters:'…'});
if(
constabsent:string
Lists requested characters that the font lacks. They use the missing glyph.
Asynchronously writes data to a file, replacing the file if it already exists. data can be a string, a buffer, an
AsyncIterable, or an
Iterable object.
The encoding option is ignored if data is a buffer.
If options is a string, then it specifies the encoding.
The mode option only affects the newly created file. See fs.open() for more details.
Any specified FileHandle has to support writing.
It is unsafe to use fsPromises.writeFile() multiple times on the same file
without waiting for the promise to be settled.
Similarly to fsPromises.readFile - fsPromises.writeFile is a convenience
method that performs multiple write calls internally to write the buffer
passed to it. For performance sensitive code consider using fs.createWriteStream() or filehandle.createWriteStream().
It is possible to use an AbortSignal to cancel an fsPromises.writeFile().
Cancelation is "best effort", and some amount of data is likely still
to be written.
Asynchronously writes data to a file, replacing the file if it already exists. data can be a string, a buffer, an
AsyncIterable, or an
Iterable object.
The encoding option is ignored if data is a buffer.
If options is a string, then it specifies the encoding.
The mode option only affects the newly created file. See fs.open() for more details.
Any specified FileHandle has to support writing.
It is unsafe to use fsPromises.writeFile() multiple times on the same file
without waiting for the promise to be settled.
Similarly to fsPromises.readFile - fsPromises.writeFile is a convenience
method that performs multiple write calls internally to write the buffer
passed to it. For performance sensitive code consider using fs.createWriteStream() or filehandle.createWriteStream().
It is possible to use an AbortSignal to cancel an fsPromises.writeFile().
Cancelation is "best effort", and some amount of data is likely still
to be written.
constpromise=writeFile('message.txt', data,{ signal });
// Abort the request before the promise settles.
controller.abort();
await promise;
}catch(err){
// When a request is aborted - err is an AbortError
console.error(err);
}
Aborting an ongoing request does not abort individual operating
system requests but rather the internal buffering fs.writeFile performs.
@since ― v10.0.0
@param ― file filename or FileHandle
@return ― Fulfills with undefined upon success.
writeFile('public/fonts/inter.rgba',
constatlas:Uint8Array<ArrayBufferLike>
Holds RGBA texels in rows from top to bottom, with 4 bytes per texel. The median of the
first three distance channels preserves corners. The fourth channel rounds corners.
atlas);
The atlas must fit on one page of Glyph’s packer. The bake reports an error if it does not.
Units per em. Use world units for world text and points for screen or pinned text.
align
'center'
Horizontal anchor position within each line, 'left', 'center' or 'right'.
baseline
'middle'
Vertical anchor position within the block, 'top', 'cap' for the top of the first line’s capitals, 'middle', 'alphabetic' for the first baseline, or 'bottom'.
tracking
0
Space added after each character but the last of a line, in em.
\n, \r\n and \r start lines. Text does not wrap to a width.
write returns the label’s layout, with its width, height and lines, valid until the set’s next write. Size a panel behind a label from it.
Use the same layout without drawing to measure text before writing it. typeset.create(capacity).set(font, text, options) returns the same layout. Once its arrays fit the longest text, it allocates no more. typeset reads only advances and kerning. Pass font.metrics(data) without a root to measure text in Node, a worker or before tgpu.init.
Validates JSON from typegpu-kit-bake-font and pairs it with atlas bytes. Throws with the
field name for invalid data or versions, or if the atlas size does not match.
@param ― json the JSON, as text or parsed
@param ― atlas the atlas's bytes, 4 a texel
@returns ― the bake, as create takes it; it throws, naming the field, on JSON of another shape or
version, and on an atlas of another size
Creates a typesetter that places at most capacity glyphs and measures text of any length. Text
sets use one for each label. Use it separately to measure text before drawing, such as when
sizing a panel behind a label. Throws unless capacity is an integer of at least 1.
@param ― capacity how many glyphs it places: a text set lays each label out into one of its length
@returns ― a typesetter whose set lays a string out into its arrays, growing them only for longer text
place converts a glyph corner to clip space using the label’s position and the corner offset. Choose one of four functions:
place
position
em is in
text.facing
A point in the world; the text faces the camera.
World units
text.flat
A point in the world; the text lies on the ground, read along +x.
World units
text.pinned
A point in the world; the text stays as large wherever it is.
Points
text.screen
Pixels from the drawn region’s top-left in x and y, depth in z.
Points
A point equals the passes.pixels’s pixelRatio pixels of the target the pass draws, giving consistent label sizes across screens and in low-resolution targets.
Screen positions use pixels. Multiply pointer-event offsets by the surface’s pixelRatio. Picker takes points and performs that multiplication itself.
facing, flat and pinned use the set’s camera or the camera injected by its pass description. screen needs no camera.
Write a custom place as a 'use gpu' function taking position, offset and a text.Placed. The latter contains label, the glyph index within the label as glyph, its pen and its em. To size in points, read the pixel dimensions and pixel ratio from passes.pixels.$. Both place and shade can read cameras.current.$. If a callback reads another module, fill that dependency, for example with place: tgpu.fn(wobble).pipe(noise.inject()).
To make a rising “+1” swell, read its scale from a buffer indexed by label. Multiply the offset to scale around the anchor:
Allocates memory on the GPU, allows passing data between host and shader.
Read-only on the GPU, optimized for large data. For a general-purpose buffer,
use
TgpuRoot.createBuffer
.
@param ― typeSchema The type of data that this buffer will hold.
@param ― initial Either initial value of the buffer, or an initializer to execute on the mapped buffer. (optional)
Creates labels drawn from a baked MSDF font atlas. The CPU lays out each string, and instanced
glyph quads place it in world or screen space. Throws unless capacity and length are
integers of at least 1.
@injects ― per-instance move, setLabel, setQuad, quadAt and erase, for kernels piped
with it
@owns ― 2 buffers, a sampler: the quads and the labels
@binds ― 3 storage, 1 uniform: the drawing, the quads, the labels and the font's glyphs, and
passes.pixels with text.screen or text.pinned
@binds ― 1 storage: move or setLabel, the labels
@binds ― 1 storage: setQuad, quadAt or erase, the quads
@records ― drawing, added to passes, after the passes that move the labels.
@param ― font the font it draws with, which it borrows
@param ― options.place a 'use gpu' function; it and shade carry the fills of what they read
beside the camera, such as tgpu.fn(lifted).pipe(scene.inject())
@returns ― a set of labels you destroy before its font
create(
constroot:TgpuRoot
root,
constsans:font.Font
sans,{
Options.camera?:cameras.CameraBase|undefined
Supplies the camera for facing, flat and pinned, unless the pass description injects
its own. Screen text needs no camera. Default none, which requires camera-dependent text to
use a description that injects a camera.
camera:
constview:cameras.OrbitCamera
view,
Options.capacity: number
Sets the number of labels to an integer of at least 1.
capacity:16,
Options.length: number
Limits glyphs drawn per label to an integer of at least 1. Spaces use no glyph slot; glyphs
beyond the limit are omitted.
length:4,
Options.place?:text.Place|undefined
Places glyph corners with facing, flat, pinned, screen or a custom function. Default
facing.
Lays out and uploads only the specified label. Use write(label, '') to empty it. Returns
the layout, valid until the next write. Throws for a label outside the set or an em value
that is not greater than 0.
write(3,'+1',{
Options.em: number
Sets positive units per em. World text uses world units. Text placed with screen or
pinned uses points, scaled by the text set pixelRatio.
em:14});
constscales:TgpuReadonly<d.WgslArray<d.F32>>
scales.
TgpuBufferBindingBase<WgslArray<F32>>.patch(data: number[]| Float32Array<ArrayBufferLike>| Record<number, number |undefined>|undefined): void
patch({3:1.6});
A kernel that moves the “+1” can write its scale too, through scales.buffer.as('mutable').
shade(fragment) returns premultiplied colour from a text.Fragment:
color and label give the label colour and index. glyph is the glyph index within the label, starting at 0.
local is the pixel position relative to the anchor, in em with y pointing up.
distance is the distance to the sharp glyph edge in screen pixels, positive inside. round measures distance to a rounded edge from the atlas’s fourth channel. The figure shows both.
reach limits both distances to half the pixel range scaled to the drawn glyph. With the shipped bake, it is pixels per em divided by 10.
An outline two pixels wide, narrower where the atlas doesn’t reach that far:
const
constoutlined:(fragment:text.Fragment)=>d.v4f
outlined=(
fragment:{
label: number;
glyph: number;
local:d.v2f;
color:d.v4f;
distance: number;
round: number;
reach: number;
}
fragment:
import text
text.
typeFragment={
label:number;
glyph:number;
local:d.v2f;
color:d.v4f;
distance:number;
round:number;
reach:number;
}
This schema describes a glyph fragment passed to shade.
Gives the maximum range of distance and round in screen pixels. It is half the font
distanceRange in texels, scaled to the drawn size. Values stop at -reach outside the
glyph, so an outline wider than reach fills the entire quad.
reach-0.5);
const
constfill:number
fill=
import std
std.
functionsaturate(value:number):number(+1overload)
export saturate
saturate(
fragment:{
label: number;
glyph: number;
local:d.v2f;
color:d.v4f;
distance: number;
round: number;
reach: number;
}
fragment.
distance: number
Gives signed distance to the glyph edge in screen pixels, positive inside. It uses the
median of the first three atlas channels.
distance+0.5);
const
constoutline:number
outline=
import std
std.
functionsaturate(value:number):number(+1overload)
export saturate
saturate(
fragment:{
label: number;
glyph: number;
local:d.v2f;
color:d.v4f;
distance: number;
round: number;
reach: number;
}
fragment.
round: number
Gives signed distance from the fourth atlas channel in screen pixels. It rounds corners and
extends up to reach, for outlines and glows.
Creates labels drawn from a baked MSDF font atlas. The CPU lays out each string, and instanced
glyph quads place it in world or screen space. Throws unless capacity and length are
integers of at least 1.
@injects ― per-instance move, setLabel, setQuad, quadAt and erase, for kernels piped
with it
@owns ― 2 buffers, a sampler: the quads and the labels
@binds ― 3 storage, 1 uniform: the drawing, the quads, the labels and the font's glyphs, and
passes.pixels with text.screen or text.pinned
@binds ― 1 storage: move or setLabel, the labels
@binds ― 1 storage: setQuad, quadAt or erase, the quads
@records ― drawing, added to passes, after the passes that move the labels.
@param ― font the font it draws with, which it borrows
@param ― options.place a 'use gpu' function; it and shade carry the fills of what they read
beside the camera, such as tgpu.fn(lifted).pipe(scene.inject())
@returns ― a set of labels you destroy before its font
create(
constroot:TgpuRoot
root,
constsans:font.Font
sans,{
Options.capacity: number
Sets the number of labels to an integer of at least 1.
capacity:1,
Options.length: number
Limits glyphs drawn per label to an integer of at least 1. Spaces use no glyph slot; glyphs
beyond the limit are omitted.
length:12,
Options.place?:text.Place|undefined
Places glyph corners with facing, flat, pinned, screen or a custom function. Default
facing.
place:
import text
text.
constscreen:(position:d.v3f,offset:d.v2f)=>d.v4f
Places text on screen with position in pixels from the top-left of the region the pass draws.
em uses points, the pass's passes.pixels pixels per point, to preserve label size across
pixel densities.
Returns premultiplied colour for a fragment. Default the label colour over the glyph with
one pixel of antialiasing at its edge.
shade:
constoutlined:(fragment:text.Fragment)=>d.v4f
outlined,
});
A full two-pixel outline needs 25 pixels per em with the shipped bake, or 12.5 points at 2×. Outlines or glows wider than reach fill the glyph quad. For example, round + 2.5 produces boxes below 25 pixels per em. Bake with a wider --pixel-range for wide effects on small text.
Use glyph and local to animate labels without rewriting quads. This typewriter effect fades glyphs below a rising count and applies a vertical gradient from the baseline:
const
consttyped:TgpuUniform<d.F32>
typed=
constroot:TgpuRoot
root.
TgpuRoot.createUniform<d.F32>(typeSchema: d.F32, initial?: number |((buffer:TgpuBuffer<NoInfer<d.F32>>)=>void)|undefined): TgpuUniform<d.F32>(+1 overload)
Allocates memory on the GPU, allows passing data between host and shader.
Read-only on the GPU, optimized for small data. For a general-purpose buffer,
use
TgpuRoot.createBuffer
.
@param ― typeSchema The type of data that this buffer will hold.
@param ― initial Either initial value of the buffer, or an initializer to execute on the mapped buffer. (optional)
createUniform(
import d
d.
constf32:d.F32
export f32
A schema that represents a 32-bit float value. (equivalent to f32 in WGSL)
Can also be called to cast a value to an f32.
@exampleconst value = f32(); // 0
@exampleconst value = f32(1.23); // 1.23
@exampleconst value = f32(true); // 1
f32);
const
constTOP:d.v3f
TOP=
import d
d.
constvec3f:d.Vec3f
(x:number,y:number,z:number)=>d.v3f(+5 overloads)
vec3f(1,0.85,0.4);
const
consttypewriter:(fragment:text.Fragment)=>d.v4f
typewriter=(
fragment:{
label: number;
glyph: number;
local:d.v2f;
color:d.v4f;
distance: number;
round: number;
reach: number;
}
fragment:
import text
text.
typeFragment={
label:number;
glyph:number;
local:d.v2f;
color:d.v4f;
distance:number;
round:number;
reach:number;
}
This schema describes a glyph fragment passed to shade.
Fragment)=>{
'use gpu';
const
constshown:number
shown=
import std
std.
functionsaturate(value:number):number(+1overload)
export saturate
saturate(
consttyped:TgpuUniform<d.F32>
typed.
TgpuUniform<F32>.$: number
$-
import d
d.
functionf32(v?:number|boolean):number
export f32
A schema that represents a 32-bit float value. (equivalent to f32 in WGSL)
Can also be called to cast a value to an f32.
@exampleconst value = f32(); // 0
@exampleconst value = f32(1.23); // 1.23
@exampleconst value = f32(true); // 1
f32(
fragment:{
label: number;
glyph: number;
local:d.v2f;
color:d.v4f;
distance: number;
round: number;
reach: number;
}
fragment.
glyph: number
Gives the zero-based glyph index within the label. Spaces use no index.
Creates labels drawn from a baked MSDF font atlas. The CPU lays out each string, and instanced
glyph quads place it in world or screen space. Throws unless capacity and length are
integers of at least 1.
@injects ― per-instance move, setLabel, setQuad, quadAt and erase, for kernels piped
with it
@owns ― 2 buffers, a sampler: the quads and the labels
@binds ― 3 storage, 1 uniform: the drawing, the quads, the labels and the font's glyphs, and
passes.pixels with text.screen or text.pinned
@binds ― 1 storage: move or setLabel, the labels
@binds ― 1 storage: setQuad, quadAt or erase, the quads
@records ― drawing, added to passes, after the passes that move the labels.
@param ― font the font it draws with, which it borrows
@param ― options.place a 'use gpu' function; it and shade carry the fills of what they read
beside the camera, such as tgpu.fn(lifted).pipe(scene.inject())
@returns ― a set of labels you destroy before its font
create(
constroot:TgpuRoot
root,
constsans:font.Font
sans,{
Options.camera?:cameras.CameraBase|undefined
Supplies the camera for facing, flat and pinned, unless the pass description injects
its own. Screen text needs no camera. Default none, which requires camera-dependent text to
use a description that injects a camera.
camera:
constview:cameras.OrbitCamera
view,
Options.capacity: number
Sets the number of labels to an integer of at least 1.
capacity:1,
Options.length: number
Limits glyphs drawn per label to an integer of at least 1. Spaces use no glyph slot; glyphs
beyond the limit are omitted.
length:48,
Options.place?:text.Place|undefined
Places glyph corners with facing, flat, pinned, screen or a custom function. Default
facing.
place:
import text
text.
constscreen:(position:d.v3f,offset:d.v2f)=>d.v4f
Places text on screen with position in pixels from the top-left of the region the pass draws.
em uses points, the pass's passes.pixels pixels per point, to preserve label size across
pixel densities.
Lays out and uploads only the specified label. Use write(label, '') to empty it. Returns
the layout, valid until the next write. Throws for a label outside the set or an em value
that is not greater than 0.
write(0,'The tide is coming in.',{
Options.em: number
Sets positive units per em. World text uses world units. Text placed with screen or
pinned uses points, scaled by the text set pixelRatio.
em:20,
Options.align?:"left"|"center"|"right"|undefined
Sets the anchor position along each line. Default center.
Text blends over the scene. Use blend: 'add' for glowing text, or blend: 'translucent' to draw into a description’s translucency targets in any order with other translucent drawings. It tests depth without writing it, so draw it after the scene. See Passes for target outputs.
typeset supports Latin text from left to right, with one glyph per character, advances and pair kerning. It does not support ligatures or contextual forms, which the bake disables. It also omits right-to-left and bidirectional text, scripts requiring shaping such as Arabic and Indic scripts, Chinese and Japanese character sets, width-based wrapping, ellipses, line spacing, hyphenation, tabs and fallback fonts.
For these capabilities on the web, use Glyph’s layout engine alongside this package.
The atlas uses raw RGBA bytes. In react-native-webgpu 0.17.0, createImageBitmap premultiplies alpha while decoding, corrupting distances where the fourth channel is below 1.
Serve the atlas compressed. Inter’s atlas is 617 KB, or 191 KB with gzip.
Label size belongs to layout; label rows have no scale field. Read a separate scale in a custom place, as in the swelling “+1” example.