Bitonic Sort Update 2

src/sample/bitonicSort/main.ts

@@ -28,11 +28,14 @@ type DisplayType = 'Elements' | 'Swap Highlight';
 // Gui settings object
 interface SettingsInterface {
   'Total Elements': number;
+  'Thread Constraint': number;
   'Grid Width': number;
   'Grid Height': number;
+  'Grid Dimensions': string;
   'Total Threads': number;
   'Hovered Cell': number;
   'Swapped Cell': number;
+  'Current Step': string;
   'Step Index': number;
   'Total Steps': number;
   'Prev Step': StepType;
@@ -66,6 +69,11 @@ SampleInitFactoryWebGPU(
       totalElementLengths.push(i);
     }
 
+    const totalThreadLengths = [];
+    for (let i = maxThreadsX; i >= 2; i /= 2) {
+      totalThreadLengths.push(i);
+    }
+
     const defaultGridWidth =
       Math.sqrt(maxElements) % 2 === 0
         ? Math.floor(Math.sqrt(maxElements))
@@ -76,10 +84,14 @@ SampleInitFactoryWebGPU(
     const settings: SettingsInterface = {
       // number of cellElements. Must equal gridWidth * gridHeight and 'Total Threads' * 2
       'Total Elements': maxElements,
+      // Artificially constrain the maximum number of threads/invocations that can be executed per workgroup
+      'Thread Constraint': maxThreadsX,
       // width of screen in cells.
       'Grid Width': defaultGridWidth,
       // height of screen in cells
       'Grid Height': defaultGridHeight,
+      // Grid Dimensions as string
+      'Grid Dimensions': `${defaultGridWidth}x${defaultGridHeight}`,
       // number of threads to execute in a workgroup ('Total Threads', 1, 1)
       'Total Threads': maxThreadsX,
       // Cell in element grid mouse element is hovering over
@@ -90,6 +102,8 @@ SampleInitFactoryWebGPU(
       'Step Index': 0,
       // Total steps to sort current number of elements
       'Total Steps': getNumSteps(maxElements),
+      //Step Info as string
+      'Current Step': `0 of 91`,
       // Previously executed step
       'Prev Step': 'NONE',
       // Next step to execute
@@ -234,29 +248,33 @@ SampleInitFactoryWebGPU(
     );
 
     const resetExecutionInformation = () => {
-      // Total threads are either elements / 2 or maxWorkgroupsSizeX
+      // Total threads are either elements / 2 or Max Threads X
       totalThreadsController.setValue(
-        Math.min(settings['Total Elements'] / 2, maxThreadsX)
+        Math.min(settings['Total Elements'] / 2, settings['Thread Constraint'])
       );
 
       // Dispatch a workgroup for every (Max threads * 2) elements
       const workgroupsPerStep =
-        (settings['Total Elements'] - 1) / (maxThreadsX * 2);
+        (settings['Total Elements'] - 1) / (settings['Thread Constraint'] * 2);
 
       totalWorkgroupsController.setValue(Math.ceil(workgroupsPerStep));
 
       // Reset step Index and number of steps based on elements size
-      stepIndexController.setValue(0);
-      totalStepsController.setValue(getNumSteps(settings['Total Elements']));
+      settings['Step Index'] = 0;
+      settings['Total Steps'] = getNumSteps(settings['Total Elements']);
+      currentStepController.setValue(
+        `${settings['Step Index']} of ${settings['Total Steps']}`
+      );
 
       // Get new width and height of screen display in cells
       const newCellWidth =
         Math.sqrt(settings['Total Elements']) % 2 === 0
           ? Math.floor(Math.sqrt(settings['Total Elements']))
           : Math.floor(Math.sqrt(settings['Total Elements'] / 2));
       const newCellHeight = settings['Total Elements'] / newCellWidth;
-      gridWidthController.setValue(newCellWidth);
-      gridHeightController.setValue(newCellHeight);
+      settings['Grid Width'] = newCellWidth;
+      settings['Grid Height'] = newCellHeight;
+      gridDimensionsController.setValue(`${newCellWidth}x${newCellHeight}`);
 
       // Set prevStep to None (restart) and next step to FLIP
       prevStepController.setValue('NONE');
@@ -308,14 +326,20 @@ SampleInitFactoryWebGPU(
         }),
         compute: {
           module: device.createShaderModule({
-            code: NaiveBitonicCompute(settings['Total Elements'] / 2),
+            code: NaiveBitonicCompute(
+              Math.min(
+                settings['Total Elements'] / 2,
+                settings['Thread Constraint']
+              )
+            ),
           }),
           entryPoint: 'computeMain',
         },
       });
       // Randomize array elements
       randomizeElementArray();
       highestBlockHeight = 2;
+      // Unlock thread
     };
 
     randomizeElementArray();
@@ -370,6 +394,7 @@ SampleInitFactoryWebGPU(
         if (settings['Next Step'] === 'NONE') {
           clearInterval(completeSortIntervalID);
           completeSortIntervalID = null;
+          threadConstraintCell.domElement.style.pointerEvents = 'auto';
         }
         if (settings['Sort Speed'] !== currentIntervalSpeed) {
           clearInterval(completeSortIntervalID);
@@ -389,6 +414,36 @@ SampleInitFactoryWebGPU(
       .onChange(() => {
         endSortInterval();
         resizeElementArray();
+        threadConstraintCell.domElement.style.pointerEvents = 'auto';
+      });
+    const threadConstraintCell = computeResourcesFolder
+      .add(settings, 'Thread Constraint', totalThreadLengths)
+      .onChange(() => {
+        const constraint = Math.min(
+          settings['Total Elements'] / 2,
+          settings['Thread Constraint']
+        );
+        const workgroupsPerStep =
+          (settings['Total Elements'] - 1) /
+          (settings['Thread Constraint'] * 2);
+        totalThreadsController.setValue(constraint);
+        totalWorkgroupsController.setValue(Math.ceil(workgroupsPerStep));
+        computePipeline = computePipeline = device.createComputePipeline({
+          layout: device.createPipelineLayout({
+            bindGroupLayouts: [computeBGCluster.bindGroupLayout],
+          }),
+          compute: {
+            module: device.createShaderModule({
+              code: NaiveBitonicCompute(
+                Math.min(
+                  settings['Total Elements'] / 2,
+                  settings['Thread Constraint']
+                )
+              ),
+            }),
+            entryPoint: 'computeMain',
+          },
+        });
       });
     const totalThreadsController = computeResourcesFolder.add(
       settings,
@@ -404,39 +459,45 @@ SampleInitFactoryWebGPU(
     const controlFolder = gui.addFolder('Sort Controls');
     controlFolder.add(settings, 'Sort Speed', 50, 1000).step(50);
     controlFolder.add(settings, 'Execute Sort Step').onChange(() => {
+      // Thread number locked upon sort
+      threadConstraintCell.domElement.style.pointerEvents = 'none';
       endSortInterval();
       settings.executeStep = true;
     });
     controlFolder.add(settings, 'Randomize Values').onChange(() => {
       endSortInterval();
       randomizeElementArray();
       resetExecutionInformation();
+      // Unlock threadChange since sort has stopped
+      threadConstraintCell.domElement.style.pointerEvents = 'auto';
     });
     controlFolder
       .add(settings, 'Log Elements')
       .onChange(() => console.log(elements));
-    controlFolder.add(settings, 'Complete Sort').onChange(startSortInterval);
+    controlFolder.add(settings, 'Complete Sort').onChange(() => {
+      // Thread number locked upon sort
+      threadConstraintCell.domElement.style.pointerEvents = 'none';
+      startSortInterval();
+    });
     controlFolder.open();
 
     // Information about grid display
     const gridFolder = gui.addFolder('Grid Information');
     gridFolder.add(settings, 'Display Mode', ['Elements', 'Swap Highlight']);
-    const gridWidthController = gridFolder.add(settings, 'Grid Width');
-    const gridHeightController = gridFolder.add(settings, 'Grid Height');
+    const gridDimensionsController = gridFolder.add(
+      settings,
+      'Grid Dimensions'
+    );
     const hoveredCellController = gridFolder
       .add(settings, 'Hovered Cell')
       .onChange(setSwappedCell);
     const swappedCellController = gridFolder.add(settings, 'Swapped Cell');
 
     // Additional Information about the execution state of the sort
     const executionInformationFolder = gui.addFolder('Execution Information');
-    const stepIndexController = executionInformationFolder.add(
+    const currentStepController = executionInformationFolder.add(
       settings,
-      'Step Index'
-    );
-    const totalStepsController = executionInformationFolder.add(
-      settings,
-      'Total Steps'
+      'Current Step'
     );
     const prevStepController = executionInformationFolder.add(
       settings,
@@ -485,18 +546,17 @@ SampleInitFactoryWebGPU(
     });
 
     // Deactivate interaction with select GUI elements
+    threadConstraintCell.domElement.style.pointerEvents = 'none';
     totalWorkgroupsController.domElement.style.pointerEvents = 'none';
     hoveredCellController.domElement.style.pointerEvents = 'none';
     swappedCellController.domElement.style.pointerEvents = 'none';
-    stepIndexController.domElement.style.pointerEvents = 'none';
-    totalStepsController.domElement.style.pointerEvents = 'none';
+    currentStepController.domElement.style.pointerEvents = 'none';
     prevStepController.domElement.style.pointerEvents = 'none';
     prevBlockHeightController.domElement.style.pointerEvents = 'none';
     nextStepController.domElement.style.pointerEvents = 'none';
     nextBlockHeightController.domElement.style.pointerEvents = 'none';
     totalThreadsController.domElement.style.pointerEvents = 'none';
-    gridWidthController.domElement.style.pointerEvents = 'none';
-    gridHeightController.domElement.style.pointerEvents = 'none';
+    gridDimensionsController.domElement.style.pointerEvents = 'none';
     totalSwapsController.domElement.style.pointerEvents = 'none';
 
     let highestBlockHeight = 2;
@@ -550,7 +610,11 @@ SampleInitFactoryWebGPU(
         computePassEncoder.setBindGroup(0, computeBGCluster.bindGroups[0]);
         computePassEncoder.dispatchWorkgroups(settings['Total Workgroups']);
         computePassEncoder.end();
-        stepIndexController.setValue(settings['Step Index'] + 1);
+        //stepIndexController.setValue(settings['Step Index'] + 1);
+        settings['Step Index'] = settings['Step Index'] + 1;
+        currentStepController.setValue(
+          `${settings['Step Index']} of ${settings['Total Steps']}`
+        );
         prevStepController.setValue(settings['Next Step']);
         prevBlockHeightController.setValue(settings['Next Swap Span']);
         nextBlockHeightController.setValue(settings['Next Swap Span'] / 2);