fix: Add typegpu/color dependency to stackblitz integration, update 3d fish example (#1133)

Author: mhawryluk

apps/typegpu-docs/src/components/stackblitz/openInStackBlitz.ts

@@ -1,7 +1,8 @@
 import StackBlitzSDK from '@stackblitz/sdk';
 import { parse } from '@std/yaml';
 import { type } from 'arktype';
-import typegpuoNoisePackageJson from '../../../../../packages/typegpu-noise/package.json';
+import typegpuColorPackageJson from '../../../../../packages/typegpu-color/package.json';
+import typegpuNoisePackageJson from '../../../../../packages/typegpu-noise/package.json';
 import typegpuPackageJson from '../../../../../packages/typegpu/package.json';
 import unpluginPackageJson from '../../../../../packages/unplugin-typegpu/package.json';
 import pnpmWorkspace from '../../../../../pnpm-workspace.yaml?raw';
@@ -89,7 +90,8 @@ ${example.htmlCode}
       "wgpu-matrix": "${typegpuDocsPackageJson.dependencies['wgpu-matrix']}",
       "@loaders.gl/core": "${typegpuDocsPackageJson.dependencies['@loaders.gl/core']}",
       "@loaders.gl/obj": "${typegpuDocsPackageJson.dependencies['@loaders.gl/obj']}",
-      "@typegpu/noise": "${typegpuoNoisePackageJson.version}"
+      "@typegpu/noise": "${typegpuNoisePackageJson.version}",
+      "@typegpu/color": "${typegpuColorPackageJson.version}"
     }
 }`,
         'vite.config.js': `\

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

@@ -24,12 +24,12 @@ export const vertexShader = tgpu['~unstable']
     let wavedPosition = input.modelPosition;
     let wavedNormal = input.modelNormal;
     if (currentModelData.applySinWave === 1) {
-      const wavedResults = applySinWave(
-        input.instanceIndex,
-        layout.$.currentTime,
-        input.modelPosition,
-        input.modelNormal,
-      );
+      const wavedResults = applySinWave({
+        index: input.instanceIndex,
+        time: layout.$.currentTime,
+        position: input.modelPosition,
+        normal: input.modelNormal,
+      });
       wavedPosition = wavedResults.position;
       wavedNormal = wavedResults.normal;
     }

apps/typegpu-docs/src/content/examples/rendering/3d-fish/tgsl-helpers.ts

@@ -24,9 +24,9 @@ const ApplySinWaveReturnSchema = d.struct({
 });
 
 export const applySinWave = tgpu['~unstable'].fn(
-  [d.u32, d.u32, d.vec3f, d.vec3f],
+  { index: d.u32, time: d.u32, position: d.vec3f, normal: d.vec3f },
   ApplySinWaveReturnSchema,
-)((index, time, position, normal) => {
+)(({ index, time, position, normal }) => {
   const a = 60.1;
   const b = 0.8;
   const c = 10.1;

packages/typegpu-color/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@typegpu/color",
   "type": "module",
-  "version": "0.1.0-alpha.1",
+  "version": "0.0.1",
   "description": "A set of color helper functions for use in WebGPU/TypeGPU apps.",
   "exports": {
     ".": "./src/index.ts",