Merge pull request #21 from hsimpson/bugfix/tiled-renderer

Bugfix/tiled renderer
hsimpson · Jun 20, 2023 · dabdefb · dabdefb
2 parents 28cab87 + 30f1749
commit dabdefb
Show file tree

Hide file tree

Showing 4 changed files with 315 additions and 308 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-20.2.0
+20.3.0
diff --git a/package.json b/package.json
@@ -23,16 +23,16 @@
   },
   "homepage": "https://github.com/hsimpson/ts-raytracer#readme",
   "devDependencies": {
-    "@types/node": "^20.2.5",
-    "@types/react": "^18.2.7",
-    "@types/react-dom": "^18.2.4",
+    "@types/node": "^20.3.1",
+    "@types/react": "^18.2.13",
+    "@types/react-dom": "^18.2.6",
     "@types/recoil": "0.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.59.8",
-    "@typescript-eslint/parser": "^5.59.8",
-    "@typescript-eslint/typescript-estree": "^5.59.8",
-    "@vitejs/plugin-react": "^4.0.0",
-    "@webgpu/types": "^0.1.32",
-    "eslint": "^8.41.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
+    "@typescript-eslint/typescript-estree": "^5.60.0",
+    "@vitejs/plugin-react": "^4.0.1",
+    "@webgpu/types": "^0.1.33",
+    "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-react": "^1.1.7",
     "eslint-plugin-prettier": "^4.2.1",

diff --git a/src/raytracer-gpu/raytracergpu.ts b/src/raytracer-gpu/raytracergpu.ts
@@ -6,7 +6,6 @@ import { WebGPUBuffer } from './webgpubuffer';
 import { WebGPUComputePipline } from './webgpucomputepipeline';
 import { WebGPUContext } from './webgpucontext';
 import { WebGPURenderPipeline } from './webgpurenderpipeline';
-// import { sleep } from '../util';
 
 const LOCAL_SIZE = 8;
 
@@ -105,49 +104,14 @@ export class RaytracerGPU extends RaytracerBase {
 
     await renderPipeline.initialize();
 
-    // const imageData = this._context2D.createImageData(this._imageWidth, this._imageHeight);
-
-    const raytracing = async (): Promise<void> => {
-      return new Promise(resolve => {
-        const computeTiles = createComputeTiles(
-          this._rayTracerOptions.imageWidth,
-          this._rayTracerOptions.imageHeight,
-          this._rayTracerOptions.tileSize,
-        );
-
-        const frequency = 50;
-        let sample = 1;
-        let tile: ComputeTile;
-        const frame = (): void => {
-          const frameStartTime = window.performance.now();
-          let duration = 0;
-          do {
-            if (sample === 1) {
-              tile = computeTiles.shift();
-            }
-            this.computePass(computePipeline, sample, tile);
-            if (sample < this._rayTracerOptions.samplesPerPixel) {
-              sample++;
-            } else {
-              sample = 1;
-            }
-            duration += window.performance.now() - frameStartTime;
-          } while (computeTiles.length && duration < frequency);
-          this.renderPass(renderPipeline);
-
-          if (computeTiles.length || sample < this._rayTracerOptions.samplesPerPixel - 1) {
-            window.requestAnimationFrame(frame);
-          } else {
-            resolve();
-          }
-        };
-        window.requestAnimationFrame(frame);
-      });
-    };
-
+    const computeTiles = createComputeTiles(
+      this._rayTracerOptions.imageWidth,
+      this._rayTracerOptions.imageHeight,
+      this._rayTracerOptions.tileSize,
+    );
     console.timeEnd('RaytracerGPU initialization');
-    // raytracer finished
-    await raytracing();
+
+    await this.renderTiles(computeTiles, computePipeline, renderPipeline);
 
     const duration = performance.now() - this._startTime;
     const stats = `WebGPU -- ${this.getStats(duration)}`;
@@ -180,6 +144,46 @@ export class RaytracerGPU extends RaytracerBase {
     //
   }
 
+  private async renderTiles(
+    tiles: ComputeTile[],
+    computePipeline: WebGPUComputePipline,
+    renderPipeline: WebGPURenderPipeline,
+  ): Promise<void> {
+    return new Promise(resolve => {
+      const numOfTiles = tiles.length;
+      console.log(`Number of tiles: ${numOfTiles}`);
+
+      let tileIndex = 0;
+      let sample = 1;
+      const frequency = 16;
+      const frame = (): void => {
+        const frameStartTime = window.performance.now();
+        let duration = 0;
+        do {
+          this.computePass(computePipeline, sample++, tiles[tileIndex]);
+
+          if (sample === this._rayTracerOptions.samplesPerPixel) {
+            sample = 1;
+            tileIndex++;
+            if (tileIndex === numOfTiles) {
+              this.renderPass(renderPipeline);
+              resolve();
+              return;
+            }
+          }
+          duration += window.performance.now() - frameStartTime;
+        } while (duration < frequency);
+        this.renderPass(renderPipeline);
+
+        if (tileIndex < numOfTiles - 1 || sample < this._rayTracerOptions.samplesPerPixel) {
+          window.requestAnimationFrame(frame);
+        }
+      };
+
+      window.requestAnimationFrame(frame);
+    });
+  }
+
   private async initialize(): Promise<void> {
     if (this._initialized) {
       return;
@@ -212,6 +216,7 @@ export class RaytracerGPU extends RaytracerBase {
   }
 
   private computePass(computePipeline: WebGPUComputePipline, sample: number, tile: ComputeTile): void {
+    // console.log('computePass', sample, tile);
     const commandEncoder = WebGPUContext.device.createCommandEncoder();
 
     computePipeline.updateUniformBuffer(sample, tile);
@@ -225,6 +230,7 @@ export class RaytracerGPU extends RaytracerBase {
   }
 
   private renderPass(renderPipeLine: WebGPURenderPipeline): void {
+    // console.log('renderPass');
     const commandEncoder = WebGPUContext.device.createCommandEncoder();
 
     // renderPipeLine.updateUniformBuffer(sample);