matrix-engine-wgpu 1.3.17 → 1.3.19

package/src/shaders/standard-matrix-engine-shaders/standard-matrix-engine-vs.glsl

@@ -0,0 +1,75 @@
+#version 300 es
+in vec3 aVertexPosition;
+in vec3 aVertexNormal;
+in vec2 aTextureCoord;
+
+uniform mat4 uMVMatrix;
+uniform mat4 uPMatrix;
+uniform mat3 uNMatrix;
+uniform vec3 uAmbientColor;
+uniform vec3 uLightingDirection;
+uniform vec3 uDirectionalColor;
+uniform bool uUseLighting;
+out vec2 vTextureCoord;
+out vec3 vLightWeighting;
+
+// Spot
+uniform vec3 u_lightWorldPosition;
+out vec3 v_normal;
+// out vec3 v_normal_cubemap;
+out vec3 v_surfaceToLight;
+out vec3 v_surfaceToView;
+
+// Specular
+out mat4 uMVMatrixINTER;
+out mat3 uNMatrixINTER;
+out mat4 uPMatrixINNTER;
+
+in vec4 specularColor;
+out vec4 vColor;
+out vec3 vNormal;
+out vec4 vPosition;
+out float vDist;
+
+void main(void) {
+  uMVMatrixINTER = uMVMatrix;
+  uNMatrixINTER = uNMatrix;
+  uPMatrixINNTER = uPMatrix;
+
+  // GLOBAL POS SPECULAR
+  vColor = specularColor;
+  vNormal = normalize(uNMatrix * vec3(aVertexNormal));
+  // Calculate the modelView of the model, and set the vPosition
+  // mat4 modelViewMatrix = uViewMatrix * uModelMatrix;
+  vPosition = uMVMatrix * vec4(1, 1, 1, 1);
+  vDist = gl_Position.w;
+
+  // SPOT
+  // orient the normals and pass to the fragment shader
+  v_normal = mat3(uNMatrix) * aVertexNormal;
+
+  // normalize
+  // v_normal_cubemap = normalize(aVertexPosition.xyz);
+
+  // compute the world position of the surfoace
+  vec3 surfaceWorldPosition = (uNMatrix * aVertexPosition).xyz;
+
+  // compute the vector of the surface to the light
+  // and pass it to the fragment shader
+  v_surfaceToLight = u_lightWorldPosition - surfaceWorldPosition;
+
+  // compute the vector of the surface to the view/camera
+  // and pass it to the fragment shader
+  v_surfaceToView = (uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0f)).xyz - surfaceWorldPosition;
+
+  gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0f);
+  vTextureCoord = aTextureCoord;
+
+  if(!uUseLighting) {
+    vLightWeighting = vec3(1.0f, 1.0f, 1.0f);
+  } else {
+    vec3 transformedNormal = uNMatrix * aVertexNormal;
+    float directionalLightWeighting = max(dot(transformedNormal, uLightingDirection), 0.0f);
+    vLightWeighting = uAmbientColor + uDirectionalColor * directionalLightWeighting;
+  }
+}

package/src/shaders/vertex.wgsl.js

@@ -0,0 +1,54 @@
+export let vertexWGSL = `struct Scene {
+  lightViewProjMatrix: mat4x4f,
+  cameraViewProjMatrix: mat4x4f,
+  lightPos: vec3f,
+}
+
+struct Model {
+  modelMatrix: mat4x4f,
+}
+
+@group(0) @binding(0) var<uniform> scene : Scene;
+@group(1) @binding(0) var<uniform> model : Model;
+
+struct VertexOutput {
+  @location(0) shadowPos: vec3f,
+  @location(1) fragPos: vec3f,
+  @location(2) fragNorm: vec3f,
+  @location(3) uv : vec2f,
+
+  @builtin(position) Position: vec4f,
+}
+
+@vertex
+fn main(
+  @location(0) position: vec3f,
+  @location(1) normal: vec3f,
+  @location(2) uv : vec2f
+) -> VertexOutput {
+  var output : VertexOutput;
+
+  // XY is in (-1, 1) space, Z is in (0, 1) space
+  let posFromLight = scene.lightViewProjMatrix * model.modelMatrix * vec4(position, 1.0);
+
+  // Convert XY to (0, 1)
+  // Y is flipped because texture coords are Y-down.
+  output.shadowPos = vec3(
+    posFromLight.xy * vec2(0.5, -0.5) + vec2(0.5),
+    posFromLight.z
+  );
+
+  // follewed camera code
+  // output.Position = scene.cameraViewProjMatrix * model.modelMatrix * vec4(position, 1.0);
+  // output.fragPos = output.Position.xyz;
+  // output.fragNorm = normal;
+
+  let worldPos = model.modelMatrix * vec4(position, 1.0);
+  output.Position = scene.cameraViewProjMatrix * worldPos;
+  output.fragPos = worldPos.xyz;          // ✅ world space
+
+  output.fragNorm = normalize((model.modelMatrix * vec4(normal, 0.0)).xyz);
+  output.uv = uv;
+  return output;
+}
+`;

package/src/shaders/vertexShadow.wgsl.js

@@ -0,0 +1,20 @@
+export let vertexShadowWGSL =  `struct Scene {
+  lightViewProjMatrix: mat4x4f,
+  cameraViewProjMatrix: mat4x4f,
+  lightPos: vec3f,
+}
+
+struct Model {
+  modelMatrix: mat4x4f,
+}
+
+@group(0) @binding(0) var<uniform> scene : Scene;
+@group(1) @binding(0) var<uniform> model : Model;
+
+@vertex
+fn main(
+  @location(0) position: vec3f
+) -> @builtin(position) vec4f {
+  return scene.lightViewProjMatrix * model.modelMatrix * vec4(position, 1);
+}
+`

package/src/sounds/sounds.js

@@ -0,0 +1,69 @@
+export class MatrixSounds {
+
+  constructor() {
+    this.volume = 0.5;
+    this.audios = {};
+    this.enabled = true; // 🔇 global flag to mute/allow audio
+  }
+
+  muteAll() {
+    this.enabled = false;
+    Object.values(this.audios).forEach(audio => audio.pause());
+  }
+
+  unmuteAll() {
+    this.enabled = true;
+  }
+
+  createClones(c, name, path) {
+    for(let x = 1;x < c;x++) {
+      const 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) {
+    const 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.enabled) return; // 🔇 prevent playing if muted
+
+    const audio = this.audios[name];
+    if(!audio) return;
+
+    if(audio.paused) {
+      audio.play().catch((e) => {
+        if(e.name !== 'NotAllowedError') console.warn("sounds error:", e);
+      });
+    } else {
+      this.tryClone(name);
+    }
+  }
+
+  tryClone(name) {
+    if(!this.enabled) return; // 🔇 prevent playing clones
+
+    let cc = 1;
+    try {
+      while(this.audios[name + cc] && this.audios[name + cc].paused === false) {
+        cc++;
+      }
+      if(this.audios[name + cc]) {
+        this.audios[name + cc].play();
+      }
+    } catch(err) {
+      console.warn("Clone play failed:", err);
+    }
+  }
+}

package/src/world.js

@@ -0,0 +1,474 @@
+import {mat4, vec3} from "wgpu-matrix";
+import MEBall from "./engine/ball.js";
+import MECube from './engine/cube.js';
+import {ArcballCamera, WASDCamera} from "./engine/engine.js";
+import {createInputHandler} from "./engine/engine.js";
+import MEMeshObj from "./engine/mesh-obj.js";
+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";
+import {SpotLight} from "./engine/lights.js";
+
+export default class MatrixEngineWGPU {
+
+  mainRenderBundle = [];
+  lightContainer = [];
+  frame = () => {};
+
+  entityHolder = [];
+
+  entityArgPass = {
+    loadOp: 'clear',
+    storeOp: 'store',
+    depthLoadOp: 'clear',
+    depthStoreOp: 'store'
+  }
+
+  matrixAmmo = new MatrixAmmo();
+  matrixSounds = new MatrixSounds();
+
+  // The input handler
+  constructor(options, callback) {
+    // console.log('typeof options ', typeof options )
+    if(typeof options == 'undefined' || typeof options == "function") {
+      this.options = {
+        useSingleRenderPass: true,
+        canvasSize: 'fullscreen',
+        canvasId: 'canvas1',
+        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';
+    }
+    if(typeof options.mainCameraParams === 'undefined') {
+      options.mainCameraParams = {
+        type: 'WASD',
+        responseCoef: 2000
+      }
+    }
+    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;
+    } else {
+      canvas.width = this.options.canvasSize.w;
+      canvas.height = this.options.canvasSize.h;
+    }
+    target.append(canvas);
+
+    // The camera types
+    const initialCameraPosition = vec3.create(0, 0, 0);
+    // console.log('passed : o.mainCameraParams.responseCoef ', o.mainCameraParams.responseCoef)
+    this.mainCameraParams = {
+      type: this.options.mainCameraParams.type,
+      responseCoef: this.options.mainCameraParams.responseCoef
+    }
+
+    this.cameras = {
+      arcball: new ArcballCamera({position: initialCameraPosition}),
+      WASD: new WASDCamera({position: initialCameraPosition}),
+    };
+
+    this.label = new MultiLang()
+    if(urlQuery.lang != null) {
+      this.label.loadMultilang(urlQuery.lang).then((r) => {
+        this.label.get = r;
+      });
+    } else {
+      this.label.loadMultilang().then((r) => {
+        this.label.get = r;
+      });
+    }
+
+    this.init({canvas, callback})
+  }
+
+  init = async ({canvas, callback}) => {
+    this.canvas = canvas;
+    this.adapter = await navigator.gpu.requestAdapter();
+    this.device = await this.adapter.requestDevice({
+      extensions: ["ray_tracing"]
+    });
+
+    // Maybe works in ssl with webworkers...
+    // const adapterInfo = await this.adapter.requestAdapterInfo();
+    // var test = this.adapter.features()
+    // console.log(adapterInfo.vendor);
+    // console.log('test' + test);
+    // console.log("FEATURES : " + this.adapter.features)
+
+    this.context = canvas.getContext('webgpu');
+
+    const devicePixelRatio = window.devicePixelRatio;
+    canvas.width = canvas.clientWidth * devicePixelRatio;
+    canvas.height = canvas.clientHeight * devicePixelRatio;
+    const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+
+    this.context.configure({
+      device: this.device,
+      format: presentationFormat,
+      alphaMode: 'premultiplied',
+    });
+
+    if(this.options.useSingleRenderPass == true) {
+      this.frame = this.frameSinglePass;
+    } else {
+      this.frame = this.framePassPerObject;
+    }
+
+    // Global SCENE BUFFER Good idea for future
+    // this.sceneUniformBuffer = this.device.createBuffer({
+    //   // Two 4x4 viewProj matrices,
+    //   // 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,
+    //   usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    // });
+
+    this.inputHandler = createInputHandler(window, canvas);
+
+    this.run(callback)
+  };
+
+  getSceneObjectByName(name) {
+    return this.mainRenderBundle.find((sceneObject) => sceneObject.name === name)
+  }
+
+  // Not in use for now
+  addCube = (o) => {
+    if(typeof o === 'undefined') {
+      var o = {
+        scale: 1,
+        position: {x: 0, y: 0, z: -4},
+        texturesPaths: ['./res/textures/default.png'],
+        rotation: {x: 0, y: 0, z: 0},
+        rotationSpeed: {x: 0, y: 0, z: 0},
+        entityArgPass: this.entityArgPass,
+        cameras: this.cameras,
+        mainCameraParams: this.mainCameraParams
+      }
+    } else {
+      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}}
+      if(typeof o.rotationSpeed === 'undefined') {o.rotationSpeed = {x: 0, y: 0, z: 0}}
+      if(typeof o.texturesPaths === 'undefined') {o.texturesPaths = ['./res/textures/default.png']}
+      if(typeof o.scale === 'undefined') {o.scale = 1;}
+      if(typeof o.mainCameraParams === 'undefined') {o.mainCameraParams = this.mainCameraParams}
+      o.entityArgPass = this.entityArgPass;
+      o.cameras = this.cameras;
+    }
+
+    if(typeof o.physics === 'undefined') {
+      o.physics = {
+        scale: [1, 1, 1],
+        enabled: true,
+        geometry: "Sphere",
+        radius: o.scale,
+        name: o.name,
+        rotation: o.rotation
+      }
+    }
+    if(typeof o.position !== 'undefined') {o.physics.position = o.position;}
+    if(typeof o.physics.enabled === 'undefined') {o.physics.enabled = true}
+    if(typeof o.physics.geometry === 'undefined') {o.physics.geometry = "Sphere"}
+    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;}
+    if(typeof o.physics.scale === 'undefined') {o.physics.scale = o.scale;}
+    if(typeof o.physics.rotation === 'undefined') {o.physics.rotation = o.rotation;}
+
+    let myCube1 = new MECube(this.canvas, this.device, this.context, o)
+    if(o.physics.enabled == true) {
+      this.matrixAmmo.addPhysics(myCube1, o.physics);
+    }
+    this.mainRenderBundle.push(myCube1);
+  }
+
+  // Not in use for now
+  addBall = (o) => {
+    if(typeof o === 'undefined') {
+      var o = {
+        scale: 1,
+        position: {x: 0, y: 0, z: -4},
+        texturesPaths: ['./res/textures/default.png'],
+        rotation: {x: 0, y: 0, z: 0},
+        rotationSpeed: {x: 0, y: 0, z: 0},
+        entityArgPass: this.entityArgPass,
+        cameras: this.cameras,
+        mainCameraParams: this.mainCameraParams
+      }
+    } else {
+      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}}
+      if(typeof o.rotationSpeed === 'undefined') {o.rotationSpeed = {x: 0, y: 0, z: 0}}
+      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;}
+      o.entityArgPass = this.entityArgPass;
+      o.cameras = this.cameras;
+    }
+
+    if(typeof o.physics === 'undefined') {
+      o.physics = {
+        scale: [1, 1, 1],
+        enabled: true,
+        geometry: "Sphere",
+        radius: o.scale,
+        name: o.name,
+        rotation: o.rotation
+      }
+    }
+    if(typeof o.position !== 'undefined') {o.physics.position = o.position;}
+    if(typeof o.physics.enabled === 'undefined') {o.physics.enabled = true}
+    if(typeof o.physics.geometry === 'undefined') {o.physics.geometry = "Sphere"}
+    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;}
+    if(typeof o.physics.scale === 'undefined') {o.physics.scale = o.scale;}
+    if(typeof o.physics.rotation === 'undefined') {o.physics.rotation = o.rotation;}
+
+    let myBall1 = new MEBall(this.canvas, this.device, this.context, o);
+    if(o.physics.enabled == true) {
+      this.matrixAmmo.addPhysics(myBall1, o.physics)
+    }
+    this.mainRenderBundle.push(myBall1);
+  }
+
+  addLight(o) {
+    // test light global; entity
+    const camera = this.cameras[this.mainCameraParams.type];
+    let newLight = new SpotLight(camera, this.inputHandler);
+    newLight.prepareBuffer(this.device);
+    this.lightContainer.push(newLight);
+    console.log('Add light : ', newLight);
+  }
+
+  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}}
+    if(typeof o.rotationSpeed === 'undefined') {o.rotationSpeed = {x: 0, y: 0, z: 0}}
+    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, radius: 2}}
+    o.entityArgPass = this.entityArgPass;
+    o.cameras = this.cameras;
+    if(typeof o.physics === 'undefined') {
+      o.physics = {
+        scale: [1, 1, 1],
+        enabled: true,
+        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 = "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;}
+    if(typeof o.physics.scale === 'undefined') {o.physics.scale = o.scale;}
+    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)
+      if(typeof o.objAnim.animations !== 'undefined') {
+        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);
+    myMesh1.lightContainer = this.lightContainer;
+    myMesh1.inputHandler = this.inputHandler;
+    myMesh1.clearColor = clearColor;
+    if(o.physics.enabled == true) {
+      this.matrixAmmo.addPhysics(myMesh1, o.physics)
+    }
+    this.mainRenderBundle.push(myMesh1);
+  }
+
+  run(callback) {
+    setTimeout(() => {requestAnimationFrame(this.frame)}, 500)
+    setTimeout(() => {callback(this)}, 20)
+  }
+
+  destroyProgram = () => {
+    this.mainRenderBundle = [];
+    this.canvas.remove();
+  }
+
+  test = () => {
+    const now = Date.now();
+    // First frame safety
+    let dt = (now - this.lastFrameMS) / this.mainCameraParams.responseCoef;
+    if(!this.lastFrameMS) {dt = 16;}
+    this.lastFrameMS = now;
+    const camera = this.cameras[this.mainCameraParams.type];
+
+    // engine, once per frame
+    // const camera = this.cameras[this.mainCameraParams.type];
+    camera.update(dt, this.inputHandler());
+    const camVP = mat4.multiply(camera.projectionMatrix, camera.view); // P * V
+
+    for(const mesh of this.mainRenderBundle) {
+      // scene buffer layout = 0..63 lightVP, 64..127 camVP, 128..143 lightPos(+pad)
+      this.device.queue.writeBuffer(
+        mesh.sceneUniformBuffer,
+        64,                              // cameraViewProjMatrix offset
+        camVP.buffer,
+        camVP.byteOffset,
+        camVP.byteLength
+      );
+    }
+    // engine frame
+    // camera.update(dt, this.inputHandler());
+    // const camVP = mat4.multiply(camera.projectionMatrix, camera.view);
+
+    // for(const mesh of this.mainRenderBundle) {
+    //   // Light’s viewProj should come from your SpotLight
+    //   // If you have multiple lights, you’ll need an array UBO or multiple passes.
+    //   const sceneData = new Float32Array(16 + 16 + 4); // lightVP, camVP, lightPos(+pad)
+    //   sceneData.set(this.lightContainer[0].viewProjMatrix, 0);
+    //   sceneData.set(camVP, 16);
+    //   sceneData.set(this.lightContainer[0].position, 32);
+
+    //   // sceneUniformBuffer
+    //   this.device.queue.writeBuffer(
+    //     mesh.sceneUniformBuffer,  // or a shared one if/when you centralize it
+    //     0,
+    //     sceneData.buffer,
+    //     sceneData.byteOffset,
+    //     sceneData.byteLength
+    //   );
+    // }
+  }
+
+  frameSinglePass = () => {
+    if(typeof this.mainRenderBundle == 'undefined' || this.mainRenderBundle.length == 0) {
+      setTimeout(() => {requestAnimationFrame(this.frame)}, 200);
+      return;
+    }
+    try {
+      let shadowPass = null;
+      let renderPass;
+      let commandEncoder = this.device.createCommandEncoder();
+
+      this.test()
+      // 1️⃣ Update light data (position, direction, uniforms)
+      for(const light of this.lightContainer) {
+        light.updateLightBuffer();
+        this.mainRenderBundle.forEach((meItem, index) => {
+          light.updateSceneUniforms(this.mainRenderBundle, this.cameras.WASD);
+        })
+      }
+
+      this.mainRenderBundle.forEach((meItem, index) => {meItem.position.update()})
+      if(this.matrixAmmo) this.matrixAmmo.updatePhysics();
+
+      // no cast WORKING
+      // this.mainRenderBundle.forEach((meItem, index) => {
+      //   meItem.draw(commandEncoder);
+
+      //   shadowPass = commandEncoder.beginRenderPass(meItem.shadowPassDescriptor);
+      //   shadowPass.setPipeline(meItem.shadowPipeline);
+      //   meItem.drawShadows(shadowPass);
+      //   shadowPass.end();
+      // })
+
+      // cast!
+      const firstItem = this.mainRenderBundle[0];
+      shadowPass = commandEncoder.beginRenderPass(firstItem.shadowPassDescriptor);
+      shadowPass.setPipeline(firstItem.shadowPipeline);
+      for(const meItem of this.mainRenderBundle) {
+        // meItem.draw(commandEncoder);
+        meItem.drawShadows(shadowPass); // Draw ALL objects
+      }
+      shadowPass.end();
+
+      this.mainRenderBundle.forEach((meItem, index) => {
+        if(index == 0) {
+          meItem.draw(commandEncoder);
+          meItem.renderPassDescriptor.colorAttachments[0].view =
+            this.context.getCurrentTexture().createView();
+          renderPass = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
+          renderPass.setPipeline(meItem.pipeline);
+        } else {
+          meItem.draw(commandEncoder);
+        }
+      })
+
+      this.mainRenderBundle.forEach((meItem, index) => {
+        meItem.drawElements(renderPass);
+      })
+      if(renderPass) renderPass.end();
+
+      this.device.queue.submit([commandEncoder.finish()]);
+      requestAnimationFrame(this.frame);
+    } catch(err) {
+      console.log('%cDraw func (err):' + err, LOG_WARN)
+      requestAnimationFrame(this.frame);
+    }
+  }
+
+  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';
+      } else {
+        if(meItem.renderPassDescriptor) meItem.renderPassDescriptor.colorAttachments[0].loadOp = 'load';
+      }
+      // Update transforms, physics, etc. (optional)
+      meItem.draw(commandEncoder); // optional: if this does per-frame updates
+      if(meItem.renderBundle) {
+        // 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();
+      } else {
+        meItem.draw(commandEncoder); // fallback if no renderBundle
+      }
+    });
+    this.device.queue.submit([commandEncoder.finish()]);
+    requestAnimationFrame(this.frame);
+  }
+}