docs: Cloth example controls

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

@@ -21,13 +21,20 @@ import {
 const sphereRadius = 0.15;
 const spherePositionUniform = t3.uniform(new THREE.Vector3(0, 0, 0), d.vec3f);
 const sphereUniform = t3.uniform(1.0, d.f32);
+
+const patternUniforms = {
+  color1: t3.uniform(new THREE.Vector4(0.9, 0.3, 0.3, 1), d.vec4f),
+  color2: t3.uniform(new THREE.Vector4(1, 0.5, 0.4, 1), d.vec4f),
+};
+
 const verletSim = new VerletSimulation({
   sphereRadius,
   sphereUniform,
   spherePositionUniform,
 });
 
 let vertexWireframeObject: THREE.Mesh, springWireframeObject: THREE.Line;
+let clothMaterial: THREE.MeshPhysicalNodeMaterial;
 let timeSinceLastStep = 0;
 let timestamp = 0;
 
@@ -40,7 +47,6 @@ const params = {
 };
 
 const API = {
-  color: 0x204080, // sRGB
   sheenColor: 0xffffff, // sRGB
 };
 
@@ -75,11 +81,11 @@ const camera = new THREE.PerspectiveCamera(
 );
 camera.position.set(-1.6, -0.1, -1.6);
 
-const controls = new OrbitControls(camera, canvas);
-controls.minDistance = 1;
-controls.maxDistance = 3;
-controls.target.set(0, -0.1, 0);
-controls.update();
+const cameraControls = new OrbitControls(camera, canvas);
+cameraControls.minDistance = 1;
+cameraControls.maxDistance = 3;
+cameraControls.target.set(0, -0.1, 0);
+cameraControls.update();
 
 const hdrLoader = new UltraHDRLoader().setPath(
   'https://threejs.org/examples/textures/equirectangular/',
@@ -214,8 +220,7 @@ function setupClothMesh(): THREE.Mesh {
   geometry.setAttribute('vertexIds', verletVertexIdBuffer);
   geometry.setIndex(indices);
 
-  const clothMaterial = new THREE.MeshPhysicalNodeMaterial({
-    color: new THREE.Color().setHex(API.color),
+  clothMaterial = new THREE.MeshPhysicalNodeMaterial({
     side: THREE.DoubleSide,
     transparent: true,
     opacity: 0.85,
@@ -234,7 +239,7 @@ function setupClothMesh(): THREE.Mesh {
     'use gpu';
     const uv = t3.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);
+    return std.mix(patternUniforms.color1.$, patternUniforms.color2.$, pattern);
   });
 
   clothMaterial.positionNode = TSL.Fn(({ material }) => {
@@ -317,6 +322,73 @@ async function render() {
 }
 
 // #region Example controls and cleanup
+export const controls = {
+  Stiffness: {
+    initial: 0.2,
+    min: 0.1,
+    max: 0.7,
+    step: 0.01,
+    onSliderChange: (value: number) => {
+      verletSim.stiffnessUniform.node.value = value;
+    },
+  },
+  'Pattern Color 1': {
+    initial: [204 / 255, 144 / 255, 250 / 255] as [number, number, number],
+    onColorChange: (value: [number, number, number]) => {
+      patternUniforms.color1.node.value.set(value[0], value[1], value[2], 1);
+    },
+  },
+  'Pattern Color 2': {
+    initial: [100 / 255, 125 / 255, 228 / 255] as [number, number, number],
+    onColorChange: (value: [number, number, number]) => {
+      patternUniforms.color2.node.value.set(value[0], value[1], value[2], 1);
+    },
+  },
+  Roughness: {
+    initial: 0.5,
+    min: 0,
+    max: 1,
+    step: 0.01,
+    onSliderChange: (value: number) => {
+      clothMaterial.roughness = value;
+    },
+  },
+  Sheen: {
+    initial: 1.0,
+    min: 0,
+    max: 1,
+    step: 0.01,
+    onSliderChange: (value: number) => {
+      clothMaterial.sheen = value;
+    },
+  },
+  'Sheen Roughness': {
+    initial: 0.5,
+    min: 0,
+    max: 1,
+    step: 0.01,
+    onSliderChange: (value: number) => {
+      clothMaterial.sheenRoughness = value;
+    },
+  },
+  'Sheen Color': {
+    initial: new THREE.Color(API.sheenColor).toArray(),
+    onColorChange: (value: [number, number, number]) => {
+      const color = new THREE.Color().fromArray(value);
+      API.sheenColor = color.getHex();
+      clothMaterial.sheenColor = color;
+    },
+  },
+  Wind: {
+    initial: 1,
+    min: 0,
+    max: 5,
+    step: 0.01,
+    onSliderChange: (value: number) => {
+      params.wind = value;
+    },
+  },
+};
 
 export function onCleanup() {
   observer.disconnect();