From 0a57ea0ad7e2582776984089525cdbf24dacdb9e Mon Sep 17 00:00:00 2001 From: Lobo Date: Sat, 14 Feb 2026 10:05:08 +0100 Subject: [PATCH] Basic Setup - New component - new shader constants - new vocabs --- src/app/app.routes.ts | 3 +- src/app/constants/RouterConstants.ts | 7 +++ .../path-tracing/path-tracing.component.html | 12 +++++ .../path-tracing/path-tracing.component.scss | 0 .../path-tracing/path-tracing.component.ts | 48 +++++++++++++++++++ .../path-tracing/path-tracing.shader.ts | 10 ++++ .../algorithms/service/algorithms.service.ts | 6 +++ src/assets/i18n/de.json | 7 +++ src/assets/i18n/en.json | 7 +++ 9 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 src/app/pages/algorithms/path-tracing/path-tracing.component.html create mode 100644 src/app/pages/algorithms/path-tracing/path-tracing.component.scss create mode 100644 src/app/pages/algorithms/path-tracing/path-tracing.component.ts create mode 100644 src/app/pages/algorithms/path-tracing/path-tracing.shader.ts diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index c8960c9..35bad0e 100644 --- a/src/app/app.routes.ts +++ b/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} ]; diff --git a/src/app/constants/RouterConstants.ts b/src/app/constants/RouterConstants.ts index 6b9b9d9..d070410 100644 --- a/src/app/constants/RouterConstants.ts +++ b/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', diff --git a/src/app/pages/algorithms/path-tracing/path-tracing.component.html b/src/app/pages/algorithms/path-tracing/path-tracing.component.html new file mode 100644 index 0000000..346f8f4 --- /dev/null +++ b/src/app/pages/algorithms/path-tracing/path-tracing.component.html @@ -0,0 +1,12 @@ + + + {{ 'PATH_TRACING.TITLE' | translate }} + + + + + + diff --git a/src/app/pages/algorithms/path-tracing/path-tracing.component.scss b/src/app/pages/algorithms/path-tracing/path-tracing.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/algorithms/path-tracing/path-tracing.component.ts b/src/app/pages/algorithms/path-tracing/path-tracing.component.ts new file mode 100644 index 0000000..9e978bf --- /dev/null +++ b/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; + }; + +} diff --git a/src/app/pages/algorithms/path-tracing/path-tracing.shader.ts b/src/app/pages/algorithms/path-tracing/path-tracing.shader.ts new file mode 100644 index 0000000..5bd86e2 --- /dev/null +++ b/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; + } +`; diff --git a/src/app/pages/algorithms/service/algorithms.service.ts b/src/app/pages/algorithms/service/algorithms.service.ts index bb9e889..066fc0e 100644 --- a/src/app/pages/algorithms/service/algorithms.service.ts +++ b/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 } ]; diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json index 0fa1e57..2f3f176 100644 --- a/src/assets/i18n/de.json +++ b/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" diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index f770896..603d2d7 100644 --- a/src/assets/i18n/en.json +++ b/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"