179 lines
3.2 KiB
HTML
179 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>10.000 Gpu Sphere Collision Demo.</title>
|
|
</head>
|
|
<base href="Texture2/" />
|
|
<link rel="stylesheet" href="./style/main.css" >
|
|
|
|
<script type="module">
|
|
|
|
import { ParticleSimulation } from "./demo.js";
|
|
|
|
|
|
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 );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
document.querySelector("#resetParticlesButton").addEventListener("click", function () {
|
|
|
|
var request = {
|
|
method: "resetParticlePositions"
|
|
};
|
|
|
|
if ( useWebWorker ) {
|
|
|
|
worker.postMessage( request );
|
|
|
|
} else {
|
|
|
|
particleSimulation.resetParticlePositions();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
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="controlPanel">
|
|
<div class="inputRow">
|
|
<button id="resetParticlesButton">Reset Spheres</button>
|
|
</div>
|
|
</div>
|
|
<canvas class="mainCanvas" width="1000" height="1000"></canvas>
|
|
</body>
|
|
</html> |