Allow more agents & dynamic setting of agent count

src/utils/format-number.ts

@@ -0,0 +1,11 @@
+export const formatNumber = (value: number, unit = ''): string => {
+  if (value >= 1e6) {
+    return `${(value / 1e6).toFixed(1)} million ${unit}`;
+  }
+
+  if (value >= 1e3) {
+    return `${(value / 1e3).toFixed(1)} thousand ${unit}`;
+  }
+
+  return `${value === Math.floor(value) ? value : value.toFixed(2)}${unit}`;
+};

src/utils/graphics/get-workgroup-counts.ts

@@ -0,0 +1,28 @@
+export const getWorkgroupCounts = (
+  device: GPUDevice,
+  invocationCount: number,
+  workgroupSize: number
+): [number, number, number] => {
+  const workgroupCount = Math.ceil(invocationCount / workgroupSize);
+
+  const workgroupCountX = Math.min(
+    device.limits.maxComputeWorkgroupsPerDimension,
+    workgroupCount
+  );
+
+  const workgroupCountY = Math.min(
+    device.limits.maxComputeWorkgroupsPerDimension,
+    Math.ceil(workgroupCount / workgroupCountX)
+  );
+
+  const workgroupCountZ = Math.min(
+    device.limits.maxComputeWorkgroupsPerDimension,
+    Math.ceil(workgroupCount / workgroupCountX / workgroupCountY)
+  );
+
+  if (workgroupCountX * workgroupCountY * workgroupCountZ < workgroupCount) {
+    throw new Error('Cannot have this many invocations');
+  }
+
+  return [workgroupCountX, workgroupCountY, workgroupCountZ];
+};

src/utils/graphics/initialize-gpu.ts

@@ -22,10 +22,7 @@ export const initializeGpu = async (): Promise<GPUDevice> => {
     requiredLimits: {
       maxBufferSize: adapter.limits.maxBufferSize,
       maxStorageBufferBindingSize: adapter.limits.maxStorageBufferBindingSize,
-      maxComputeInvocationsPerWorkgroup: adapter.limits.maxComputeInvocationsPerWorkgroup,
-      maxComputeWorkgroupSizeX: adapter.limits.maxComputeWorkgroupSizeX,
-      maxComputeWorkgroupSizeY: adapter.limits.maxComputeWorkgroupSizeY,
-      maxComputeWorkgroupSizeZ: adapter.limits.maxComputeWorkgroupSizeZ,
+      maxComputeWorkgroupsPerDimension: adapter.limits.maxComputeWorkgroupsPerDimension,
     },
   });
 

src/utils/settings-slider.ts

@@ -1,3 +1,5 @@
+import { formatNumber } from './format-number';
+
 export interface SliderConfiguration {
   min: number;
   max: number;
@@ -72,17 +74,13 @@ export class SettingsSlider<T extends Record<string, number>> {
     );
   }
 
-  private get formattedValue(): string {
-    const value = this.settings[this.settingName];
-    const unit = this.config.unit ?? '';
-
-    return `${value === Math.floor(value) ? value : value.toFixed(2)}${unit}`;
-  }
-
   private onChange() {
     this.settings[this.settingName] = Number(this.slider.value) as any;
     this.config.onChangeCallback?.(this.settings[this.settingName]);
-    this.valueDisplay.innerText = this.formattedValue;
+    this.valueDisplay.innerText = formatNumber(
+      this.settings[this.settingName],
+      this.config.unit
+    );
   }
 
   public updateConfig(config: Partial<SliderConfiguration>) {