Lobo_Corp/playground-frontend
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Activity

Fixed small visual problems with canvas

Browse Source
This commit is contained in:
LoboTheDark
2026-02-17 09:39:37 +01:00
parent 270716551d
commit 796fdf4a79
2 changed files with 26 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/shared/rendering/canvas/babylon-canvas.component.scss
View File

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

34
src/app/shared/rendering/canvas/babylon-canvas.component.ts
View File

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