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

Added resize callback to restart simulation new if canvas is resized

Browse Source
This commit is contained in:
Lobo
2026-02-21 10:25:20 +01:00
parent 2bfa8ba9a1
commit 5721b2e48e
4 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/pages/algorithms/fractal/fractal.component.ts
View File

@@ -8,7 +8,7 @@ import {MatSelect} from '@angular/material/select';
import {AlgorithmInformation} from '../information/information.models'; import {AlgorithmInformation} from '../information/information.models';
import {UrlConstants} from '../../../constants/UrlConstants'; import {UrlConstants} from '../../../constants/UrlConstants';
import {FormsModule} from '@angular/forms'; import {FormsModule} from '@angular/forms';
import {BabylonCanvas, RenderCallback, RenderConfig, SceneReadyEvent} from '../../../shared/rendering/canvas/babylon-canvas.component'; import {BabylonCanvas, RenderCallback, RenderConfig, SceneEventData} from '../../../shared/rendering/canvas/babylon-canvas.component';
import {FRACTAL2D_FRAGMENT, FRACTAL2D_VERTEX} from './fractal.shader'; import {FRACTAL2D_FRAGMENT, FRACTAL2D_VERTEX} from './fractal.shader';
import {PointerEventTypes, PointerInfo, Scene, ShaderMaterial, Vector2} from '@babylonjs/core'; import {PointerEventTypes, PointerInfo, Scene, ShaderMaterial, Vector2} from '@babylonjs/core';
import {MatButton} from '@angular/material/button'; import {MatButton} from '@angular/material/button';
@@ -155,7 +155,7 @@ export class FractalComponent implements OnInit {
} }
} }
onSceneReady(event: SceneReadyEvent): void { onSceneReady(event: SceneEventData): void {
event.scene.onPointerObservable.add((pointerInfo) => { event.scene.onPointerObservable.add((pointerInfo) => {
switch (pointerInfo.type) { switch (pointerInfo.type) {

1
src/app/pages/algorithms/pendulum/pendulum.component.html
View File

@@ -6,6 +6,7 @@
<app-babylon-canvas <app-babylon-canvas
[config]="renderConfig" [config]="renderConfig"
(sceneReady)="onSceneReady($event)" (sceneReady)="onSceneReady($event)"
(sceneResized)="onSceneReady($event)"
/> />
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>

5
src/app/pages/algorithms/pendulum/pendulum.component.ts
View File

@@ -1,5 +1,5 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {BabylonCanvas, RenderConfig, SceneReadyEvent} from '../../../shared/rendering/canvas/babylon-canvas.component'; import {BabylonCanvas, RenderConfig, SceneEventData} from '../../../shared/rendering/canvas/babylon-canvas.component';
import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card'; import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
import {ComputeShader, ShaderLanguage, StorageBuffer} from '@babylonjs/core'; import {ComputeShader, ShaderLanguage, StorageBuffer} from '@babylonjs/core';
import {PENDULUM_FRAGMENT_SHADER_WGSL, PENDULUM_PHYSIC_COMPUTE_SHADER_WGSL, PENDULUM_RENDER_COMPUTE_SHADER_WGSL, PENDULUM_VERTEX_SHADER_WGSL} from './pendulum.shader'; import {PENDULUM_FRAGMENT_SHADER_WGSL, PENDULUM_PHYSIC_COMPUTE_SHADER_WGSL, PENDULUM_RENDER_COMPUTE_SHADER_WGSL, PENDULUM_VERTEX_SHADER_WGSL} from './pendulum.shader';
@@ -42,7 +42,7 @@ export class PendulumComponent {
trailDecay: 0.98 trailDecay: 0.98
}; };
onSceneReady(event: SceneReadyEvent) { onSceneReady(event: SceneEventData) {
const { engine, scene } = event; const { engine, scene } = event;
engine.resize(); engine.resize();
@@ -113,4 +113,5 @@ export class PendulumComponent {
csRender.dispatch(dispatchCount, 1, 1); csRender.dispatch(dispatchCount, 1, 1);
}); });
} }
} }

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

@@ -13,7 +13,7 @@ export interface RenderConfig {
export type RenderCallback = (material: ShaderMaterial, camera: Camera, canvas: HTMLCanvasElement, scene: Scene) => void; export type RenderCallback = (material: ShaderMaterial, camera: Camera, canvas: HTMLCanvasElement, scene: Scene) => void;
export interface SceneReadyEvent { export interface SceneEventData {
scene: Scene; scene: Scene;
engine: WebGPUEngine; engine: WebGPUEngine;
} }
@@ -32,7 +32,8 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
@Input({ required: true }) config!: RenderConfig; @Input({ required: true }) config!: RenderConfig;
@Input() renderCallback?: RenderCallback; @Input() renderCallback?: RenderCallback;
@Output() sceneReady = new EventEmitter<SceneReadyEvent>(); @Output() sceneReady = new EventEmitter<SceneEventData>();
@Output() sceneResized = new EventEmitter<SceneEventData>();
private engine!: WebGPUEngine; private engine!: WebGPUEngine;
private scene!: Scene; private scene!: Scene;
@@ -179,5 +180,10 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
this.camera.orthoTop = viewSize / 2; this.camera.orthoTop = viewSize / 2;
this.camera.orthoBottom = -viewSize / 2; this.camera.orthoBottom = -viewSize / 2;
} }
this.sceneResized?.emit({
scene: this.scene,
engine: this.engine
});
} }
} }