Added some comments and removed unused UVs
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user