Cloth: add info, outline, diagonals, shader
All checks were successful
Build, Test & Push Frontend / quality-check (pull_request) Successful in 2m1s
Build, Test & Push Frontend / docker (pull_request) Has been skipped

Add an informational panel and mesh-outline toggle to the cloth demo, plus richer physics and shading. The cloth component now provides AlgorithmInformation to an <app-information> view and a toggleMesh() that flips the mesh wireframe. Constraint generation was extended with four diagonal phases (constraintsP4..P7) and the solver loop was generalized to iterate solver pipelines, improving parallel XPBD constraint handling. The WGSL vertex/fragment shaders were updated to pass world positions, compute normals, add simple lighting and a grid-based base color. Also update information template/model to support optional translated entry names and expand i18n (DE/EN) with cloth texts and a Docker key.
This commit is contained in:
2026-02-24 09:28:16 +01:00
parent 12411e58bf
commit ab3bca4395
7 changed files with 154 additions and 22 deletions

View File

@@ -57,7 +57,8 @@
"K8S": "Kubernetes / k3d",
"POSTGRES": "PostgreSQL",
"MONGO": "MongoDB",
"GRAFANA": "Grafana/Prometheus"
"GRAFANA": "Grafana/Prometheus",
"DOCKER": "Docker"
},
"XP": {
"COMPANY8": {
@@ -473,7 +474,25 @@
"CLOTH": {
"TITLE": "Cloth simulation",
"WIND_ON": "Wind On",
"WIND_OFF": "Wind Off"
"WIND_OFF": "Wind Off",
"OUTLINE_ON": "Show Mesh",
"OUTLINE_OFF": "Hide Mesh",
"EXPLANATION": {
"TITLE": "Real-time Cloth Simulation on the GPU",
"CLOTH_SIMULATION_EXPLANATION_TITLE": "Cloth Simulation",
"XPBD_EXPLANATION_TITLE": "XPBD (Extended Position-Based Dynamics)",
"GPU_PARALLELIZATION_EXPLANATION_TITLE": "GPU Parallelization",
"DATA_STRUCTURES_EXPLANATION_TITLE": "Data Structures",
"CLOTH_SIMULATION_EXPLANATION": "Cloth simulations usually model textiles as a grid of mass points (vertices) held together by invisible connections. The goal is to represent physical influences like gravity, wind, and collisions in real time without the material tearing or stretching unnaturally like rubber.",
"XPBD_EXPLANATION": "XPBD (Extended Position-Based Dynamics) is a modern algorithm that manipulates point positions directly to satisfy distance conditions (constraints) instead of calculating accelerations. The 'Extended' means that true physical stiffness is simulated independently of the framerate. Advantage: Absolutely stable, does not explode, and topological changes (like cutting cloth) are trivial. Disadvantage: It is an iterative approximation method and slightly less physically accurate than complex matrix solvers.",
"GPU_PARALLELIZATION_EXPLANATION": "To calculate tens of thousands of points in parallel on the graphics card, one must prevent 'race conditions' i.e., two processing cores shifting the same node at the exact same time. The solution is called 'Independent Sets' (or Graph Coloring): The connections are divided into isolated groups (e.g., 4 phases for a 2D grid) in which not a single point overlaps. This allows the GPU to process each group blindly and at maximum speed.",
"DATA_STRUCTURES_EXPLANATION": "For maximum GPU performance, data must be memory-aligned (16-byte alignment). Instead of using many individual variables, information is cleverly packed into blocks of four (vec4). A vertex stores, for example, [X, Y, Z, Inverse_Mass]. If a point has an inverse mass of 0.0, the algorithm ignores it, and it floats motionlessly in the air an elegant trick for pinning cloth without extra if/then statements.",
"DISCLAIMER": "XPBD vs. Mass-Spring Systems: In physical simulations, there are fundamental architectural differences when solving equations:",
"DISCLAIMER_1": "Classical Mass-Spring Systems: Here, forces (Hooke's Law) are calculated, leading to accelerations and ultimately new positions. There are two ways to mathematically project these into the future (integration):",
"DISCLAIMER_2": "Explicit Solvers (e.g., Forward Euler): These rigidly calculate the next step solely from the current state. They are easy to program but extremely unstable for stiff cloths. Forces can escalate and the simulation 'explodes' unless tiny, very performance-heavy time steps are chosen.",
"DISCLAIMER_3": "Implicit Solvers (e.g., Backward Euler): These calculate the next step based on the future state. This is mathematically highly stable but requires solving massive global matrix equation systems in every frame. This is harder to parallelize on the GPU and breaks down if the structure changes (e.g., when the cloth is cut).",
"DISCLAIMER_4": "The XPBD Compromise: XPBD completely bypasses this complex matrix problem by acting as a local solver. It combines the absolute stability of an implicit solver with the enormous speed, parallelizability, and dynamic adaptability of an explicit system."
}
},
"ALGORITHM": {
"TITLE": "Algorithms",