Initial commit

framework/Camera.js

@@ -0,0 +1,83 @@
+import Vector3 		from "./Vector3.js";
+import Matrix4 		from "./Matrix4.js";
+
+export default class Camera {
+
+	eye 		= new Vector3();
+	target 		= new Vector3();
+	up 			= new Vector3( 0, 1, 0 );
+
+	yaw 		= 0;
+	pitch 		= 0;
+	fovRadians 	= Math.PI / 4;
+	near 		= 0.1;
+	far 		= 3000.0;
+	distance 	= 10;
+	viewMatrix = new Float32Array( 16 );
+
+	constructor( eye = [0, 0, 5], target = [0, 0, 0], up = [0, 1, 0] ) {
+
+		this.eye 		= new Vector3( ...eye );
+		this.target 	= new Vector3( ...target );
+		this.up 		= new Vector3( ...up );
+
+		this.distance 	= Vector3.subtract( this.eye, this.target ).length();
+
+		this.viewMatrix = Matrix4.lookAt( this.eye, this.target, this.up );
+
+	}
+
+	update() {
+
+		const x = this.distance * Math.cos( this.pitch ) * Math.sin( this.yaw );
+		const y = this.distance * Math.sin( this.pitch );
+		const z = this.distance * Math.cos( this.pitch ) * Math.cos( this.yaw );
+
+		this.eye = new Vector3(
+			x + this.target.x,
+			y + this.target.y,
+			z + this.target.z
+		);
+
+		this.viewMatrix = Matrix4.lookAt( this.eye, this.target, this.up );
+
+	}
+
+	getViewMatrix() {
+
+		return this.viewMatrix;
+
+	}
+
+	rotate( deltaYaw, deltaPitch ) {
+
+		this.yaw += deltaYaw;
+		this.pitch -= deltaPitch;
+
+		const maxPitch = Math.PI / 2 - 0.01;
+
+		if ( this.pitch > maxPitch ) this.pitch = maxPitch;
+		if ( this.pitch < -maxPitch ) this.pitch = -maxPitch;
+
+		this.update();
+
+	}
+
+	zoom( delta ) {
+
+		this.distance += delta * 1;
+
+		if ( this.distance < 0.1 ) this.distance = 0.1;
+
+		this.update();
+
+	}
+
+	setTarget( target ) {
+
+		this.target = new Vector3( ...target );
+
+		this.update();
+
+	}
+}

framework/Matrix4.js

@@ -0,0 +1,125 @@
+import Vector3 from "./Vector3.js";
+
+export default class Matrix4 {
+
+	static lookAt( eye, target, up ) {
+
+		const zAxis = Vector3.normalize( Vector3.subtract( eye, target ) );
+
+		const xAxis = Vector3.normalize( Vector3.cross( up, zAxis ) );
+		
+		const yAxis = Vector3.cross( zAxis, xAxis );
+
+		return new Float32Array([
+			xAxis.x, yAxis.x, zAxis.x, 0,
+			xAxis.y, yAxis.y, zAxis.y, 0,
+			xAxis.z, yAxis.z, zAxis.z, 0,
+			-Vector3.dot( xAxis, eye ), -Vector3.dot( yAxis, eye ), -Vector3.dot( zAxis, eye ), 1,
+		]);
+	}
+
+	static getColumn( matrix, index ) {
+		const i = index * 4;
+
+		return new Vector3(
+			matrix[ i + 0 ],
+			matrix[ i + 1 ],
+			matrix[ i + 2 ]
+		);
+	}
+
+	static createProjectionMatrix( camera, canvas ) {
+		return Matrix4.perspective(
+			camera.fovRadians,
+			canvas.width / canvas.height,
+			camera.near,
+			camera.far
+		);
+	}
+
+	static invert( m ) {
+		const out = new Float32Array(16);
+
+		const m00 = m[0],  m01 = m[1],  m02 = m[2],  m03 = m[3];
+		const m10 = m[4],  m11 = m[5],  m12 = m[6],  m13 = m[7];
+		const m20 = m[8],  m21 = m[9],  m22 = m[10], m23 = m[11];
+		const m30 = m[12], m31 = m[13], m32 = m[14], m33 = m[15];
+
+		const a0 = m00 * m11 - m01 * m10;
+		const a1 = m00 * m12 - m02 * m10;
+		const a2 = m00 * m13 - m03 * m10;
+		const a3 = m01 * m12 - m02 * m11;
+		const a4 = m01 * m13 - m03 * m11;
+		const a5 = m02 * m13 - m03 * m12;
+
+		const b0 = m20 * m31 - m21 * m30;
+		const b1 = m20 * m32 - m22 * m30;
+		const b2 = m20 * m33 - m23 * m30;
+		const b3 = m21 * m32 - m22 * m31;
+		const b4 = m21 * m33 - m23 * m31;
+		const b5 = m22 * m33 - m23 * m32;
+
+		const det = a0 * b5 - a1 * b4 + a2 * b3 + a3 * b2 - a4 * b1 + a5 * b0;
+
+		if (det === 0) return null;
+
+		const invDet = 1 / det;
+
+		out[0]  = ( m11 * b5 - m12 * b4 + m13 * b3) * invDet;
+		out[1]  = (-m01 * b5 + m02 * b4 - m03 * b3) * invDet;
+		out[2]  = ( m31 * a5 - m32 * a4 + m33 * a3) * invDet;
+		out[3]  = (-m21 * a5 + m22 * a4 - m23 * a3) * invDet;
+
+		out[4]  = (-m10 * b5 + m12 * b2 - m13 * b1) * invDet;
+		out[5]  = ( m00 * b5 - m02 * b2 + m03 * b1) * invDet;
+		out[6]  = (-m30 * a5 + m32 * a2 - m33 * a1) * invDet;
+		out[7]  = ( m20 * a5 - m22 * a2 + m23 * a1) * invDet;
+
+		out[8]  = ( m10 * b4 - m11 * b2 + m13 * b0) * invDet;
+		out[9]  = (-m00 * b4 + m01 * b2 - m03 * b0) * invDet;
+		out[10] = ( m30 * a4 - m31 * a2 + m33 * a0) * invDet;
+		out[11] = (-m20 * a4 + m21 * a2 - m23 * a0) * invDet;
+
+		out[12] = (-m10 * b3 + m11 * b1 - m12 * b0) * invDet;
+		out[13] = ( m00 * b3 - m01 * b1 + m02 * b0) * invDet;
+		out[14] = (-m30 * a3 + m31 * a1 - m32 * a0) * invDet;
+		out[15] = ( m20 * a3 - m21 * a1 + m22 * a0) * invDet;
+
+		return out;
+	}
+
+	static perspective( fovRadians, aspect, near, far ) {
+
+		const f = 1.0 / Math.tan( fovRadians / 2 );
+
+		const nf = 1 / ( near - far );
+
+		return new Float32Array([
+			f / aspect, 0, 0, 0,
+			0, f, 0, 0,
+			0, 0, (far + near) * nf, -1,
+			0, 0, (2 * far * near) * nf, 0,
+		]);
+	}
+
+	static multiply( a, b ) {
+		const out = new Float32Array(16);
+
+		for ( let col = 0; col < 4; col++ ) {
+			for ( let row = 0; row < 4; row++ ) {
+				let sum = 0;
+
+				for ( let k = 0; k < 4; k++ ) {
+					// a is column-major: element at col k, row row => a[k*4 + row]
+					// b is column-major: element at col col, row k => b[col*4 + k]
+					sum += a[k * 4 + row] * b[col * 4 + k];
+				}
+
+				out[col * 4 + row] = sum;
+			}
+		}
+
+		return out;
+	}
+
+}

framework/Measure.js

@@ -0,0 +1,49 @@
+export default class Measure {
+
+	startTimes	= {};
+
+	endTimes	= {};
+
+	writeToPage = false;
+
+	element		= false;
+
+	start ( label ) {
+
+		this.startTimes[ label ] = performance.now();
+	}
+
+	end ( label ) {
+
+		this.endTimes[ label ] = performance.now();
+
+		this.log( label );
+	}
+
+	getElapsed ( label ) {
+
+		if ( this.startTimes[ label ] === undefined || this.endTimes[ label ] === undefined ) {
+
+			throw new Error( "Start or end time missing for label: " + label );
+		}
+
+		return this.endTimes[ label ] - this.startTimes[ label ];
+	}
+
+	log ( label ) {
+
+		const elapsed = this.getElapsed( label );
+
+		if( this.writeToPage ) {
+
+			var p = document.createElement("p")
+
+			p.innerText = label + " took " + elapsed.toFixed(3) + " ms";
+
+			this.element.appendChild( p );
+
+		}
+
+		console.log( label + " took " + elapsed.toFixed(3) + " ms" );
+	}
+}

framework/Request.js

@@ -0,0 +1,11 @@
+export class Request {
+
+	constructor( method, payload = {} ) {
+
+		this.method 	= method;  // method name to call on Controller, e.g. "Ping"
+
+		this.payload 	= payload; // any data for the method
+
+	}
+
+}

framework/ShaderInpector.js

@@ -0,0 +1,67 @@
+
+class shaderDebugger{
+
+	setup() {
+
+		var shaders 	= document.shaders;
+
+		var select 		= document.querySelector(".selectDebugShader");
+
+		for (var i = 0; i < shaders.length; i++) {
+
+			var currentShader 	= shaders[i];
+
+			var option 			= document.createElement("option");
+
+			option.innerText	= currentShader.path;
+
+			option.id			= i;
+
+			select.appendChild( option );
+
+		}
+
+		document.querySelector( "#showBuffers" ).addEventListener( "click", async function() {
+
+			var select 			= document.querySelector(".selectDebugShader");
+
+			var selectedIndex 	= select.selectedIndex;
+
+			var selectedShader	= document.shaders[ selectedIndex ]
+
+			const keysArray 	= Array.from( selectedShader.buffers );
+
+			console.log("\n\n\n\n -------------------- Debugging Shader --------------- \n\n\n\n");
+
+			console.log( "Shader Path:	", selectedShader.path );
+
+			console.log( selectedShader );
+
+			for (var i = 0; i < keysArray.length; i++) {
+
+				const bindingInfo = selectedShader.bindings.find( b => b.varName === keysArray[i][0] );
+
+			
+				if( bindingInfo ) {
+
+					if( bindingInfo.type == "storage" ) {
+
+						await selectedShader.debugBuffer( keysArray[i][0] );
+
+					}
+
+				} else {
+
+					console.log("this is a Uniform", keysArray, selectedShader.bindings);
+
+				}
+
+			}
+
+		});	
+	}
+
+}
+
+
+export default shaderDebugger;

framework/Vector3.js

@@ -0,0 +1,60 @@
+export default class Vector3 {
+
+	x = 0;
+	y = 0;
+	z = 0;
+
+	constructor( x = 0, y = 0, z = 0 ) {
+
+		this.x = x;
+		this.y = y;
+		this.z = z;
+
+	}
+
+	static subtract( a, b ) {
+
+		return new Vector3( a.x - b.x, a.y - b.y, a.z - b.z );
+
+	}
+
+
+	length() {
+
+		return Math.sqrt( this.x * this.x + this.y * this.y + this.z * this.z );
+
+	}
+
+	static cross( a, b ) {
+
+		return new Vector3(
+
+			a.y * b.z - a.z * b.y,
+			a.z * b.x - a.x * b.z,
+			a.x * b.y - a.y * b.x
+		);
+
+	}
+
+	static dot( a, b ) {
+
+		return a.x * b.x + a.y * b.y + a.z * b.z;
+
+	}
+
+	static normalize( v ) {
+
+		const length = Math.sqrt( v.x * v.x + v.y * v.y + v.z * v.z );
+
+		if ( length > 0.00001 ) {
+			
+			return new Vector3( v.x / length, v.y / length, v.z / length );
+
+		} else {
+
+			return new Vector3( 0, 0, 0 );
+
+		}
+
+	}
+}

framework/eventManager.js

@@ -0,0 +1,113 @@
+// eventManager.js
+
+export default class EventManager {
+
+	isDragging = false;
+
+	lastX = 0;
+
+	lastY = 0;
+
+	camera;
+
+	canvas;
+
+	setCanvas( canvas ) {
+
+		this.canvas = canvas;
+
+
+		//this.registerEventListeners();
+
+		//this.handleResize();
+
+	}
+
+	setup( canvas, camera ) {
+
+		this.canvas = canvas;
+
+		this.camera = camera;
+
+		//this.registerEventListeners();
+
+		//this.handleResize();
+
+	}
+
+	registerEventListeners() {
+
+		this.canvas.addEventListener( "mousedown", this.onMouseDown.bind(this) );
+
+		this.canvas.addEventListener( "mouseup", this.onMouseUp.bind(this) );
+
+		this.canvas.addEventListener( "mouseleave", this.onMouseLeave.bind(this) );
+
+		this.canvas.addEventListener( "mousemove", this.onMouseMove.bind(this) );
+
+		this.canvas.addEventListener( "wheel", this.onWheel.bind(this), { passive: false } );
+
+	}
+
+	resize( event ) {
+
+		this.canvas.width 	= event.width;
+
+		this.canvas.height 	= event.height;
+
+		//this.canvas.width = window.innerWidth;
+
+		//this.canvas.height = window.innerHeight;
+
+	}
+
+	mousedown( event ) {
+
+		console.log("mouseDownHandler");
+
+		this.isDragging = true;
+
+		this.lastX = event.clientX;
+
+		this.lastY = event.clientY;
+
+	}
+
+	mouseup( event ) {
+
+		this.isDragging = false;
+
+	}
+
+	mouseleave( event ) {
+
+		this.isDragging = false;
+
+	}
+
+	mousemove( event ) {
+
+		if ( !this.isDragging ) return;
+
+		const deltaX = ( event.clientX - this.lastX ) * 0.005;
+
+		const deltaY = ( event.clientY - this.lastY ) * 0.005;
+
+		this.camera.rotate( deltaX, -deltaY );
+
+		this.lastX = event.clientX;
+
+		this.lastY = event.clientY;
+
+	}
+
+	wheel( event ) {
+
+
+		const delta = event.deltaY * 0.01;
+
+		this.camera.zoom( delta );
+
+	}
+
+}

framework/package.json

@@ -0,0 +1,6 @@
+{
+  "type": "module",
+  "dependencies": {
+
+  }
+}