From 24c4dd3290d35b6cd187016b350c6ccabe22ded3 Mon Sep 17 00:00:00 2001
From: Andreas Dahm <ad@colordigital.com>
Date: Thu, 5 Mar 2026 10:57:07 +0100
Subject: [PATCH] Fixed problem if webgpu is not available and added alert to
 show the problem. Maybe somewhere in the future i will use toasts for this.

---
 src/app/pages/about/about.component.html      |  8 ++++----
 .../render-canvas/babylon-canvas.component.ts | 19 ++++++++++---------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/app/pages/about/about.component.html b/src/app/pages/about/about.component.html
index bf0a8bf..314e737 100644
--- a/src/app/pages/about/about.component.html
+++ b/src/app/pages/about/about.component.html
@@ -101,10 +101,10 @@
         }
       </div>
 
-      @if(entry.key !== xpKeys.at(xpKeys.length-1)?.key)
-      {
-      <mat-divider></mat-divider>
-      }
+        @if(entry.key !== xpKeys.at(xpKeys.length-1)?.key)
+        {
+          <mat-divider></mat-divider>
+        }
       }
     </div>
   </mat-card>
diff --git a/src/app/shared/components/render-canvas/babylon-canvas.component.ts b/src/app/shared/components/render-canvas/babylon-canvas.component.ts
index 8e61be0..8c04da1 100644
--- a/src/app/shared/components/render-canvas/babylon-canvas.component.ts
+++ b/src/app/shared/components/render-canvas/babylon-canvas.component.ts
@@ -52,19 +52,16 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
     window.removeEventListener('resize', this.resizeHandler);
 
     const canvas = this.canvasRef?.nativeElement;
-    if (canvas) {
-      canvas.removeEventListener('wheel', this.wheelHandler);
-    }
+    canvas?.removeEventListener('wheel', this.wheelHandler);
 
-    if (this.engine) {
-      this.engine.dispose();
-    }
+    this.engine?.dispose();
   }
 
   private async initBabylon(): Promise<void> {
     const canvas = this.canvasRef.nativeElement;
-    this.engine = new WebGPUEngine(canvas);
-    await this.engine.initAsync().then(() => {
+    const tmpEngine = new WebGPUEngine(canvas);
+    await tmpEngine.initAsync().then(() => {
+      this.engine = tmpEngine;
       this.scene = new Scene(this.engine);
       this.setupCamera(canvas);
       this.addListener(canvas);
@@ -75,7 +72,11 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
         engine: this.engine
       });
       this.addRenderLoop(canvas);
-    });
+    })
+      .catch(() => {
+        alert("WebGPU could not be started. Please check your browser if it supports WebGPU.");
+        this.engine = null!;
+      });
   }
 
   private addListener(canvas: HTMLCanvasElement) {