migrate to webgl instead of webgpu (for better compatability)

Author: Spu7Nix

Cargo.lock

@@ -23,7 +23,7 @@ eframe = { version = "0.32", default-features = false, features = [
 egui_extras = { version = "0.32", features = ["svg"] }
 log = "0.4.27"
 egui-wgpu = "0.32.1"
-wgpu = "25.0"
+wgpu = { version = "25.0", default-features = false, features = ["wgsl"] }
 bytemuck = { version = "1.16", features = ["derive"] }
 image = { version = "0.25.6", features = ["serde"] }
 
@@ -53,13 +53,17 @@ env_logger = "0.11.8"
 wasm-bindgen-futures = "0.4.50"
 web-sys = { version = "0.3.70", features = [
   "DedicatedWorkerGlobalScope", "Worker", "WorkerOptions", "WorkerType", "MessageEvent", "ErrorEvent",
+  "HtmlScriptElement", "HtmlCollection", "Element", "NodeList", "Blob", "BlobPropertyBag", "Url", "Window", "Document",
 ] }             # to access the DOM (to hide the loading text)
 # gloo = { version = "0.11.0", features = ["futures"] }
 serde-wasm-bindgen = "0.6"
 futures = "0.3.31"
 wasm-bindgen = "0.2"
 console_error_panic_hook = "0.1.7"
 
+# Override wgpu for WASM to use only WebGL backend
+wgpu = { version = "25.0", features = ["webgl"] }
+
 [profile.release]
 opt-level = 3 # fast and small wasm
 

Cargo.toml

@@ -93,6 +93,9 @@
             left: 0;
             width: 100%;
             height: 100%;
+            /* Limit canvas size for WebGL compatibility (max 4096x4096) */
+            max-width: 4096px;
+            max-height: 4096px;
         }
 
         .centered {
@@ -256,7 +259,6 @@
             <span class="icon-text">my website</span>
         </a>
     </div>
-
     <!--Register Service Worker. this will cache the wasm / js scripts for offline use (for PWA functionality). -->
     <!-- Force refresh (Ctrl + F5) to load the latest files instead of cached files  -->
     <script>