TypeGPU

https://docs.swmansion.com/TypeGPU
Admin
TypeGPU is a TypeScript library that enhances the WebGPU API with type-safe, declarative resource...
Tokens:442,483
Snippets:4,002
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Complete TypeGPU React Example Setup

Source: https://docs.swmansion.com/TypeGPU/ecosystem/typegpu-react

This snippet shows the complete setup for a TypeGPU effect in React, including necessary imports and hook initializations.

```jsx
import { 
useMemo } from 'react';
import { 
d, 
common } from 'typegpu';
import { 
useConfigureContext, 
useFrame, 
useRoot, 
useUniform } from '@typegpu/react';
function
MyEffect() {
const 
root: TgpuRoot
 = 
useRoot();
const 
time = useUniform(d.f32);


const renderPipeline = useMemo(
  () =>
    root.createRenderPipeline({
    vertex: common.fullScreenTriangle,
      fragment: ({ uv }) => {
        'use gpu';
        return d.vec4f((uv * 5 + time.$) % 1, 0, 1);
      },
    }),
  [root, time],
);

useFrame(({ elapsedSeconds }) => {
  if (!ctxRef.current) return;


  time.write(elapsedSeconds);


  renderPipeline.withColorAttachment({ view: ctxRef.current }).draw(3);
});

const { ref, ctxRef } = useConfigureContext();


  return <canvas ref={ref} className="absolute inset-0" />;
}

```

--------------------------------

### Install TypeGPU Globally

Source: https://docs.swmansion.com/TypeGPU/getting-started

Run this command to install TypeGPU globally for immediate use. This is the quickest way to get started.

```bash
npx typegpu@latest
```

--------------------------------

### React Canvas Setup with TypeGPU

Source: https://docs.swmansion.com/TypeGPU/ecosystem/typegpu-react

This example shows how to set up a canvas element in React and use TypeGPU to draw on it. It involves creating a ref for the canvas and passing it to the TypeGPU pipeline.

```typescript
const ctxRef: React.RefObject<CanvasContext | null>;

// ...

return <canvas ref={ctxRef} className="absolute inset-0" />;
```

--------------------------------

### Install Three.js and @typegpu/three

Source: https://docs.swmansion.com/TypeGPU/ecosystem/typegpu-three

Install the necessary packages using npm, pnpm, or yarn.

```bash
npm install three @typegpu/three
```

```bash
pnpm add three @typegpu/three
```

```bash
yarn add three @typegpu/three
```

--------------------------------

### Install @typegpu/react with npm

Source: https://docs.swmansion.com/TypeGPU/ecosystem/typegpu-react

Install the @typegpu/react package using npm.

```bash
npm install @typegpu/react
```

--------------------------------

### Initialize and Configure Dynamic Cache

Source: https://docs.swmansion.com/TypeGPU/ecosystem/typegpu-noise

Demonstrates how to get the dynamic cache configuration and create a bind group layout for it. This setup is necessary before instantiating the cache itself.

```typescript
const perlinCacheConfig = perlin3d.dynamicCacheConfig();
// Contains all resources that the perlin cache needs access to
const dynamicLayout = tgpu.bindGroupLayout({ ...perlinCacheConfig.layout });
```

```typescript
const root = await tgpu.init();
// Instantiating the cache with an initial size.
const perlinCache = perlinCacheConfig.instance(root, d.vec3u(10, 10, 1));
```

--------------------------------

### Install @typegpu/react with pnpm

Source: https://docs.swmansion.com/TypeGPU/ecosystem/typegpu-react

Install the @typegpu/react package using pnpm.

```bash
pnpm add @typegpu/react
```

--------------------------------

### Install @typegpu/react with yarn

Source: https://docs.swmansion.com/TypeGPU/ecosystem/typegpu-react

Install the @typegpu/react package using yarn.

```bash
yarn add @typegpu/react
```

--------------------------------

### Install wesl-ext-typegpu with npm

Source: https://docs.swmansion.com/TypeGPU/integration/wesl-interoperability

Install the wesl-ext-typegpu package as a development dependency using npm.

```bash
npm add --save-dev wesl-ext-typegpu

```

--------------------------------

### Install wesl-ext-typegpu with pnpm

Source: https://docs.swmansion.com/TypeGPU/integration/wesl-interoperability

Install the wesl-ext-typegpu package as a development dependency using pnpm.

```bash
pnpm add -D wesl-ext-typegpu

```

--------------------------------

### Install TypeGPU Skill

Source: https://docs.swmansion.com/TypeGPU/tooling/ai-tools

Install the official TypeGPU Skill for AI agents to get guidance on TypeGPU schemas, functions, shaders, and more. This command can be run directly.

```bash
npx skills add software-mansion-labs/skills -s typegpu
```

--------------------------------

### Create Texture Example

Source: https://docs.swmansion.com/TypeGPU/apis/textures

Example of creating a texture with specified size and format.

```typescript
const texture: TgpuTexture<{
    size: [256, 256];
    format: "rgba8unorm";
}> & SampledFlag
```

```typescript
const root: TgpuRoot
```

```typescript
root.createTexture<number, number, number, [256, 256], "rgba8unorm", number, number, GPUTextureFormat[], GPUTextureDimension>({
    size: [256, 256],
    format: 'rgba8unorm',
}).$usage('sampled');
```

--------------------------------

### Install wesl-ext-typegpu with yarn

Source: https://docs.swmansion.com/TypeGPU/integration/wesl-interoperability

Install the wesl-ext-typegpu package as a development dependency using yarn.

```bash
yarn add -D wesl-ext-typegpu

```

--------------------------------

### Indexed Drawing Setup

Source: https://docs.swmansion.com/TypeGPU/apis/pipelines

Demonstrates the setup for indexed drawing using an index buffer to define primitives from vertex data.

```typescript
const indexBuffer: TgpuBuffer<d.WgslArray<d.U16>> & IndexFlag
indexBuffer = 
root
.createBuffer<d.WgslArray<d.U16>>(d.arrayOf<d.U16>(d.u16, 6), [0, 2, 1, 0, 3, 2])
.withIndexType('uint16');
```

--------------------------------

### Instantiate Custom Console

Source: https://docs.swmansion.com/TypeGPU/fundamentals/your-first-gpu-program

Example of creating a custom `Console` instance with specific output and error streams.

```javascript
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);
```

--------------------------------

### Install eslint-plugin-typegpu with pnpm

Source: https://docs.swmansion.com/TypeGPU/tooling/eslint-plugin-typegpu

Install the plugin as a development dependency using pnpm.

```bash
pnpm add -D eslint-plugin-typegpu
```

--------------------------------

### Install unplugin-typegpu with npm

Source: https://docs.swmansion.com/TypeGPU/tooling/unplugin-typegpu

Install the unplugin-typegpu package as a development dependency using npm.

```bash
npm install --save-dev unplugin-typegpu

```

--------------------------------

### Install eslint-plugin-typegpu with npm

Source: https://docs.swmansion.com/TypeGPU/tooling/eslint-plugin-typegpu

Install the plugin as a development dependency using npm.

```bash
npm add -D eslint-plugin-typegpu
```

--------------------------------

### Install unplugin-typegpu with pnpm

Source: https://docs.swmansion.com/TypeGPU/tooling/unplugin-typegpu

Install the unplugin-typegpu package as a development dependency using pnpm.

```bash
pnpm add -D unplugin-typegpu

```

--------------------------------

### Install TypeGPU with npm

Source: https://docs.swmansion.com/TypeGPU/getting-started

Use npm to install TypeGPU in your project. This is a standard method for managing project dependencies.

```bash
npm install typegpu
```

--------------------------------

### Install TypeGPU Packages for React Native

Source: https://docs.swmansion.com/TypeGPU/integration/react-native

Install the necessary TypeGPU and React Native WebGPU packages using npm.

```bash
npm i react-native-webgpu typegpu @typegpu/react
npm i --save-dev unplugin-typegpu @webgpu/types
```

--------------------------------

### Install eslint-plugin-typegpu with yarn

Source: https://docs.swmansion.com/TypeGPU/tooling/eslint-plugin-typegpu

Install the plugin as a development dependency using yarn.

```bash
yarn add -D eslint-plugin-typegpu
```

--------------------------------

### Install unplugin-typegpu with yarn

Source: https://docs.swmansion.com/TypeGPU/tooling/unplugin-typegpu

Install the unplugin-typegpu package as a development dependency using yarn.

```bash
yarn add -D unplugin-typegpu

```

--------------------------------

### Global Console Log Example

Source: https://docs.swmansion.com/TypeGPU/apis/resolve

Demonstrates using the global console.log() for basic output and formatted strings to stdout.

```javascript
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
```

--------------------------------

### TypeGPU Lint Plugin Examples

Source: https://docs.swmansion.com/TypeGPU/blog/tags/release-notes

Examples demonstrating common errors caught by the TypeGPU ESLint/Oxlint plugin. These include attempting to mutate WGSL parameters and incorrect schema wrapping.

```typescript
import tgpu, { d } from 'typegpu';


function increment(n: number) {
  'use gpu';
  return n++;
  //     ^^^
  // Cannot assign to 'n' since WGSL parameters are immutable.
  // If you're using d.ref, please either use '.$' or disable this rule
}


function createBoid() {
  'use gpu';
  const boid = { pos: d.vec2f(), size: 1 };
  //           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  // { pos: d.vec2f(), size: 1 } must be wrapped in a schema call
  return boid;
}


function clampTo0(n: number) {
  'use gpu';
  let result;
  //  ^^^^^^^^
  // 'result' must have an initial value
  if (n < 0) {
    result = 0;
  } else {
    result = n;
  }
  return result;
}
```

--------------------------------

### TypeGPU Lint Plugin Examples

Source: https://docs.swmansion.com/TypeGPU/blog/typegpu-011

Examples demonstrating common errors caught by the TypeGPU lint plugin. These include attempting to mutate immutable WGSL parameters and uninitialized variables.

```typescript
import tgpu, { d } from 'typegpu';


function increment(n: number) {
  'use gpu';
  return n++;
  //     ^^^^
  // Cannot assign to 'n' since WGSL parameters are immutable.
  // If you're using d.ref, please either use '.$' or disable this rule
}


function createBoid() {
  'use gpu';
  const boid = { pos: d.vec2f(), size: 1 };
  //           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  // { pos: d.vec2f(), size: 1 } must be wrapped in a schema call
  return boid;
}


function clampTo0(n: number) {
  'use gpu';
  let result;
  //  ^^^^^^
  // 'result' must have an initial value
  if (n < 0) {
    result = 0;
  } else {
    result = n;
  }
  return result;
}
```

--------------------------------

### Install tgpu-gen Globally

Source: https://docs.swmansion.com/TypeGPU/tooling/tgpu-gen

Install the tgpu-gen tool globally using npm for command-line access. This allows you to run the tool from any directory.

```bash
npm install -g tgpu-gen
```

--------------------------------

### TypeGPU Imports and Setup

Source: https://docs.swmansion.com/TypeGPU/ecosystem/typegpu-sdf

Imports necessary modules from TypeGPU and related libraries for SDF operations.

```typescript
import d from 'typegpu';
import * as sdf from '@typegpu/sdf';

const sceneSdf: TgpuFn<(p: d.Vec2f) => d.F32>
sceneSdf = 
fn<[d.Vec2f], d.F32>([
  d.vec2f
], 
  d.f32)(( 
    p: d.v2f
  ) => {
'use gpu';
  const 
disk = 
    sdf.sdDisk(
      p - 
        d.vec2f(0.18, 0), 0.22);
  const 
box = 
    sdf.sdRoundedBox2d(
      p - 
        d.vec2f(0, 0.18),
      d.vec2f(0.22, 0.22),
      0.1
    );
  return Math.min(disk, box);
});
```

--------------------------------

### Install TypeGPU with pnpm

Source: https://docs.swmansion.com/TypeGPU/getting-started

Use pnpm to add TypeGPU to your project. pnpm is known for its efficient package management.

```bash
pnpm add typegpu
```

--------------------------------

### Install WebGPU Types with npm

Source: https://docs.swmansion.com/TypeGPU/getting-started

Install the @webgpu/types package using npm to add TypeScript support for WebGPU APIs. This is necessary as TypeScript does not include these types by default.

```bash
npm install --save-dev @webgpu/types
```

--------------------------------

### Simple Uniform Buffer Example

Source: https://docs.swmansion.com/TypeGPU/apis/bind-groups

A basic example of defining a uniform buffer resource for a 32-bit float in a bind group layout. The corresponding WGSL statement is also shown.

```typescript
const fooLayout = tgpu.bindGroupLayout({
  luckyNumber: { uniform: d.f32 },
  // ...
});
```

```wgsl
@group(...) @binding(0) var<uniform> luckyNumber: f32;
// ...
```

--------------------------------

### Hello World Triangle Example in React Native

Source: https://docs.swmansion.com/TypeGPU/integration/react-native

A simple React Native component that renders a blue triangle using TypeGPU and react-native-webgpu. This example demonstrates basic pipeline creation and rendering.

```javascript
import { useMemo } from 'react';
import { Canvas } from 'react-native-webgpu';
import tgpu, { d } from 'typegpu';
import { useRoot, useFrame, useConfigureContext } from '@typegpu/react';


const positions = tgpu.const(d.arrayOf(d.vec2f), [
  d.vec2f(0.0, 0.5),
  d.vec2f(-0.5, -0.5),
  d.vec2f(0.5, -0.5),
]);


export function Triangle() {
  const root = useRoot();


  const pipeline = useMemo(() => {
    return root.createRenderPipeline({
      vertex: ({ $vertexIndex: vid }) => {
        'use gpu';
        return {
          $position: d.vec4f(positions.$[vid], 0, 1),
        };
      },
      fragment: () => {
        'use gpu';
        return d.vec4f(0.114, 0.447, 0.941, 1);
      },
    });
  }, []);


  const { ref, ctxRef } = useConfigureContext({ alphaMode: 'premultiplied' });


  useFrame(() => {
    const ctx = ctxRef.current;
    if (!ctx) return;


    pipeline.withColorAttachment({ view: ctx }).draw(3);


    // A react-native-webgpu requirement for flushing the rendered effect
    ctx.present?.();
  });


  return <Canvas ref={ref} style={{ aspectRatio: 1 }} transparent />;
}
```

--------------------------------

### Initialize TypeGPU Project with AI Skills

Source: https://docs.swmansion.com/TypeGPU/tooling/ai-tools

Use the TypeGPU project starter to set up a new project and enable AI skills. This command can be run interactively or non-interactively.

```bash
npx typegpu@latest --enhance --yes
```

--------------------------------

### Create a New TypeGPU Project (bunx)

Source: https://docs.swmansion.com/TypeGPU/tooling/typegpu-cli

Use this command to start a new TypeGPU project with bunx. The CLI will prompt for project name and template selection.

```bash
bunx typegpu@latest
```

--------------------------------

### Initializing TypeGPU Root

Source: https://docs.swmansion.com/TypeGPU/fundamentals/compute-shaders

Demonstrates how to initialize the TypeGPU root, either with default options or custom adapter and device descriptors.

```APIDOC
## tgpu.init()

### Description
Requests a new GPU device and creates a root around it. If a specific device should be used instead, use `initFromDevice`.

### Method
`init(options?: InitOptions): Promise<TgpuRoot>`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Default initialization
const root = await tgpu.init();

// Initialization with custom options
const adapterOptions: GPURequestAdapterOptions = ...;
const deviceDescriptor: GPUDeviceDescriptor = ...;
const root = await tgpu.init({ adapter: adapterOptions, device: deviceDescriptor });
```

### Response
#### Success Response (200)
- **root** (TgpuRoot) - The initialized TypeGPU root object.

#### Response Example
```json
{
  "example": "// root object is returned"
}
```
```

--------------------------------

### InitFromDeviceOptions

Source: https://docs.swmansion.com/TypeGPU/api/typegpu/type-aliases/initfromdeviceoptions

Configuration options for initializing a TypeGPU device.

```APIDOC
## InitFromDeviceOptions

### Description
Options passed into initFromDevice.

### Properties

#### device
- **device** (`GPUDevice`) - Required - The GPU device to use for TypeGPU operations.

#### shaderGenerator?
- **shaderGenerator** (`ShaderGenerator`) - Optional - A custom shader code generator. If not provided, the default WGSL generator will be used.

#### unstable_logOptions?
- **unstable_logOptions** (`LogGeneratorOptions`) - Optional - Options for logging.

#### unstable_names?
- **unstable_names** (`"random"` | `"strict"`) - Optional - Specifies the naming strategy. Defaults to 'random'.

### Default Value for unstable_names
'random'
```

--------------------------------

### Write a slice of data to a buffer with offset

Source: https://docs.swmansion.com/TypeGPU/apis/buffers

Writes a contiguous slice of data into a buffer starting at a specified byte offset. Use d.memoryLayoutOf to get the correct byte offset.

```typescript
const schema: d.WgslArray<d.U32>
const buffer: TgpuBuffer<d.WgslArray<d.U32>>
buffer = root.createBuffer(schema, [0, 1, 2, 0, 0, 0]);
const layout: PrimitiveOffsetInfo
layout = d.memoryLayoutOf(schema, (proxy: number[]) => proxy[3]);
```

--------------------------------

### slice()

Source: https://docs.swmansion.com/TypeGPU/api/typegpu/data/interfaces/v2b

Returns a copy of a section of an array. For both start and end, a negative index can be used to indicate an offset from the end of the array. For example, -2 refers to the second to last element of the array.

```APIDOC
## slice(start?, end?)

### Description
Returns a copy of a section of an array. For both start and end, a negative index can be used to indicate an offset from the end of the array. For example, -2 refers to the second to last element of the array.

### Parameters
#### start?
`number`
The beginning index of the specified portion of the array. If start is undefined, then the slice begins at index 0.
#### end?
`number`
The end index of the specified portion of the array. This is exclusive of the element at the index ‘end’. If end is undefined, then the slice extends to the end of the array.

### Returns
`boolean`[]
```

--------------------------------

### Initializing TypeGPU Root with Custom Options

Source: https://docs.swmansion.com/TypeGPU/apis/utils

Demonstrates initializing the TypeGPU root object with custom adapter and device descriptors for specific GPU configurations.

```typescript
const adapterOptions: GPURequestAdapterOptions = ...;
const deviceDescriptor: GPUDeviceDescriptor = ...;
const root = await tgpu.init({ adapter: adapterOptions, device: deviceDescriptor });
```

--------------------------------

### Get Target Shader Language in JavaScript

Source: https://docs.swmansion.com/TypeGPU/api/typegpu/std/variables/gettargetshaderlanguage

Demonstrates how to use getTargetShaderLanguage within a JavaScript function. This example shows that when called outside of a 'gpu' context or during simulation, it returns undefined, hence the comparison evaluates to false.

```javascript
const f = () => {
  'use gpu';
  return getTargetShaderLanguage() === 'wgsl';
};

f(); // returns false, but resolved WGSL looks like this:

fn f() -> bool {
  return true;
}
```

--------------------------------

### Create a New TypeGPU Project (pnpm dlx)

Source: https://docs.swmansion.com/TypeGPU/tooling/typegpu-cli

Use this command to start a new TypeGPU project with pnpm dlx. The CLI will prompt for project name and template selection.

```bash
pnpm dlx typegpu@latest
```

--------------------------------

### Array toSpliced() with start and deleteCount

Source: https://docs.swmansion.com/TypeGPU/api/typegpu/data/interfaces/v2f

Copies an array and removes a specified number of elements starting from 'start'. Returns the remaining elements in the copied array.

```typescript
toSpliced(start: number, deleteCount?: number): number[]
```

--------------------------------

### Create a New TypeGPU Project Non-interactively (npx)

Source: https://docs.swmansion.com/TypeGPU/tooling/typegpu-cli

Use the --yes flag with npx to skip prompts and use default settings for project creation. This automatically installs dependencies and the TypeGPU AI skill.

```bash
npx typegpu@latest my-app --yes
```

--------------------------------

### Array toSpliced() with start, deleteCount, and items

Source: https://docs.swmansion.com/TypeGPU/api/typegpu/data/interfaces/v2f

Copies an array, removes elements starting from 'start', and inserts new 'items'. Returns the modified copy.

```typescript
toSpliced(start: number, deleteCount: number, ...items: number[]): number[]
```

--------------------------------

### tgpu.initFromDevice

Source: https://docs.swmansion.com/TypeGPU/apis/roots

Initializes a root using an existing GPU device.

```APIDOC
## tgpu.initFromDevice

### Description
If you already have a device that you want to use, you can pass it into `tgpu.initFromDevice` instead.

### Method
`initFromDevice: (device: GPUDevice, options?: InitOptions) => Promise<TgpuRoot>`

### Parameters
#### Path Parameters
- **device** (GPUDevice) - Required - The existing GPU device to use.

#### Query Parameters
- **options** (InitOptions) - Optional - Additional options for initialization.
  - **adapter** (GPURequestAdapterOptions) - Optional - Criteria used to select the adapter.
  - **device** (GPUDeviceDescriptor) - Optional - Description of the desired GPU device.

### Request Example
```javascript
const adapter = await (navigator.gpu as NavigatorGPU).requestAdapter();
const device = await adapter?.requestDevice();
const root = await tgpu.initFromDevice(device);
```

### Response
#### Success Response
- **root** (TgpuRoot) - The created root object.
```

--------------------------------

### Initialize TypeGPU Root from Existing Device

Source: https://docs.swmansion.com/TypeGPU/apis/roots

If you already have a device that you want to use, you can pass it into `tgpu.initFromDevice` instead.

```typescript
import 

const tgpu: {
    const: typeof import("node_modules/typegpu/src/core/constant/tgpuConstant").constant;
    fn: typeof import("node_modules/typegpu/src/core/function/tgpuFn").fn;
    comptime: typeof import("node_modules/typegpu/src/core/function/comptime").comptime;
    resolve: typeof import("node_modules/typegpu/src/core/resolve/tgpuResolve").resolve;
    resolveWithContext: typeof import("node_modules/typegpu/src/core/resolve/tgpuResolve").resolveWithContext;
    init: typeof import("node_modules/typegpu/src/core/root/init").init;
    initFromDevice: typeof import("node_modules/typegpu/src/core/root/init").initFromDevice;
    slot: typeof import("node_modules/typegpu/src/core/slot/slot").slot;
    lazy: typeof import("node_modules/typegpu/src/core/slot/lazy").lazy;
    ... 10 more ...;
    '~unstable': typeof import("node_modules/typegpu/src/tgpuUnstable");
}

```

`
@module ― typegpu
tgpu from 'typegpu';
const 
`
```

const adapter: GPUAdapter | null

```

`
adapter = await 
`
```

var navigator: Navigator

```

`
The **`Window.navigator`**read-only property returns a reference to the Navigator object, which has methods and properties about the application running the script.
MDN Reference
navigator.
`
```

NavigatorGPU.gpu: GPU

```

`
Available only in secure contexts.
MDN Reference
A global singleton providing top-level entry points like
GPU#requestAdapter
.
gpu.
`
```

GPU.requestAdapter(options?: GPURequestAdapterOptions): Promise<GPUAdapter | null> (+1 overload)

```

`
Requests an adapter from the user agent. The user agent chooses whether to return an adapter, and, if so, chooses according to the provided options.
@param ― options - Criteria used to select the adapter.
requestAdapter();
const 
`
```

const device: GPUDevice

```

`
device = await 
`
```

const adapter: GPUAdapter | null

```

`
adapter?. 
`
```

--------------------------------

### Create a New TypeGPU Project (yarn dlx)

Source: https://docs.swmansion.com/TypeGPU/tooling/typegpu-cli

Use this command to start a new TypeGPU project with yarn dlx. The CLI will prompt for project name and template selection.

```bash
yarn dlx typegpu@latest
```

--------------------------------

### Initialize TypeGPU

Source: https://docs.swmansion.com/TypeGPU/integration/webgpu-interoperability

Initialize TypeGPU with default settings or by providing an existing WebGPU device.

```typescript
import tgpu, { d } from 'typegpu';


const root = await tgpu.init();
// ...or pass in an existing WebGPU device
const root = tgpu.initFromDevice({ device });
```

--------------------------------

### Create a New TypeGPU Project with Specific Template and Addons (npx)

Source: https://docs.swmansion.com/TypeGPU/tooling/typegpu-cli

Specify the template and addons non-interactively using npx. This command creates a project named 'my-app' with the 'vite-react' template and adds '@typegpu/sdf' and '@typegpu/noise' addons.

```bash
npx typegpu@latest my-app --yes --template vite-react --addons @typegpu/sdf,@typegpu/noise
```

--------------------------------

### tgpu.init

Source: https://docs.swmansion.com/TypeGPU/apis/roots

Requests a new GPU device and creates a root around it. If a specific device should be used instead, use `initFromDevice`.

```APIDOC
## tgpu.init

### Description
Requests a new GPU device and creates a root around it. If a specific device should be used instead, use `initFromDevice`.

### Method
`init: (options?: InitOptions) => Promise<TgpuRoot>`

### Parameters
#### Options
- **adapter** (GPURequestAdapterOptions) - Optional - Criteria used to select the adapter.
- **device** (GPUDeviceDescriptor) - Optional - Description of the desired GPU device.

### Request Example
```javascript
// When given no options, the function will ask the browser for a suitable GPU device.
const root = await tgpu.init();

// If there are specific options that should be used when requesting a device, you can pass those in.
const adapterOptions: GPURequestAdapterOptions = ...;
const deviceDescriptor: GPUDeviceDescriptor = ...;
const root = await tgpu.init({ adapter: adapterOptions, device: deviceDescriptor });
```

### Response
#### Success Response
- **root** (TgpuRoot) - The created root object.
```

--------------------------------

### Console Class Log Example

Source: https://docs.swmansion.com/TypeGPU/apis/resolve

Demonstrates creating a Console instance and using its log method to write to specified streams.

```javascript
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);


myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
```

--------------------------------

### TypeGPU Function Resolution Example

Source: https://docs.swmansion.com/TypeGPU/apis/utils

Example of resolving a function definition within TypeGPU.

```typescript
const foo: TgpuFn<() => d.F32>

resolve([
foo]);
// fn foo() -> f32 {
// return (EXISTING_GLOBAL * 22f);
// }
```

--------------------------------

### Initialize TypeGPU Root from Existing Device

Source: https://docs.swmansion.com/TypeGPU/apis/roots

Use this method when you already have a GPUDevice object and want to initialize TypeGPU with it. This avoids the need for TypeGPU to request a new device.

```typescript
const device: GPUDevice = ...;
const root = tgpu.initFromDevice({ device });
```

--------------------------------

### Basic SDF Calculation Example 2

Source: https://docs.swmansion.com/TypeGPU/ecosystem/typegpu-sdf

An example of a basic SDF calculation involving vector addition and a constant 'e'.

```typescript
const e: 0.002

e, 0, 0)),

```

--------------------------------

### Basic SDF Calculation Example 1

Source: https://docs.swmansion.com/TypeGPU/ecosystem/typegpu-sdf

An example of a basic SDF calculation involving vector subtraction and a constant 'e'.

```typescript
const e: 0.002

e, 0, 0)) - 

```

--------------------------------

### Enhance an Existing Project (bunx)

Source: https://docs.swmansion.com/TypeGPU/tooling/typegpu-cli

Run the CLI with the --enhance flag from the root of an existing project to add TypeGPU dependencies and setup. This command uses bunx.

```bash
bunx typegpu@latest --enhance
```

--------------------------------

### Creating a Render Pipeline

Source: https://docs.swmansion.com/TypeGPU/apis/functions

Demonstrates how to create a render pipeline with specified vertex and fragment functions.

```APIDOC
## Create Render Pipeline

### Description
Creates a new render pipeline with specified vertex and fragment shaders, and color targets.

### Method
`WithBinding.createRenderPipeline`

### Parameters
#### Vertex Shader
- `vertex` (TgpuVertexFn | Function) - The vertex shader function or definition.

#### Fragment Shader
- `fragment` (TgpuFragmentFn | Function) - The fragment shader function or definition.

#### Targets
- `targets` (TgpuColorTargetState) - Optional. Defines the color targets for the pipeline.

### Request Example
```typescript
const pipeline = WithBinding.createRenderPipeline({
    vertex: mainVertex,
    fragment: mainFragment,
    targets: [
        // target configuration
    ]
});
```
```

--------------------------------

### tgpu.initFromDevice

Source: https://docs.swmansion.com/TypeGPU/apis/roots

Creates a root from a given GPUDevice. This is an alternative to requesting a new device, allowing the use of a pre-existing device.

```APIDOC
## tgpu.initFromDevice

### Description
Creates a root from the given device, instead of requesting it.

### Method
`initFromDevice`

### Parameters
#### Options
- **device** (GPUDevice) - Required - The GPUDevice to initialize the root from.

### Request Example
```javascript
const device = ...; // Obtain a GPUDevice
const root = tgpu.initFromDevice({ device });
```

### Response
Returns a `TgpuRoot` object.

#### Success Response
- **root** (TgpuRoot) - The initialized root object.

#### Response Example
```json
{
  "root": "TgpuRoot object"
}
```
```

--------------------------------

### Install WebGPU Types with pnpm

Source: https://docs.swmansion.com/TypeGPU/getting-started

Install the @webgpu/types package using pnpm. This ensures your TypeScript project can recognize WebGPU types.

```bash
pnpm add -D @webgpu/types
```

--------------------------------

### Install TypeGPU with yarn

Source: https://docs.swmansion.com/TypeGPU/getting-started

Use yarn to install TypeGPU in your project. yarn is another popular package manager for Node.js projects.

```bash
yarn add typegpu
```

--------------------------------

### TypeGPU Vec4f Usage Examples

Source: https://docs.swmansion.com/TypeGPU/apis/utils

Demonstrates creating `Vec4f` instances with different initial values and using `Vec4f` to initialize a buffer.

```typescript
Schema representing vec4f - a vector with 4 elements of type f32. Also a constructor function for this vector value.
@example const vector = d.vec4f(); // (0.0, 0.0, 0.0, 0.0) const vector = d.vec4f(1); // (1.0, 1.0, 1.0, 1.0) const vector = d.vec4f(1, 2, 3, 4.5); // (1.0, 2.0, 3.0, 4.5)
@example const buffer = root.createBuffer(d.vec4f, d.vec4f(0, 1, 2, 3)); // buffer holding a d.vec4f value, with an initial value of vec4f(0, 1, 2, 3);
vec4f,
```

--------------------------------

### Basic SDF Calculation Example 4

Source: https://docs.swmansion.com/TypeGPU/ecosystem/typegpu-sdf

An example of a basic SDF calculation involving vector addition, with specific component values.

```typescript
const e: 0.002

e, 0)),

```

--------------------------------

### Console Class Usage

Source: https://docs.swmansion.com/TypeGPU/apis/resolve

Illustrates how to create and use a Console instance with custom output streams for logging.

```APIDOC
## Console Class Usage

### Description
This section demonstrates how to use the `Console` class to create a console instance with specific output streams (`stdout` and `stderr`). This allows for more control over where log messages are directed.

### Method
`new console.Console(out: WritableStream, err: WritableStream)`
`consoleInstance.log(message?: any, ...optionalParams: any[]): void`
`consoleInstance.error(error?: Error, ...optionalParams: any[]): void`
`consoleInstance.warn(message?: any, ...optionalParams: any[]): void`

### Endpoint
N/A (Class instantiation)

### Parameters
- `out` (WritableStream): The stream to write log messages to.
- `err` (WritableStream): The stream to write error messages to.
- `message` (any): The primary message to log.
- `optionalParams` (any[]): Additional parameters for substitution values, formatted using `util.format()`.

### Request Example
```javascript
const out = getStreamSomehow(); // Assume this returns a writable stream
const err = getStreamSomehow(); // Assume this returns a writable stream
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
```

### Response
N/A (Output to streams)
```

--------------------------------

### Basic SDF Calculation Example 3

Source: https://docs.swmansion.com/TypeGPU/ecosystem/typegpu-sdf

An example of a basic SDF calculation involving vector subtraction, with specific component values.

```typescript
const e: 0.002

e, 0)) - 

```

--------------------------------

### Initialize TypeGPU Root

Source: https://docs.swmansion.com/TypeGPU/apis/roots

Requests a new GPU device and creates a root around it. If a specific device should be used instead, use `initFromDevice`.

```typescript
const root = await tgpu.init();
```

```typescript
const adapterOptions: GPURequestAdapterOptions = ...;
const deviceDescriptor: GPUDeviceDescriptor = ...;
const root = await tgpu.init({ adapter: adapterOptions, device: deviceDescriptor });
```

--------------------------------

### InferPatch Examples

Source: https://docs.swmansion.com/TypeGPU/api/typegpu/data/type-aliases/inferpatch

Demonstrates how InferPatch transforms different types into their patch representations. It shows examples for primitive types, structs, and arrays.

```typescript
type A = InferPatch<F32> // => number | undefined
type B = InferPatch<WgslStruct<{ a: F32 }>> // => { a?: number | undefined }
type C = InferPatch<WgslArray<F32>> // => Record<number, number | undefined> | number[] | undefined
```

--------------------------------

### Basic SDF Calculation Example 6

Source: https://docs.swmansion.com/TypeGPU/ecosystem/typegpu-sdf

An example of a basic SDF calculation involving vector addition, with zero for the first two components.

```typescript
const e: 0.002

e)),

```

--------------------------------

### Basic SDF Calculation Example 5

Source: https://docs.swmansion.com/TypeGPU/ecosystem/typegpu-sdf

An example of a basic SDF calculation involving vector subtraction, with zero for the first two components.

```typescript
const e: 0.002

e)) - 

```

--------------------------------

### Enhance an Existing Project (npx)

Source: https://docs.swmansion.com/TypeGPU/tooling/typegpu-cli

Run the CLI with the --enhance flag from the root of an existing project to add TypeGPU dependencies and setup. This command uses npx.

```bash
npx typegpu@latest --enhance
```

--------------------------------

### Get Reversed Copy of Array

Source: https://docs.swmansion.com/TypeGPU/api/typegpu/data/interfaces/v2u

Use toReversed to get a new array with the elements in reverse order. The original array remains unchanged.

```typescript
array.toReversed()
```

--------------------------------

### Get String Representation of Array

Source: https://docs.swmansion.com/TypeGPU/api/typegpu/data/interfaces/v2i

Use toString to get a comma-separated string representation of an array's elements. This method is inherited from Tuple2.

```typescript
array.toString()
```

--------------------------------

### Creating a Render Pipeline

Source: https://docs.swmansion.com/TypeGPU/fundamentals/vertices-and-fragments

Define a render pipeline with vertex and fragment shaders. This example shows how to set up the primitive state, vertex function, and fragment function for rendering.

```javascript
TgpuRenderPipeline<in Targets = never>.DescriptorBase.primitive?: TgpuPrimitiveState
```

```javascript
primitive: { 
topology: "triangle-list"
},
vertex: TgpuVertexFn<Record<string, any>, TgpuVertexFn.Out> | ((input: AutoVertexIn<InferGPURecord<AttribRecordToDefaultDataTypes<{
    [x: string]: any;
}>>>) => AutoVertexOut<{
    $position: d.v4f;
}>)
```

--------------------------------

### Initialize TypeGPU Root

Source: https://docs.swmansion.com/TypeGPU/ecosystem/typegpu-radiance-cascades

Requests a new GPU device and creates a root around it. If a specific device should be used instead, use `initFromDevice`. When given no options, the function will ask the browser for a suitable GPU device.

```typescript
import * as tgpu from 'typegpu';

// Requests a new GPU device and creates a root around it.
const root = await tgpu.init();
```

```typescript
import * as tgpu from 'typegpu';

// If there are specific options that should be used when requesting a device, you can pass those in.
const adapterOptions: GPURequestAdapterOptions = {};
const deviceDescriptor: GPUDeviceDescriptor = {};
const root = await tgpu.init({ adapter: adapterOptions, device: deviceDescriptor });
```

--------------------------------

### Install WebGPU Types with yarn

Source: https://docs.swmansion.com/TypeGPU/getting-started

Install the @webgpu/types package using yarn. This step is crucial for TypeScript to properly handle WebGPU related types.

```bash
yarn add -D @webgpu/types
```

--------------------------------

### Mutable Storage Buffer Example

Source: https://docs.swmansion.com/TypeGPU/apis/bind-groups

Example of defining a mutable storage buffer for a 32-bit float. The corresponding WGSL statement for read-write access is provided.

```typescript
const fooLayout = tgpu.bindGroupLayout({
  counter: { storage: d.f32, access: 'mutable' },
  // ...
});
```

```wgsl
@group(...) @binding(0) var<storage, read_write> counter: f32;
// ...
```

--------------------------------

### Initializing Root Pipeline with Noise Library

Source: https://docs.swmansion.com/TypeGPU/apis/pipelines

Set up the root pipeline using asynchronous operations and integrate with the `@typegpu/noise` library for generating random data, such as using `randf` for floating-point samples.

```typescript
import {
randf } from '@typegpu/noise';
```

```typescript
root = await 
```

--------------------------------

### Initialize TypeGPU

Source: https://docs.swmansion.com/TypeGPU/fundamentals/vertices-and-fragments

Initializes the TypeGPU environment. This is a prerequisite for most TypeGPU operations.

```typescript
import tgpu, { d } from 'typegpu';


const root = await tgpu.init();
```

--------------------------------

### Array toSpliced() without items

Source: https://docs.swmansion.com/TypeGPU/api/typegpu/data/interfaces/v3h

Copies an array and removes elements starting from 'start' index for 'deleteCount' elements. Returns the remaining elements in the copied array.

```typescript
arr.toSpliced(start, deleteCount)
```

--------------------------------

### Array toSpliced() with items

Source: https://docs.swmansion.com/TypeGPU/api/typegpu/data/interfaces/v3h

Copies an array, removes elements starting from 'start' index for 'deleteCount' elements, and inserts new 'items'. Returns the modified copy.

```typescript
arr.toSpliced(start, deleteCount, ...items)
```

--------------------------------

### Index Buffer Creation

Source: https://docs.swmansion.com/TypeGPU/apis/buffers

Demonstrates how to create an index buffer using TypeGPU. It shows the type definition, the creation process, and how to specify the usage as an index buffer.

```APIDOC
## Index Buffer Creation

### Description
This operation creates an index buffer on the GPU. Index buffers store sequences of indices (u16 or u32) that dictate the order in which vertices are processed, which is efficient for rendering shared geometry.

### Method
`createBuffer` (from `TgpuRoot`)

### Parameters
#### Type Schema
- **typeSchema** (`d.WgslArray<d.U16>` or `d.WgslArray<d.U32>`) - Required - The schema defining the array of indices.
#### Initial Data
- **initial** (`((buffer: TgpuBuffer<NoInfer<d.WgslArray<d.U16>>>) => void) | d.InferInput<NoInfer<d.WgslArray<d.U16>>> | undefined`) - Optional - Initial data for the buffer or an initializer function.

### Usage
- The created buffer can be further configured with usage flags, such as `IndexFlag`.

### Example
```typescript
import * as d from "@d/index"

// Define the root object (assuming it's already initialized)
const root: TgpuRoot;

// Create an index buffer with u16 indices and initial data
const indexBuffer: TgpuBuffer<d.WgslArray<d.U16>> & IndexFlag = root
  .createBuffer<d.WgslArray<d.U16>>(d.arrayOf(d.u16, 6), [0, 2, 1, 0, 3, 2])
  .$usage<["index"]>(["index"]);
```

### Response
- Returns a `TgpuBuffer` with `IndexFlag` indicating it's configured as an index buffer.
```

--------------------------------

### Buffer Initialization with vec4f

Source: https://docs.swmansion.com/TypeGPU/api/typegpu/data/variables/vec4f

Demonstrates how to create a buffer that holds a vec4f value and initialize it with a specific vec4f.

```APIDOC
## Method: createBuffer (with vec4f)

### Description
Creates a buffer that stores a `vec4f` value and initializes it with the provided `vec4f` instance.

### Parameters
- `type` (DataType) - Required - The data type for the buffer, which must be `d.vec4f` in this case.
- `initialValue` (vec4f) - Required - The initial `vec4f` value to store in the buffer.

### Example
```typescript
// Assuming 'root' is an object with a createBuffer method and 'd' is the data type module
const initialVec = d.vec4f(0, 1, 2, 3);
const buffer = root.createBuffer(d.vec4f, initialVec); 
// 'buffer' now holds the vec4f value (0.0, 1.0, 2.0, 3.0)
```
```

--------------------------------

### Splice Array - Remove Elements

Source: https://docs.swmansion.com/TypeGPU/api/typegpu/data/interfaces/v2b

Removes elements from an array starting at a specified index. Returns an array of the deleted elements. If deleteCount is omitted, all elements from start to the end of the array are removed.

```typescript
array.splice(start, deleteCount)
```

--------------------------------

### View tgpu-gen Help Options

Source: https://docs.swmansion.com/TypeGPU/tooling/tgpu-gen

Run this command to see a quick overview of the generator's arguments and options. The -h flag is a shorthand for --help.

```bash
tgpu-gen --help
```

--------------------------------

### Get TypeGPU root in React component

Source: https://docs.swmansion.com/TypeGPU/ecosystem/typegpu-react

Use the `useRoot` hook to get a reference to the TypeGPU root. This hook suspends if the root is not yet initialized and throws an error if initialization fails (e.g., no WebGPU support).

```typescript
import { useRoot } from '@typegpu/react';

function MyEffect() {
  const root = useRoot();
  // the rest of our code will be here
}
```
Tokens:
Raw