Tweaks and docs

Author: iwoplaza

apps/typegpu-docs/astro.config.mjs

@@ -209,7 +209,11 @@ export default defineConfig({
           items: stripFalsy([
             {
               label: '@typegpu/noise',
-              slug: 'ecosystem/typegpu-noise',
+j              slug: 'ecosystem/typegpu-noise',
+            },
+            {
+              label: '@typegpu/three',
+              slug: 'ecosystem/typegpu-three',
             },
             DEV && {
               label: '@typegpu/color',

apps/typegpu-docs/src/content/docs/ecosystem/typegpu-three.mdx

@@ -0,0 +1,91 @@
+---
+title: "@typegpu/three"
+---
+
+TSL (Three.js Shading Language) is a node-based shader composition system for Three.js. Shader logic and control flow is built up by composing special functions,
+with a focus on composability, intuitive sharing of logic across modules and customizability. TypeGPU fits naturally into this system thanks to the `@typegpu/three` package. You can choose to write your TSL building blocks in TypeGPU, which has a few benefits:
+- Control-flow like `if` statements and `for` loops makes use of familiar JavaScript syntax instead of special functions.
+- The code you write is semantically valid JavaScript, with types flowing through each expression.
+- Unit-testability, since you can call these functions on the CPU
+
+Below are a select few cases comparing TSL and TypeGPU:
+
+import { Card, CardGrid } from '@astrojs/starlight/components';
+
+## Node definition
+
+TSL:
+```ts
+const computeShader = Fn(() => {
+  //
+  // ... TSL code ...
+  //
+}).compute(threadCount);
+```
+
+TypeGPU:
+```ts
+const computeShader = toTSL(() => {
+  'use gpu';
+  //
+  // ... TypeGPU code ...
+  // 
+}).compute(threadCount);
+```
+
+## Function definition
+
+TSL:
+```ts
+const oscSine = Fn(([t = time]) => {
+	return t.add(0.75).mul(Math.PI * 2).sin().mul(0.5).add(0.5);
+});
+```
+
+TypeGPU:
+```ts
+const oscSine = (t: number) => {
+  'use gpu';
+	return std.sin((t + 0.75) * Math.PI * 2) * 0.5 + 0.5;
+};
+```
+
+## If statements
+
+TSL:
+```ts
+If(instanceIndex.greaterThanEqual(uint(vertexCount)), () => {
+	Return();
+});
+```
+
+TypeGPU:
+```ts
+if (access.instanceIndex.$ >= vertexCount) {
+  return;
+}
+```
+
+## For loops
+
+TSL:
+```ts
+Loop({ start: ptrStart, end: ptrEnd, type: 'uint', condition: '<' }, ({ i }) => {
+	const springId = springListBuffer.element( i ).toVar( 'springId' );
+	const springForce = springForceBuffer.element( springId );
+	const springVertexIds = springVertexIdBuffer.element( springId );
+	const factor = select( springVertexIds.x.equal( instanceIndex ), 1.0, - 1.0 );
+	force.addAssign( springForce.mul( factor ) );
+});
+```
+
+TypeGPU:
+```ts
+for (let i = ptrStart; i < ptrEnd; i++) {
+  const springId = springListBuffer.$[i];
+  const springForce = springForceBuffer.$[springId];
+  const springVertexIds = springVertexIdBuffer.$[springId];
+  const factor = std.select(-1, 1, springVertexIds.x === idx);
+  force = force.add(springForce.mul(d.f32(factor)));
+}
+```

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

@@ -247,8 +247,6 @@ export class VerletSimulation {
     // Then it adds a gravital force, wind force, and the collision with the sphere.
     // In the end it adds the force to the vertex' position.
 
-    const time = fromTSL(TSL.time, { type: d.f32 });
-
     this.computeVertexForces = toTSL(() => {
       'use gpu';
       const idx = access.instanceIndex.$;
@@ -279,19 +277,16 @@ export class VerletSimulation {
         const springId = this.springListBuffer.$[i];
         const springForce = this.springForceBuffer.$[springId];
         const springVertexIds = this.springVertexIdBuffer.$[springId];
-        const factor = std.select(
-          d.f32(-1),
-          d.f32(1),
-          springVertexIds.x === idx,
-        );
-        force = force.add(springForce.mul(factor));
+        const factor = std.select(-1, 1, springVertexIds.x === idx);
+        force = force.add(springForce.mul(d.f32(factor)));
       }
 
       // gravity
       force.y -= 0.00005;
 
       // wind
-      const noise = (triNoise3D(position, 1, time.$) - 0.2) * 0.0001;
+      const time = access.time.$;
+      const noise = (triNoise3D(position, 1, time) - 0.2) * 0.0001;
       const windForce = noise * this.windUniform.$;
       force.z -= windForce;