Making Triangles Fly

### Install TypeGPU with yarn Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/getting-started.mdx Install the TypeGPU package using yarn. This is the first step to begin using the library. ```sh yarn add typegpu ``` -------------------------------- ### Install @typegpu/react Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/ecosystem/typegpu-react/index.mdx Install the @typegpu/react package using your preferred package manager. ```sh npm install @typegpu/react ``` ```sh pnpm add @typegpu/react ``` ```sh yarn add @typegpu/react ``` -------------------------------- ### Install TypeGPU and WebGPU Types Source: https://context7.com/software-mansion/typegpu/llms.txt Install the core TypeGPU package and the necessary WebGPU type declarations for TypeScript. ```bash npm install typegpu npm install --save-dev @webgpu/types ``` -------------------------------- ### Install TypeGPU with npm Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/getting-started.mdx Install the TypeGPU package using npm. This is the first step to begin using the library. ```sh npm install typegpu ``` -------------------------------- ### Install TypeGPU with pnpm Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/getting-started.mdx Install the TypeGPU package using pnpm. This is the first step to begin using the library. ```sh pnpm add typegpu ``` -------------------------------- ### TypeGPU Lint Plugin Examples Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/blog/typegpu-0.11/index.mdx These examples demonstrate how the TypeGPU lint plugin catches common errors in WGSL code. Ensure 'use gpu' is present and refer to the plugin documentation for setup and rules. ```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 } ``` ```typescript 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; } ``` ```typescript 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 and WebGPU Code Examples Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/tutorials/triangle-to-boids/index.mdx Provides complete code examples for both TypeGPU and WebGPU implementations, allowing for direct comparison and usage. ```ts import step5typegpu from 'code/step5-typegpu.ts?raw'; import step5webgpu from 'code/step5-webgpu.ts?raw';

Show code


  
    
      Show code


```

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

### Pipeline Creation Examples

Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/apis/pipelines.mdx

Demonstrates the creation of render and compute pipelines using TypeGPU's root object methods.

```APIDOC
## Pipeline Creation

A pipeline can be defined with one of the following methods on the [root](/TypeGPU/apis/roots) object:
- `createRenderPipeline`
- `createComputePipeline`
- `createGuardedComputePipeline`

```ts twoslash
import tgpu, { d } from 'typegpu';

const root = await tgpu.init();

const presentationFormat = 'rgba8unorm';

const mainVertex = tgpu.vertexFn({
  in: { vertexIndex: d.builtin.vertexIndex },
  out: { pos: d.builtin.position },
})((input) => {
  const pos = [d.vec2f(-1, -1), d.vec2f(3, -1), d.vec2f(-1, 3)];

  return {
    pos: d.vec4f(pos[input.vertexIndex], 0, 1),
  };
});

const mainFragment = tgpu.fragmentFn({ out: d.vec4f })(() => d.vec4f(1, 0, 0, 1));

const mainCompute = tgpu.computeFn({ workgroupSize: [1] })(() => {});

// ---cut---
const renderPipeline = root.createRenderPipeline({
  vertex: mainVertex,
  fragment: mainFragment,
  targets: { format: presentationFormat },
});

const computePipeline1 = root.createComputePipeline({
  compute: mainCompute,
});

const computePipeline2 = root.createGuardedComputePipeline((x, y, z) => {
  'use gpu';
  // ...
});
```
```

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

### WebGPU Playground Example

Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/tutorials/triangle-to-boids/index.mdx

A complete WebGPU code example for rendering triangles with gradients, ready to be tested in the playground.

```typescript
import step4webgpu from 'code/step4-webgpu.ts?raw';


```

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

### Run Local Development Server

Source: https://github.com/software-mansion/typegpu/blob/main/CONTRIBUTING.md

Start a local development server for the docs/examples/benchmarking app. This command is useful for previewing changes during development.

```bash
pnpm dev
```

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

### TypeGPU Playground Example

Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/tutorials/triangle-to-boids/index.mdx

A complete TypeGPU code example for rendering triangles with gradients, ready to be tested in the playground.

```typescript
import step4typegpu from 'code/step4-typegpu.ts?raw';


```

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

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

Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/ecosystem/typegpu-three/index.mdx

Use this command to install the necessary packages for integrating TypeGPU with Three.js using npm.

```sh
npm install three @typegpu/three
```

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

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

Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/ecosystem/typegpu-three/index.mdx

Use this command to install the necessary packages for integrating TypeGPU with Three.js using pnpm.

```sh
pnpm add three @typegpu/three
```

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

### Install wesl-ext-typegpu with npm

Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/integration/wesl-interoperability.mdx

Install the TypeGPU extension for WESL using npm. This package extends the capabilities of wesl-plugin.

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

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

### Install unplugin-typegpu

Source: https://github.com/software-mansion/typegpu/blob/main/packages/unplugin-typegpu/README.md

Install the unplugin-typegpu package using npm.

```sh
npm install unplugin-typegpu
```

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

### Initialize a Root with Default Requirements

Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/apis/roots.mdx

Use `tgpu.init` to create a root, requesting a GPU device with default requirements. This is the primary way to start using TypeGPU.

```ts
import tgpu from 'typegpu';

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

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

### Install wesl-ext-typegpu with pnpm

Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/integration/wesl-interoperability.mdx

Install the TypeGPU extension for WESL using pnpm. This package extends the capabilities of wesl-plugin.

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

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

### Install and Configure unplugin-typegpu for Shaders

Source: https://context7.com/software-mansion/typegpu/llms.txt

Install the unplugin-typegpu build plugin for Vite to process 'use gpu' directives and generate WGSL.

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

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

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

Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/ecosystem/typegpu-three/index.mdx

Use this command to install the necessary packages for integrating TypeGPU with Three.js using yarn.

```sh
yarn add three @typegpu/three
```

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

### Install wesl-ext-typegpu with yarn

Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/integration/wesl-interoperability.mdx

Install the TypeGPU extension for WESL using yarn. This package extends the capabilities of wesl-plugin.

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

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

### Install and Run tgpu-gen Globally

Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/tooling/tgpu-gen.mdx

Install the tgpu-gen package globally using npm and then run the command with the path to your WGSL shader file.

```bash
npm install -g tgpu-gen
tgpu-gen path/to/shader.wgsl
```

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

### Accessor Creation Examples

Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/apis/accessors.mdx

Demonstrates different ways to create accessors, highlighting the preferred method for flexibility. The `tgpu.accessor(schema)` is recommended for reusable functions.

```typescript
import tgpu, { type TgpuUniform, d } from 'typegpu';
// ---cut---
// 👎 only works with JS literals
const staticColorSlot = tgpu.slot();

// 👎 requires a uniform binding that only carries that value
const uniformColorSlot = tgpu.slot>();

// 👎 requires the value to be returned from a function
const getColorSlot = tgpu.slot<() => d.v3f>();

// 💜 works with any value that matches the schema
const colorAccess = tgpu.accessor(d.vec3f);
```

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

### Initialize TypeGPU and Canvas Context

Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/tutorials/triangle-to-boids/index.mdx

Sets up the TypeGPU root, accesses the HTML canvas, and configures the WebGPU canvas context. This is a common setup for rendering applications.

```typescript
import tgpu from 'typegpu';

// Create the root
const root = await tgpu.init();

// Access the HTML canvas
const canvas = document.getElementById('canvas');
const context = canvas.getContext('webgpu') as GPUCanvasContext;

// Configure the canvas context
const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
context.configure({
  device: root.device,
  format: presentationFormat,
  alphaMode: 'premultiplied',
});
```

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

### Complete TypeGPU React Shader Example

Source: https://github.com/software-mansion/typegpu/blob/main/apps/typegpu-docs/src/content/docs/ecosystem/typegpu-react/index.mdx

A full example integrating `useRoot`, `useUniform`, `useMemo`, and `useFrame` to create a dynamic, animated shader effect within a React component.

```tsx
import React from 'react';
// ---cut---
import { useMemo } from 'react';
import { d, common } from 'typegpu';
import { useConfigureContext, useFrame, useRoot, useUniform } from '@typegpu/react';

function MyEffect() {
  const root = 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],
  );

  const { ref, ctxRef } = useConfigureContext();
  useFrame(({ elapsedSeconds }) => {
    if (!ctxRef.current) return;

    time.write(elapsedSeconds);

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

  return