feat: Add @typegpu/three package and Three.js integration example

apps/typegpu-docs/package.json

@@ -24,6 +24,8 @@
     "@tailwindcss/vite": "^4.1.6",
     "@typegpu/color": "workspace:*",
     "@typegpu/noise": "workspace:*",
+    "@typegpu/three": "workspace:*",
+    "three": "^0.178.0",
     "@types/dom-mediacapture-transform": "^0.1.9",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
@@ -59,6 +61,7 @@
     "@types/babel__template": "^7.4.4",
     "@types/babel__traverse": "^7.20.7",
     "@types/node": "^24.0.3",
+    "@types/three": "catalog:types",
     "@webgpu/types": "catalog:types",
     "astro-vtbot": "^2.0.6",
     "autoprefixer": "^10.4.21",

apps/typegpu-docs/src/content/examples/rendering/three-simple/index.html

@@ -0,0 +1 @@
+<canvas></canvas>

apps/typegpu-docs/src/content/examples/rendering/three-simple/index.ts

@@ -0,0 +1,57 @@
+import tgpu from 'typegpu';
+import * as THREE from 'three/webgpu';
+import * as t from '@typegpu/three';
+import * as d from 'typegpu/data';
+import { uv } from 'three/tsl';
+
+const canvas = document.querySelector('canvas') as HTMLCanvasElement;
+
+const tgpuMaterial = new t.TypeGPUMaterial(
+  tgpu.fn([d.vec2f], d.vec4f)((uv) => {
+    return d.vec4f(uv.x, uv.y, 0.5, 1);
+  }),
+  [uv()],
+);
+
+const renderer = new THREE.WebGPURenderer({ canvas });
+await renderer.init();
+
+renderer.setPixelRatio(window.devicePixelRatio);
+renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
+
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(
+  75,
+  window.innerWidth / window.innerHeight,
+  0.1,
+  1000,
+);
+camera.position.z = 5;
+
+const mesh = new THREE.Mesh(
+  new THREE.BoxGeometry(1, 1, 1),
+  tgpuMaterial,
+);
+scene.add(mesh);
+
+const resizeObserver = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    const width = entry.contentRect.width;
+    const height = entry.contentRect.height;
+    renderer.setSize(width, height, false);
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+  }
+});
+resizeObserver.observe(canvas);
+
+renderer.setAnimationLoop(() => {
+  mesh.rotation.x += 0.01;
+  mesh.rotation.y += 0.01;
+  renderer.render(scene, camera);
+});
+
+export function onCleanup() {
+  renderer.dispose();
+  resizeObserver.disconnect();
+}

apps/typegpu-docs/src/content/examples/rendering/three-simple/meta.json

@@ -0,0 +1,5 @@
+{
+  "title": "Three.js",
+  "category": "rendering",
+  "tags": ["experimental"]
+}

packages/typegpu-three/README.md

@@ -0,0 +1,9 @@
+<div align="center">
+
+# @typegpu/three
+
+🚧 **Under Construction** 🚧
+
+</div>
+
+A helper library for using TypeGPU with Three.js.

packages/typegpu-three/build.config.ts

@@ -0,0 +1,12 @@
+import { type BuildConfig, defineBuildConfig } from 'unbuild';
+import typegpu from 'unplugin-typegpu/rollup';
+
+const Config: BuildConfig[] = defineBuildConfig({
+  hooks: {
+    'rollup:options': (_options, config) => {
+      config.plugins.push(typegpu({ include: [/\.ts$/] }));
+    },
+  },
+});
+
+export default Config;

packages/typegpu-three/deno.json

@@ -0,0 +1,7 @@
+{
+  "exclude": ["."],
+  "fmt": {
+    "exclude": ["!."],
+    "singleQuote": true
+  }
+}

packages/typegpu-three/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@typegpu/three",
+  "type": "module",
+  "version": "0.0.0",
+  "description": "Utilities for integrating TypeGPU with Three.js",
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "directory": "dist",
+    "linkDirectory": false,
+    "main": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "exports": {
+      "./package.json": "./dist/package.json",
+      ".": {
+        "types": "./dist/index.d.ts",
+        "module": "./dist/index.mjs",
+        "import": "./dist/index.mjs",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "unbuild",
+    "test:types": "pnpm tsc --p ./tsconfig.json --noEmit",
+    "prepublishOnly": "tgpu-dev-cli prepack"
+  },
+  "keywords": [],
+  "license": "MIT",
+  "peerDependencies": {
+    "typegpu": "^0.5.9",
+    "three": ">0.126.0"
+  },
+  "devDependencies": {
+    "@typegpu/tgpu-dev-cli": "workspace:*",
+    "@webgpu/types": "catalog:types",
+    "@types/three": "catalog:types",
+    "typegpu": "workspace:*",
+    "typescript": "catalog:types",
+    "unbuild": "catalog:build",
+    "unplugin-typegpu": "workspace:*"
+  }
+}

packages/typegpu-three/src/index.ts

@@ -0,0 +1 @@
+export * from './tgpuThree.ts';

packages/typegpu-three/src/tgpuThree.ts

@@ -0,0 +1,105 @@
+import * as THREE from 'three/webgpu';
+import tgpu, { type TgpuFn } from 'typegpu';
+
+class FragmentNode extends THREE.CodeNode {
+  private tgslFn: TgpuFn;
+  private functionName: string | null | undefined;
+  private threeVars: THREE.TSL.ShaderNodeObject<THREE.Node>[] | undefined;
+  private argNames: string[] | undefined;
+
+  constructor(
+    tgslFn: TgpuFn,
+    threeRequirements?: THREE.TSL.ShaderNodeObject<THREE.Node>[] | undefined,
+  ) {
+    const resolved = tgpu.resolve({
+      template: '___ID___ fnName',
+      externals: { fnName: tgslFn },
+    });
+    const [code, functionName] = resolved.split('___ID___').map((s) =>
+      s.trim()
+    );
+    let counter = 0;
+    const args = tgslFn.shell.argTypes.map((type) =>
+      `TGPUArg${counter++}_${type.type}`
+    );
+    const threeArgs = threeRequirements
+      ? threeRequirements.map((node, i) => node.toVar(args[i]))
+      : [];
+
+    super(code, [...threeArgs], 'wgsl');
+
+    this.functionName = functionName;
+    this.threeVars = threeArgs;
+    this.argNames = args;
+    this.tgslFn = tgslFn;
+  }
+
+  static get type() {
+    return 'FunctionNode';
+  }
+
+  getNodeType(builder: THREE.NodeBuilder) {
+    return this.getNodeFunction(builder).type;
+  }
+
+  getInputs(builder: THREE.NodeBuilder) {
+    return this.getNodeFunction(builder).inputs;
+  }
+
+  getNodeFunction(builder: THREE.NodeBuilder) {
+    const nodeData = builder.getDataFromNode(this);
+
+    // @ts-expect-error <- Three.js types suck
+    let nodeFunction = nodeData.nodeFunction;
+
+    if (nodeFunction === undefined) {
+      nodeFunction = builder.parser.parseFunction(this.code);
+      // @ts-expect-error <- Three.js types suck
+      nodeData.nodeFunction = nodeFunction;
+    }
+
+    return nodeFunction;
+  }
+
+  generate(
+    builder: THREE.NodeBuilder,
+    output: string | null | undefined,
+  ): string | null | undefined {
+    super.generate(builder);
+
+    const nodeFunction = this.getNodeFunction(builder);
+
+    const name = nodeFunction.name;
+    const type = nodeFunction.type;
+
+    const nodeCode = builder.getCodeFromNode(this, type);
+
+    if (name !== '') {
+      // @ts-expect-error <- Three.js types suck
+      nodeCode.name = name;
+    }
+
+    // @ts-expect-error <- Three.js types suck
+    const propertyName = builder.getPropertyName(nodeCode, 'fragment');
+
+    const code = this.getNodeFunction(builder).getCode(propertyName);
+    // @ts-expect-error <- Three.js types suck
+    nodeCode.code = `${code}\n`;
+
+    if (output === 'property') {
+      return this.functionName;
+    }
+    return `${this.functionName}(${this.argNames?.join(', ')})`;
+  }
+}
+
+export class TypeGPUMaterial extends THREE.NodeMaterial {
+  constructor(
+    fragmentFn: TgpuFn,
+    threeRequirements?: THREE.TSL.ShaderNodeObject<THREE.Node>[] | undefined,
+  ) {
+    super();
+
+    this.fragmentNode = new FragmentNode(fragmentFn, threeRequirements);
+  }
+}

packages/typegpu-three/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}