src/app/pages/algorithms/pendulum/pendulum.component.ts

@@ -38,15 +38,13 @@ export class PendulumComponent {
     const height = engine.getRenderHeight();
     const totalPixels = width * height;
 
-    // Buffer 1: Die Pixel (Bild)
+    // Pixel buffer for image data
     const pixelBuffer = new StorageBuffer(engine, totalPixels * 4);
 
-    // Buffer 2: Physik-Status
+    // Physics buffer for physics values
     const stateBuffer = new StorageBuffer(engine, 4 * 4);
     stateBuffer.update(new Float32Array([Math.PI / 4, Math.PI / 2, 0, 0]));
 
-    // Buffer 3: Parameter (DER NEUE, ABSOLUT SICHERE WEG)
-    // Wir reservieren Platz für 10 Floats.
     const paramsBuffer = new StorageBuffer(engine, 10 * 4);
     const paramsData = new Float32Array(10);
 
@@ -79,7 +77,7 @@ export class PendulumComponent {
     if (plane?.material) {
       const mat = plane.material as any;
       mat.setStorageBuffer("pixelBuffer", pixelBuffer);
-      mat.setStorageBuffer("paramsBuffer", paramsBuffer); // Auch hier StorageBuffer
+      mat.setStorageBuffer("paramsBuffer", paramsBuffer);
     }
 
     let time = 0;
@@ -104,8 +102,10 @@ export class PendulumComponent {
 
       paramsBuffer.update(paramsData);
 
+      //dispatching physics
       csPhysics.dispatch(1, 1, 1);
 
+      //doing rendering
       const totalPixels = currentWidth * currentHeight;
       const dispatchCount = Math.ceil(totalPixels / 64);
       csRender.dispatch(dispatchCount, 1, 1);

src/app/pages/algorithms/pendulum/pendulum.shader.ts

@@ -1,19 +1,18 @@
-export const PENDULUM_VERTEX_SHADER_WGSL = `
+//Simple Pass-Through Shader
+export const PENDULUM_VERTEX_SHADER_WGSL = `
     attribute position : vec3<f32>;
     attribute uv : vec2<f32>;
-    varying vUV : vec2<f32>;
 
     @vertex
     fn main(input : VertexInputs) -> FragmentInputs {
       var output : FragmentInputs;
       output.position = vec4<f32>(input.position, 1.0);
-      output.vUV = input.uv;
       return output;
     }
   `;
 
+//Fragment Shader to display the pixel buffer
 export const PENDULUM_FRAGMENT_SHADER_WGSL = `
-    varying vUV : vec2<f32>; // Lassen wir stehen, damit der Vertex-Shader nicht meckert
     var<storage, read> pixelBuffer : array<f32>;
     var<storage, read> paramsBuffer : array<f32>;
 
@@ -36,9 +35,9 @@ export const PENDULUM_FRAGMENT_SHADER_WGSL = `
       let x = u32(input.position.x);
       let y = u32(input.position.y);
 
-      // Sicherheits-Check, damit wir nicht außerhalb des Buffers lesen
+      // Range check, if outside it is painted red
       if (x >= width || y >= height) {
-          fragmentOutputs.color = vec4<f32>(0.0, 0.0, 0.0, 1.0);
+          fragmentOutputs.color = vec4<f32>(1.0, 0.0, 0.0, 1.0);
           return fragmentOutputs;
       }
 
@@ -46,14 +45,23 @@ export const PENDULUM_FRAGMENT_SHADER_WGSL = `
       let val = pixelBuffer[index];
 
       var color = vec3<f32>(0.1, 0.1, 0.15);
-      if (val > 0.1) { color = vec3<f32>(0.5, 0.5, 0.5); }
-      if (val > 0.8) { color = vec3<f32>(1.0, 1.0, 1.0); }
+      //pendulum color
+      if (val > 0.1) {
+        color = vec3<f32>(0.5, 0.5, 0.5);
+      }
+
+      //mass color
+      if (val > 0.8) {
+        color = vec3<f32>(1.0, 1.0, 1.0);
+      }
 
       fragmentOutputs.color = vec4<f32>(color, 1.0);
       return fragmentOutputs;
     }
 `;
 
+//Math for the double pendulum
+//https://en.wikipedia.org/wiki/Double_pendulum
 export const PENDULUM_PHYSIC_COMPUTE_SHADER_WGSL = `
     struct State {
         theta1: f32,
@@ -100,6 +108,7 @@ export const PENDULUM_PHYSIC_COMPUTE_SHADER_WGSL = `
     }
 `;
 
+//Pixel data to visualize the pendulum
 export const PENDULUM_RENDER_COMPUTE_SHADER_WGSL = `
     struct State {
         theta1: f32,
@@ -137,7 +146,7 @@ export const PENDULUM_RENDER_COMPUTE_SHADER_WGSL = `
 
         var newVal = 0.0;
 
-        // 1. FIX: Y = 0.3 setzt den Ursprung ins obere Drittel des Bildschirms
+        // Pendulum origin
         let origin = vec2<f32>(0.5 * aspect, 0.3);
 
         let s1 = sin(state.theta1);
@@ -147,7 +156,6 @@ export const PENDULUM_RENDER_COMPUTE_SHADER_WGSL = `
 
         let displayScale = 0.15;
 
-        // 2. FIX: +c1 und +c2 genutzt, da Y in WebGPU nach unten wächst
         let p1 = origin + vec2<f32>(s1, c1) * p[7] * displayScale;
         let p2 = p1     + vec2<f32>(s2, c2) * p[8] * displayScale;