matrix-engine-wgpu 1.0.6 → 1.1.0

package/src/engine/raycast-test.js

@@ -0,0 +1,93 @@
+/**
+ * @author Nikola Lukic
+ * @email zlatnaspirala@gmail.com
+ * @site https://maximumroulette.com
+ * @Licence GPL v3
+ * @credits chatgpt used for this script adaptation.
+ * @Note matrix-engine-wgpu adaptation test
+ * default for now:
+ * app.cameras['WASD']
+ * Only tested for WASD type of camera.
+ * app is global - will be fixed in future
+ */
+import {mat4, vec3, vec4} from "wgpu-matrix";
+
+let rayHitEvent;
+
+export let touchCoordinate = {
+	enabled: false,
+	x: 0,
+	y: 0,
+	stopOnFirstDetectedHit: false
+};
+
+function multiplyMatrixVector(matrix, vector) {
+	return vec4.transformMat4(vector, matrix);
+}
+
+export function getRayFromMouse(event, canvas, camera) {
+	const rect = canvas.getBoundingClientRect();
+	let x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+	let y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+	// simple invert
+	x = -x;
+	const fov = Math.PI / 4;
+	const aspect = canvas.width / canvas.height;
+	const near = 0.1;
+	const far = 100;
+	camera.projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 1000.0);
+	const invProjection = mat4.inverse(camera.projectionMatrix);
+	const correctedView = mat4.clone(camera.view_);
+	correctedView[2] *= -1;
+	correctedView[6] *= -1;
+	correctedView[10] *= -1;
+	const invView = mat4.inverse(correctedView);
+	const ndc = [x, y, 1, 1];
+	let worldPos = multiplyMatrixVector(invProjection, ndc);
+	worldPos = multiplyMatrixVector(invView, worldPos);
+	let world;
+	if (worldPos[3] !== 0) {
+		world = [
+			worldPos[0] / worldPos[3],
+			worldPos[2] / worldPos[3],
+			worldPos[1] / worldPos[3]
+		];
+	} else {
+		console.log("[raycaster]special case 0.")
+		world = [
+			worldPos[0],
+			worldPos[1],
+			worldPos[2]
+		];
+	}
+	const rayOrigin = [camera.position[0], camera.position[1], camera.position[2]];
+	const rayDirection = vec3.normalize(vec3.subtract(world, rayOrigin));
+	return {rayOrigin, rayDirection};
+}
+
+export function rayIntersectsSphere(rayOrigin, rayDirection, sphereCenter, sphereRadius) {
+	const pos = [sphereCenter.x, sphereCenter.y, sphereCenter.z];
+	const oc = vec3.subtract(rayOrigin, pos);
+	const a = vec3.dot(rayDirection, rayDirection);
+	const b = 2.0 * vec3.dot(oc, rayDirection);
+	const c = vec3.dot(oc, oc) - sphereRadius * sphereRadius;
+	const discriminant = b * b - 4 * a * c;
+	return discriminant > 0;
+}
+
+export function addRaycastListener () {
+	window.addEventListener('click', (event) => {
+		let canvas = document.getElementsByTagName('canvas')[0];
+		let camera = app.cameras.WASD;
+		const { rayOrigin, rayDirection } = getRayFromMouse(event, canvas, camera);
+		for (const object of app.mainRenderBundle) {
+			if (rayIntersectsSphere(rayOrigin, rayDirection, object.position, 2)) {
+				console.log('Object clicked:', object.name);
+				// Just like in matrix-engine webGL version "ray.hit.event"
+				dispatchEvent(new CustomEvent('ray.hit.event', {detail: {
+					hitObject: object
+				}}))
+			}
+		}
+	});
+}

package/src/engine/utils.js

@@ -523,7 +523,7 @@ export function randomIntFromTo(min, max) {
   }
 }
 
-export var QueryString = (function() {
+export var urlQuery = (function() {
   var query_string = {};
   var query = window.location.search.substring(1);
   var vars = query.split('&');
@@ -652,5 +652,71 @@ export function quaternion_rotation_matrix(Q) {
 // copnsole log graphics
 export const LOG_WARN = 'background: gray; color: yellow; font-size:10px';
 export const LOG_INFO = 'background: green; color: white; font-size:11px';
-export const LOG_MATRIX = "font-family: verdana;color: #lime; font-size:11px;text-shadow: 2px 2px 4px orangered;background: black;";
-export const LOG_FUNNY = "font-family: stormfaze;color: #f1f033; font-size:14px;text-shadow: 2px 2px 4px #f335f4, 4px 4px 4px #d64444, 2px 2px 4px #c160a6, 6px 2px 0px #123de3;background: black;";
+export const LOG_MATRIX = "font-family: stormfaze;color: #lime; font-size:11px;text-shadow: 2px 2px 4px orangered;background: black;";
+export const LOG_FUNNY = "font-family: stormfaze;color: #f1f033; font-size:14px;text-shadow: 2px 2px 4px #f335f4, 4px 4px 4px #d64444, 2px 2px 4px #c160a6, 6px 2px 0px #123de3;background: black;";
+export const LOG_FUNNY_SMALL = "font-family: stormfaze;color: #f1f033; font-size:10px;text-shadow: 2px 2px 4px #f335f4, 4px 4px 4px #d64444, 1px 1px 2px #c160a6, 3px 1px 0px #123de3;background: black;";
+
+export function genName(length) {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let result = "";
+  for(let i = 0;i < length;i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return result;
+}
+
+export let mb = {
+  root: () => byId('msgBox'),
+  pContent: () => byId('not-content'),
+  copy: function() {
+    navigator.clipboard.writeText(mb.root().children[0].innerText);
+  },
+  c: 0, ic: 0, t: {},
+  setContent: function(content, t) {
+    var iMsg = document.createElement('div');
+    iMsg.innerHTML = content;
+    iMsg.id = `msgbox-loc-${mb.c}`;
+    mb.root().appendChild(iMsg);
+    iMsg.classList.add('animate1')
+    if(t == 'ok') {
+      iMsg.style = 'font-family: stormfaze;color:white;padding:7px;margin:2px';
+    } else {
+      iMsg.style = 'font-family: stormfaze;color:white;padding:7px;margin:2px';
+    }
+  },
+  kill: function() {
+    mb.root().remove();
+  },
+  show: function(content, t) {
+    mb.setContent(content, t);
+    mb.root().style.display = "block";
+    var loc2 = mb.c;
+    setTimeout(function() {
+      byId(`msgbox-loc-${loc2}`).classList.remove("fadeInDown");
+      byId(`msgbox-loc-${loc2}`).classList.add("fadeOut");
+      setTimeout(function() {
+        byId(`msgbox-loc-${loc2}`).style.display = "none";
+        byId(`msgbox-loc-${loc2}`).classList.remove("fadeOut");
+
+        byId(`msgbox-loc-${loc2}`).remove();
+        mb.ic++;
+        if(mb.c == mb.ic) {
+          mb.root().style.display = 'none';
+        }
+      }, 1000)
+    }, 3000);
+    mb.c++;
+  },
+  error: function(content) {
+    mb.root().classList.remove("success")
+    mb.root().classList.add("error")
+    mb.root().classList.add("fadeInDown");
+    mb.show(content, 'err');
+  },
+  success: function(content) {
+    mb.root().classList.remove("error")
+    mb.root().classList.add("success")
+    mb.root().classList.add("fadeInDown");
+    mb.show(content, 'ok');
+  }
+}

package/src/multilang/lang.js

@@ -0,0 +1,35 @@
+import {LOG_MATRIX} from "../engine/utils";
+
+export class MultiLang {
+
+  constructor() {
+    addEventListener('updateLang', () => {
+      console.log('Multilang updated.')
+      this.update();
+    })
+  }
+
+  update = function() {
+    var allTranDoms = document.querySelectorAll('[data-label]');
+    allTranDoms.forEach((i) => {
+      i.innerHTML = this.get[i.getAttribute('data-label')]
+    })
+  }
+
+  loadMultilang = async function(lang = 'en') {
+    lang = 'res/multilang/' + lang + '.json';
+    console.info(`%cMultilang: ${lang}` , LOG_MATRIX);
+    try {
+      const r = await fetch(lang, {
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        }
+      });
+      return await r.json()
+    } catch(err) {
+      console.warn('Not possible to access multilang json asset! Err => ', err);
+      return {}
+    }
+  }
+}

package/src/physics/matrix-ammo.js

@@ -1,4 +1,5 @@
-import {LOG_FUNNY, LOG_MATRIX, quaternion_rotation_matrix, radToDeg, scriptManager} from "../engine/utils";
+// import {vec3} from "wgpu-matrix";
+import {LOG_FUNNY, degToRad, quaternion_rotation_matrix, radToDeg, scriptManager} from "../engine/utils";
 
 export default class MatrixAmmo {
   constructor() {
@@ -10,9 +11,13 @@ export default class MatrixAmmo {
       undefined,
       this.init,
     );
+
+    this.lastRoll = '';
+    this.presentScore = '';
   }
 
   init = () => {
+    // console.log('pre ammo')
     Ammo().then(Ammo => {
       // Physics variables
       this.dynamicsWorld = null;
@@ -21,13 +26,13 @@ export default class MatrixAmmo {
       this.lastUpdate = 0
       console.log("%c Ammo core loaded.", LOG_FUNNY);
       this.initPhysics();
-      dispatchEvent(new CustomEvent('AmmoReady', {}))
+      // simulate async
+      setTimeout(() => dispatchEvent(new CustomEvent('AmmoReady', {})), 100);
     });
   };
 
   initPhysics() {
     let Ammo = this.Ammo;
-
     // Physics configuration
     var collisionConfiguration = new Ammo.btDefaultCollisionConfiguration(),
       dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration),
@@ -35,26 +40,27 @@ export default class MatrixAmmo {
       solver = new Ammo.btSequentialImpulseConstraintSolver();
 
     this.dynamicsWorld = new Ammo.btDiscreteDynamicsWorld(dispatcher, overlappingPairCache, solver, collisionConfiguration);
-
     this.dynamicsWorld.setGravity(new Ammo.btVector3(0, -10, 0));
 
-    var groundShape = new Ammo.btBoxShape(new Ammo.btVector3(50, 2, 50)),
+    var groundShape = new Ammo.btBoxShape(new Ammo.btVector3(70, 1, 70)),
       groundTransform = new Ammo.btTransform();
     groundTransform.setIdentity();
-    groundTransform.setOrigin(new Ammo.btVector3(0, -1, 0));
+    groundTransform.setOrigin(new Ammo.btVector3(0, -4.45, 0));
     var mass = 0,
       isDynamic = (mass !== 0),
       localInertia = new Ammo.btVector3(0, 0, 0);
 
-    if(isDynamic)
-      groundShape.calculateLocalInertia(mass, localInertia);
+    if(isDynamic) groundShape.calculateLocalInertia(mass, localInertia);
 
     var myMotionState = new Ammo.btDefaultMotionState(groundTransform),
       rbInfo = new Ammo.btRigidBodyConstructionInfo(mass, myMotionState, groundShape, localInertia),
       body = new Ammo.btRigidBody(rbInfo);
-
+    body.name = 'ground';
+    this.ground = body;
     this.dynamicsWorld.addRigidBody(body);
     // this.rigidBodies.push(body);
+    // add collide event
+    this.detectCollision()
   }
 
   addPhysics(MEObject, pOptions) {
@@ -87,18 +93,48 @@ export default class MatrixAmmo {
   }
 
   addPhysicsBox(MEObject, pOptions) {
+
+    const FLAGS = {
+      TEST_NIDZA: 3,
+      CF_KINEMATIC_OBJECT: 2
+    }
+
     let Ammo = this.Ammo;
-    var colShape = new Ammo.btBoxShape(new Ammo.btVector3(1, 1, 1)),
+    // improve this - scale by comp
+    var colShape = new Ammo.btBoxShape(new Ammo.btVector3(pOptions.scale[0], pOptions.scale[1], pOptions.scale[2])),
       startTransform = new Ammo.btTransform();
     startTransform.setIdentity();
-    var mass = 1;
+    var mass = pOptions.mass;
     var localInertia = new Ammo.btVector3(0, 0, 0);
     colShape.calculateLocalInertia(mass, localInertia);
     startTransform.setOrigin(new Ammo.btVector3(pOptions.position.x, pOptions.position.y, pOptions.position.z));
+    //rotation
+    // console.log('startTransform.setRotation', startTransform.setRotation)
+    var t = startTransform.getRotation()
+    t.setX(degToRad(pOptions.rotation.x))
+    t.setY(degToRad(pOptions.rotation.y))
+    t.setZ(degToRad(pOptions.rotation.z))
+    startTransform.setRotation(t)
+
+    // startTransform.setRotation(pOptions.rotation.x, pOptions.rotation.y, pOptions.rotation.z);
+
     var myMotionState = new Ammo.btDefaultMotionState(startTransform),
       rbInfo = new Ammo.btRigidBodyConstructionInfo(mass, myMotionState, colShape, localInertia),
       body = new Ammo.btRigidBody(rbInfo);
-    body.setActivationState(4)
+
+    if(pOptions.mass == 0 && typeof pOptions.state == 'undefined' && typeof pOptions.collide == 'undefined') {
+      body.setActivationState(2)
+      body.setCollisionFlags(FLAGS.CF_KINEMATIC_OBJECT);
+      // console.log('what is pOptions.mass and state is 2 ....', pOptions.mass)
+    } else if(typeof pOptions.collide != 'undefined' && pOptions.collide == false) {
+      // idea not work for now - eliminate collide effect
+      body.setActivationState(4)
+      body.setCollisionFlags(FLAGS.TEST_NIDZA);
+    } else {
+      body.setActivationState(4)
+    }
+    // console.log('what is name.', pOptions.name)
+    body.name = pOptions.name;
     body.MEObject = MEObject;
     this.dynamicsWorld.addRigidBody(body);
     this.rigidBodies.push(body);
@@ -111,6 +147,124 @@ export default class MatrixAmmo {
     body.setLinearVelocity(tbv30);
   }
 
+  setKinematicTransform(body, x, y, z, rx, ry, rz) {
+    if(typeof rx == 'undefined') {var rx = 0;}
+    if(typeof ry == 'undefined') {var ry = 0;}
+    if(typeof rz == 'undefined') {var rz = 0;}
+    let pos = new Ammo.btVector3();
+    // let quat = new Ammo.btQuaternion();
+    pos = body.getWorldTransform().getOrigin();
+    let localRot = body.getWorldTransform().getRotation();
+    // console.log('pre pos x:', pos.x(), " y : ", pos.y(), " z:", pos.z())
+    pos.setX(pos.x() + x)
+    pos.setY(pos.y() + y)
+    pos.setZ(pos.z() + z)
+    // console.log('position kinematic move : ', pos)
+    // console.log('position localRot  : ', localRot)
+    localRot.setX(rx)
+    localRot.setY(ry)
+    localRot.setZ(rz)
+    let physicsBody = body;
+    let ms = physicsBody.getMotionState();
+    if(ms) {
+      var tmpTrans = new Ammo.btTransform();
+
+      // quat.setValue(quat.x(), quat.y(), quat.z(), quat.w());
+      tmpTrans.setIdentity();
+      tmpTrans.setOrigin(pos);
+      tmpTrans.setRotation(localRot);
+      ms.setWorldTransform(tmpTrans);
+    }
+    // console.log('body, ', body)
+  }
+
+  getBodyByName(name) {
+    var b = null;
+    this.rigidBodies.forEach((item, index, array) => {
+      if(item.name == name) {
+        b = array[index];
+      }
+    });
+    return b;
+  }
+
+  getNameByBody(body) {
+    var b = null;
+    this.rigidBodies.forEach((item, index, array) => {
+      if(item.kB == body.kB) {
+        b = array[index].name;
+      }
+    });
+    return b;
+  }
+
+  detectCollision() {
+    console.log('override this')
+    return;
+
+    this.lastRoll = '';
+    this.presentScore = '';
+
+    let dispatcher = this.dynamicsWorld.getDispatcher();
+    let numManifolds = dispatcher.getNumManifolds();
+
+    for(let i = 0;i < numManifolds;i++) {
+      let contactManifold = dispatcher.getManifoldByIndexInternal(i);
+      // let numContacts = contactManifold.getNumContacts();
+      // this.rigidBodies.forEach((item) => {
+      //   if(item.kB == contactManifold.getBody0().kB) {
+      //     // console.log('Detected body0 =', item.name)
+      //   }
+      //   if(item.kB == contactManifold.getBody1().kB) {
+      //     // console.log('Detected body1 =', item.name)
+      //   }
+      // })
+
+      if(this.ground.kB == contactManifold.getBody0().kB &&
+        this.getNameByBody(contactManifold.getBody1()) == 'CubePhysics1') {
+        // console.log(this.ground ,'GROUND IS IN CONTACT WHO IS BODY1 ', contactManifold.getBody1())
+        // console.log('GROUND IS IN CONTACT WHO IS BODY1 getNameByBody  ', this.getNameByBody(contactManifold.getBody1()))
+        // CHECK ROTATION
+        var testR = contactManifold.getBody1().getWorldTransform().getRotation();
+        if(Math.abs(testR.y()) < 0.00001) {
+          this.lastRoll += " 4 +";
+          this.presentScore += 4;
+          dispatchEvent(new CustomEvent('dice-1', {}));
+        }
+        if(Math.abs(testR.x()) < 0.00001) {
+          this.lastRoll += " 3 +";
+          this.presentScore += 3;
+          dispatchEvent(new CustomEvent('dice-4', {}));
+        }
+        if(testR.x().toString().substring(0, 5) == testR.y().toString().substring(1, 6)) {
+          this.lastRoll += " 2 +";
+          this.presentScore += 2;
+          dispatchEvent(new CustomEvent('dice-6', {}));
+        }
+
+        if(testR.x().toString().substring(0, 5) == testR.y().toString().substring(0, 5)) {
+          this.lastRoll += " 1 +";
+          this.presentScore += 1;
+          dispatchEvent(new CustomEvent('dice-2', {}));
+        }
+
+        if(testR.z().toString().substring(0, 5) == testR.y().toString().substring(1, 6)) {
+          this.lastRoll += " 6 +";
+          this.presentScore += 6;
+          dispatchEvent(new CustomEvent('dice-5', {}));
+        }
+
+        if(testR.z().toString().substring(0, 5) == testR.y().toString().substring(0, 5)) {
+          this.lastRoll += " 5 +";
+          this.presentScore += 5;
+          dispatchEvent(new CustomEvent('dice-3', {}));
+        }
+
+        console.log('this.lastRoll = ', this.lastRoll, ' presentScore = ', this.presentScore)
+      }
+    }
+  }
+
   updatePhysics() {
     // Step world
     this.dynamicsWorld.stepSimulation(1 / 60, 10);
@@ -129,12 +283,11 @@ export default class MatrixAmmo {
         body.MEObject.rotation.axis.x = testAxis.x()
         body.MEObject.rotation.axis.y = testAxis.y()
         body.MEObject.rotation.axis.z = testAxis.z()
-        // var tx = radToDeg(parseFloat(test.getAngle().toFixed(2)) * testAxis.x().toFixed(2))
-        // var ty = radToDeg(parseFloat(test.getAngle().toFixed(2)) * testAxis.y().toFixed(2))
-        // var tz = radToDeg(parseFloat(test.getAngle().toFixed(2)) * testAxis.z().toFixed(2))
         body.MEObject.rotation.matrixRotation = quaternion_rotation_matrix(test);
         body.MEObject.rotation.angle = radToDeg(parseFloat(test.getAngle().toFixed(2)))
       }
     })
+    // collision detect
+    this.detectCollision()
   }
 }

package/src/shaders/fragment.wgsl.js

@@ -20,7 +20,7 @@ struct FragmentInput {
 }
 
 const albedo = vec3f(0.9);
-const ambientFactor = 0.2;
+const ambientFactor = 0.7;
 
 @fragment
 fn main(input : FragmentInput) -> @location(0) vec4f {
@@ -39,10 +39,12 @@ fn main(input : FragmentInput) -> @location(0) vec4f {
     }
   }
   visibility /= 9.0;
-
   let lambertFactor = max(dot(normalize(scene.lightPos - input.fragPos), normalize(input.fragNorm)), 0.0);
   let lightingFactor = min(ambientFactor + visibility * lambertFactor, 1.0);
   let textureColor = textureSample(meshTexture, meshSampler, input.uv);
 
   return vec4(textureColor.rgb * lightingFactor * albedo, 1.0);
+  // return vec4f(input.fragNorm * 0.5 + 0.5, 1)
+  // return vec4f(input.uv, 0, 1)
+  // return vec4(textureColor.rgb , 0.5);
 }`

package/src/shaders/shaders.js

@@ -35,7 +35,7 @@ fn vertexMain(input: VertexInput) -> VertexOutput {
 @group(1) @binding(2) var meshTexture: texture_2d<f32>;
 
 // Static directional lighting
-const lightDir = vec3f(1, 1, 1);
+const lightDir = vec3f(0, 1, 0);
 const dirColor = vec3(1);
 const ambientColor = vec3f(0.05);
 

package/src/shaders/vertexShadow.wgsl.js

@@ -15,6 +15,6 @@ struct Model {
 fn main(
   @location(0) position: vec3f
 ) -> @builtin(position) vec4f {
-  return scene.lightViewProjMatrix * model.modelMatrix * vec4(position, 1.0);
+  return scene.lightViewProjMatrix * model.modelMatrix * vec4(position, 1);
 }
 `

package/src/sounds/sounds.js

@@ -0,0 +1,47 @@
+
+export class MatrixSounds {
+
+  constructor() {
+    this.volume = 0.5;
+    this.audios = {};
+  }
+
+  createClones(c, name, path) {
+    for(var x = 1;x < c;x++) {
+      let a = new Audio(path);
+      a.id = name + x;
+      a.volume = this.volume;
+      this.audios[name + x] = a;
+      document.body.append(a);
+    }
+  }
+
+  createAudio(name, path, useClones) {
+    let a = new Audio(path);
+    a.id = name;
+    a.volume = this.volume;
+    this.audios[name] = a;
+    document.body.append(a);
+    if(typeof useClones !== 'undefined') {
+      this.createClones(useClones, name, path);
+    }
+  }
+
+  play(name) {
+    if(this.audios[name].paused == true) {
+      this.audios[name].play()
+    } else {
+      this.tryClone(name);
+    }
+  }
+
+  tryClone(name) {
+    var cc = 1;
+    try {
+      while(this.audios[name + cc].paused == false) {
+        cc++;
+      }
+      if (this.audios[name + cc]) this.audios[name + cc].play();
+    } catch(err) {}
+  }
+}