Cleanup

Author: iwoplaza

apps/typegpu-docs/src/examples/threejs/compute-cloth/index.ts

@@ -4,7 +4,7 @@
 
 import * as d from 'typegpu/data';
 import * as THREE from 'three/webgpu';
-import { fromTSL, toTSL, uv } from '@typegpu/three';
+import { access, fromTSL, toTSL } from '@typegpu/three';
 import * as std from 'typegpu/std';
 
 import * as TSL from 'three/tsl';
@@ -248,7 +248,8 @@ function setupClothMesh(): THREE.Mesh {
 
   clothMaterial.colorNode = toTSL(() => {
     'use gpu';
-    const pattern = checkerBoard(uv().$.mul(5));
+    const uv = access.uv().$;
+    const pattern = checkerBoard(uv.mul(5));
     return std.mix(d.vec4f(0.4, 0.3, 0.3, 1), d.vec4f(1, 0.5, 0.4, 1), pattern);
   });
 

apps/typegpu-docs/src/examples/threejs/compute-cloth/verlet.ts

@@ -1,6 +1,6 @@
-import * as THREE from 'three/webgpu';
+import { access, fromTSL, toTSL, type TSLAccessor } from '@typegpu/three';
 import * as TSL from 'three/tsl';
-import { fromTSL, toTSL, type TSLAccessor } from '@typegpu/three';
+import * as THREE from 'three/webgpu';
 import * as d from 'typegpu/data';
 import * as std from 'typegpu/std';
 import { triNoise3D } from './triNoise.ts';
@@ -29,6 +29,11 @@ interface VerletSimulationOptions {
   spherePositionUniform: TSLAccessor<d.Vec3f, THREE.UniformNode<THREE.Vector3>>;
 }
 
+type TSLStorageAccessor<T extends d.AnyWgslData> = TSLAccessor<
+  T,
+  THREE.StorageBufferNode
+>;
+
 export class VerletSimulation {
   readonly vertices: Vertex[];
   readonly springs: Spring[];
@@ -38,42 +43,22 @@ export class VerletSimulation {
   readonly windUniform: TSLAccessor<d.F32, THREE.UniformNode<number>>;
   readonly dampeningUniform: TSLAccessor<d.F32, THREE.UniformNode<number>>;
 
-  readonly vertexPositionBuffer: TSLAccessor<
-    d.WgslArray<d.Vec3f>,
-    THREE.StorageBufferNode
-  >;
-  readonly vertexForceBuffer: TSLAccessor<
-    d.WgslArray<d.Vec3f>,
-    THREE.StorageBufferNode
-  >;
-  readonly vertexParamsBuffer: TSLAccessor<
-    d.WgslArray<d.Vec3u>,
-    THREE.StorageBufferNode
-  >;
-  readonly springListBuffer: TSLAccessor<
-    d.WgslArray<d.U32>,
-    THREE.StorageBufferNode
-  >;
-  readonly springVertexIdBuffer: TSLAccessor<
-    d.WgslArray<d.Vec2u>,
-    THREE.StorageBufferNode
-  >;
-  readonly springRestLengthBuffer: TSLAccessor<
-    d.WgslArray<d.F32>,
-    THREE.StorageBufferNode
-  >;
-  readonly springForceBuffer: TSLAccessor<
-    d.WgslArray<d.Vec3f>,
-    THREE.StorageBufferNode
-  >;
+  readonly vertexPositionBuffer: TSLStorageAccessor<d.WgslArray<d.Vec3f>>;
+  readonly vertexForceBuffer: TSLStorageAccessor<d.WgslArray<d.Vec3f>>;
+  readonly vertexParamsBuffer: TSLStorageAccessor<d.WgslArray<d.Vec3u>>;
+  readonly springListBuffer: TSLStorageAccessor<d.WgslArray<d.U32>>;
+  readonly springVertexIdBuffer: TSLStorageAccessor<d.WgslArray<d.Vec2u>>;
+  readonly springRestLengthBuffer: TSLStorageAccessor<d.WgslArray<d.F32>>;
+  readonly springForceBuffer: TSLStorageAccessor<d.WgslArray<d.Vec3f>>;
 
   readonly computeSpringForces: TSL.ShaderNodeObject<THREE.ComputeNode>;
   readonly computeVertexForces: TSL.ShaderNodeObject<THREE.ComputeNode>;
 
-  constructor(
-    { sphereRadius, sphereUniform, spherePositionUniform }:
-      VerletSimulationOptions,
-  ) {
+  constructor({
+    sphereRadius,
+    sphereUniform,
+    spherePositionUniform,
+  }: VerletSimulationOptions) {
     this.vertices = [];
     this.springs = [];
     this.vertexColumns = [];
@@ -120,7 +105,7 @@ export class VerletSimulation {
       for (let y = 0; y <= clothNumSegmentsY; y++) {
         const posX = x * (clothWidth / clothNumSegmentsX) - clothWidth * 0.5;
         const posZ = y * (clothHeight / clothNumSegmentsY);
-        const isFixed = (y === 0) && ((x % 5) === 0); // make some of the top vertices' positions fixed
+        const isFixed = y === 0 && x % 5 === 0; // make some of the top vertices' positions fixed
         const vertex = addVerletVertex(posX, clothHeight * 0.5, posZ, isFixed);
         column.push(vertex);
       }
@@ -229,32 +214,31 @@ export class VerletSimulation {
     // This sets up the compute shaders for the verlet simulation
     // There are two shaders that are executed for each simulation step
 
-    const instanceIndex = fromTSL(TSL.instanceIndex, { type: d.u32 });
-
     // 1. computeSpringForces:
     // This shader computes a force for each spring, depending on the distance between the two vertices connected by that spring and the targeted rest length
 
     this.computeSpringForces = toTSL(() => {
       'use gpu';
 
-      if (instanceIndex.$ >= springCount) {
+      const idx = access.instanceIndex.$;
+      if (idx >= springCount) {
         // compute Shaders are executed in groups of 64, so instanceIndex might be bigger than the amount of springs.
         // in that case, return.
         return;
       }
 
-      const vertexId = this.springVertexIdBuffer.$[instanceIndex.$];
-      const restLength = this.springRestLengthBuffer.$[instanceIndex.$];
+      const vertexId = this.springVertexIdBuffer.$[idx];
+      const restLength = this.springRestLengthBuffer.$[idx];
 
       const vertex0Position = this.vertexPositionBuffer.$[vertexId.x];
       const vertex1Position = this.vertexPositionBuffer.$[vertexId.y];
 
       const delta = vertex1Position.sub(vertex0Position);
       const dist = std.max(std.length(delta), 0.000001);
       const force = delta.mul(
-        (dist - restLength) * this.stiffnessUniform.$ * 0.5 / dist,
+        ((dist - restLength) * this.stiffnessUniform.$ * 0.5) / dist,
       );
-      this.springForceBuffer.$[instanceIndex.$] = d.vec3f(force);
+      this.springForceBuffer.$[idx] = d.vec3f(force);
     }).compute(springCount);
 
     // 2. computeVertexForces:
@@ -267,7 +251,7 @@ export class VerletSimulation {
 
     this.computeVertexForces = toTSL(() => {
       'use gpu';
-      const idx = instanceIndex.$;
+      const idx = access.instanceIndex.$;
 
       if (idx >= vertexCount) {
         // compute shaders are executed in groups of 64, so instanceIndex might be bigger than the amount of vertices.
@@ -315,7 +299,7 @@ export class VerletSimulation {
       const deltaSphere = position.add(force).sub(spherePositionUniform.$);
       const dist = std.length(deltaSphere);
       const sphereForce = deltaSphere.mul(
-        std.max(0, sphereRadius - dist) / dist * sphereUniform.$,
+        (std.max(0, sphereRadius - dist) / dist) * sphereUniform.$,
       );
       force = force.add(sphereForce);
 

apps/typegpu-docs/src/examples/threejs/simple/index.ts

@@ -1,5 +1,5 @@
 import * as THREE from 'three/webgpu';
-import { time, toTSL, uv } from '@typegpu/three';
+import { access, toTSL } from '@typegpu/three';
 import { perlin3d } from '@typegpu/noise';
 import * as d from 'typegpu/data';
 import { tanh } from 'typegpu/std';
@@ -27,8 +27,8 @@ const material = new THREE.MeshBasicNodeMaterial();
 
 material.colorNode = toTSL(() => {
   'use gpu';
-  const coords = uv().$.mul(2);
-  const pattern = perlin3d.sample(d.vec3f(coords, time.$ * 0.2));
+  const coords = access.uv().$.mul(2);
+  const pattern = perlin3d.sample(d.vec3f(coords, access.time.$ * 0.2));
   return d.vec4f(tanh(pattern * 5), 0.2, 0.4, 1);
 });
 

packages/typegpu-three/README.md

@@ -8,27 +8,30 @@
 
 A helper library for using TypeGPU with Three.js.
 
-## API draft
-
-- TSL nodes don't really have types associated with them.
-- We can infer the return type of a node like in shell-less functions
-
 ```ts
+import * as TSL from 'three/tsl';
+import { access, fromTSL, toTSL } from '@typegpu/three';
 import { fract } from 'typegpu/std';
-import tgpu3, { uv } from '@typegpu/three';
-
-const material = new THREE.MeshBasicNodeMaterial();
-// We reexport builtin TSL nodes as `accessors`
-material.colorNode = toTSL(() => {
-  'kernel';
-  return fract(uv.$.mul(4));
-});
 
-// Users can also wrap custom TSL nodes and use them the same way
+const material1 = new THREE.MeshBasicNodeMaterial();
 const pattern = TSL.texture(detailMap, TSL.uv().mul(10));
+// `fromTSL` can be used to access any TSL node from a TypeGPU function
 const patternAccess = fromTSL(pattern, { type: d.vec4f });
-material.colorNode = toTSL(() => {
-  'kernel';
+material1.colorNode = toTSL(() => {
+  'use gpu';
   return patternAccess.$;
 });
+
+const material2 = new THREE.MeshBasicNodeMaterial();
+material2.colorNode = toTSL(() => {
+  'use gpu';
+  // Many builtin TSL nodes are already reexported as `accessors`
+  const uv = access.uv().$;
+
+  if (uv.x < 0.5) {
+    return d.vec4f(fract(uv.mul(4)), 0, 1);
+  }
+
+  return d.vec4f(1, 0, 0, 1);
+});
 ```

packages/typegpu-three/src/builtin-accessors.ts

@@ -8,3 +8,5 @@ export const uv = tgpu['~unstable'].comptime((index?: number | undefined) =>
 );
 
 export const time = fromTSL(TSL.time, { type: d.f32 });
+
+export const instanceIndex = fromTSL(TSL.instanceIndex, { type: d.u32 });

packages/typegpu-three/src/index.ts

@@ -1,4 +1,2 @@
-// export { TypeGPUMaterial } from './typegpu-material.ts';
-
-export { time, uv } from './builtin-accessors.ts';
-export { fromTSL, type TSLAccessor, toTSL } from './typegpu-node.ts';
+export * as access from './builtin-accessors.ts';
+export { fromTSL, toTSL, type TSLAccessor } from './typegpu-node.ts';

packages/typegpu-three/src/typegpu-material.ts

@@ -1,6 +1,6 @@
 packages:
-  - "packages/*"
-  - "apps/*"
+  - 'packages/*'
+  - 'apps/*'
 
 catalog:
   arktype: ^2.1.22
@@ -12,13 +12,13 @@ catalogs:
     jiti: ^2.6.0
   types:
     typescript: ^5.8.2
-    "@webgpu/types": ^0.1.66
-    "@types/three": "^0.180.0"
+    '@webgpu/types': ^0.1.66
+    '@types/three': '^0.180.0'
   test:
     vitest: ^3.2.4
   frontend:
-    "vite-imagetools": ^9.0.0
-    "fuse.js": ^7.1.0
+    'vite-imagetools': ^9.0.0
+    'fuse.js': ^7.1.0
   example:
-    "wgpu-matrix": ^3.4.0
+    'wgpu-matrix': ^3.4.0
     three: ^0.180.0