matrix-engine-wgpu 1.2.14 → 1.3.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "matrix-engine-wgpu",
-  "version": "1.2.14",
-  "description": "+HOTFIX raycast, webGPU powered pwa application. Crazy fast rendering with AmmoJS physics support. Simple raycaster hit object added.",
+  "version": "1.3.1",
+  "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": [
     "./src"
@@ -18,6 +18,8 @@
   "keywords": [
     "3dScene",
     "webGPU",
+    "webgpu-obj-sequence",
+    "obj-sequence-animation",
     "webGPU-hit-detect",
     "webGPU-raycaster",
     "webGPU-click-on-object",

package/readme.md

@@ -69,7 +69,7 @@ mainCameraParams: {
 
 ---
 
-### Object Positioning
+### Object Position
 
 Control object position:
 
@@ -134,7 +134,7 @@ app.cameras.WASD.pitch = 0.2;
 
 ---
 
-## Object Interaction (Raycasting)
+### Object Interaction (Raycasting)
 
 The raycast returns:
 
@@ -173,7 +173,7 @@ window.addEventListener('ray.hit.event', (event) => {
 
 ---
 
-## How to Load `.obj` Models
+### How to Load `.obj` Models
 
 ```js
 import MatrixEngineWGPU from "./src/world.js";
@@ -234,6 +234,75 @@ window.app = application;
 ```
 
 
+### 🔁 Load OBJ Sequence Animation
+
+This example shows how to load and animate a sequence of .obj files to simulate mesh-based animation (e.g. walking character).
+
+```js
+import MatrixEngineWGPU from "../src/world.js";
+import { downloadMeshes, makeObjSeqArg } from "../src/engine/loader-obj.js";
+import { LOG_MATRIX } from "../src/engine/utils.js";
+
+export var loadObjsSequence = function () {
+  let loadObjFile = new MatrixEngineWGPU({
+    useSingleRenderPass: true,
+    canvasSize: "fullscreen",
+    mainCameraParams: {
+      type: "WASD",
+      responseCoef: 1000,
+    },
+  }, () => {
+
+    addEventListener("AmmoReady", () => {
+      downloadMeshes(
+        makeObjSeqArg({
+          id: "swat-walk-pistol",
+          path: "res/meshes/objs-sequence/swat-walk-pistol",
+          from: 1,
+          to: 20,
+        }),
+        onLoadObj,
+        { scale: [10, 10, 10] }
+      );
+    });
+
+    function onLoadObj(m) {
+      console.log(`%c Loaded objs: ${m} `, LOG_MATRIX);
+      var objAnim = {
+        id: "swat-walk-pistol",
+        meshList: m,
+        currentAni: 1,
+        animations: {
+          active: "walk",
+          walk: { from: 1, to: 20, speed: 3 },
+          walkPistol: { from: 36, to: 60, speed: 3 },
+        },
+      };
+
+      loadObjFile.addMeshObj({
+        position: { x: 0, y: 2, z: -10 },
+        rotation: { x: 0, y: 0, z: 0 },
+        rotationSpeed: { x: 0, y: 0, z: 0 },
+        scale: [100, 100, 100],
+        texturesPaths: ["./res/meshes/blender/cube.png"],
+        name: "swat",
+        mesh: m["swat-walk-pistol"],
+        physics: {
+          enabled: false,
+          geometry: "Cube",
+        },
+        objAnim: objAnim,
+      });
+
+      app.mainRenderBundle[0].objAnim.play("walk");
+    }
+  });
+
+  window.app = loadObjFile;
+};
+
+### 📽️ Preview
+
 ## @Note
 If this happen less then 15 times (Loading procces) then it is ok probably...
 ```warn
@@ -278,6 +347,7 @@ Uses `watchify` to bundle JavaScript.
 ## Resources
 
 All resources and output go into the `./public` folder — everything you need in one place.
+This is static file storage.
 
 ---
 
@@ -324,4 +394,4 @@ You may use, modify, and sell projects based on this code — just keep this not
 
 Top level main.js instance (Ultimate Yahtzee)
 
----
+---

package/src/engine/ball.js

@@ -464,7 +464,7 @@ export default class MEBall {
 
 	draw = () => {
 		if(this.moonTexture == null) {
-			console.log('not ready')
+			// console.log('not ready')
 			return;
 		}
 		const transformationMatrix = this.getTransformationMatrix(this.position);

package/src/engine/cube.js

@@ -478,7 +478,7 @@ export default class MECube {
 
 	draw = () => {
 		if(this.moonTexture == null) {
-			console.log('not ready')
+			// console.log('not ready')
 			return;
 		}
 		const transformationMatrix = this.getTransformationMatrix(this.position);

package/src/engine/loader-obj.js

@@ -467,6 +467,7 @@ export const makeObjSeqArg = (arg) => {
  * Switching obj seq animations frames range.
  */
 export function play (nameAni) {
-  this.animation.anims.active = nameAni;
-  this.animation.currentAni = this.animation.anims[this.animation.anims.active].from;
+  this.animations.active = nameAni;
+  this.currentAni = this.animations[this.animations.active].from;
+  this.playing = true;
 }

package/src/engine/mesh-obj.js

@@ -25,11 +25,21 @@ export default class MEMeshObj {
     this.context = context;
     this.entityArgPass = o.entityArgPass;
 
-    // Mesh stuff
+    // Mesh stuff - for single mesh or t-posed (fiktive-first in loading order)
     this.mesh = o.mesh;
     this.mesh.uvs = this.mesh.textures;
     console.log(`%c Mesh loaded: ${o.name}`, LOG_FUNNY_SMALL);
 
+    // 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;
+      }
+      console.log(`%c Mesh objAnim exist: ${o.objAnim}`, LOG_FUNNY_SMALL);
+      this.drawElements = this.drawElementsAnim;
+    }
+
     this.inputHandler = createInputHandler(window, canvas);
     this.cameras = o.cameras;
 
@@ -61,7 +71,7 @@ export default class MEMeshObj {
         this.modelViewProjectionMatrix = mat4.create();
         // console.log('cube added texturesPaths: ', this.texturesPaths)
         this.loadTex0(this.texturesPaths, device).then(() => {
-          // console.log('loaded tex buffer for mesh:', this.texture0)
+          console.log('loaded tex buffer for mesh:', this.texture0)
           resolve()
         })
       })
@@ -117,19 +127,18 @@ export default class MEMeshObj {
 
       // Create the model index buffer.
       this.indexCount = this.mesh.indices.length;
+      const indexCount = this.mesh.indices.length;
+      const size = Math.ceil(indexCount * Uint16Array.BYTES_PER_ELEMENT / 4) * 4;
+
       this.indexBuffer = this.device.createBuffer({
-        size: this.indexCount * Uint16Array.BYTES_PER_ELEMENT,
-        usage: GPUBufferUsage.INDEX,
-        mappedAtCreation: true,
+        size,
+        usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+        mappedAtCreation: true
       });
-      {
-        // const mapping = new Uint16Array(this.indexBuffer.getMappedRange());
-        // for(let i = 0;i < this.mesh.indices.length;++i) {
-        //   mapping.set(this.mesh.indices[i], i);
-        // }
-        new Uint16Array(this.indexBuffer.getMappedRange()).set(this.mesh.indices);
-        this.indexBuffer.unmap();
-      }
+
+      new Uint16Array(this.indexBuffer.getMappedRange()).set(this.mesh.indices);
+      this.indexBuffer.unmap();
+      this.indexCount = indexCount;
 
       // Create the depth texture for rendering/sampling the shadow map.
       this.shadowDepthTexture = this.device.createTexture({
@@ -179,7 +188,8 @@ export default class MEMeshObj {
 
       const primitive = {
         topology: 'triangle-list',
-        cullMode: 'back',
+        // cullMode: 'back', // ORI 
+        cullMode: 'none', // ORI 
       };
 
       this.uniformBufferBindGroupLayout = this.device.createBindGroupLayout({
@@ -290,7 +300,7 @@ export default class MEMeshObj {
       });
 
       const depthTexture = this.device.createTexture({
-        size: [canvas.width, canvas.height, 1],
+        size: [canvas.width, canvas.height],
         format: 'depth24plus-stencil8',
         usage: GPUTextureUsage.RENDER_ATTACHMENT,
       });
@@ -301,7 +311,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},
-            loadOp: 'clear',
+            loadOp: 'clear', // load old fix for FF
             storeOp: 'store',
           },
         ],
@@ -326,8 +336,7 @@ export default class MEMeshObj {
         // one for the camera and one for the light.
         // Then a vec3 for the light position.
         // Rounded to the nearest multiple of 16.
-        // size: 2 * 4 * 16 + 4 * 4,
-        size: 160,
+        size: 2 * 4 * 16 + 4 * 4,
         usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
       });
 
@@ -393,16 +402,25 @@ export default class MEMeshObj {
         // const this.viewMatrix = mat4.identity()
         const camera = this.cameras[this.mainCameraParams.type];
         this.viewMatrix = camera.update(deltaTime, this.inputHandler());
+        const scaleVec = [1, 1, 1]; // your desired scale OPTION 1
+        const scaleMatrix = mat4.scaling(scaleVec);
+        // Apply scaling
+        mat4.multiply(scaleMatrix, this.viewMatrix, this.viewMatrix);
+
         mat4.translate(this.viewMatrix, vec3.fromValues(pos.x, pos.y, pos.z), this.viewMatrix);
-        mat4.rotate(
-          this.viewMatrix,
-          vec3.fromValues(this.rotation.axis.x, this.rotation.axis.y, this.rotation.axis.z),
-          degToRad(this.rotation.angle), this.viewMatrix)
-        // console.info('this: ', this)
-        mat4.rotateX(this.viewMatrix, Math.PI * this.rotation.getRotX(),  this.viewMatrix);
-        mat4.rotateY(this.viewMatrix, Math.PI * this.rotation.getRotY(),  this.viewMatrix);
-        mat4.rotateZ(this.viewMatrix, Math.PI * this.rotation.getRotZ(),  this.viewMatrix);
-        // console.info('angle: ', this.rotation.angle, ' axis ' ,  this.rotation.axis.x, ' , ', this.rotation.axis.y, ' , ',  this.rotation.axis.z)
+
+        if(this.itIsPhysicsBody == true) {
+          mat4.rotate(
+            this.viewMatrix,
+            vec3.fromValues(this.rotation.axis.x, this.rotation.axis.y, this.rotation.axis.z),
+            degToRad(this.rotation.angle), this.viewMatrix)
+          // console.info('angle: ', this.rotation.angle, ' axis ', this.rotation.axis.x, ' , ', this.rotation.axis.y, ' , ', this.rotation.axis.z)
+        } else {
+          mat4.rotateX(this.viewMatrix, Math.PI * this.rotation.getRotX(), this.viewMatrix);
+          mat4.rotateY(this.viewMatrix, Math.PI * this.rotation.getRotY(), this.viewMatrix);
+          mat4.rotateZ(this.viewMatrix, Math.PI * this.rotation.getRotZ(), this.viewMatrix);
+          // console.info('NOT PHYSICS angle: ', this.rotation.angle, ' axis ', this.rotation.axis.x, ' , ', this.rotation.axis.y, ' , ', this.rotation.axis.z)
+        }
         mat4.multiply(this.projectionMatrix, this.viewMatrix, this.modelViewProjectionMatrix);
         return this.modelViewProjectionMatrix;
       }
@@ -475,6 +493,11 @@ export default class MEMeshObj {
       };
 
       this.done = true;
+    }).then(() => {
+      if(typeof this.objAnim !== 'undefined' && this.objAnim !== null) {
+        console.log('after all load configutr mesh list buffers')
+        this.updateMeshListBuffers()
+      }
     })
   }
 
@@ -553,9 +576,17 @@ export default class MEMeshObj {
 
     return new Promise(async (resolve) => {
       const response = await fetch(texturesPaths[0]);
+
+      // const blob = await response.blob();
+      // if(!blob.type.startsWith('image/')) {
+      //   console.error("Unexpected texture response type:", blob.type);
+      //   return;
+      // }
+
+      // const imageBitmap = await createImageBitmap(blob);
       const imageBitmap = await createImageBitmap(await response.blob());
       this.texture0 = device.createTexture({
-        size: [imageBitmap.width, imageBitmap.height, 1],
+        size: [imageBitmap.width, imageBitmap.height, 1], // REMOVED 1
         format: 'rgba8unorm',
         usage:
           GPUTextureUsage.TEXTURE_BINDING |
@@ -574,7 +605,6 @@ export default class MEMeshObj {
 
   draw = (commandEncoder) => {
     if(this.done == false) return;
-    // console.log('test draw for meshObj !')
     const transformationMatrix = this.getTransformationMatrix(this.position);
     this.device.queue.writeBuffer(
       this.sceneUniformBuffer,
@@ -598,6 +628,100 @@ export default class MEMeshObj {
     renderPass.drawIndexed(this.indexCount);
   }
 
+  // test 
+  createGPUBuffer(dataArray, usage) {
+    if(!dataArray || typeof dataArray.length !== 'number') {
+      throw new Error('Invalid data array passed to createGPUBuffer');
+    }
+
+    const size = dataArray.length * dataArray.BYTES_PER_ELEMENT;
+    if(!Number.isFinite(size) || size <= 0) {
+      throw new Error(`Invalid buffer size: ${size}`);
+    }
+
+    const buffer = this.device.createBuffer({
+      size,
+      usage,
+      mappedAtCreation: true,
+    });
+
+    const writeArray = dataArray.constructor === Float32Array
+      ? new Float32Array(buffer.getMappedRange())
+      : new Uint16Array(buffer.getMappedRange());
+
+    writeArray.set(dataArray);
+    buffer.unmap();
+
+    return buffer;
+  }
+
+
+  updateMeshListBuffers() {
+    for(const key in this.objAnim.meshList) {
+      const mesh = this.objAnim.meshList[key];
+
+      mesh.vertexBuffer = this.device.createBuffer({
+        size: mesh.vertices.length * Float32Array.BYTES_PER_ELEMENT,
+        usage: GPUBufferUsage.VERTEX,
+        mappedAtCreation: true,
+      });
+      new Float32Array(mesh.vertexBuffer.getMappedRange()).set(mesh.vertices);
+      mesh.vertexBuffer.unmap();
+
+      // Normals
+      mesh.vertexNormalsBuffer = this.device.createBuffer({
+        size: mesh.vertexNormals.length * Float32Array.BYTES_PER_ELEMENT,
+        usage: GPUBufferUsage.VERTEX,
+        mappedAtCreation: true,
+      });
+      new Float32Array(mesh.vertexNormalsBuffer.getMappedRange()).set(mesh.vertexNormals);
+      mesh.vertexNormalsBuffer.unmap();
+
+      // UVs
+      mesh.vertexTexCoordsBuffer = this.device.createBuffer({
+        size: mesh.textures.length * Float32Array.BYTES_PER_ELEMENT,
+        usage: GPUBufferUsage.VERTEX,
+        mappedAtCreation: true,
+      });
+      new Float32Array(mesh.vertexTexCoordsBuffer.getMappedRange()).set(mesh.textures);
+      mesh.vertexTexCoordsBuffer.unmap();
+
+      // Indices
+      const indexCount = mesh.indices.length;
+      const indexSize = Math.ceil(indexCount * Uint16Array.BYTES_PER_ELEMENT / 4) * 4;
+      mesh.indexBuffer = this.device.createBuffer({
+        size: indexSize,
+        usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+        mappedAtCreation: true,
+      });
+      new Uint16Array(mesh.indexBuffer.getMappedRange()).set(mesh.indices);
+      mesh.indexBuffer.unmap();
+      mesh.indexCount = indexCount;
+    }
+  }
+
+  drawElementsAnim = (renderPass) => {
+    renderPass.setBindGroup(0, this.sceneBindGroupForRender);
+    renderPass.setBindGroup(1, this.modelBindGroup);
+    const mesh = this.objAnim.meshList[this.objAnim.id + this.objAnim.currentAni];
+    renderPass.setVertexBuffer(0, mesh.vertexBuffer);
+    renderPass.setVertexBuffer(1, mesh.vertexNormalsBuffer);
+    renderPass.setVertexBuffer(2, mesh.vertexTexCoordsBuffer);
+    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) {
+        this.objAnim.currentAni++;
+        this.objAnim.animations[this.objAnim.animations.active].speedCounter = 0;
+      } else {
+        this.objAnim.animations[this.objAnim.animations.active].speedCounter++;
+      }
+      if(this.objAnim.currentAni >= this.objAnim.animations[this.objAnim.animations.active].to) {
+        this.objAnim.currentAni = this.objAnim.animations[this.objAnim.animations.active].from;
+      }
+    }
+  }
+
   drawShadows = (shadowPass) => {
     shadowPass.setBindGroup(0, this.sceneBindGroupForShadow);
     shadowPass.setBindGroup(1, this.modelBindGroup);

package/src/engine/mesh.js

@@ -241,7 +241,6 @@ export default class MEMesh {
           {
             // view is acquired and set in render loop.
             view: undefined,
-
             clearValue: {r: 0.5, g: 0.5, b: 0.5, a: 1.0},
             loadOp: 'load',
             storeOp: 'store',

package/src/engine/raycast.js

@@ -11,91 +11,82 @@
  * 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
+  enabled: false,
+  x: 0,
+  y: 0,
+  stopOnFirstDetectedHit: false
 };
 
 function multiplyMatrixVector(matrix, vector) {
-	return vec4.transformMat4(vector, matrix);
+  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;
-	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 correctedView = mat4.clone(camera.view_);
-	// correctedView[2] *= -1;
-	// correctedView[6] *= -1;
-	// correctedView[10] *= -1;
-	// const invView = mat4.inverse(correctedView);
-
-	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};
+  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 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;
+  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, 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
-				}}))
-			}
-		}
-	});
+export function addRaycastListener() {
+  let canvasDom = document.getElementById("canvas1");
+  canvasDom.addEventListener('click', (event) => {
+    let camera = app.cameras.WASD;
+    const {rayOrigin, rayDirection} = getRayFromMouse(event, canvasDom, camera);
+    for(const object of app.mainRenderBundle) {
+      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
+          }
+        }))
+      }
+    }
+  });
 }

package/src/engine/utils.js

@@ -708,12 +708,14 @@ export let mb = {
     mb.c++;
   },
   error: function(content) {
+    if (mb.root()== null) return;
     mb.root().classList.remove("success")
     mb.root().classList.add("error")
     mb.root().classList.add("fadeInDown");
     mb.show(content, 'err');
   },
   success: function(content) {
+    if (mb.root()== null) return;
     mb.root().classList.remove("error")
     mb.root().classList.add("success")
     mb.root().classList.add("fadeInDown");

package/src/physics/matrix-ammo.js

@@ -1,4 +1,3 @@
-// import {vec3} from "wgpu-matrix";
 import {LOG_FUNNY, degToRad, quaternion_rotation_matrix, radToDeg, scriptManager} from "../engine/utils";
 
 export default class MatrixAmmo {
@@ -17,7 +16,6 @@ export default class MatrixAmmo {
   }
 
   init = () => {
-    // console.log('pre ammo')
     Ammo().then(Ammo => {
       // Physics variables
       this.dynamicsWorld = null;
@@ -58,8 +56,6 @@ export default class MatrixAmmo {
     body.name = 'ground';
     this.ground = body;
     this.dynamicsWorld.addRigidBody(body);
-    // this.rigidBodies.push(body);
-    // add collide event
     this.detectCollision()
   }
 
@@ -79,15 +75,12 @@ export default class MatrixAmmo {
     var mass = 1;
     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));
 
     var myMotionState = new Ammo.btDefaultMotionState(startTransform),
       rbInfo = new Ammo.btRigidBodyConstructionInfo(mass, myMotionState, colShape, localInertia),
       body = new Ammo.btRigidBody(rbInfo);
 
-    console.log("TEST ADDING PHYSICS ");
-
     body.MEObject = MEObject;
     this.dynamicsWorld.addRigidBody(body);
     this.rigidBodies.push(body);
@@ -95,7 +88,6 @@ export default class MatrixAmmo {
   }
 
   addPhysicsBox(MEObject, pOptions) {
-
     const FLAGS = {
       TEST_NIDZA: 3,
       CF_KINEMATIC_OBJECT: 2
@@ -110,7 +102,6 @@ export default class MatrixAmmo {
     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))
@@ -118,8 +109,6 @@ export default class MatrixAmmo {
     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);
@@ -135,8 +124,8 @@ export default class MatrixAmmo {
     } else {
       body.setActivationState(4)
     }
-    // console.log('what is name.', pOptions.name)
     body.name = pOptions.name;
+    MEObject.itIsPhysicsBody = true;
     body.MEObject = MEObject;
     this.dynamicsWorld.addRigidBody(body);
     this.rigidBodies.push(body);
@@ -168,7 +157,6 @@ export default class MatrixAmmo {
     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);
@@ -222,7 +210,6 @@ export default class MatrixAmmo {
   detectCollision() {
     // console.log('override this')
     return;
-
     this.lastRoll = '';
     this.presentScore = '';
 

package/src/shaders/fragment.wgsl.js

@@ -3,8 +3,7 @@ export let fragmentWGSL = `override shadowDepthTextureSize: f32 = 1024.0;
 struct Scene {
   lightViewProjMatrix : mat4x4f,
   cameraViewProjMatrix : mat4x4f,
-  lightPos : vec4f,
-  // padding: f32, // 👈 fix alignment
+  lightPos : vec3f,
 }
 
 @group(0) @binding(0) var<uniform> scene : Scene;
@@ -40,7 +39,7 @@ fn main(input : FragmentInput) -> @location(0) vec4f {
     }
   }
   visibility /= 9.0;
-  let lambertFactor = max(dot(normalize(scene.lightPos.xyz - input.fragPos), normalize(input.fragNorm)), 0.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);
 

package/src/shaders/vertex.wgsl.js

@@ -1,8 +1,7 @@
 export let vertexWGSL = `struct Scene {
   lightViewProjMatrix: mat4x4f,
   cameraViewProjMatrix: mat4x4f,
-  lightPos: vec4f,
-  // padding: f32, // 👈 fix alignment
+  lightPos: vec3f,
 }
 
 struct Model {

package/src/shaders/vertexShadow.wgsl.js

@@ -1,8 +1,7 @@
 export let vertexShadowWGSL =  `struct Scene {
   lightViewProjMatrix: mat4x4f,
   cameraViewProjMatrix: mat4x4f,
-  lightPos: vec4f,
-  // padding: f32, // 👈 fix alignment
+  lightPos: vec3f,
 }
 
 struct Model {

package/src/world.js

@@ -8,6 +8,7 @@ import MatrixAmmo from "./physics/matrix-ammo.js";
 import {LOG_WARN, genName, mb, scriptManager, urlQuery} from "./engine/utils.js";
 import {MultiLang} from "./multilang/lang.js";
 import {MatrixSounds} from "./sounds/sounds.js";
+import {play} from "./engine/loader-obj.js";
 
 export default class MatrixEngineWGPU {
 
@@ -34,6 +35,7 @@ export default class MatrixEngineWGPU {
       this.options = {
         useSingleRenderPass: true,
         canvasSize: 'fullscreen',
+        canvasId: 'canvas1',
         mainCameraParams: {
           type: 'WASD',
           responseCoef: 2000
@@ -41,6 +43,9 @@ export default class MatrixEngineWGPU {
       }
       callback = options;
     }
+    if(typeof options.canvasId === 'undefined') {
+      options.canvasId = 'canvas1';
+    }
     if(typeof options.mainCameraParams === 'undefined') {
       options.mainCameraParams = {
         type: 'WASD',
@@ -48,12 +53,11 @@ export default class MatrixEngineWGPU {
       }
     }
     this.options = options;
-
     this.mainCameraParams = options.mainCameraParams;
 
     const target = this.options.appendTo || document.body;
-
     var canvas = document.createElement('canvas')
+    canvas.id = this.options.canvasId;
     if(this.options.canvasSize == 'fullscreen') {
       canvas.width = window.innerWidth;
       canvas.height = window.innerHeight;
@@ -255,28 +259,21 @@ export default class MatrixEngineWGPU {
     if(typeof o.texturesPaths === 'undefined') {o.texturesPaths = ['./res/textures/default.png']}
     if(typeof o.mainCameraParams === 'undefined') {o.mainCameraParams = this.mainCameraParams}
     if(typeof o.scale === 'undefined') {o.scale = [1, 1, 1];}
-    if(typeof o.raycast === 'undefined') {o.raycast = {enabled: false}}
-
+    if(typeof o.raycast === 'undefined') {o.raycast = {enabled: false, radius: 2}}
     o.entityArgPass = this.entityArgPass;
     o.cameras = this.cameras;
-    // if(typeof o.name === 'undefined') {o.name = 'random' + Math.random();}
-    if(typeof o.mesh === 'undefined') {
-      mb.error('arg mesh is empty for ', o.name);
-      throw console.error('arg mesh is empty...');
-      return;
-    }
     if(typeof o.physics === 'undefined') {
       o.physics = {
         scale: [1, 1, 1],
         enabled: true,
-        geometry: "Sphere",
-        radius: o.scale,
+        geometry: "Sphere",//                   must be fixed<<
+        radius: (typeof o.scale == Number ? o.scale : o.scale[0]),
         name: o.name,
         rotation: o.rotation
       }
     }
     if(typeof o.physics.enabled === 'undefined') {o.physics.enabled = true}
-    if(typeof o.physics.geometry === 'undefined') {o.physics.geometry = "Sphere"}
+    if(typeof o.physics.geometry === 'undefined') {o.physics.geometry = "Cube"}
     if(typeof o.physics.radius === 'undefined') {o.physics.radius = o.scale}
     if(typeof o.physics.mass === 'undefined') {o.physics.mass = 1;}
     if(typeof o.physics.name === 'undefined') {o.physics.name = o.name;}
@@ -284,6 +281,39 @@ export default class MatrixEngineWGPU {
     if(typeof o.physics.rotation === 'undefined') {o.physics.rotation = o.rotation;}
     o.physics.position = o.position;
     //  console.log('Mesh procedure', o)
+    // TEST OBJS SEQ ANIMS 
+    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
+      // };
+
+      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
+      o.objAnim.meshList = o.objAnim.meshList;
+
+      if(typeof o.mesh === 'undefined') {
+        o.mesh = o.objAnim.meshList[0];
+        console.info('objSeq animation is active.');
+      }
+      // scale for all second option!
+      o.objAnim.scaleAll = function(s) {
+        for(var k in this.meshList) {
+          console.log('SCALE');
+          this.meshList[k].setScale(s);
+        }
+      }
+    }
     let myMesh1 = new MEMeshObj(this.canvas, this.device, this.context, o)
     if(o.physics.enabled == true) {
       this.matrixAmmo.addPhysics(myMesh1, o.physics)
@@ -345,9 +375,7 @@ export default class MatrixEngineWGPU {
 
   framePassPerObject = () => {
     let commandEncoder = this.device.createCommandEncoder();
-
     this.matrixAmmo.updatePhysics();
-
     this.mainRenderBundle.forEach((meItem, index) => {
       if(index === 0) {
         if(meItem.renderPassDescriptor) meItem.renderPassDescriptor.colorAttachments[0].loadOp = 'clear';
@@ -360,7 +388,6 @@ export default class MatrixEngineWGPU {
         // Set up view per object
         meItem.renderPassDescriptor.colorAttachments[0].view =
           this.context.getCurrentTexture().createView();
-
         const passEncoder = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
         passEncoder.executeBundles([meItem.renderBundle]); // ✅ Use only this bundle
         passEncoder.end();
@@ -368,9 +395,7 @@ export default class MatrixEngineWGPU {
         meItem.draw(commandEncoder); // fallback if no renderBundle
       }
     });
-
     this.device.queue.submit([commandEncoder.finish()]);
     requestAnimationFrame(this.frame);
   }
-
 }