refactor: Migrate more examples to use tsover (#2199)

Author: iwoplaza

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

@@ -148,7 +148,7 @@ const material = new THREE.MeshBasicNodeMaterial();
 
 material.colorNode = t3.toTSL(() => {
   'use gpu';
-  const coords = t3.uv().$.mul(2);
+  const coords = t3.uv().$ * 2;
   const pattern = perlin3d.sample(d.vec3f(coords, t3.time.$ * 0.2));
   return d.vec4f(std.tanh(pattern * 5), 0.2, 0.4, 1);
 });
@@ -244,12 +244,28 @@ Loop({ start: ptrStart, end: ptrEnd, type: 'uint', condition: '<' }, ({ i }) =>
 ```
 
 TypeGPU:
-```ts
+```ts twoslash
+'use tsover';
+import * as t3 from '@typegpu/three';
+import * as THREE from 'three/webgpu';
+import { d, std } from 'typegpu';
+type TSLStorageAccessor<T extends d.AnyWgslData> = t3.TSLAccessor<
+  T,
+  THREE.StorageBufferNode
+>;
+declare const springListBuffer: TSLStorageAccessor<d.WgslArray<d.U32>>;
+declare const springForceBuffer: TSLStorageAccessor<d.WgslArray<d.Vec3f>>;
+declare const springVertexIdBuffer: TSLStorageAccessor<d.WgslArray<d.Vec2u>>
+declare const ptrStart: number;
+declare const ptrEnd: number;
+declare const idx: number;
+declare let force: d.v3f;
+// ---cut---
 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)));
+  force += springForce * factor;
 }
 ```

apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.ts

@@ -30,8 +30,9 @@ const displayModes = {
  * https://www.shadertoy.com/view/lssGDj
  */
 const characterFn = tgpu.fn([d.u32, d.vec2f], d.f32)((n, p) => {
+  'use gpu';
   // Transform texture coordinates to character bitmap coordinates (5x5 grid)
-  const pos = std.floor(p.mul(d.vec2f(-4, 4)).add(2.5));
+  const pos = std.floor(p * d.vec2f(-4, 4) + 2.5);
 
   // Check if position is outside the 5x5 character bitmap bounds
   if (pos.x < 0 || pos.x > 4 || pos.y < 0 || pos.y > 4) {
@@ -58,17 +59,16 @@ const pipeline = root.createRenderPipeline({
    */
   fragment: ({ uv }) => {
     'use gpu';
-    const uv2 = std.mul(uvTransformBuffer.$, uv.sub(0.5)).add(0.5);
+    const uv2 = uvTransformBuffer.$ * (uv - 0.5) + 0.5;
     const textureSize = d.vec2f(
       std.textureDimensions(layout.$.externalTexture),
     );
-    const pix = uv2.mul(textureSize);
+    const pix = uv2 * textureSize;
 
     const cellSize = d.f32(glyphSize.$);
     const halfCell = cellSize * 0.5;
 
-    const blockCoord = std.floor(pix.div(cellSize))
-      .mul(cellSize).div(textureSize);
+    const blockCoord = std.floor(pix / cellSize) * cellSize / textureSize;
 
     const color = std.textureSampleBaseClampToEdge(
       layout.$.externalTexture,
@@ -77,7 +77,7 @@ const pipeline = root.createRenderPipeline({
     );
 
     const rawGray = 0.3 * color.x + 0.59 * color.y + 0.11 * color.z;
-    const gray = std.pow(rawGray, gammaCorrection.$);
+    const gray = rawGray ** gammaCorrection.$;
 
     let n = d.u32(4096);
     if (charsetExtended.$ === 0) {
@@ -143,7 +143,7 @@ const pipeline = root.createRenderPipeline({
     let resultColor = d.vec3f(1);
     // Color mode
     if (displayMode.$ === displayModes.color) {
-      resultColor = color.mul(charValue).rgb;
+      resultColor = color.rgb * charValue;
     }
     // Grayscale mode
     if (displayMode.$ === displayModes.grayscale) {

apps/typegpu-docs/src/examples/image-processing/background-segmentation/shaders.ts

@@ -49,24 +49,25 @@ export const computeFn = tgpu.computeFn({
   in: { wid: d.builtin.workgroupId, lid: d.builtin.localInvocationId },
   workgroupSize: [32, 1, 1],
 })(({ wid, lid }) => {
+  'use gpu';
   const filterOffset = d.i32((filterDim - 1) / 2);
   const dims = d.vec2i(std.textureDimensions(blurLayout.$.inTexture));
-  const baseIndex = d.vec2i(
-    wid.xy.mul(d.vec2u(blockDim, 4)).add(lid.xy.mul(d.vec2u(4, 1))),
-  ).sub(d.vec2i(filterOffset, 0));
+  const baseIndex =
+    d.vec2i(wid.xy * d.vec2u(blockDim, 4) + lid.xy * d.vec2u(4, 1)) -
+    d.vec2i(filterOffset, 0);
 
   // Load a tile of pixels into shared memory
   for (const r of tgpu.unroll([0, 1, 2, 3])) {
     for (const c of tgpu.unroll([0, 1, 2, 3])) {
-      let loadIndex = baseIndex.add(d.vec2i(c, r));
+      let loadIndex = baseIndex + d.vec2i(c, r);
       if (flipAccess.$) {
         loadIndex = loadIndex.yx;
       }
 
       tileData.$[r][lid.x * 4 + d.u32(c)] = std.textureSampleLevel(
         blurLayout.$.inTexture,
         blurLayout.$.sampler,
-        d.vec2f(d.vec2f(loadIndex).add(d.vec2f(0.5)).div(d.vec2f(dims))),
+        (d.vec2f(loadIndex) + 0.5) / d.vec2f(dims),
         0,
       ).rgb;
     }
@@ -77,7 +78,7 @@ export const computeFn = tgpu.computeFn({
   // Apply the horizontal blur filter and write to the output texture
   for (const r of tgpu.unroll([0, 1, 2, 3])) {
     for (const c of tgpu.unroll([0, 1, 2, 3])) {
-      let writeIndex = baseIndex.add(d.vec2i(c, r));
+      let writeIndex = baseIndex + d.vec2i(c, r);
       if (flipAccess.$) {
         writeIndex = writeIndex.yx;
       }
@@ -91,7 +92,7 @@ export const computeFn = tgpu.computeFn({
         let acc = d.vec3f();
         for (let f = 0; f < filterDim; f++) {
           const i = center + f - filterOffset;
-          acc = acc.add(tileData.$[r][i].mul(1 / filterDim));
+          acc += tileData.$[r][i] / filterDim;
         }
         std.textureStore(blurLayout.$.outTexture, writeIndex, d.vec4f(acc, 1));
       }

apps/typegpu-docs/src/examples/rendering/3d-fish/compute.ts

@@ -22,7 +22,7 @@ export const simulate = (fishIndex: number) => {
     const other = layout.$.currentFishData[i];
     const dist = std.distance(fishData.position, other.position);
     if (dist < layout.$.fishBehavior.separationDist) {
-      separation = separation + fishData.position - other.position;
+      separation += fishData.position - other.position;
     }
     if (dist < layout.$.fishBehavior.alignmentDist) {
       alignment = alignment + other.direction;

apps/typegpu-docs/src/examples/rendering/caustics/index.ts

@@ -22,17 +22,17 @@ const mainVertex = tgpu.vertexFn({
 const tilePattern = (uv: d.v2f): number => {
   'use gpu';
   const tiledUv = std.fract(uv);
-  const proximity = std.abs(std.sub(std.mul(tiledUv, 2), 1));
+  const proximity = std.abs((tiledUv * 2) - 1);
   const maxProximity = std.max(proximity.x, proximity.y);
-  return std.saturate(std.pow(1 - maxProximity, 0.6) * 5);
+  return std.saturate(((1 - maxProximity) ** 0.6) * 5);
 };
 
 const caustics = (uv: d.v2f, time: number, profile: d.v3f): d.v3f => {
   'use gpu';
-  const distortion = perlin3d.sample(d.vec3f(std.mul(uv, 0.5), time * 0.2));
+  const distortion = perlin3d.sample(d.vec3f(uv * 0.5, time * 0.2));
   // Distorting UV coordinates
-  const uv2 = std.add(uv, distortion);
-  const noise = std.abs(perlin3d.sample(d.vec3f(std.mul(uv2, 5), time)));
+  const uv2 = uv + distortion;
+  const noise = std.abs(perlin3d.sample(d.vec3f(uv2 * 5, time)));
   return std.pow(d.vec3f(1 - noise), profile);
 };
 
@@ -65,6 +65,7 @@ const mainFragment = tgpu.fragmentFn({
   in: { uv: d.vec2f },
   out: d.vec4f,
 })(({ uv }) => {
+  'use gpu';
   /**
    * A transformation matrix that skews the perspective a bit
    * when applied to UV coordinates
@@ -73,8 +74,8 @@ const mainFragment = tgpu.fragmentFn({
     d.vec2f(std.cos(angle), std.sin(angle)),
     d.vec2f(-std.sin(angle) * 10 + uv.x * 3, std.cos(angle) * 5),
   );
-  const skewedUv = std.mul(skewMat, uv);
-  const tile = tilePattern(std.mul(skewedUv, tileDensity.$));
+  const skewedUv = skewMat * uv;
+  const tile = tilePattern(skewedUv * tileDensity.$);
   const albedo = std.mix(d.vec3f(0.1), d.vec3f(1), tile);
 
   // Transforming coordinates to simulate perspective squash
@@ -83,49 +84,38 @@ const mainFragment = tgpu.fragmentFn({
     std.pow((uv.y * 1.5 + 0.1) * 1.5, 3) * 1,
   );
   // Generating two layers of caustics (large scale, and small scale)
-  const c1 = std.mul(
-    caustics(cuv, time.$ * 0.2, /* profile */ d.vec3f(4, 4, 1)),
+  const c1 = caustics(cuv, time.$ * 0.2, /* profile */ d.vec3f(4, 4, 1)) *
     // Tinting
-    d.vec3f(0.4, 0.65, 1),
-  );
-  const c2 = std.mul(
-    caustics(std.mul(cuv, 2), time.$ * 0.4, /* profile */ d.vec3f(16, 1, 4)),
+    d.vec3f(0.4, 0.65, 1);
+  const c2 = caustics(cuv * 2, time.$ * 0.4, /* profile */ d.vec3f(16, 1, 4)) *
     // Tinting
-    d.vec3f(0.18, 0.3, 0.5),
-  );
+    d.vec3f(0.18, 0.3, 0.5);
 
   // -- BLEND --
 
-  const blendCoord = d.vec3f(std.mul(uv, d.vec2f(5, 10)), time.$ * 0.2 + 5);
+  const blendCoord = d.vec3f(uv * d.vec2f(5, 10), time.$ * 0.2 + 5);
   // A smooth blending factor, so that caustics only appear at certain spots
   const blend = std.saturate(perlin3d.sample(blendCoord) + 0.3);
 
   // -- FOG --
 
-  const noFogColor = std.mul(
-    albedo,
-    std.mix(ambientColor, std.add(c1, c2), blend),
-  );
+  const noFogColor = albedo * std.mix(ambientColor, c1 + c2, blend);
   // Fog blending factor, based on the height of the pixels
-  const fog = std.min(std.pow(uv.y, 0.5) * 1.2, 1);
+  const fog = std.min((uv.y ** 0.5) * 1.2, 1);
 
   // -- GOD RAYS --
 
-  const godRayUv = std.mul(std.mul(rotateXY(-0.3), uv), d.vec2f(15, 3));
-  const godRayFactor = std.pow(uv.y, 1);
-  const godRay1 = std.mul(
-    std.add(perlin3d.sample(d.vec3f(godRayUv, time.$ * 0.5)), 1),
+  const godRayUv = rotateXY(-0.3) * uv * d.vec2f(15, 3);
+  const godRayFactor = uv.y;
+  const godRay1 = (perlin3d.sample(d.vec3f(godRayUv, time.$ * 0.5)) + 1) *
     // Tinting
-    std.mul(d.vec3f(0.18, 0.3, 0.5), godRayFactor),
-  );
-  const godRay2 = std.mul(
-    std.add(perlin3d.sample(d.vec3f(std.mul(godRayUv, 2), time.$ * 0.3)), 1),
+    d.vec3f(0.18, 0.3, 0.5) * godRayFactor;
+  const godRay2 = (perlin3d.sample(d.vec3f(godRayUv * 2, time.$ * 0.3)) + 1) *
     // Tinting
-    std.mul(d.vec3f(0.18, 0.3, 0.5), godRayFactor * 0.4),
-  );
-  const godRays = std.add(godRay1, godRay2);
+    d.vec3f(0.18, 0.3, 0.5) * godRayFactor * 0.4;
+  const godRays = godRay1 + godRay2;
 
-  return d.vec4f(std.add(std.mix(noFogColor, fogColor, fog), godRays), 1);
+  return d.vec4f(std.mix(noFogColor, fogColor, fog) + godRays, 1);
 });
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;

apps/typegpu-docs/src/examples/rendering/clouds/index.ts

@@ -55,47 +55,40 @@ const bindGroup = root.createBindGroup(cloudsLayout, {
   sampler,
 });
 
-const mainFragment = tgpu.fragmentFn({
-  in: { uv: d.vec2f },
-  out: d.vec4f,
-})(({ uv }) => {
-  randf.seed2(uv.mul(cloudsLayout.$.params.time));
-  const screenRes = resolutionUniform.$;
-  const aspect = screenRes.x / screenRes.y;
-
-  let screenPos = std.mul(std.sub(uv, 0.5), 2.0);
-  screenPos = d.vec2f(
-    screenPos.x * std.max(aspect, 1.0),
-    screenPos.y * std.max(1.0 / aspect, 1.0),
-  );
-
-  const sunDir = std.normalize(SUN_DIRECTION);
-  const time = cloudsLayout.$.params.time;
-  const rayOrigin = d.vec3f(
-    std.sin(time * 0.6) * 0.5,
-    std.cos(time * 0.8) * 0.5 - 1,
-    time * WIND_SPEED,
-  );
-  const rayDir = std.normalize(d.vec3f(screenPos.x, screenPos.y, FOV_FACTOR));
-
-  const sunDot = std.clamp(std.dot(rayDir, sunDir), 0.0, 1.0);
-  const sunGlow = std.pow(
-    sunDot,
-    1.0 / (SUN_BRIGHTNESS * SUN_BRIGHTNESS * SUN_BRIGHTNESS),
-  );
-
-  let skyCol = std.sub(SKY_HORIZON, std.mul(SKY_ZENITH_TINT, rayDir.y * 0.35));
-  skyCol = std.add(skyCol, std.mul(SUN_GLOW, sunGlow));
-
-  const cloudCol = raymarch(rayOrigin, rayDir, sunDir);
-  const finalCol = std.add(std.mul(skyCol, 1.1 - cloudCol.a), cloudCol.rgb);
-
-  return d.vec4f(finalCol, 1.0);
-});
-
 const pipeline = root.createRenderPipeline({
   vertex: common.fullScreenTriangle,
-  fragment: mainFragment,
+  fragment: ({ uv }) => {
+    'use gpu';
+    randf.seed2(uv * cloudsLayout.$.params.time);
+    const screenRes = resolutionUniform.$;
+    const aspect = screenRes.x / screenRes.y;
+
+    let screenPos = (uv - 0.5) * 2;
+    screenPos = d.vec2f(
+      screenPos.x * std.max(aspect, 1),
+      screenPos.y * std.max(1 / aspect, 1),
+    );
+
+    const sunDir = std.normalize(SUN_DIRECTION);
+    const time = cloudsLayout.$.params.time;
+    const rayOrigin = d.vec3f(
+      std.sin(time * 0.6) * 0.5,
+      std.cos(time * 0.8) * 0.5 - 1,
+      time * WIND_SPEED,
+    );
+    const rayDir = std.normalize(d.vec3f(screenPos.x, screenPos.y, FOV_FACTOR));
+
+    const sunDot = std.saturate(std.dot(rayDir, sunDir));
+    const sunGlow = sunDot ** (1 / SUN_BRIGHTNESS ** 3);
+
+    let skyCol = SKY_HORIZON - SKY_ZENITH_TINT * rayDir.y * 0.35;
+    skyCol += SUN_GLOW * sunGlow;
+
+    const cloudCol = raymarch(rayOrigin, rayDir, sunDir);
+    const finalCol = skyCol * (1.1 - cloudCol.a) + cloudCol.rgb;
+
+    return d.vec4f(finalCol, 1.0);
+  },
   targets: { format: presentationFormat },
 });