src/app/shared/rendering/canvas/babylon-canvas.component.scss

@@ -1,16 +1,19 @@
 .canvas-container {
-  width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #1a1a1a;
+  width: 100%;
+
+  max-width: 1000px;
+  max-height: 1000px;
+  margin: 0 auto;
 }
 
 canvas {
-  aspect-ratio: 1 / 1;
-
+  display: block;
   width: 100%;
-  height: auto;
+  height: 100%;
+  aspect-ratio: 1 / 1;
 
   min-width: 200px;
   min-height: 200px;
@@ -18,8 +21,7 @@ canvas {
   max-height: 1000px;
 
   touch-action: none;
-  display: block;
-
   border: none;
+  border-radius: 20px;
   outline: none;
 }

src/app/shared/rendering/canvas/babylon-canvas.component.ts

@@ -1,5 +1,5 @@
 import {AfterViewInit, Component, ElementRef, EventEmitter, inject, Input, NgZone, OnDestroy, Output, ViewChild} from '@angular/core';
-import {ArcRotateCamera, Camera, Engine, MeshBuilder, Scene, ShaderMaterial, Vector2, Vector3} from '@babylonjs/core';
+import {ArcRotateCamera, Camera, Engine, MeshBuilder, Scene, ShaderMaterial, Vector2, Vector3, WebGPUEngine} from '@babylonjs/core';
 
 export interface RenderConfig {
   mode: '2D' | '3D';
@@ -27,19 +27,17 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
 
   @Output() sceneReady = new EventEmitter<Scene>();
 
-  private engine!: Engine;
+  private engine!: WebGPUEngine;
   private scene!: Scene;
   private shaderMaterial!: ShaderMaterial;
   private camera!: Camera;
 
   //Listener
-  private resizeHandler = () => this.handleResize();
-  private wheelHandler = (evt: WheelEvent) => evt.preventDefault();
+  private readonly resizeHandler = () => this.handleResize();
+  private readonly wheelHandler = (evt: WheelEvent) => evt.preventDefault();
 
   ngAfterViewInit(): void {
-    this.ngZone.runOutsideAngular(() => {
-      this.initBabylon();
-    });
+    this.initBabylon().then(() => { console.log("Engine initialized"); });
   }
 
   ngOnDestroy(): void {
@@ -55,16 +53,18 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
     }
   }
 
-  private initBabylon(): void {
+  private async initBabylon(): Promise<void> {
     const canvas = this.canvasRef.nativeElement;
-    this.engine = new Engine(canvas, true);
-    this.scene = new Scene(this.engine);
-    this.setupCamera(canvas);
-    this.addListener(canvas);
-    this.createShaderMaterial();
-    this.createFullScreenRect();
-    this.sceneReady.emit(this.scene);
-    this.addRenderLoop(canvas);
+    this.engine = new WebGPUEngine(canvas);
+    await this.engine.initAsync().then(() => {
+      this.scene = new Scene(this.engine);
+      this.setupCamera(canvas);
+      this.addListener(canvas);
+      this.createShaderMaterial();
+      this.createFullScreenRect();
+      this.sceneReady.emit(this.scene);
+      this.addRenderLoop(canvas);
+    });
   }
 
   private addListener(canvas: HTMLCanvasElement) {
@@ -109,7 +109,7 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
   }
 
   private createFullScreenRect() {
-    const plane = MeshBuilder.CreatePlane("plane", {size: 110}, this.scene);
+    const plane = MeshBuilder.CreatePlane("plane", {size: 100}, this.scene);
 
     if (this.config.mode === '3D') {
       plane.parent = this.camera;