kaj/WebGpu-Wasm-Raytracing-And-Particles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Virtual Machine Activity

fixed paths.

Browse Source
This commit is contained in:
kaj dijkstra
2025-12-29 20:28:26 +01:00
parent 626e55b22f
commit 8099cd9950
12 changed files with 24 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
webGpuFramework.html → demos/WebGpuFrameworkWasm/index.html
View File

@@ -23,7 +23,7 @@ body{
</style> </style>
<script type="module"> <script type="module">
import { ParticleSimulation } from "./rayTracingWebGpuWasm.js"; import { ParticleSimulation } from "/demos/WebGpuFrameworkWasm/rayTracingWebGpuWasm.js";
var particleSimulation = new ParticleSimulation(); var particleSimulation = new ParticleSimulation();

18
rayTracingWebGpuWasm.js → demos/WebGpuFrameworkWasm/rayTracingWebGpuWasm.js
View File

@@ -1,14 +1,14 @@
import Shader from "../framework/WebGpu.js"; import Shader from "../../framework/WebGpu.js";
import Matrix4 from "../framework/Matrix4.js"; import Matrix4 from "../../framework/Matrix4.js";
import Vector3 from "../framework/Vector3.js"; import Vector3 from "../../framework/Vector3.js";
import Camera from "../framework/Camera.js"; import Camera from "../../framework/Camera.js";
import EventManager from "../framework/eventManager.js"; import EventManager from "../../framework/eventManager.js";
import ShaderInpector from "../framework/ShaderInpector.js"; import ShaderInpector from "../../framework/ShaderInpector.js";
import WasmModule from "./wasm_renderer.js"; import WasmModule from "./wasm_renderer.js";
@@ -164,7 +164,7 @@ export class ParticleSimulation {
this.renderShader.topology = "triangle-list"; this.renderShader.topology = "triangle-list";
await this.renderShader.setup( "../shaders/triangle-list-texture-solid.wgsl" ); await this.renderShader.setup( "../../shaders/triangle-list-texture-solid.wgsl" );
this.renderShader.setVariable( "mySampler", this.fbSampler ); this.renderShader.setVariable( "mySampler", this.fbSampler );
@@ -197,7 +197,7 @@ export class ParticleSimulation {
this.fxaaShader.topology = "triangle-list"; this.fxaaShader.topology = "triangle-list";
await this.fxaaShader.setup("../shaders/fxaa.wgsl"); await this.fxaaShader.setup("../../shaders/fxaa.wgsl");
this.fxaaShader.setVariable("mySampler", this.fbSampler); this.fxaaShader.setVariable("mySampler", this.fbSampler);
@@ -316,7 +316,7 @@ export class ParticleSimulation {
this.taaShader.topology = "triangle-list"; this.taaShader.topology = "triangle-list";
await this.taaShader.setup("../shaders/taa.wgsl"); await this.taaShader.setup("../../shaders/taa.wgsl");
this.taaShader.setVariable("mySampler", this.fbSampler); this.taaShader.setVariable("mySampler", this.fbSampler);

0
wasm_renderer.js → demos/WebGpuFrameworkWasm/wasm_renderer.js
View File

0
wasm_renderer.wasm → demos/WebGpuFrameworkWasm/wasm_renderer.wasm
View File

3
webGpuWasmParticlesFramework.html → demos/webGpuFrameworkAndWasmParticles/index.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Wasm & WebGpu.</title> <title>Wasm & WebGpu.</title>
<base href="./">
</head> </head>
<style > <style >
@@ -23,7 +24,7 @@ body{
</style> </style>
<script type="module"> <script type="module">
import { ParticleSimulation } from "./particlesWasmWebGpu.js"; import { ParticleSimulation } from "/demos/webGpuFrameworkAndWasmParticles/particlesWasmWebGpu.js";
var particleSimulation = new ParticleSimulation(); var particleSimulation = new ParticleSimulation();

16
particlesWasmWebGpu.js → demos/webGpuFrameworkAndWasmParticles/particlesWasmWebGpu.js
View File

@@ -1,14 +1,14 @@
import Shader from "../framework/WebGpu.js"; import Shader from "../../framework/WebGpu.js";
import Matrix4 from "../framework/Matrix4.js"; import Matrix4 from "../../framework/Matrix4.js";
import Vector3 from "../framework/Vector3.js"; import Vector3 from "../../framework/Vector3.js";
import Camera from "../framework/Camera.js"; import Camera from "../../framework/Camera.js";
import EventManager from "../framework/eventManager.js"; import EventManager from "../../framework/eventManager.js";
import ShaderInpector from "../framework/ShaderInpector.js"; import ShaderInpector from "../../framework/ShaderInpector.js";
import WasmModule from "./wasm_particles.js"; import WasmModule from "./wasm_particles.js";
@@ -148,7 +148,7 @@ export class ParticleSimulation {
this.particleCount * 8 this.particleCount * 8
); );
await this.renderShader.setup( "../shaders/simplePoint.wgsl" ); await this.renderShader.setup( "../../shaders/simplePoint.wgsl" );
this.renderShader.setVariable("particles", this.particleFloatArray); this.renderShader.setVariable("particles", this.particleFloatArray);
@@ -272,7 +272,7 @@ export class ParticleSimulation {
this.taaShader.topology = "triangle-list"; this.taaShader.topology = "triangle-list";
await this.taaShader.setup("../shaders/taa.wgsl"); await this.taaShader.setup("../../shaders/taa.wgsl");
this.taaShader.setVariable("mySampler", this.fbSampler); this.taaShader.setVariable("mySampler", this.fbSampler);

0
wasm_particles.js → demos/webGpuFrameworkAndWasmParticles/wasm_particles.js
View File

0
wasm_particles.wasm → demos/webGpuFrameworkAndWasmParticles/wasm_particles.wasm
View File

3
webGpuWasmRaytrace.html → demos/webGpuNativeWasm/index.html
View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<base href="./">
<title>Fullscreen WASM Raytracer - WebGPU</title> <title>Fullscreen WASM Raytracer - WebGPU</title>
<style> <style>
html, body { html, body {
@@ -31,7 +32,7 @@
<canvas id="gpu-canvas"></canvas> <canvas id="gpu-canvas"></canvas>
<script type="module"> <script type="module">
import WasmModule from './wasm_renderer.js'; import WasmModule from '/demos/webGpuNativeWasm/wasm_renderer.js';
async function main() { async function main() {
const canvas = document.getElementById('gpu-canvas'); const canvas = document.getElementById('gpu-canvas');

2
demos/webGpuNativeWasm/wasm_renderer.js Normal file
View File

File diff suppressed because one or more lines are too long

BIN
demos/webGpuNativeWasm/wasm_renderer.wasm Executable file
View File

Binary file not shown.

186
wasm_render.html
View File

@@ -1,186 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Fullscreen WASM Raytracer - Fast Loop</title>
<style>
html, body {
margin: 0; padding: 0; overflow: hidden; height: 100%;
background: black;
}
canvas {
display: block;
width: 100vw;
height: 100vh;
}
#fps {
position: fixed;
top: 5px; left: 5px;
color: white;
background: rgba(0,0,0,0.5);
padding: 4px 8px;
font-family: monospace;
font-size: 14px;
z-index: 100;
}
</style>
</head>
<body>
<div id="fps">FPS: 0</div>
<canvas></canvas>
<script type="module">
import WasmModule from './wasm_renderer.js';
async function main() {
const canvas = document.querySelector('canvas');
const fpsElem = document.getElementById('fps');
const gl = canvas.getContext('webgl');
if (!gl) {
alert("WebGL not supported");
return;
}
// Shader setup (same as before)
const vertexShaderSource = `
attribute vec2 a_pos;
varying vec2 v_uv;
void main() {
v_uv = (a_pos + 1.0) * 0.5;
gl_Position = vec4(a_pos, 0, 1);
}
`;
const fragmentShaderSource = `
precision mediump float;
varying vec2 v_uv;
uniform sampler2D u_texture;
void main() {
gl_FragColor = texture2D(u_texture, v_uv);
}
`;
function compileShader(type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
throw new Error(gl.getShaderInfoLog(shader));
}
return shader;
}
function createProgram(vsSource, fsSource) {
const program = gl.createProgram();
gl.attachShader(program, compileShader(gl.VERTEX_SHADER, vsSource));
gl.attachShader(program, compileShader(gl.FRAGMENT_SHADER, fsSource));
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
throw new Error(gl.getProgramInfoLog(program));
}
return program;
}
const program = createProgram(vertexShaderSource, fragmentShaderSource);
gl.useProgram(program);
const posLoc = gl.getAttribLocation(program, 'a_pos');
const texLoc = gl.getUniformLocation(program, 'u_texture');
// Fullscreen quad (2 triangles)
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-1, -1,
1, -1,
-1, 1,
-1, 1,
1, -1,
1, 1
]), gl.STATIC_DRAW);
gl.enableVertexAttribArray(posLoc);
gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
// Create texture
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.uniform1i(texLoc, 0);
// Load WASM module
const wasm = await WasmModule();
let width = window.innerWidth;
let height = window.innerHeight;
function resize() {
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
wasm._set_resolution(width, height);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0,
gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.viewport(0, 0, width, height);
}
window.addEventListener('resize', resize);
resize();
const framebufferPtr = wasm._get_framebuffer_ptr();
let framebufferUint8 = new Uint8Array(wasm.HEAPU8.buffer, framebufferPtr, width * height * 4);
// FPS tracking
let frameCount = 0;
let lastTime = performance.now();
// Setup MessageChannel for uncapped fast loop
const channel = new MessageChannel();
function render(time) {
wasm._update_framebuffer(time * 0.001);
// Update framebuffer view in case of resize (optional)
framebufferUint8 = new Uint8Array(wasm.HEAPU8.buffer, framebufferPtr, width * height * 4);
// Upload texture and draw
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height,
gl.RGBA, gl.UNSIGNED_BYTE, framebufferUint8);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 6);
// FPS counting
frameCount++;
const now = performance.now();
const delta = now - lastTime;
if (delta >= 1000) {
const fps = (frameCount * 1000) / delta;
fpsElem.textContent = `FPS: ${fps.toFixed(1)}`;
frameCount = 0;
lastTime = now;
}
// Schedule next frame ASAP through message channel
channel.port2.postMessage(performance.now());
}
channel.port1.onmessage = (e) => render(e.data);
// Start loop
channel.port2.postMessage(performance.now());
}
main();
</script>
</body>
</html>