Added some comments and removed unused UVs

This commit is contained in:
2026-02-21 09:53:14 +01:00
parent 598013a7d0
commit 66df3a7f88
2 changed files with 23 additions and 15 deletions

View File

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

View File

@@ -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 position : vec3<f32>;
attribute uv : vec2<f32>; attribute uv : vec2<f32>;
varying vUV : vec2<f32>;
@vertex @vertex
fn main(input : VertexInputs) -> FragmentInputs { fn main(input : VertexInputs) -> FragmentInputs {
var output : FragmentInputs; var output : FragmentInputs;
output.position = vec4<f32>(input.position, 1.0); output.position = vec4<f32>(input.position, 1.0);
output.vUV = input.uv;
return output; return output;
} }
`; `;
//Fragment Shader to display the pixel buffer
export const PENDULUM_FRAGMENT_SHADER_WGSL = ` 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> pixelBuffer : array<f32>;
var<storage, read> paramsBuffer : 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 x = u32(input.position.x);
let y = u32(input.position.y); 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) { 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; return fragmentOutputs;
} }
@@ -46,14 +45,23 @@ export const PENDULUM_FRAGMENT_SHADER_WGSL = `
let val = pixelBuffer[index]; let val = pixelBuffer[index];
var color = vec3<f32>(0.1, 0.1, 0.15); var color = vec3<f32>(0.1, 0.1, 0.15);
if (val > 0.1) { color = vec3<f32>(0.5, 0.5, 0.5); } //pendulum color
if (val > 0.8) { color = vec3<f32>(1.0, 1.0, 1.0); } 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); fragmentOutputs.color = vec4<f32>(color, 1.0);
return fragmentOutputs; return fragmentOutputs;
} }
`; `;
//Math for the double pendulum
//https://en.wikipedia.org/wiki/Double_pendulum
export const PENDULUM_PHYSIC_COMPUTE_SHADER_WGSL = ` export const PENDULUM_PHYSIC_COMPUTE_SHADER_WGSL = `
struct State { struct State {
theta1: f32, 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 = ` export const PENDULUM_RENDER_COMPUTE_SHADER_WGSL = `
struct State { struct State {
theta1: f32, theta1: f32,
@@ -137,7 +146,7 @@ export const PENDULUM_RENDER_COMPUTE_SHADER_WGSL = `
var newVal = 0.0; 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 origin = vec2<f32>(0.5 * aspect, 0.3);
let s1 = sin(state.theta1); let s1 = sin(state.theta1);
@@ -147,7 +156,6 @@ export const PENDULUM_RENDER_COMPUTE_SHADER_WGSL = `
let displayScale = 0.15; 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 p1 = origin + vec2<f32>(s1, c1) * p[7] * displayScale;
let p2 = p1 + vec2<f32>(s2, c2) * p[8] * displayScale; let p2 = p1 + vec2<f32>(s2, c2) * p[8] * displayScale;