2025-12-25 10:57:33 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
|
<title>Wasm & WebGpu.</title>
|
2025-12-29 20:28:26 +01:00
|
|
|
<base href="./">
|
2025-12-25 10:57:33 +01:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<style >
|
|
|
|
|
body{
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
#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>
|
|
|
|
|
<script type="module">
|
|
|
|
|
|
2025-12-29 20:29:45 +01:00
|
|
|
import { ParticleSimulation } from "./particlesWasmWebGpu.js";
|
2025-12-25 10:57:33 +01:00
|
|
|
|
|
|
|
|
|
|
|
|
|
var particleSimulation = new ParticleSimulation();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var useWebWorker = false;
|
|
|
|
|
|
|
|
|
|
const canvas = document.querySelector(".mainCanvas");
|
|
|
|
|
|
|
|
|
|
particleSimulation.setCanvas( canvas );
|
|
|
|
|
|
|
|
|
|
resizeCanvasToDisplaySize( canvas );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var worker;
|
|
|
|
|
|
|
|
|
|
if ( !useWebWorker ) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
await particleSimulation.setup( canvas, canvas.width, canvas.height, true );
|
|
|
|
|
|
|
|
|
|
console.log("document.bufferMap", document.bufferMap);
|
|
|
|
|
|
|
|
|
|
} else if ( useWebWorker ) {
|
|
|
|
|
|
|
|
|
|
worker = new Worker("../framework/GpuWorker.js", { type: "module" });
|
|
|
|
|
|
|
|
|
|
worker.onmessage = function ( event ) {
|
|
|
|
|
|
|
|
|
|
console.log("From worker:", event.data);
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const offscreen = canvas.transferControlToOffscreen();
|
|
|
|
|
|
|
|
|
|
worker.addEventListener("error", function ( event ) {
|
|
|
|
|
|
|
|
|
|
console.error( "Worker failed:",
|
|
|
|
|
event.message, "at",
|
|
|
|
|
event.filename + ":" +
|
|
|
|
|
event.lineno + ":" +
|
|
|
|
|
event.colno );
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var request = {
|
|
|
|
|
method: "setup",
|
|
|
|
|
canvas: offscreen,
|
|
|
|
|
width: canvas.width,
|
|
|
|
|
height: canvas.height
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
worker.postMessage( request, [offscreen] );
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var events = new Array( "mousemove", "mousedown", "mouseup", "onwheel", "wheel" );
|
|
|
|
|
|
|
|
|
|
for ( var i = 0; i < events.length; i++ ) {
|
|
|
|
|
|
|
|
|
|
let eventName = events[i];
|
|
|
|
|
|
|
|
|
|
console.log("createEvent", eventName);
|
|
|
|
|
|
|
|
|
|
canvas.addEventListener( eventName, function ( event ) {
|
|
|
|
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
|
|
const rect = canvas.getBoundingClientRect();
|
|
|
|
|
|
|
|
|
|
const x = event.clientX - rect.left;
|
|
|
|
|
|
|
|
|
|
const y = event.clientY - rect.top;
|
|
|
|
|
|
|
|
|
|
var request = {
|
|
|
|
|
method: eventName,
|
|
|
|
|
clientX: x,
|
|
|
|
|
clientY: y,
|
|
|
|
|
deltaY: event.deltaY
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if ( useWebWorker ) {
|
|
|
|
|
|
|
|
|
|
worker.postMessage( request );
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
|
|
particleSimulation.eventManager[ eventName ]( request );
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function resizeCanvasToDisplaySize( canvas ) {
|
|
|
|
|
|
|
|
|
|
const width = window.innerWidth;
|
|
|
|
|
const height = window.innerHeight;
|
|
|
|
|
|
|
|
|
|
var request = {
|
|
|
|
|
method: "resize",
|
|
|
|
|
width: width,
|
|
|
|
|
height: height
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if ( useWebWorker ) {
|
|
|
|
|
|
|
|
|
|
worker.postMessage( request );
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
|
|
particleSimulation.eventManager.resize( request );
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
window.addEventListener( "resize", function () {
|
|
|
|
|
|
|
|
|
|
resizeCanvasToDisplaySize( canvas );
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div id="fps">FPS: 0</div>
|
|
|
|
|
|
|
|
|
|
<canvas class="mainCanvas" width="1000" height="1000"></canvas>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
