Added NodeJS Demo.

2025-11-18 11:45:56 +01:00
parent 4b8bd4366a
commit b3ab6bd314
69 changed files with 2531 additions and 4220223 deletions
--- a/demos/TextureArray/index.html
+++ b/demos/TextureArray/index.html
@@ -0,0 +1,179 @@
+<!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="TextureArray/" />
+    <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>