renderer fixes, scene fixes, use module workers

Therdel · Jul 22, 2023 · 06c9e89 · 06c9e89
1 parent cd879a8
commit 06c9e89
Show file tree

Hide file tree

Showing 26 changed files with 539 additions and 166 deletions.
diff --git a/index.html b/index.html
@@ -35,7 +35,7 @@ <h2>Raytracing with WASM</h2>
         <label>Choose a scene:</label>
         <select id="select_scenes">
             <option value="cornell_box.json">Cornell box</option>
-            <option value="scene_rust.json">Santa and balls</option>
+            <option value="santa_and_balls.json">Santa and balls</option>
         </select>
         <br>
         <label id="thread-count"></label>
@@ -64,10 +64,6 @@ <h4>Resources</h4>
 -->
     </center>
 </body>
-<!--Manual imports to share code with WebWorkers without modules or a bundler-->
-<script src="pkg/message_from_worker.js"></script>
-<script src="pkg/message_to_worker.js"></script>
-<script src="pkg/web_app.js"></script>
 <!-- source: https://github.com/gzuidhof/coi-serviceworker
     author: Guido Zuidhof
     enable COOP and COEP headers to enable SharedArrayBuffer-->

diff --git a/pkg/main/controller.d.ts b/pkg/main/controller.d.ts
@@ -0,0 +1,27 @@
+import { Model } from "./model.js";
+export declare class Controller {
+    private model;
+    private canvas_resizer;
+    private canvas_resizer_observer_context;
+    private canvas;
+    private label_time;
+    private label_thread_count;
+    private select;
+    private is_moving_camera;
+    private camera_move_start_point;
+    constructor(canvas: HTMLCanvasElement);
+    private init_listeners;
+    private start_moving_camera;
+    private move_camera;
+    private stop_moving_camera;
+    private on_canvas_resize;
+    set_model(model: Model): void;
+    get_current_scene_file(): string;
+    get_current_canvas_size(): {
+        width: number;
+        height: number;
+    };
+    deactivate_controls(): void;
+    activate_controls(): void;
+    private on_scene_select;
+}
diff --git a/pkg/main/main.d.ts b/pkg/main/main.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/pkg/main/model.d.ts b/pkg/main/model.d.ts
@@ -0,0 +1,19 @@
+import { View } from "./view.js";
+import { Controller } from "./controller.js";
+export declare enum DidHandleMessage {
+    YES = 0,
+    NO = 1
+}
+export declare class Model {
+    private readonly core;
+    constructor(view: View, controller: Controller, canvas: HTMLCanvasElement);
+    scene_select(scene_file: string): DidHandleMessage;
+    resize(width: number, height: number): DidHandleMessage;
+    turn_camera(drag_begin: {
+        x: number;
+        y: number;
+    }, drag_end: {
+        x: number;
+        y: number;
+    }): DidHandleMessage;
+}
diff --git a/pkg/main/model.js b/pkg/main/model.js
@@ -1,6 +1,3 @@
-/// <reference path="../message_to_worker.ts" />
-/// <reference path="../message_from_worker.ts" />
-/// <reference types="../../pkg/web_app" />
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -11,12 +8,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { RenderWorkerPool } from "./render_worker_pool.js";
+import init, { main } from "../../pkg/web_app.js";
+import * as MessageToWorker from "../messages/message_to_worker.js";
 function init_wasm() {
     return __awaiter(this, void 0, void 0, function* () {
-        // Load the wasm file by awaiting the Promise returned by `wasm_bindgen`
-        yield wasm_bindgen('pkg/web_app_bg.wasm');
+        // Load the wasm file
+        yield init();
         // Run main WASM entry point
-        wasm_bindgen.main();
+        main();
     });
 }
 init_wasm();
@@ -50,7 +49,7 @@ class ModelCore {
         // closure-wrap necessary, or else the this inside on_worker_message will refer to the calling worker
         // source: https://stackoverflow.com/a/20279485
         const delegate = (message) => this.on_worker_message(message);
-        this.render_worker_pool = new RenderWorkerPool(delegate, this.canvas.width, this.canvas.height);
+        this.render_worker_pool = new RenderWorkerPool(delegate);
         this.create_worker_image_buffers(this.canvas.width, this.canvas.height);
     }
     transition_state(state) {
@@ -108,15 +107,15 @@ var ModelState;
             this.model = model;
         }
         scene_select(scene_file) {
-            console.error(`ModelCore<${this.state_name()}>: Didn't handle scene_select(${scene_file})`);
+            console.log(`ModelCore<${this.state_name()}>: Didn't handle scene_select(${scene_file})`);
             return DidHandleMessage.NO;
         }
         resize(width, height) {
-            console.error(`ModelCore<${this.state_name()}>: Didn't handle resize(`, { width, height }, `)`);
+            console.log(`ModelCore<${this.state_name()}>: Didn't handle resize(`, { width, height }, `)`);
             return DidHandleMessage.NO;
         }
         turn_camera(drag_begin, drag_end) {
-            console.error(`ModelCore<${this.state_name()}>: Didn't handle turn_camera(`, { drag_begin, drag_end }, `)`);
+            console.log(`ModelCore<${this.state_name()}>: Didn't handle turn_camera(`, { drag_begin, drag_end }, `)`);
             return DidHandleMessage.NO;
         }
         on_message(message) {
@@ -140,7 +139,7 @@ var ModelState;
             const canvas_size = this.model.controller.get_current_canvas_size();
             for (let index = 0; index < amount_workers; ++index) {
                 const buffer = this.model.get_worker_buffer(index);
-                const message = new MessageToWorker_Init(index, buffer, amount_workers, this.model.controller.get_current_scene_file(), canvas_size.width, canvas_size.height);
+                const message = new MessageToWorker.Init(index, buffer, amount_workers, this.model.controller.get_current_scene_file(), canvas_size.width, canvas_size.height);
                 this.model.render_worker_pool.post(index, message);
             }
             this.model.transition_state(new Rendering(this.model));
@@ -210,20 +209,20 @@ var ModelState;
             const amount_workers = this.model.render_worker_pool.amount_workers();
             for (let index = 0; index < amount_workers; ++index) {
                 const buffer = this.model.get_worker_buffer(index);
-                const message = new MessageToWorker_Resize(width, height, buffer);
+                const message = new MessageToWorker.Resize(width, height, buffer);
                 this.model.render_worker_pool.post(index, message);
             }
             this.transition_to_rendering();
             return DidHandleMessage.YES;
         }
         scene_select(scene_file) {
-            const message = new MessageToWorker_SceneSelect(scene_file);
+            const message = new MessageToWorker.SceneSelect(scene_file);
             this.post_all(message);
             this.transition_to_rendering();
             return DidHandleMessage.YES;
         }
         turn_camera(drag_begin, drag_end) {
-            const message = new MessageToWorker_TurnCamera(drag_begin, drag_end);
+            const message = new MessageToWorker.TurnCamera(drag_begin, drag_end);
             console.log("Posting turn_camera: ", message);
             this.post_all(message);
             this.transition_to_rendering();

diff --git a/pkg/main/render_worker_pool.d.ts b/pkg/main/render_worker_pool.d.ts
@@ -0,0 +1,14 @@
+import * as MessageToWorker from "../messages/message_to_worker.js";
+import * as MessageFromWorker from "../messages/message_from_worker.js";
+export interface RenderWorkerMessageDelegate {
+    (message: MessageFromWorker.Message): any;
+}
+export declare class RenderWorkerPool {
+    private message_delegate;
+    private workers;
+    constructor(message_delegate: RenderWorkerMessageDelegate);
+    private init_workers;
+    amount_workers(): number;
+    post(index: number, message: MessageToWorker.Message): void;
+    private on_worker_message;
+}
diff --git a/pkg/main/render_worker_pool.js b/pkg/main/render_worker_pool.js
@@ -1,7 +1,5 @@
-/// <reference path="../message_to_worker.ts" />
-/// <reference path="../message_from_worker.ts" />
 export class RenderWorkerPool {
-    constructor(message_delegate, canvas_width, canvas_height) {
+    constructor(message_delegate) {
         this.message_delegate = message_delegate;
         let amount_workers;
         if (navigator.hardwareConcurrency) {
@@ -15,7 +13,7 @@ export class RenderWorkerPool {
     init_workers(amount_workers) {
         this.workers = [];
         for (let index = 0; index < amount_workers; ++index) {
-            const worker = new Worker("pkg/worker/render_worker.js");
+            const worker = new Worker("pkg/worker/render_worker.js", { type: 'module' });
             // closure-wrap necessary, or else the this inside on_worker_message will refer to the calling worker
             // source: https://stackoverflow.com/a/20279485
             worker.onmessage = (message) => this.on_worker_message(message);

diff --git a/pkg/main/tsconfig.tsbuildinfo b/pkg/main/tsconfig.tsbuildinfo
@@ -0,0 +1 @@
+{"program":{"fileNames":["../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es5.d.ts","../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.d.ts","../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.dom.d.ts","../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.core.d.ts","../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.collection.d.ts","../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.generator.d.ts","../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.promise.d.ts","../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.decorators.d.ts","../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.decorators.legacy.d.ts","../../scripts/main/view.ts","../messages/message_to_worker.d.ts","../messages/message_from_worker.d.ts","../../scripts/main/render_worker_pool.ts","../web_app.d.ts","../../scripts/main/model.ts","../../scripts/main/controller.ts","../../scripts/main/main.ts"],"fileInfos":[{"version":"6a6b471e7e43e15ef6f8fe617a22ce4ecb0e34efa6c3dfcfe7cebd392bcca9d2","affectsGlobalScope":true},"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4",{"version":"fcd3ecc9f764f06f4d5c467677f4f117f6abf49dee6716283aa204ff1162498b","affectsGlobalScope":true},{"version":"f296963760430fb65b4e5d91f0ed770a91c6e77455bacf8fa23a1501654ede0e","affectsGlobalScope":true},{"version":"5114a95689b63f96b957e00216bc04baf9e1a1782aa4d8ee7e5e9acbf768e301","affectsGlobalScope":true},{"version":"4443e68b35f3332f753eacc66a04ac1d2053b8b035a0e0ac1d455392b5e243b3","affectsGlobalScope":true},{"version":"ab22100fdd0d24cfc2cc59d0a00fc8cf449830d9c4030dc54390a46bd562e929","affectsGlobalScope":true},{"version":"f7bd636ae3a4623c503359ada74510c4005df5b36de7f23e1db8a5c543fd176b","affectsGlobalScope":true},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true},{"version":"0c20f4d2358eb679e4ae8a4432bdd96c857a2960fd6800b21ec4008ec59d60ea","affectsGlobalScope":true},{"version":"36ae84ccc0633f7c0787bc6108386c8b773e95d3b052d9464a99cd9b8795fbec","affectsGlobalScope":true},{"version":"4738f2420687fd85629c9efb470793bb753709c2379e5f85bc1815d875ceadcd","affectsGlobalScope":true},{"version":"189c0703923150aa30673fa3de411346d727cc44a11c75d05d7cf9ef095daa22","affectsGlobalScope":true},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true},{"version":"3da1153547150aa39d34d044fbda19c4ab6781e130c3687ef580a1d2e0fc203a","signature":"37ea1162e6d3d099bd09aac24203899572a5278446b95617ec9b85931db822e2"},"6215ec888192def0d75e94d2c1279c5f9b3da01dbe0eb93f6dc297179c891000","917ba33f2cd42cb40be0f39b0ddec3406a8f0efcca3616693bc53c6ece28e0da",{"version":"10af119f2b10a135d3432236c6bb54a646a1182b1adc9381fa3057adeb14eff8","signature":"9d5c801a6b3fea45277a09657b279af260a5ef372741f25e942ac638fc1a03ea"},"0b2290c0f488c1759648b4c7423b02afdb196b479d04babc4a558c5c09c3de4e",{"version":"355b08e090d334bdfcfc7c9f04e2070dcadfae5a54e0caebfea2486de4b03bf5","signature":"0434f6942a8842897306e84db9cfd7a9247030e3dff4a6bbb055722143f40513"},{"version":"edbabc9db8960aff70300a19c333da80ea42fa4a163daf6d426a1e2ce7d02b56","signature":"b08d3761c9d5565c7a01f5e1bf58c8380e7083439a8468abeda82ca96d1469f0"},{"version":"0ea536219ef3a7bde84c3f6ab3665973eefdab3fcd73503b01ec46319f8dbf69","signature":"8e609bb71c20b858c77f0e9f90bb1319db8477b13f9f965f1a1e18524bf50881"}],"root":[16,19,[21,23]],"options":{"composite":true,"module":5,"outDir":"./","rootDir":"../../scripts/main","target":2},"fileIdsList":[[21],[16,21,22],[16,17,18,19,20,22],[17,18],[16,22]],"referencedMap":[[22,1],[23,2],[21,3],[19,4]],"exportedModulesMap":[[22,1],[21,5],[19,4]],"semanticDiagnosticsPerFile":[14,15,3,5,4,2,6,7,8,9,10,11,12,13,1,18,17,20,22,23,21,19,16],"latestChangedDtsFile":"./main.d.ts"},"version":"5.0.4"}
diff --git a/pkg/main/view.d.ts b/pkg/main/view.d.ts
@@ -0,0 +1,9 @@
+export declare class View {
+    private canvas;
+    private canvas_context;
+    private label_time_measurement;
+    constructor(canvas: HTMLCanvasElement);
+    update_canvas(image_data: ImageData): void;
+    display_render_duration(duration: number): void;
+    display_rendering_state(): void;
+}
diff --git a/pkg/messages/message_from_worker.d.ts b/pkg/messages/message_from_worker.d.ts
@@ -0,0 +1,10 @@
+export type Message = Init | RenderResponse;
+export declare class Init {
+    readonly type = "MessageFromWorker_Init";
+    constructor();
+}
+export declare class RenderResponse {
+    readonly index: number;
+    readonly type = "MessageFromWorker_RenderResponse";
+    constructor(index: number);
+}
diff --git a/pkg/message_from_worker.js → pkg/messages/message_from_worker.js b/pkg/message_from_worker.js → pkg/messages/message_from_worker.js
@@ -1,9 +1,9 @@
-class MessageFromWorker_Init {
+export class Init {
     constructor() {
         this.type = "MessageFromWorker_Init";
     }
 }
-class MessageFromWorker_RenderResponse {
+export class RenderResponse {
     constructor(index) {
         this.index = index;
         this.type = "MessageFromWorker_RenderResponse";

diff --git a/pkg/messages/message_to_worker.d.ts b/pkg/messages/message_to_worker.d.ts
@@ -0,0 +1,41 @@
+export type Message = Init | SceneSelect | Resize | TurnCamera;
+export declare class Init {
+    readonly index: number;
+    readonly buffer: SharedArrayBuffer;
+    readonly amount_workers: number;
+    readonly scene_file: string;
+    readonly width: number;
+    readonly height: number;
+    readonly type = "MessageToWorker_Init";
+    constructor(index: number, buffer: SharedArrayBuffer, amount_workers: number, scene_file: string, width: number, height: number);
+}
+export declare class SceneSelect {
+    readonly scene_file: string;
+    readonly type = "MessageToWorker_SceneSelect";
+    constructor(scene_file: string);
+}
+export declare class Resize {
+    readonly width: number;
+    readonly height: number;
+    readonly buffer: SharedArrayBuffer;
+    readonly type = "MessageToWorker_Resize";
+    constructor(width: number, height: number, buffer: SharedArrayBuffer);
+}
+export declare class TurnCamera {
+    readonly drag_begin: {
+        x: number;
+        y: number;
+    };
+    readonly drag_end: {
+        x: number;
+        y: number;
+    };
+    readonly type = "MessageToWorker_TurnCamera";
+    constructor(drag_begin: {
+        x: number;
+        y: number;
+    }, drag_end: {
+        x: number;
+        y: number;
+    });
+}
diff --git a/pkg/message_to_worker.js → pkg/messages/message_to_worker.js b/pkg/message_to_worker.js → pkg/messages/message_to_worker.js
@@ -1,4 +1,4 @@
-class MessageToWorker_Init {
+export class Init {
     constructor(index, buffer, amount_workers, scene_file, width, height) {
         this.index = index;
         this.buffer = buffer;
@@ -9,21 +9,21 @@ class MessageToWorker_Init {
         this.type = "MessageToWorker_Init";
     }
 }
-class MessageToWorker_SceneSelect {
+export class SceneSelect {
     constructor(scene_file) {
         this.scene_file = scene_file;
         this.type = "MessageToWorker_SceneSelect";
     }
 }
-class MessageToWorker_Resize {
+export class Resize {
     constructor(width, height, buffer) {
         this.width = width;
         this.height = height;
         this.buffer = buffer;
         this.type = "MessageToWorker_Resize";
     }
 }
-class MessageToWorker_TurnCamera {
+export class TurnCamera {
     constructor(drag_begin, drag_end) {
         this.drag_begin = drag_begin;
         this.drag_end = drag_end;