@typegpu/kitbaker

Baker

Bake a 'use gpu' function of a texel's position into a texture, in your encoder or compute pass.

kit.baker

module

baker.create(root, texture, { texel }) → Baker

rootborrows: the root
texturetakes: a float texture with storage usage, or render usage
Bakerreturns: a baker the garbage collector frees with the texture

types: Baker

Optionscreate · 1 field

texel

(uv: d.v2f, layer: number) => d.v4f

Returns the texel at uv, from 0 to 1 across the texture from its top-left corner, at texel centres, and of array layer layer, as a 'use gpu' function.

records

recordcompute

record before what reads the texture, each time what texel reads changes.

owns

a pipeline ·0 or 1 bind groups

The kernel or the draw that writes the texels, and the storage view a kernel writes them through.

lifecycle: initAsync()destroy()(none)[Symbol.dispose](none)
used by: Domino run Ember mirror Jelly world Slime mould

Tap a texel, or use the arrow keys, to see the uv its function receives. uvruns from 0 to 1 across the texture from its top-left corner, and lands on the texel's centre, so no texel reads an edge.

Some textures are a function of position: a sunset behind the dominoes, food that a slime mould smells, a slider’s distance field, the shadows props cast on a floor. Computing such a function in every shader that reads it costs too much, so you bake it into a texture when its inputs change. baker.create takes the function and the texture, and writes every texel in your frame.

import { 
import d
d, 
import std
std } from 'typegpu';
import { 
import baker
baker } from '@typegpu/kit';

const 
const rings: TgpuTexture<{
    size: [256, 256];
    format: "rgba16float";
}> & StorageFlag & SampledFlag
rings = 
const root: TgpuRoot
root
  .
TgpuRoot.createTexture<number, number, number, [256, 256], "rgba16float", number, number, GPUTextureFormat[], GPUTextureDimension>(props: CreateTextureOptions<[256, 256], "rgba16float", number, number, GPUTextureFormat[], GPUTextureDimension>): TgpuTexture<{
    size: [256, 256];
    format: "rgba16float";
}>
createTexture({ 
size: [256, 256]
The width, height, and depth or layer count of the texture.
size: [256, 256], 
format: "rgba16float"
The format of the texture.
format: 'rgba16float' })
  .
TgpuTexture<{ size: [256, 256]; format: "rgba16float"; }>.$usage<["storage", "sampled"]>(usages_0: "storage", usages_1: "sampled"): TgpuTexture<{
    size: [256, 256];
    format: "rgba16float";
}> & StorageFlag & SampledFlag
$usage('storage', 'sampled');
const 
const sun: TgpuUniform<d.Vec2f>
sun = 
const root: TgpuRoot
root.
TgpuRoot.createUniform<d.Vec2f>(typeSchema: d.Vec2f, initial?: ((buffer: TgpuBuffer<NoInfer<d.Vec2f>>) => void) | d.InferInput<NoInfer<d.Vec2f>> | undefined): TgpuUniform<d.Vec2f> (+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.
const vec2f: d.Vec2f
vec2f, 
import d
d.
const vec2f: d.Vec2f
(xy: number) => d.v2f (+3 overloads)
vec2f(0.5));

const 
const baking: baker.Baker
baking = 
import baker
baker.
function create(root: TgpuRoot, texture: TgpuTexture, options: baker.Options): baker.Baker
Creates what writes texel into the first mip level of a texture, every array layer of it.
@owns ― a pipeline, 0 or 1 bind groups: the kernel or the draw that writes the texels, and the
storage view a kernel writes them through
@records ― record before what reads the texture, each time what texel reads changes
@param ― texture a float texture with storage usage, or render usage
@returns ― a baker the garbage collector frees with the texture
create(
const root: TgpuRoot
root, 
const rings: TgpuTexture<{
    size: [256, 256];
    format: "rgba16float";
}> & StorageFlag & SampledFlag
rings, {
  
Options.texel: (uv: d.v2f, layer: number) => d.v4f
Returns the texel at uv, from 0 to 1 across the texture from its top-left corner, at texel
centres, and of array layer layer, as a 'use gpu' function.
texel: (
uv: d.v2f
uv) => {
    'use gpu';
    const 
const distance: number
distance = 
import std
std.
length<d.v2f>(value: d.v2f): number (+1 overload)
export length
length(
uv: d.v2f
uv - 
const sun: TgpuUniform<d.Vec2f>
sun.
TgpuUniform<Vec2f>.$: d.v2f
$);
    return 
import d
d.
const vec4f: d.Vec4f
(x: number, y: number, z: number, w: number) => d.v4f (+9 overloads)
vec4f(
const distance: number
distance, 
import std
std.
function fract(value: number): number (+1 overload)
export fract
fract(
const distance: number
distance * 8), 0, 1);
  },
});

import frames
frames.
function create(root: TgpuRoot, record: Recorder): frames.Frames
Records a frame into one encoder and submits once, with a clock. Borrows the root. The
synchronous recorder borrows each frame's encoder.
@submits ― always once a frame after your recorder returns, and again at each frame.submit()
@param ― record your frame, recorded into each frame's encoder
@returns ― a loop you run with each frame's time and destroy
create(
const root: TgpuRoot
root, (
frame: frames.Frame
frame) => {
  
const baking: baker.Baker
baking.
Baker.record(target: TgpuCommandEncoder | TgpuComputePass): void
Records the texels. A texture with storage usage fills in a compute pass, the pass given or
one of its own on the encoder. Another fills in a render pass per array layer on the encoder.
record(
frame: frames.Frame
frame.
Frame.encoder: TgpuCommandEncoder
Records commands for submission after the recorder returns. submit() replaces this encoder.
Read it at each call instead of keeping it, and let the frame submit it.
encoder); // after `sun` moves
});

texel receives uv from 0 to 1 across the texture from its top-left corner, at the centre of the texel it returns, and the array layer.
It can read buffers, uniforms and textures, and carry fills with pipe, as the jelly world’s floor reads its props: tgpu.fn(cast).pipe(world.inject()).
record writes the first mip level. Record mipmaps after it for the smaller ones.

A texture with storage usage fills in a compute pass, the one you give or one of its own on the encoder. A texture without it, such as an rgba8unorm-srgb one that no kernel can write, fills in a render pass per array layer, so record takes the encoder.

Limits

The texture holds floats, and texel returns a vec4f; a format with fewer channels keeps the first ones.