matrix-engine-wgpu 1.3.2 → 1.3.5

package/index.js

@@ -6,7 +6,7 @@
 // import {degToRad, radToDeg} from "./utils";
 import {downloadMeshes} from "./src/engine/loader-obj.js";
 import MatrixEngineWGPU from "./src/world.js";
-import {addRaycastListener, getRayFromMouse, rayIntersectsSphere} from "./src/engine/raycast.js";
+import {addRaycastsAABBListener, addRaycastListener, getRayFromMouse, rayIntersectsSphere} from "./src/engine/raycast.js";
 
 var about = () => {
   console.log("Hi npm. matrix-engine for webgpu is ready...")
@@ -25,5 +25,6 @@ export {
 	rayIntersectsSphere,
 	getRayFromMouse,
 	addRaycastListener,
+  addRaycastsAABBListener,
   about
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-engine-wgpu",
-  "version": "1.3.2",
+  "version": "1.3.5",
   "description": "obj sequence anim +HOTFIX raycast, webGPU powered pwa application. Crazy fast rendering with AmmoJS physics support. Simple raycaster hit object added.",
   "main": "index.js",
   "files": [

package/src/engine/mesh-obj.js

@@ -25,6 +25,9 @@ export default class MEMeshObj {
     this.context = context;
     this.entityArgPass = o.entityArgPass;
 
+    // comes from engine not from args
+    this.clearColor = "red";
+
     // Mesh stuff - for single mesh or t-posed (fiktive-first in loading order)
     this.mesh = o.mesh;
     this.mesh.uvs = this.mesh.textures;
@@ -310,7 +313,7 @@ export default class MEMeshObj {
           {
             // view is acquired and set in render loop.
             view: undefined,
-            clearValue: {r: 0.5, g: 0.5, b: 0.5, a: 1.0},
+            clearValue: this.clearColor,
             loadOp: 'clear', // load old fix for FF
             storeOp: 'store',
           },

package/src/engine/raycast.js

@@ -72,8 +72,8 @@ export function rayIntersectsSphere(rayOrigin, rayDirection, sphereCenter, spher
   return discriminant > 0;
 }
 
-export function addRaycastListener() {
-  let canvasDom = document.getElementById("canvas1");
+export function addRaycastListener(canvasId = "canvas1") {
+  let canvasDom = document.getElementById(canvasId);
   canvasDom.addEventListener('click', (event) => {
     let camera = app.cameras.WASD;
     const {rayOrigin, rayDirection} = getRayFromMouse(event, canvasDom, camera);
@@ -89,4 +89,108 @@ export function addRaycastListener() {
       }
     }
   });
-}
+}
+
+export function rayIntersectsAABB(
+  rayOrigin,
+  rayDirection,
+  boxMin,
+  boxMax
+) {
+  let tmin = (boxMin[0] - rayOrigin[0]) / rayDirection[0];
+  let tmax = (boxMax[0] - rayOrigin[0]) / rayDirection[0];
+  if(tmin > tmax) [tmin, tmax] = [tmax, tmin];
+
+  let tymin = (boxMin[1] - rayOrigin[1]) / rayDirection[1];
+  let tymax = (boxMax[1] - rayOrigin[1]) / rayDirection[1];
+  if(tymin > tymax) [tymin, tymax] = [tymax, tymin];
+
+  if(tmin > tymax || tymin > tmax) return false;
+  if(tymin > tmin) tmin = tymin;
+  if(tymax < tmax) tmax = tymax;
+
+  let tzmin = (boxMin[2] - rayOrigin[2]) / rayDirection[2];
+  let tzmax = (boxMax[2] - rayOrigin[2]) / rayDirection[2];
+  if(tzmin > tzmax) [tzmin, tzmax] = [tzmax, tzmin];
+
+  if(tmin > tzmax || tzmin > tmax) return false;
+
+  return true;
+}
+
+export function computeAABBFromVertices(vertices) {
+  const min = [Infinity, Infinity, Infinity];
+  const max = [-Infinity, -Infinity, -Infinity];
+
+  for(let i = 0;i < vertices.length;i += 3) {
+    const x = vertices[i];
+    const y = vertices[i + 1];
+    const z = vertices[i + 2];
+
+    min[0] = Math.min(min[0], x);
+    min[1] = Math.min(min[1], y);
+    min[2] = Math.min(min[2], z);
+
+    max[0] = Math.max(max[0], x);
+    max[1] = Math.max(max[1], y);
+    max[2] = Math.max(max[2], z);
+  }
+
+  return [min, max];
+}
+
+export function addRaycastsAABBListener(canvasId = "canvas1") {
+  const canvasDom = document.getElementById(canvasId);
+  if(!canvasDom) {
+    console.warn(`Canvas with id ${canvasId} not found`);
+    return;
+  }
+
+  canvasDom.addEventListener('click', (event) => {
+    const camera = app.cameras.WASD;
+    const {rayOrigin, rayDirection} = getRayFromMouse(event, canvasDom, camera);
+
+    for(const object of app.mainRenderBundle) {
+      // Compute AABB min/max from object position and size
+      const pos = [object.position.x,object.position.y,object.position.z]; // [x,y,z]
+
+      ////////////
+      const [boxMinLocal, boxMaxLocal] = computeAABBFromVertices(object.mesh.vertices);
+      // Optionally transform to world space using object.position
+      // const pos = object.position;
+
+      const boxMin = [
+        boxMinLocal[0] + pos[0],
+        boxMinLocal[1] + pos[1],
+        boxMinLocal[2] + pos[2]
+      ];
+
+      const boxMax = [
+        boxMaxLocal[0] + pos[0],
+        boxMaxLocal[1] + pos[1],
+        boxMaxLocal[2] + pos[2]
+      ];
+      //////////////
+      // const size = object.size || [1, 1, 1]; // Replace with actual object size or default 1x1x1
+
+      // const boxMin = [
+      //   pos[0] - size[0] / 2,
+      //   pos[1] - size[1] / 2,
+      //   pos[2] - size[2] / 2
+      // ];
+      // const boxMax = [
+      //   pos[0] + size[0] / 2,
+      //   pos[1] + size[1] / 2,
+      //   pos[2] + size[2] / 2
+      // ];
+
+      if(rayIntersectsAABB(rayOrigin, rayDirection, boxMin, boxMax)) {
+        console.log('AABB hit:', object.name);
+
+        canvasDom.dispatchEvent(new CustomEvent('ray.hit.event', {
+          detail: {hitObject: object}
+        }));
+      }
+    }
+  });
+}

package/src/world.js

@@ -39,10 +39,14 @@ export default class MatrixEngineWGPU {
         mainCameraParams: {
           type: 'WASD',
           responseCoef: 2000
-        }
+        },
+        clearColor: {r: 0.584, g: 0, b: 0.239, a: 1.0}
       }
       callback = options;
     }
+    if(typeof options.clearColor === 'undefined') {
+      options.clearColor = {r: 0.584, g: 0, b: 0.239, a: 1.0};
+    }
     if(typeof options.canvasId === 'undefined') {
       options.canvasId = 'canvas1';
     }
@@ -251,7 +255,7 @@ export default class MatrixEngineWGPU {
     this.mainRenderBundle.push(myMesh1);
   }
 
-  addMeshObj = (o) => {
+  addMeshObj = (o , clearColor=this.options.clearColor) => {
     if(typeof o.name === 'undefined') {o.name = genName(9)}
     if(typeof o.position === 'undefined') {o.position = {x: 0, y: 0, z: -4}}
     if(typeof o.rotation === 'undefined') {o.rotation = {x: 0, y: 0, z: 0}}
@@ -285,18 +289,8 @@ export default class MatrixEngineWGPU {
     if(typeof o.objAnim == 'undefined' || typeof o.objAnim == null) {
       o.objAnim = null;
     } else {
-      console.log('o.anim', o.objAnim)
-      // o.objAnim = {
-      //   id: o.objAnim.id,
-      //   sumOfAniFrames: o.objAnim.sumOfAniFrames,
-      //   currentAni: o.objAnim.currentAni,
-      //   speed: o.objAnim.speed,
-      //   currentDraws: 0
-      // };
-
+      // console.log('o.anim', o.objAnim)
       if(typeof o.objAnim.animations !== 'undefined') {
-        // o.objAnim.animation.anims = o.objAnim.animations;
-        console.log('o.o.objAnim.animations ', o.objAnim.animations )
         o.objAnim.play = play;
       }
       // no need for single test it in future
@@ -314,7 +308,8 @@ export default class MatrixEngineWGPU {
         }
       }
     }
-    let myMesh1 = new MEMeshObj(this.canvas, this.device, this.context, o)
+    let myMesh1 = new MEMeshObj(this.canvas, this.device, this.context, o);
+    myMesh1.clearColor = clearColor;
     if(o.physics.enabled == true) {
       this.matrixAmmo.addPhysics(myMesh1, o.physics)
     }