Changed 2d fractals to webgl for more performance

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

@@ -1,8 +1,9 @@
-import {AfterViewInit, Component, ElementRef, inject, Input, NgZone, OnDestroy, 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';
 
 export interface RenderConfig {
   mode: '2D' | '3D';
+  initialViewSize: number;
   vertexShader: string;
   fragmentShader: string;
   uniformNames: string[];
@@ -24,6 +25,8 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
   @Input({ required: true }) config!: RenderConfig;
   @Input() renderCallback?: RenderCallback;
 
+  @Output() sceneReady = new EventEmitter<Scene>();
+
   private engine!: Engine;
   private scene!: Scene;
   private shaderMaterial!: ShaderMaterial;
@@ -57,6 +60,7 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
     canvas.addEventListener('wheel', (evt: WheelEvent) => evt.preventDefault(), { passive: false });
     this.createShaderMaterial();
     this.createFullScreenRect();
+    this.sceneReady.emit(this.scene);
     this.addRenderLoop(canvas);
     this.addResizeHandler();
   }
@@ -75,13 +79,12 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
     cam.mode = Camera.ORTHOGRAPHIC_CAMERA;
 
     const aspect = canvas.width / canvas.height;
-    const viewSize = 10;
+    const viewSize = this.config?.initialViewSize ?? 10;
     cam.orthoLeft = -viewSize * aspect / 2;
     cam.orthoRight = viewSize * aspect / 2;
     cam.orthoTop = viewSize / 2;
     cam.orthoBottom = -viewSize / 2;
 
-    cam.attachControl(canvas, true, false);
     this.camera = cam;
   }
 
@@ -92,12 +95,13 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
     cam.maxZ = 100;
     cam.lowerRadiusLimit = 1.5;
     cam.upperRadiusLimit = 20;
+    cam.radius = this.config?.initialViewSize ?? 1;
     cam.attachControl(canvas, true);
     this.camera = cam;
   }
 
   private createFullScreenRect() {
-    const plane = MeshBuilder.CreatePlane("plane", {size: 100}, this.scene);
+    const plane = MeshBuilder.CreatePlane("plane", {size: 110}, this.scene);
 
     if (this.config.mode === '3D') {
       plane.parent = this.camera;
@@ -120,7 +124,7 @@ export class BabylonCanvas implements AfterViewInit, OnDestroy {
       },
       {
         attributes: ["position", "uv"],
-        uniforms: ["time", "resolution", "cameraPosition", "targetPosition", ...this.config.uniformNames]
+        uniforms: ["resolution", "cameraPosition", ...this.config.uniformNames]
       }
     );
     this.shaderMaterial.disableDepthWrite = true;