matrix-engine-wgpu 1.3.5 → 1.3.7

package/index.js

@@ -6,7 +6,13 @@
 // import {degToRad, radToDeg} from "./utils";
 import {downloadMeshes} from "./src/engine/loader-obj.js";
 import MatrixEngineWGPU from "./src/world.js";
-import {addRaycastsAABBListener, addRaycastListener, getRayFromMouse, rayIntersectsSphere} from "./src/engine/raycast.js";
+import {
+  addRaycastsAABBListener,
+  addRaycastListener, getRayFromMouse,
+  getRayFromMouse2, rayIntersectsSphere,
+  computeWorldVertsAndAABB, rayIntersectsAABB,
+  computeAABB
+} from "./src/engine/raycast.js";
 
 var about = () => {
   console.log("Hi npm. matrix-engine for webgpu is ready...")
@@ -15,16 +21,20 @@ var about = () => {
   console.log(" - Loading obj files with uvs")
   console.log(" - Scene camera use -z front")
   console.log(" - position, rotation - same like matrix-engine")
-	console.log(" - Physics used Ammo.js build")
-	console.log(" - Raycaster HIT/CLICK on object scene")
+  console.log(" - Physics used Ammo.js build")
+  console.log(" - Raycaster HIT/CLICK on object scene")
 }
 
 export {
   MatrixEngineWGPU,
   downloadMeshes,
-	rayIntersectsSphere,
-	getRayFromMouse,
-	addRaycastListener,
+  rayIntersectsSphere,
+  getRayFromMouse,
+  getRayFromMouse2,
+  addRaycastListener,
   addRaycastsAABBListener,
+  rayIntersectsAABB,
+  computeAABB,
+  computeWorldVertsAndAABB,
   about
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-engine-wgpu",
-  "version": "1.3.5",
+  "version": "1.3.7",
   "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/readme.md

@@ -71,6 +71,10 @@ mainCameraParams: {
 
 ### Object Position
 
+Best way for access physics body object:
+ app.matrixAmmo.getBodyByName(name)
+ also app.matrixAmmo.getNameByBody
+
 Control object position:
 
 ```js
@@ -164,13 +168,17 @@ window.addEventListener('click', (event) => {
 Automatic raycast listener:
 
 ```js
-addRaycastListener();
+addRaycastListener(); 
 
 window.addEventListener('ray.hit.event', (event) => {
   console.log('Ray hit:', event.detail.hitObject);
 });
 ```
-
+Engine also exports (box):
+ - addRaycastsAABBListener 
+ - rayIntersectsAABB,
+ - computeAABB,
+ - computeWorldVertsAndAABB,
 ---
 
 ### How to Load `.obj` Models

package/src/engine/mesh-obj.js

@@ -36,8 +36,8 @@ export default class MEMeshObj {
     // ObjSequence animation
     if(typeof o.objAnim !== 'undefined' && o.objAnim != null) {
       this.objAnim = o.objAnim;
-      for (var key in this.objAnim.animations){
-        if (key != 'active') this.objAnim.animations[key].speedCounter = 0;
+      for(var key in this.objAnim.animations) {
+        if(key != 'active') this.objAnim.animations[key].speedCounter = 0;
       }
       console.log(`%c Mesh objAnim exist: ${o.objAnim}`, LOG_FUNNY_SMALL);
       this.drawElements = this.drawElementsAnim;
@@ -428,6 +428,25 @@ export default class MEMeshObj {
         return this.modelViewProjectionMatrix;
       }
 
+      this.getModelMatrix = (pos) => {
+        let modelMatrix =  mat4.identity();
+        mat4.translate(modelMatrix, [pos.x, pos.y, pos.z], modelMatrix);
+        if(this.itIsPhysicsBody) {
+          mat4.rotate(modelMatrix,
+            [this.rotation.axis.x, this.rotation.axis.y, this.rotation.axis.z],
+              degToRad(this.rotation.angle),
+              modelMatrix
+          );
+        } else {
+          mat4.rotateX(modelMatrix, this.rotation.getRotX(), modelMatrix);
+          mat4.rotateY(modelMatrix, this.rotation.getRotY(), modelMatrix);
+          mat4.rotateZ(modelMatrix, this.rotation.getRotZ(), modelMatrix);
+        }
+        // Apply scale if you have it, e.g.:
+        // mat4.scale(modelMatrix, modelMatrix, [this.scale.x, this.scale.y, this.scale.z]);
+        return modelMatrix;
+      };
+
       this.upVector = vec3.fromValues(0, 1, 0);
       this.origin = vec3.fromValues(0, 0, 0);
 
@@ -609,6 +628,7 @@ export default class MEMeshObj {
   draw = (commandEncoder) => {
     if(this.done == false) return;
     const transformationMatrix = this.getTransformationMatrix(this.position);
+
     this.device.queue.writeBuffer(
       this.sceneUniformBuffer,
       64,
@@ -713,7 +733,7 @@ export default class MEMeshObj {
     renderPass.setIndexBuffer(mesh.indexBuffer, 'uint16');
     renderPass.drawIndexed(mesh.indexCount);
     if(this.objAnim.playing == true) {
-      if (this.objAnim.animations[this.objAnim.animations.active].speedCounter >= this.objAnim.animations[this.objAnim.animations.active].speed) {
+      if(this.objAnim.animations[this.objAnim.animations.active].speedCounter >= this.objAnim.animations[this.objAnim.animations.active].speed) {
         this.objAnim.currentAni++;
         this.objAnim.animations[this.objAnim.animations.active].speedCounter = 0;
       } else {

package/src/engine/raycast.js

@@ -62,6 +62,43 @@ export function getRayFromMouse(event, canvas, camera) {
   return {rayOrigin, rayDirection};
 }
 
+export function getRayFromMouse2(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
+  y = -y;
+  const fov = Math.PI / 4;
+  const aspect = canvas.width / canvas.height;
+  const near = 0.1;
+  const far = 1000;
+  camera.projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 1000.0);
+  const invProjection = mat4.inverse(camera.projectionMatrix);
+  console.log("camera.view:" + camera.view)
+  const invView = mat4.inverse(camera.view);
+  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[1] / worldPos[3],
+      worldPos[2] / 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);
@@ -78,12 +115,15 @@ export function addRaycastListener(canvasId = "canvas1") {
     let camera = app.cameras.WASD;
     const {rayOrigin, rayDirection} = getRayFromMouse(event, canvasDom, camera);
     for(const object of app.mainRenderBundle) {
+      if(object.raycast.enabled == false) return;
       if(rayIntersectsSphere(rayOrigin, rayDirection, object.position, object.raycast.radius)) {
         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
+            hitObject: object,
+            rayOrigin: rayOrigin,
+            rayDirection: rayDirection
           }
         }))
       }
@@ -91,12 +131,26 @@ export function addRaycastListener(canvasId = "canvas1") {
   });
 }
 
-export function rayIntersectsAABB(
-  rayOrigin,
-  rayDirection,
-  boxMin,
-  boxMax
-) {
+// Compute AABB from flat vertices array [x,y,z, x,y,z, ...]
+export function computeAABB(vertices) {
+  const min = [Infinity, Infinity, Infinity];
+  const max = [-Infinity, -Infinity, -Infinity];
+
+  for(let i = 0;i < vertices.length;i += 3) {
+    min[0] = Math.min(min[0], vertices[i]);
+    min[1] = Math.min(min[1], vertices[i + 1]);
+    min[2] = Math.min(min[2], vertices[i + 2]);
+
+    max[0] = Math.max(max[0], vertices[i]);
+    max[1] = Math.max(max[1], vertices[i + 1]);
+    max[2] = Math.max(max[2], vertices[i + 2]);
+  }
+
+  return [min, max];
+}
+
+// Ray-AABB intersection using slabs method
+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];
@@ -105,7 +159,7 @@ export function rayIntersectsAABB(
   let tymax = (boxMax[1] - rayOrigin[1]) / rayDirection[1];
   if(tymin > tymax) [tymin, tymax] = [tymax, tymin];
 
-  if(tmin > tymax || tymin > tmax) return false;
+  if((tmin > tymax) || (tymin > tmax)) return false;
   if(tymin > tmin) tmin = tymin;
   if(tymax < tmax) tmax = tymax;
 
@@ -113,30 +167,30 @@ export function rayIntersectsAABB(
   let tzmax = (boxMax[2] - rayOrigin[2]) / rayDirection[2];
   if(tzmin > tzmax) [tzmin, tzmax] = [tzmax, tzmin];
 
-  if(tmin > tzmax || tzmin > tmax) return false;
+  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);
+export function computeWorldVertsAndAABB(object) {
+  const modelMatrix = object.getModelMatrix(object.position);
+  const worldVerts = [];
+  for(let i = 0;i < object.mesh.vertices.length;i += 3) {
+    const local = vec3.fromValues(
+      object.mesh.vertices[i],
+      object.mesh.vertices[i + 1],
+      object.mesh.vertices[i + 2]
+    );
+    const world = vec3.transformMat4(local, modelMatrix); // OK
+    worldVerts.push(world[0], world[1], world[2]);
   }
-
-  return [min, max];
+  const [boxMin, boxMax] = computeAABB(worldVerts);
+  return {
+    modelMatrix,
+    worldVerts,
+    boxMin,
+    boxMax,
+  };
 }
 
 export function addRaycastsAABBListener(canvasId = "canvas1") {
@@ -148,49 +202,18 @@ export function addRaycastsAABBListener(canvasId = "canvas1") {
 
   canvasDom.addEventListener('click', (event) => {
     const camera = app.cameras.WASD;
-    const {rayOrigin, rayDirection} = getRayFromMouse(event, canvasDom, camera);
-
+    const {rayOrigin, rayDirection} = getRayFromMouse2(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
-      // ];
-
+      const {boxMin, boxMax} = computeWorldVertsAndAABB(object);
+      if(object.raycast.enabled == false) return;
       if(rayIntersectsAABB(rayOrigin, rayDirection, boxMin, boxMax)) {
-        console.log('AABB hit:', object.name);
-
+        // console.log('AABB hit:', object.name);
         canvasDom.dispatchEvent(new CustomEvent('ray.hit.event', {
-          detail: {hitObject: object}
+          detail: {hitObject: object},
+          rayOrigin: rayOrigin,
+          rayDirection: rayDirection
         }));
       }
     }
   });
-}
+}