matrix-engine-wgpu 1.4.4 → 1.4.6

package/public/examples.js

@@ -473,6 +473,10 @@ var loadVideoTexture = function () {
     // if you dont wanna light just use intesity = 0
     // videoTexture is app main instance
     videoTexture.addLight();
+    (0, _raycast.addRaycastsAABBListener)();
+    videoTexture.canvas.addEventListener("ray.hit.event", e => {
+      console.log('test ray after shadows merge');
+    });
     addEventListener('AmmoReady', () => {
       (0, _loaderObj.downloadMeshes)({
         welcomeText: "./res/meshes/blender/piramyd.obj",
@@ -510,8 +514,11 @@ var loadVideoTexture = function () {
         physics: {
           enabled: true,
           geometry: "Cube"
+        },
+        raycast: {
+          enabled: true,
+          radius: 12
         }
-        // raycast: { enabled: true , radius: 2 }
       });
       var TEST = videoTexture.getSceneObjectByName('MyVideoTex');
       console.log(`%c Test video-texture...`, _utils.LOG_MATRIX);
@@ -8049,7 +8056,7 @@ class Materials {
       return;
     } else {}
     if (this.isVideo == true) {
-      console.info("✅ video sceneBindGroupForRender ");
+      // console.info("✅ video sceneBindGroupForRender ");
       this.sceneBindGroupForRender = this.device.createBindGroup({
         layout: this.bglForRender,
         entries: [{
@@ -8912,34 +8919,64 @@ 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;
-  y = -y;
-  const fov = Math.PI / 4;
+  y = -y; // flip Y only (WebGPU NDC)
+
   const aspect = canvas.width / canvas.height;
-  const near = 0.1;
-  const far = 1000;
-  camera.projectionMatrix = _wgpuMatrix.mat4.perspective(2 * Math.PI / 5, aspect, 1, 1000.0);
+  camera.projectionMatrix = _wgpuMatrix.mat4.perspective(2 * Math.PI / 5, aspect, 0.1, 1000);
   const invProjection = _wgpuMatrix.mat4.inverse(camera.projectionMatrix);
   const invView = _wgpuMatrix.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[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 = _wgpuMatrix.vec3.normalize(_wgpuMatrix.vec3.subtract(world, rayOrigin));
-  rayDirection[2] = -rayDirection[2];
+
+  // NDC -> clip -> eye -> world
+  let clip = [x, y, 1, 1];
+  let eye = _wgpuMatrix.vec4.transformMat4(clip, invProjection);
+  eye = [eye[0], eye[1], -1, 0]; // direction in view space
+
+  let worldDir = _wgpuMatrix.vec4.transformMat4(eye, invView);
+  const rayDirection = _wgpuMatrix.vec3.normalize([worldDir[0], worldDir[1], worldDir[2]]);
+  const rayOrigin = [...camera.position];
   return {
     rayOrigin,
     rayDirection
   };
 }
+// 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;
+//   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);
+//   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[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));
+//   rayDirection[2] = -rayDirection[2];
+//   return {rayOrigin, rayDirection};
+// }
+
 function getRayFromMouse2(event, canvas, camera) {
   const rect = canvas.getBoundingClientRect();
   let x = (event.clientX - rect.left) / rect.width * 2 - 1;
@@ -8988,17 +9025,17 @@ function addRaycastListener(canvasId = "canvas1") {
       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,
-            rayOrigin: rayOrigin,
-            rayDirection: rayDirection
-          }
-        }));
+      if (object.raycast.enabled == true) {
+        if (rayIntersectsSphere(rayOrigin, rayDirection, object.position, object.raycast.radius)) {
+          // Just like in matrix-engine webGL version "ray.hit.event"
+          canvasDom.dispatchEvent(new CustomEvent('ray.hit.event', {
+            detail: {
+              hitObject: object,
+              rayOrigin: rayOrigin,
+              rayDirection: rayDirection
+            }
+          }));
+        }
       }
     }
   });
@@ -9059,6 +9096,7 @@ function addRaycastsAABBListener(canvasId = "canvas1") {
     return;
   }
   canvasDom.addEventListener('click', event => {
+    console.warn(`Canvas click  ${event} `);
     const camera = app.cameras.WASD;
     const {
       rayOrigin,

package/public/res/meshes/jamb/dice.obj

@@ -1,40 +1,40 @@
-# Blender 4.1.1
-# www.blender.org
-mtllib dice.mtl
-o Cube
-v 1.000000 1.000000 -1.000000
-v 1.000000 -1.000000 -1.000000
-v 1.000000 1.000000 1.000000
-v 1.000000 -1.000000 1.000000
-v -1.000000 1.000000 -1.000000
-v -1.000000 -1.000000 -1.000000
-v -1.000000 1.000000 1.000000
-v -1.000000 -1.000000 1.000000
-vn -0.0000 1.0000 -0.0000
-vn -0.0000 -0.0000 1.0000
-vn -1.0000 -0.0000 -0.0000
-vn -0.0000 -1.0000 -0.0000
-vn 1.0000 -0.0000 -0.0000
-vn -0.0000 -0.0000 -1.0000
-vt 0.625000 0.500000
-vt 0.875000 0.500000
-vt 0.875000 0.750000
-vt 0.625000 0.750000
-vt 0.375000 0.750000
-vt 0.625000 1.000000
-vt 0.375000 1.000000
-vt 0.375000 0.000000
-vt 0.625000 0.000000
-vt 0.625000 0.250000
-vt 0.375000 0.250000
-vt 0.125000 0.500000
-vt 0.375000 0.500000
-vt 0.125000 0.750000
-s 0
-usemtl Material
-f 1/1/1 5/2/1 7/3/1 3/4/1
-f 4/5/2 3/4/2 7/6/2 8/7/2
-f 8/8/3 7/9/3 5/10/3 6/11/3
-f 6/12/4 2/13/4 4/5/4 8/14/4
-f 2/13/5 1/1/5 3/4/5 4/5/5
-f 6/11/6 5/10/6 1/1/6 2/13/6
+# Blender 4.1.1
+# www.blender.org
+mtllib dice.mtl
+o Cube
+v 1.000000 1.000000 -1.000000
+v 1.000000 -1.000000 -1.000000
+v 1.000000 1.000000 1.000000
+v 1.000000 -1.000000 1.000000
+v -1.000000 1.000000 -1.000000
+v -1.000000 -1.000000 -1.000000
+v -1.000000 1.000000 1.000000
+v -1.000000 -1.000000 1.000000
+vn -0.0000 1.0000 -0.0000
+vn -0.0000 -0.0000 1.0000
+vn -1.0000 -0.0000 -0.0000
+vn -0.0000 -1.0000 -0.0000
+vn 1.0000 -0.0000 -0.0000
+vn -0.0000 -0.0000 -1.0000
+vt 0.625000 0.500000
+vt 0.875000 0.500000
+vt 0.875000 0.750000
+vt 0.625000 0.750000
+vt 0.375000 0.750000
+vt 0.625000 1.000000
+vt 0.375000 1.000000
+vt 0.375000 0.000000
+vt 0.625000 0.000000
+vt 0.625000 0.250000
+vt 0.375000 0.250000
+vt 0.125000 0.500000
+vt 0.375000 0.500000
+vt 0.125000 0.750000
+s 0
+usemtl Material
+f 1/1/1 5/2/1 7/3/1 3/4/1
+f 4/5/2 3/4/2 7/6/2 8/7/2
+f 8/8/3 7/9/3 5/10/3 6/11/3
+f 6/12/4 2/13/4 4/5/4 8/14/4
+f 2/13/5 1/1/5 3/4/5 4/5/5
+f 6/11/6 5/10/6 1/1/6 2/13/6

package/readme.md

@@ -227,7 +227,8 @@ Automatic raycast listener:
 ```js
 addRaycastListener();
 
-window.addEventListener("ray.hit.event", event => {
+// Must be app.canvas or [Program name].canvas
+app.canvas.addEventListener("ray.hit.event", event => {
   console.log("Ray hit:", event.detail.hitObject);
 });
 ```
@@ -438,9 +439,14 @@ urlQuery.lang;
 `main.js` is the main instance for the Ultimate Yahtzee game template.
 It contains the game context, e.g., `dices`.
 
+What ever you find here onder main.js is open source part.
+Next level of upgrade is commercial part.
+
 For a clean startup without extra logic, use `empty.js`.
 This minimal build is ideal for online editors like CodePen or StackOverflow snippets.
 
+<img width="860" height="640" src="https://github.com/zlatnaspirala/matrix-engine-wgpu/blob/main/non-project-files/3d-jamb.png?raw=true" />
+
 ---
 
 ## NPM Scripts
@@ -481,6 +487,11 @@ This is static file storage.
 
 ---
 
+Performance for Jamb game: 
+
+<img width="860" height="640" src="https://github.com/zlatnaspirala/matrix-engine-wgpu/blob/main/non-project-files/performance.png?raw=true" />
+
+
 ## License
 
 ### Usage Note

package/src/engine/engine.js

@@ -356,7 +356,9 @@ export function createInputHandler(window, canvas) {
       case 'ControlLeft':
       case 'KeyC': digital.down = value; break;
     }
-    e.preventDefault();
+    // if you wanna dosavle all keyboard input for some reason...
+    // add later like new option feature...
+    // e.preventDefault();
     e.stopPropagation();
   };
 

package/src/engine/materials.js

@@ -200,7 +200,7 @@ export default class Materials {
 
     }
     if(this.isVideo == true) {
-      console.info("✅ video sceneBindGroupForRender ");
+      // console.info("✅ video sceneBindGroupForRender ");
       this.sceneBindGroupForRender = this.device.createBindGroup({
         layout: this.bglForRender,
         entries: [

package/src/engine/raycast.js

@@ -28,39 +28,62 @@ 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;
-  y = -y;
-  const fov = Math.PI / 4;
+  y = -y; // flip Y only (WebGPU NDC)
+
   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);
+  camera.projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 0.1, 1000);
+
   const invProjection = mat4.inverse(camera.projectionMatrix);
   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[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));
-  rayDirection[2] = -rayDirection[2];
+
+  // NDC -> clip -> eye -> world
+  let clip = [x, y, 1, 1];
+  let eye = vec4.transformMat4(clip, invProjection);
+  eye = [eye[0], eye[1], -1, 0]; // direction in view space
+
+  let worldDir = vec4.transformMat4(eye, invView);
+  const rayDirection = vec3.normalize([worldDir[0], worldDir[1], worldDir[2]]);
+
+  const rayOrigin = [...camera.position];
   return {rayOrigin, rayDirection};
 }
+// 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;
+//   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);
+//   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[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));
+//   rayDirection[2] = -rayDirection[2];
+//   return {rayOrigin, rayDirection};
+// }
 
 export function getRayFromMouse2(event, canvas, camera) {
   const rect = canvas.getBoundingClientRect();
@@ -114,17 +137,20 @@ 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,
-            rayOrigin: rayOrigin,
-            rayDirection: rayDirection
+      if(object.raycast.enabled == true) {
+        if(rayIntersectsSphere(rayOrigin, rayDirection, object.position, object.raycast.radius)) {
+          // Just like in matrix-engine webGL version "ray.hit.event"
+          canvasDom.dispatchEvent(new CustomEvent('ray.hit.event', {
+            detail: {
+              hitObject: object,
+              rayOrigin: rayOrigin,
+              rayDirection: rayDirection
+            }
+          }))
+          if(touchCoordinate.stopOnFirstDetectedHit == true) {
+            break;
           }
-        }))
+        }
       }
     }
   });
@@ -200,6 +226,7 @@ export function addRaycastsAABBListener(canvasId = "canvas1") {
   }
 
   canvasDom.addEventListener('click', (event) => {
+    console.warn(`Canvas click  ${event} `);
     const camera = app.cameras.WASD;
     const {rayOrigin, rayDirection} = getRayFromMouse2(event, canvasDom, camera);
     for(const object of app.mainRenderBundle) {
@@ -212,6 +239,9 @@ export function addRaycastsAABBListener(canvasId = "canvas1") {
           rayOrigin: rayOrigin,
           rayDirection: rayDirection
         }));
+        if(touchCoordinate.stopOnFirstDetectedHit == true) {
+          break;
+        }
       }
     }
   });