Basic Setup

- New component
- new shader constants
- new vocabs

src/app/app.routes.ts

@@ -13,6 +13,7 @@ export const routes: Routes = [
   { path: RouterConstants.GOL.PATH, component: RouterConstants.GOL.COMPONENT},
   { path: RouterConstants.LABYRINTH.PATH, component: RouterConstants.LABYRINTH.COMPONENT},
   { path: RouterConstants.FRACTAL.PATH, component: RouterConstants.FRACTAL.COMPONENT},
-  { path: RouterConstants.FRACTAL3d.PATH, component: RouterConstants.FRACTAL3d.COMPONENT}
+  { path: RouterConstants.FRACTAL3d.PATH, component: RouterConstants.FRACTAL3d.COMPONENT},
+  { path: RouterConstants.PATH_TRACING.PATH, component: RouterConstants.PATH_TRACING.COMPONENT}
 ];
 

src/app/constants/RouterConstants.ts

@@ -8,6 +8,7 @@ import {ConwayGolComponent} from '../pages/algorithms/conway-gol/conway-gol.comp
 import {LabyrinthComponent} from '../pages/algorithms/pathfinding/labyrinth/labyrinth.component';
 import {FractalComponent} from '../pages/algorithms/fractal/fractal.component';
 import {Fractal3dComponent} from '../pages/algorithms/fractal3d/fractal3d.component';
+import {PathTracingComponent} from '../pages/algorithms/path-tracing/path-tracing.component';
 
 export class RouterConstants {
 
@@ -65,6 +66,12 @@ export class RouterConstants {
     COMPONENT: Fractal3dComponent
   };
 
+  static readonly PATH_TRACING = {
+    PATH: 'algorithms/pathtracing',
+    LINK: '/algorithms/pathtracing',
+    COMPONENT: PathTracingComponent
+  };
+
   static readonly IMPRINT = {
     PATH: 'imprint',
     LINK: '/imprint',

src/app/pages/algorithms/path-tracing/path-tracing.component.html

@@ -0,0 +1,12 @@
+<mat-card class="container">
+  <mat-card-header>
+    <mat-card-title>{{ 'PATH_TRACING.TITLE' | translate }}</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <app-information [algorithmInformation]="algoInformation"/>
+    <app-babylon-canvas
+      [config]="fractalConfig"
+      [renderCallback]="onRender"
+    />
+  </mat-card-content>
+</mat-card>

src/app/pages/algorithms/path-tracing/path-tracing.component.ts

@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+import {BabylonCanvas, RenderCallback, RenderConfig} from '../../../shared/rendering/canvas/babylon-canvas.component';
+import {Information} from '../information/information';
+import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
+import {TranslatePipe} from '@ngx-translate/core';
+import {AlgorithmInformation} from '../information/information.models';
+import {PATH_TRACING_VERTEX_SHADER} from './path-tracing.shader';
+
+@Component({
+  selector: 'app-path-tracing',
+  imports: [
+    BabylonCanvas,
+    Information,
+    MatCard,
+    MatCardContent,
+    MatCardHeader,
+    MatCardTitle,
+    TranslatePipe
+  ],
+  templateUrl: './path-tracing.component.html',
+  styleUrl: './path-tracing.component.scss',
+})
+export class PathTracingComponent {
+
+  algoInformation: AlgorithmInformation = {
+    title: '',
+    entries: [
+    ],
+    disclaimer: '',
+    disclaimerBottom: '',
+    disclaimerListEntry: ['']
+  };
+
+  fractalConfig: RenderConfig = {
+    mode: '3D',
+    initialViewSize: 4,
+    vertexShader: PATH_TRACING_VERTEX_SHADER,
+    fragmentShader: '',
+    uniformNames: ["time", "power", "fractalType"]
+  };
+
+  private time = 0;
+
+  onRender: RenderCallback = () => {
+    this.time += 0.005;
+  };
+
+}

src/app/pages/algorithms/path-tracing/path-tracing.shader.ts

@@ -0,0 +1,10 @@
+export const PATH_TRACING_VERTEX_SHADER = /* glsl */`
+  attribute vec3 position;
+  attribute vec2 uv;
+  varying vec2 vUV;
+
+  void main(void) {
+    gl_Position = vec4(position, 1.0);
+    vUV = uv;
+  }
+`;

src/app/pages/algorithms/service/algorithms.service.ts

@@ -44,6 +44,12 @@ export class AlgorithmsService {
       title: 'ALGORITHM.FRACTAL3D.TITLE',
       description: 'ALGORITHM.FRACTAL3D.DESCRIPTION',
       routerLink: RouterConstants.FRACTAL3d.LINK
+    },
+    {
+      id: 'pathTracing',
+      title: 'ALGORITHM.PATH_TRACING.TITLE',
+      description: 'ALGORITHM.PATH_TRACING.DESCRIPTION',
+      routerLink: RouterConstants.PATH_TRACING.LINK
     }
   ];
 

src/assets/i18n/de.json

@@ -415,6 +415,9 @@
       "DISCLAIMER_4": "Licht & Schatten: Um die Tiefe sichtbar zu machen, werden Lichtreflexionen und Schatten (Ambient Occlusion) basierend auf der Krümmung der Formel simuliert."
     }
   },
+  "PATH_TRACING": {
+    "TITLE": "Path Tracing"
+  },
   "ALGORITHM": {
     "TITLE": "Algorithmen",
     "PATHFINDING": {
@@ -441,6 +444,10 @@
       "TITLE": "Fraktale 3D",
       "DESCRIPTION": "3D-Visualisierung von komplexe, geometrische Mustern, die sich selbst in immer kleineren Maßstäben ähneln (Selbstähnlichkeit)."
     },
+    "PATH_TRACING": {
+      "TITLE": "Path Tracing ",
+      "DESCRIPTION": "Path Tracing ist ein Algorithmus zur Bildsynthese, der die Simulation der globalen Beleuchtung ermöglicht."
+    },
     "NOTE": "HINWEIS",
     "GRID_HEIGHT": "Höhe",
     "GRID_WIDTH": "Beite"

src/assets/i18n/en.json

@@ -414,6 +414,9 @@
       "DISCLAIMER_4": "Light & Shadow: To visualize depth, light reflections and shadows (Ambient Occlusion) are simulated based on the curvature of the formula."
     }
   },
+  "PATH_TRACING": {
+    "TITLE": "Path Tracing"
+  },
   "ALGORITHM": {
     "TITLE": "Algorithms",
     "PATHFINDING": {
@@ -440,6 +443,10 @@
       "TITLE": "Fractals 3D",
       "DESCRIPTION": "3D Visualisation of complex geometric patterns that resemble each other on increasingly smaller scales (self-similarity)."
     },
+    "PATH_TRACING": {
+      "TITLE": "Path Tracing ",
+      "DESCRIPTION": "Path tracing is a rendering algorithm in computer graphics that simulates how light interacts with objects, voxels, and participating media to generate realistic (physically plausible) images."
+    },
     "NOTE": "Note",
     "GRID_HEIGHT": "Height",
     "GRID_WIDTH": "Width"