refactor to create buffers once inside index, remove console.logs, recreate test file

Author: sharabai

apps/typegpu-docs/src/examples/simple/rotating-triangle-tiles/buffers.ts

@@ -1,68 +1,88 @@
 import * as d from 'typegpu/data';
-import tgpu from 'typegpu';
+import tgpu, { type TgpuRoot } from 'typegpu';
 import { colors } from './geometry.ts';
-import { root } from './root.ts';
 import { createInstanceInfoArray, InstanceInfoArray } from './instanceInfo.ts';
 import {
   getGridParams,
   INITIAL_MIDDLE_SQUARE_SCALE,
   INITIAL_STEP_ROTATION,
 } from './params.ts';
 
-const animationProgressUniform = root.createUniform(d.f32);
-
-const shiftedColorsBuffer = root.createReadonly(d.arrayOf(d.vec4f, 3), [
-  ...colors,
-]);
+const stepRotationAccess = tgpu['~unstable'].accessor(d.f32);
+const shiftedColorsAccess = tgpu['~unstable'].accessor(d.arrayOf(d.vec4f, 3));
+const animationProgressAccess = tgpu['~unstable'].accessor(d.f32);
+const middleSquareScaleAccess = tgpu['~unstable'].accessor(d.f32);
+const drawOverNeighborsAccess = tgpu['~unstable'].accessor(d.u32);
+const scaleAccess = tgpu['~unstable'].accessor(d.f32);
+const aspectRatioAccess = tgpu['~unstable'].accessor(d.f32);
 
 const instanceInfoLayout = tgpu.bindGroupLayout({
   instanceInfo: { storage: InstanceInfoArray },
 });
 
-let instanceInfoBindGroup = createInstanceInfoBufferAndBindGroup();
+function createBuffers(root: TgpuRoot) {
+  const animationProgressUniform = root.createUniform(d.f32);
 
-function getInstanceInfoBindGroup() {
-  return instanceInfoBindGroup;
-}
+  const shiftedColorsBuffer = root.createReadonly(d.arrayOf(d.vec4f, 3), [
+    ...colors,
+  ]);
 
-function createInstanceInfoBufferAndBindGroup() {
-  const instanceInfoBuffer = root.createReadonly(
-    InstanceInfoArray(getGridParams().triangleCount),
-    createInstanceInfoArray(),
-  );
+  let instanceInfoBindGroup = createInstanceInfoBufferAndBindGroup();
 
-  const instanceInfoBindGroup = root.createBindGroup(instanceInfoLayout, {
-    instanceInfo: instanceInfoBuffer.buffer,
-  });
+  function getInstanceInfoBindGroup() {
+    return instanceInfoBindGroup;
+  }
 
-  return instanceInfoBindGroup;
-}
+  function createInstanceInfoBufferAndBindGroup() {
+    const instanceInfoBuffer = root.createReadonly(
+      InstanceInfoArray(getGridParams().triangleCount),
+      createInstanceInfoArray(),
+    );
 
-function updateInstanceInfoBufferAndBindGroup() {
-  instanceInfoBindGroup = createInstanceInfoBufferAndBindGroup();
-}
+    const instanceInfoBindGroup = root.createBindGroup(instanceInfoLayout, {
+      instanceInfo: instanceInfoBuffer.buffer,
+    });
 
-const scaleBuffer = root.createUniform(d.f32, getGridParams().tileDensity);
-const aspectRatioBuffer = root.createUniform(d.f32, 1);
+    return instanceInfoBindGroup;
+  }
 
-const stepRotationBuffer = root.createUniform(d.f32, INITIAL_STEP_ROTATION);
+  function updateInstanceInfoBufferAndBindGroup() {
+    instanceInfoBindGroup = createInstanceInfoBufferAndBindGroup();
+  }
 
-const middleSquareScaleBuffer = root.createUniform(
-  d.f32,
-  INITIAL_MIDDLE_SQUARE_SCALE,
-);
+  const scaleBuffer = root.createUniform(d.f32, getGridParams().tileDensity);
+  const aspectRatioBuffer = root.createUniform(d.f32, 1);
 
-const drawOverNeighborsBuffer = root.createUniform(d.u32, 0);
+  const stepRotationBuffer = root.createUniform(d.f32, INITIAL_STEP_ROTATION);
+
+  const middleSquareScaleBuffer = root.createUniform(
+    d.f32,
+    INITIAL_MIDDLE_SQUARE_SCALE,
+  );
+
+  const drawOverNeighborsBuffer = root.createUniform(d.u32, 0);
+
+  return {
+    animationProgressUniform,
+    aspectRatioBuffer,
+    drawOverNeighborsBuffer,
+    getInstanceInfoBindGroup,
+    middleSquareScaleBuffer,
+    scaleBuffer,
+    shiftedColorsBuffer,
+    stepRotationBuffer,
+    updateInstanceInfoBufferAndBindGroup,
+  };
+}
 
 export {
-  animationProgressUniform,
-  aspectRatioBuffer,
-  drawOverNeighborsBuffer,
-  getInstanceInfoBindGroup,
+  animationProgressAccess,
+  aspectRatioAccess,
+  createBuffers,
+  drawOverNeighborsAccess,
   instanceInfoLayout,
-  middleSquareScaleBuffer,
-  scaleBuffer,
-  shiftedColorsBuffer,
-  stepRotationBuffer,
-  updateInstanceInfoBufferAndBindGroup,
+  middleSquareScaleAccess,
+  scaleAccess,
+  shiftedColorsAccess,
+  stepRotationAccess,
 };

apps/typegpu-docs/src/examples/simple/rotating-triangle-tiles/index.ts

@@ -1,11 +1,4 @@
 import { colors } from './geometry.ts';
-import {
-  animationProgressUniform,
-  drawOverNeighborsBuffer,
-  getInstanceInfoBindGroup,
-  shiftedColorsBuffer,
-  updateInstanceInfoBufferAndBindGroup,
-} from './buffers.ts';
 import { createBezier } from './bezier.ts';
 import { root } from './root.ts';
 import {
@@ -30,13 +23,36 @@ import {
   updateGridParams,
   updateStepRotation,
 } from './params.ts';
+import {
+  animationProgressAccess,
+  aspectRatioAccess,
+  createBuffers,
+  drawOverNeighborsAccess,
+  middleSquareScaleAccess,
+  scaleAccess,
+  shiftedColorsAccess,
+  stepRotationAccess,
+} from './buffers.ts';
 
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 
 let ease = createBezier(getCubicBezierControlPoints());
-updateAspectRatio(canvas.width, canvas.height);
+
+const {
+  aspectRatioBuffer,
+  animationProgressUniform,
+  drawOverNeighborsBuffer,
+  getInstanceInfoBindGroup,
+  scaleBuffer,
+  shiftedColorsBuffer,
+  middleSquareScaleBuffer,
+  updateInstanceInfoBufferAndBindGroup,
+  stepRotationBuffer,
+} = createBuffers(root);
+
+updateAspectRatio(canvas.width, canvas.height, aspectRatioBuffer);
 
 context.configure({
   device: root.device,
@@ -45,16 +61,30 @@ context.configure({
 });
 
 const backgroundPipeline = root['~unstable']
+  .with(shiftedColorsAccess, shiftedColorsBuffer)
   .withVertex(backgroundVertex)
   .withFragment(backgroundFragment, { format: presentationFormat })
   .createPipeline();
 
 const midgroundPipeline = root['~unstable']
+  .with(animationProgressAccess, animationProgressUniform)
+  .with(stepRotationAccess, stepRotationBuffer)
+  .with(drawOverNeighborsAccess, drawOverNeighborsBuffer)
+  .with(shiftedColorsAccess, shiftedColorsBuffer)
+  .with(middleSquareScaleAccess, middleSquareScaleBuffer)
+  .with(scaleAccess, scaleBuffer)
+  .with(aspectRatioAccess, aspectRatioBuffer)
   .withVertex(midgroundVertex)
   .withFragment(midgroundFragment, { format: presentationFormat })
   .createPipeline();
 
 const foregroundPipeline = root['~unstable']
+  .with(drawOverNeighborsAccess, drawOverNeighborsBuffer)
+  .with(animationProgressAccess, animationProgressUniform)
+  .with(stepRotationAccess, stepRotationBuffer)
+  .with(shiftedColorsAccess, shiftedColorsBuffer)
+  .with(scaleAccess, scaleBuffer)
+  .with(aspectRatioAccess, aspectRatioBuffer)
   .withVertex(foregroundVertex)
   .withFragment(foregroundFragment, { format: presentationFormat })
   .createPipeline();
@@ -114,8 +144,8 @@ requestAnimationFrame(draw);
 // cleanup
 
 const resizeObserver = new ResizeObserver(() => {
-  updateAspectRatio(canvas.width, canvas.height);
-  updateGridParams();
+  updateAspectRatio(canvas.width, canvas.height, aspectRatioBuffer);
+  updateGridParams(scaleBuffer, updateInstanceInfoBufferAndBindGroup);
   updateInstanceInfoBufferAndBindGroup();
 });
 
@@ -136,7 +166,12 @@ export const controls = {
     min: 0.01,
     max: 1.33,
     step: 0.01,
-    onSliderChange: updateGridParams,
+    onSliderChange: (newValue: number) =>
+      updateGridParams(
+        scaleBuffer,
+        updateInstanceInfoBufferAndBindGroup,
+        newValue,
+      ),
   },
   'Animation duration': {
     initial: getAnimationDuration(),
@@ -148,7 +183,8 @@ export const controls = {
   'Rotation in degrees': {
     initial: INITIAL_STEP_ROTATION,
     options: ROTATION_OPTIONS,
-    onSelectChange: updateStepRotation,
+    onSelectChange: (newValue: number) =>
+      updateStepRotation(newValue, stepRotationBuffer, middleSquareScaleBuffer),
   },
   'Draw over neighbors': {
     initial: false,

apps/typegpu-docs/src/examples/simple/rotating-triangle-tiles/params.ts

@@ -1,12 +1,6 @@
 import * as d from 'typegpu/data';
-import {
-  aspectRatioBuffer,
-  middleSquareScaleBuffer,
-  scaleBuffer,
-  stepRotationBuffer,
-  updateInstanceInfoBufferAndBindGroup,
-} from './buffers.ts';
 import { MAGIC_NUMBER } from './geometry.ts';
+import type { TgpuUniform } from 'typegpu';
 
 const INIT_TILE_DENSITY = 0.1;
 const INITIAL_STEP_ROTATION = 60;
@@ -37,7 +31,6 @@ function parseControlPoints(value: string) {
 
 function parseOneControlPoint(value: string, index: number) {
   const parsedNumber = Number(value);
-  console.log(parsedNumber);
   if (isNaN(parsedNumber)) {
     throw Error('Cubic Bezier control point must be a number');
   }
@@ -50,7 +43,11 @@ function parseOneControlPoint(value: string, index: number) {
 
 let aspectRatio = 1;
 
-function updateAspectRatio(width: number, height: number) {
+function updateAspectRatio(
+  width: number,
+  height: number,
+  aspectRatioBuffer: TgpuUniform<d.F32>,
+) {
   aspectRatio = width / height;
   aspectRatioBuffer.write(aspectRatio);
 }
@@ -72,7 +69,11 @@ const ROTATION_OPTIONS = ROTATION_TO_MIDDLE_SQUARE_SCALE_ARRAY.flatMap(
   (element) => element[0],
 );
 
-function updateStepRotation(newValue: number) {
+function updateStepRotation(
+  newValue: number,
+  stepRotationBuffer: TgpuUniform<d.F32>,
+  middleSquareScaleBuffer: TgpuUniform<d.F32>,
+) {
   stepRotationBuffer.write(newValue);
 
   // update middle triangle scale so that it doesn't
@@ -100,7 +101,11 @@ function getGridParams() {
   return gridParams;
 }
 
-function updateGridParams(newValue?: number) {
+function updateGridParams(
+  scaleBuffer: TgpuUniform<d.F32>,
+  updateInstanceInfoBufferAndBindGroup: () => void,
+  newValue?: number,
+) {
   const value = newValue ?? gridParams.tileDensity;
   gridParams = createGridParams(value);
   scaleBuffer.write(gridParams.tileDensity);