chore: Using simple pipeline APIs to see how they look like in real examples

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

@@ -26,7 +26,7 @@ let speedMultiplier = 1;
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-const root = await tgpu.init();
+const root = await tgpu.init() as any;
 
 context.configure({
   device: root.device,
@@ -98,7 +98,7 @@ function enqueuePresetChanges() {
 const buffer0mutable = fishDataBuffers[0].as('mutable');
 const buffer1mutable = fishDataBuffers[1].as('mutable');
 const seedUniform = root.createUniform(d.f32);
-const randomizeFishPositionsDispatch = prepareDispatch(root, (x) => {
+const randomizeFishPositionsPipeline = root.prepareCompute((x) => {
   'kernel';
   randf.seed2(d.vec2f(d.f32(x), seedUniform.$));
   const data = ModelData({
@@ -124,7 +124,7 @@ const randomizeFishPositionsDispatch = prepareDispatch(root, (x) => {
 
 const randomizeFishPositions = () => {
   seedUniform.write((performance.now() % 10000) / 10000);
-  randomizeFishPositionsDispatch(p.fishAmount);
+  randomizeFishPositionsPipeline.dispatchThreads(p.fishAmount);
   enqueuePresetChanges();
 };
 

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

@@ -1,5 +1,5 @@
 import { hsvToRgb, rgbToHsv } from '@typegpu/color';
-import tgpu from 'typegpu';
+import tgpu, { type VertexInput } from 'typegpu';
 import * as d from 'typegpu/data';
 import * as std from 'typegpu/std';
 import * as p from './params.ts';
@@ -11,10 +11,8 @@ import {
 } from './schemas.ts';
 import { applySinWave, PosAndNormal } from './tgsl-helpers.ts';
 
-export const vertexShader = tgpu['~unstable'].vertexFn({
-  in: { ...ModelVertexInput, instanceIndex: d.builtin.instanceIndex },
-  out: ModelVertexOutput,
-})((input) => {
+export vertexFn = (input: VertexInput<typeof ModelVertexInput>): VertexOutput<typeof ModelVertexOutput> => {
+  'kernel';
   // rotate the model so that it aligns with model's direction of movement
   // https://simple.wikipedia.org/wiki/Pitch,_yaw,_and_roll
   // TODO: replace it with struct copy when Chromium is fixed
@@ -91,6 +89,13 @@ export const vertexShader = tgpu['~unstable'].vertexFn({
     applySeaDesaturation: currentModelData.applySeaDesaturation,
     variant: currentModelData.variant,
   };
+};
+
+export const vertexShader = tgpu['~unstable'].vertexFn({
+  in: { ...ModelVertexInput, instanceIndex: d.builtin.instanceIndex },
+  out: ModelVertexOutput,
+})((input) => {
+
 });
 
 const sampleTexture = tgpu.fn([d.vec2f], d.vec4f)`(uv) {
@@ -109,7 +114,7 @@ export const fragmentShader = tgpu['~unstable'].fragmentFn({
   const textureColorWithAlpha = sampleTexture(input.textureUV); // base color
   const textureColor = textureColorWithAlpha.xyz;
 
-  const ambient = std.mul(0.5, std.mul(textureColor, p.lightColor));
+  const ambient = textureColor.mul(p.lightColor).mul(0.5);
 
   const cosTheta = std.dot(input.worldNormal, p.lightDirection);
   const diffuse = std.mul(
@@ -118,22 +123,22 @@ export const fragmentShader = tgpu['~unstable'].fragmentFn({
   );
 
   const viewSource = std.normalize(
-    std.sub(layout.$.camera.position.xyz, input.worldPosition),
+    layout.$.camera.position.xyz.sub(input.worldPosition),
   );
   const reflectSource = std.normalize(
-    std.reflect(std.mul(-1, p.lightDirection), input.worldNormal),
+    std.reflect(p.lightDirection.mul(-1), input.worldNormal),
   );
   const specularStrength = std.pow(
     std.max(0, std.dot(viewSource, reflectSource)),
     16,
   );
-  const specular = std.mul(specularStrength, p.lightColor);
+  const specular = p.lightColor.mul(specularStrength);
 
   const lightedColor = std.add(ambient, std.add(diffuse, specular));
 
   // apply desaturation
   const distanceFromCamera = std.length(
-    std.sub(layout.$.camera.position.xyz, input.worldPosition),
+    layout.$.camera.position.xyz.sub(input.worldPosition),
   );
 
   let desaturatedColor = lightedColor;

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

@@ -45,8 +45,8 @@ export const ModelVertexOutput = {
   canvasPosition: d.builtin.position,
   variant: d.f32,
   textureUV: d.vec2f,
-  applySeaFog: d.interpolate('flat', d.u32), // bool
-  applySeaDesaturation: d.interpolate('flat', d.u32), // bool
+  applySeaFog: d.u32, // bool
+  applySeaDesaturation: d.u32, // bool
 } as const;
 
 export const MouseRay = d.struct({