Merge pull request '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.' (#30) from bugfix/webgpu into main

Reviewed-on: #30

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,6 +72,10 @@ 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!;
       });
   }