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

@@ -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>

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) {