Move VM into a web worker

Author: object-Object

Cargo.lock

@@ -9,7 +9,7 @@ crate-type = ["cdylib"]
 [dependencies]
 console_error_panic_hook = "0.1.7"
 embedded-graphics = "0.8.1"
-embedded-graphics-web-simulator = "0.4.0"
+embedded-graphics-web-simulator = { version = "0.4.0", git = "https://github.com/object-Object/embedded-graphics-web-simulator", branch = "offscreen_canvas" }
 getrandom = { version = "0.3.3", features = ["wasm_js"] }
 js-sys = "0.3.77"
 mindy = { path = "..", features = ["embedded_graphics", "wasm"] }
@@ -20,5 +20,6 @@ wee_alloc = "0.4.5"
 version = "0.3"
 features = [
     "console",
-    "Element",
+    "Performance",
+    "WorkerGlobalScope",
 ]

mindy-website/Cargo.toml

@@ -17,7 +17,7 @@ use mindy::{
     },
 };
 use wasm_bindgen::prelude::*;
-use web_sys::Element;
+use web_sys::{OffscreenCanvas, Performance, WorkerGlobalScope};
 
 #[global_allocator]
 static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
@@ -32,12 +32,11 @@ macro_rules! log {
 }
 
 #[wasm_bindgen]
-pub fn init() {
+pub fn init_logging() {
     console_error_panic_hook::set_once();
 }
 
-#[wasm_bindgen]
-pub fn pack_point(x: i16, y: i16) -> u32 {
+fn pack_point(x: i16, y: i16) -> u32 {
     ((y as u32) << 16) | (x as u32)
 }
 
@@ -48,23 +47,48 @@ fn unpack_point(position: u32) -> PackedPoint2 {
     }
 }
 
+fn fps_to_delta(fps: f64) -> f64 {
+    // nominal 60 fps
+    // 60 / 60 -> 1
+    // 60 / 120 -> 0.5
+    // 60 / 30 -> 2
+    (60. / fps).min(MAX_DELTA)
+}
+
+fn delta_to_time(delta: f64) -> f64 {
+    // 60 ticks per second
+    delta / 60.
+}
+
 #[wasm_bindgen]
 pub struct WebLogicVM {
     vm: LogicVM,
     globals: Constants,
     logic_parser: LogicParser,
-    prev_timestamp: Option<f64>,
+    performance: Performance,
+    delta: f64,
+    tick_secs: f64,
+    next_tick_end: f64,
 }
 
 #[wasm_bindgen]
 impl WebLogicVM {
     #[wasm_bindgen(constructor)]
-    pub fn new() -> Self {
+    pub fn new(target_fps: f64) -> Self {
+        let delta = fps_to_delta(target_fps);
+        let tick_secs = delta_to_time(delta);
         Self {
             vm: LogicVM::new(),
             globals: LVar::create_global_constants(),
             logic_parser: LogicParser::new(),
-            prev_timestamp: None,
+            performance: js_sys::global()
+                .dyn_into::<WorkerGlobalScope>()
+                .expect("failed to cast global to WorkerGlobalScope")
+                .performance()
+                .expect("failed to get performance object"),
+            delta,
+            tick_secs,
+            next_tick_end: 0.,
         }
     }
 
@@ -102,12 +126,12 @@ impl WebLogicVM {
         position: u32,
         width: u32,
         height: u32,
-        parent: &Element,
+        canvas: &OffscreenCanvas,
     ) -> Result<(), String> {
-        let display = WebSimulatorDisplay::<Rgb888>::new(
+        let display = WebSimulatorDisplay::<Rgb888, _>::from_offscreen_canvas(
             (width, height),
             &OutputSettings::default(),
-            Some(parent),
+            canvas,
         );
 
         let display_data = EmbeddedDisplayData::new(
@@ -185,32 +209,50 @@ impl WebLogicVM {
         ))
     }
 
+    pub fn remove_building(&mut self, position: u32) {
+        self.vm.remove_building(unpack_point(position));
+    }
+
     pub fn building_name(&self, position: u32) -> Option<JsString> {
         self.vm
             .building(unpack_point(position))
             .map(|b| JsString::from_char_code(b.block.name.as_u16str().as_slice()))
     }
 
-    pub fn do_tick(&mut self, timestamp: f64) {
-        // convert to seconds
-        let timestamp = timestamp / 1000.;
-
-        // nominal 60 ticks per second
-        let delta = match self.prev_timestamp {
-            Some(prev_timestamp) => (timestamp - prev_timestamp) * 60.,
-            None => 1.,
+    pub fn processor_links(&self, position: u32) -> Option<Vec<JsString>> {
+        if let Some(building) = self.vm.building(unpack_point(position))
+            && let BuildingData::Processor(processor) = &*building.data.borrow()
+        {
+            Some(
+                processor
+                    .state
+                    .links()
+                    .iter()
+                    .map(|l| JsString::from(l.name.as_str()))
+                    .collect(),
+            )
+        } else {
+            None
         }
-        .min(MAX_DELTA);
+    }
 
-        self.prev_timestamp = Some(timestamp);
-        self.vm
-            .do_tick_with_delta(Duration::from_secs_f64(timestamp), delta);
+    pub fn set_target_fps(&mut self, target_fps: f64) {
+        self.delta = fps_to_delta(target_fps);
+        self.tick_secs = delta_to_time(self.delta);
+        self.next_tick_end = 0.;
     }
-}
 
-impl Default for WebLogicVM {
-    fn default() -> Self {
-        Self::new()
+    pub fn do_tick(&mut self) {
+        let mut time;
+        loop {
+            time = self.performance.now() / 1000.;
+            self.vm
+                .do_tick_with_delta(Duration::from_secs_f64(time), self.delta);
+            if time >= self.next_tick_end {
+                break;
+            }
+        }
+        self.next_tick_end = time + self.tick_secs;
     }
 }
 

mindy-website/src/lib.rs

@@ -31,6 +31,7 @@ export default tseslint.config([
                 },
             ],
             "@typescript-eslint/consistent-type-definitions": "off",
+            "@typescript-eslint/switch-exhaustiveness-check": "warn",
         },
         languageOptions: {
             parserOptions: {

mindy-website/www/eslint.config.js

@@ -5,10 +5,11 @@
     "type": "module",
     "scripts": {
         "dev": "vite",
-        "build": "tsc -b && vite build",
+        "build": "tsc -b && yarn wasm-build && vite build",
         "lint": "eslint .",
         "preview": "vite preview",
-        "wasm": "wasm-pack build .. --dev && yarn upgrade mindy-website"
+        "wasm": "wasm-pack build .. --target web --dev && yarn upgrade mindy-website",
+        "wasm-build": "wasm-pack build .. --target web --release && yarn upgrade mindy-website"
     },
     "dependencies": {
         "@mantine/core": "^8.2.4",
@@ -37,7 +38,6 @@
         "prettier": "^3.6.2",
         "typescript": "~5.8.3",
         "typescript-eslint": "^8.39.1",
-        "vite": "^7.1.2",
-        "vite-plugin-wasm": "^3.5.0"
+        "vite": "^7.1.2"
     }
 }

mindy-website/www/package.json

@@ -2,47 +2,25 @@ import { Center, Loader, MantineProvider } from "@mantine/core";
 import "@mantine/core/styles.css";
 import { ReactFlowProvider } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
-import { useEffect, useRef, useState } from "react";
-
-import { init, WebLogicVM } from "mindy-website";
+import { Suspense } from "react";
 
 import LogicVMFlow from "./components/LogicVMFlow";
+import LogicVMProvider from "./components/LogicVMProvider";
 import "./global.css";
 import { theme } from "./theme";
 
 export default function App() {
-    const [vm, setVM] = useState<WebLogicVM>();
-    const frameRef = useRef(0);
-
-    useEffect(() => {
-        init();
-
-        const newVM = new WebLogicVM();
-        setVM(newVM);
-
-        // start tick loop
-        const callback = (time: number) => {
-            newVM.do_tick(time);
-            frameRef.current = requestAnimationFrame(callback);
-        };
-        frameRef.current = requestAnimationFrame(callback);
-
-        return () => {
-            cancelAnimationFrame(frameRef.current);
-        };
-    }, []);
-
     return (
         <MantineProvider theme={theme} defaultColorScheme="dark">
-            <ReactFlowProvider>
-                <Center h="100vh">
-                    {vm == null ? (
-                        <Loader color="indigo" size="lg" />
-                    ) : (
-                        <LogicVMFlow vm={vm} />
-                    )}
-                </Center>
-            </ReactFlowProvider>
+            <Center h="100vh">
+                <Suspense fallback={<Loader color="indigo" size="lg" />}>
+                    <LogicVMProvider>
+                        <ReactFlowProvider>
+                            <LogicVMFlow />
+                        </ReactFlowProvider>
+                    </LogicVMProvider>
+                </Suspense>
+            </Center>
         </MantineProvider>
     );
 }