matrix-engine-wgpu 1.4.1 → 1.4.4

package/readme.md

@@ -45,7 +45,9 @@ Published on npm as: **`matrix-engine-wgpu`**
   ```js
   app.mainRenderBundle[0];
   ```
- or
+
+  or
+
   ```js
   app.getSceneObjectByName("Sphere1");
   ```
@@ -154,17 +156,36 @@ SpotLight – Emits light in a cone shape with configurable cutoff angles.
 
 Features
 
-✅ Supports multiple lights (4 max),  ~20 for next update.
+✅ Supports multiple lights (4 max), ~20 for next update.
 ✅ Shadow-ready (spotlight0 shadows implemented, extendable to others)
 
-Required:
+Important Required to be added manual:
+
 ```js
-engine.addLight()
+engine.addLight();
 ```
 
 Access lights with array lightContainer:
+
 ```js
-app.lightContainer[0]
+app.lightContainer[0];
+```
+
+Small behavior object.
+ - For now just one ocs0 object
+ Everytime if called than updated (light.position[0] = light.behavior.setPath0())
+  behavior.setOsc0(min, max, step);
+  app.lightContainer[0].behavior.osc0.on_maximum_value = function() {/* what ever*/};
+  app.lightContainer[0].behavior.osc0.on_minimum_value = function() {/* what ever*/};
+
+Make light move by x.
+```js
+loadObjFile.addLight();
+loadObjFile.lightContainer[0].behavior.setOsc0(-1, 1, 0.01);
+loadObjFile.lightContainer[0].behavior.value_ = -1;
+loadObjFile.lightContainer[0].updater.push(light => {
+  light.position[0] = light.behavior.setPath0();
+});
 ```
 
 ### Object Interaction (Raycasting)
@@ -292,63 +313,65 @@ This example shows how to load and animate a sequence of .obj files to simulate
 
 ```js
 import MatrixEngineWGPU from "../src/world.js";
-import { downloadMeshes, makeObjSeqArg } from "../src/engine/loader-obj.js";
-import { LOG_MATRIX } from "../src/engine/utils.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,
+  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,
+    () => {
+      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]}
+        );
       });
 
-      app.mainRenderBundle[0].objAnim.play("walk");
+      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;
 };
@@ -358,23 +381,23 @@ export var loadObjsSequence = function () {
 
 ```js
 TEST.loadVideoTexture({
-  type: 'video', // video , camera  //not tested yet canvas2d , canvas2dinline
-  src: 'res/videos/tunel.mp4'
+  type: "video", // video , camera  //not tested yet canvas2d , canvas2dinline
+  src: "res/videos/tunel.mp4",
 });
 ```
 
 For canvasinline attach this to arg (example for direct draw on canvas2d and passing intro webgpu pipeline):
+
 ```js
 canvaInlineProgram: (ctx, canvas) => {
-  ctx.fillStyle = 'black';
+  ctx.fillStyle = "black";
   ctx.fillRect(0, 0, canvas.width, canvas.height);
-  ctx.fillStyle = 'white';
-  ctx.font = '20px Orbitron';
+  ctx.fillStyle = "white";
+  ctx.font = "20px Orbitron";
   ctx.fillText(`FPS: ${Math.round(performance.now() % 60)}`, 10, 30);
-}
+};
 ```
 
-
 <pre>
 | Scenario                       | Best Approach                      |
 | ------------------------------ | ---------------------------------- |
@@ -384,6 +407,7 @@ canvaInlineProgram: (ctx, canvas) => {
 </pre>
 
 ### Note
+
 If this happen less then 15 times (Loading procces) then it is ok probably...
 
 ```json
@@ -394,11 +418,11 @@ Draw func (err):TypeError: Failed to execute 'beginRenderPass' on 'GPUCommandEnc
 
 It is possible for 1 or 2 warn in middle time when mesh switch to the videoTexture.
 Will be fixxed in next update.
+
 ```js
 Dimension (TextureViewDimension::e2DArray) of [TextureView of Texture "shadowTextureArray[GLOBAL] num of light 1"] doesn't match the expected dimension (TextureViewDimension::e2D).
 ```
 
-
 ## About URLParams
 
 Buildin Url Param check for multiLang.

package/src/engine/behavior.js

@@ -0,0 +1,35 @@
+import {OSCILLATOR} from "./utils";
+
+/**
+ * @description
+ * Can be reuse for any other tasks.
+ * @author Nikola Lukic
+ */
+
+export default class Behavior {
+
+  status = "Only oscillator";
+
+  constructor() {
+    this.osc0 = new OSCILLATOR(0, 5, 0.01);
+  }
+
+  setOsc0(min,max, step){
+    this.osc0.min =min;
+    this.osc0.max =max;
+    this.osc0.step =step;
+  }
+
+  // apend - keep init origin
+  addPath(NUMBER) {
+    let inc = this.osc0.UPDATE();
+     console.log('test inc' ,inc)
+    console.log('test inc + number' ,(NUMBER + inc))
+    return (inc + NUMBER);
+  }
+
+  setPath0() {
+    return this.osc0.UPDATE();
+  }
+
+}

package/src/engine/lights.js

@@ -1,5 +1,7 @@
 import {mat4, vec3} from 'wgpu-matrix';
 import {vertexShadowWGSL} from '../shaders/vertexShadow.wgsl';
+import Behavior from './behavior';
+
 /**
  * @description
  * Spot light with shodow cast.
@@ -209,10 +211,16 @@ export class SpotLight {
       });
       return this.mainPassBindGroupContainer[index];
     }
+
+    // Only osc values +-
+    this.behavior = new Behavior();
+
+    // put here only func
+    this.updater = [];
   }
 
   update() {
-    //  this.target = vec3.create(x, y, z);              // new target
+    this.updater.forEach((update) => {update(this)})
     this.direction = vec3.normalize(vec3.subtract(this.target, this.position));
     const target = vec3.add(this.position, this.direction);
     this.viewMatrix = mat4.lookAt(this.position, target, this.up);

package/src/engine/mesh-obj.js

@@ -8,7 +8,7 @@ import Materials from './materials';
 import {fragmentVideoWGSL} from '../shaders/fragment.video.wgsl';
 
 export default class MEMeshObj extends Materials {
-  constructor(canvas, device, context, o, inputHandler) {
+  constructor(canvas, device, context, o, inputHandler, globalAmbient) {
     super(device);
     if(typeof o.name === 'undefined') o.name = genName(3);
     if(typeof o.raycast === 'undefined') {
@@ -24,6 +24,7 @@ export default class MEMeshObj extends Materials {
     this.clearColor = "red";
     this.video = null;
     this.FINISH_VIDIO_INIT = false;
+    this.globalAmbient = globalAmbient;
 
     // Mesh stuff - for single mesh or t-posed (fiktive-first in loading order)
     this.mesh = o.mesh;
@@ -184,7 +185,7 @@ export default class MEMeshObj extends Materials {
 
       this.sceneUniformBuffer = this.device.createBuffer({
         label: 'sceneUniformBuffer per mesh',
-        size: 160,
+        size: 176,
         usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
       });
 
@@ -222,7 +223,7 @@ export default class MEMeshObj extends Materials {
         ],
       });
 
-      
+
 
       // Rotates the camera around the origin based on time.
       this.getTransformationMatrix = (mainRenderBundle, spotLight) => {
@@ -235,23 +236,31 @@ export default class MEMeshObj extends Materials {
         const camVP = mat4.multiply(camera.projectionMatrix, camera.view);
 
         for(const mesh of mainRenderBundle) {
-          // Flattened buffer: lightVP(16) + camVP(16) + cameraPos(3+pad) + lightPos(3+pad)
-          const sceneData = new Float32Array(16 + 16 + 4 + 4); // 16+16+4+4 = 40 floats
+          const sceneData = new Float32Array(44);
 
-          // Light ViewProj
+          // Light VP
           sceneData.set(spotLight.viewProjMatrix, 0);
 
           // Camera VP
           sceneData.set(camVP, 16);
 
           // Camera position + padding
-          sceneData.set([camera.position.x, camera.position.y, camera.position.z, 0.0], 32);
+          sceneData.set(
+            [camera.position.x, camera.position.y, camera.position.z, 0.0],
+            32
+          );
 
           // Light position + padding
-          sceneData.set([spotLight.position[0], spotLight.position[1], spotLight.position[2], 0.0], 36);
+          sceneData.set(
+            [spotLight.position[0], spotLight.position[1], spotLight.position[2], 0.0],
+            36
+          );
+
+          // Global ambient + padding
+          sceneData.set([this.globalAmbient[0], this.globalAmbient[1], this.globalAmbient[2], 0.0], 40);
 
           device.queue.writeBuffer(
-            mesh.sceneUniformBuffer,  // or shared buffer
+            mesh.sceneUniformBuffer,
             0,
             sceneData.buffer,
             sceneData.byteOffset,

package/src/engine/utils.js

@@ -460,15 +460,7 @@ export function OSCILLATOR(min, max, step) {
       }
     };
   } else {
-    console.log(
-      "SYS : warning for procedure 'SYS.MATH.OSCILLATOR' Desciption : Replace object with string or number, min >> " +
-      typeof min +
-      ' and max >>' +
-      typeof max +
-      ' and step >>' +
-      typeof step +
-      ' << must be string or number.'
-    );
+    console.log("OSCILLATOR ERROR");
   }
 }
 

package/src/shaders/fragment.wgsl.js

@@ -9,6 +9,8 @@ struct Scene {
     padding2             : f32,   // align to 16 bytes
     lightPos             : vec3f,
     padding              : f32,   // align to 16 bytes
+    globalAmbient        : vec3f,  // <--- new
+    padding3             : f32,    // keep alignment (16 bytes)
 };
 
 struct SpotLight {
@@ -114,7 +116,7 @@ fn main(input: FragmentInput) -> @location(0) vec4f {
     // let viewDir = normalize(scene.cameraViewProjMatrix[3].xyz - input.fragPos);
 
     var lightContribution = vec3f(0.0);
-    var ambient = vec3f(0.0);
+    var ambient = vec3f(0.5);
 
     for (var i: u32 = 0u; i < MAX_SPOTLIGHTS; i = i + 1u) {
         let sc = spotlights[i].lightViewProj * vec4<f32>(input.fragPos, 1.0);
@@ -128,10 +130,10 @@ fn main(input: FragmentInput) -> @location(0) vec4f {
         let visibility = sampleShadow(uv, i32(i), depthRef - bias, norm, lightDir);
         let contrib = computeSpotLight(spotlights[i], norm, input.fragPos, viewDir);
         lightContribution += contrib * visibility;
-        ambient += spotlights[i].ambientFactor * spotlights[i].color;
+        // ambient += spotlights[i].ambientFactor * spotlights[i].color;
     }
-
+    // ambient /= f32(MAX_SPOTLIGHTS); PREVENT OVER NEXT FEATURE ON SWICHER
     let texColor = textureSample(meshTexture, meshSampler, input.uv);
-    let finalColor = texColor.rgb * (ambient + lightContribution); // * albedo;
+    let finalColor = texColor.rgb * (scene.globalAmbient + lightContribution); // * albedo;
     return vec4f(finalColor, 1.0);
 }`;

package/src/world.js

@@ -127,6 +127,7 @@ export default class MatrixEngineWGPU {
       this.frame = this.framePassPerObject;
     }
 
+    this.globalAmbient = vec3.create(0.5, 0.5, 0.5);
     this.MAX_SPOTLIGHTS = 20;
     this.inputHandler = createInputHandler(window, canvas);
     this.createGlobalStuff();
@@ -379,7 +380,7 @@ export default class MatrixEngineWGPU {
         }
       }
     }
-    let myMesh1 = new MEMeshObj(this.canvas, this.device, this.context, o, this.inputHandler);
+    let myMesh1 = new MEMeshObj(this.canvas, this.device, this.context, o, this.inputHandler, this.globalAmbient);
     myMesh1.spotlightUniformBuffer = this.spotlightUniformBuffer;
     myMesh1.clearColor = clearColor;
     if(o.physics.enabled == true) {
@@ -447,20 +448,16 @@ export default class MatrixEngineWGPU {
       // 1️⃣ Update light data (position, direction, uniforms)
       for(const light of this.lightContainer) {
         light.update()
-        // light.updateSceneUniforms(this.mainRenderBundle, this.cameras.WASD);
         this.mainRenderBundle.forEach((meItem, index) => {
           meItem.position.update()
           meItem.updateModelUniformBuffer()
-          // if(meItem.isVideo != true) {
           meItem.getTransformationMatrix(this.mainRenderBundle, light)
-          // }
         })
       }
       if(this.matrixAmmo) this.matrixAmmo.updatePhysics();
 
       for(let i = 0;i < this.lightContainer.length;i++) {
         const light = this.lightContainer[i];
-
         let ViewPerLightRenderShadowPass = this.shadowTextureArray.createView({
           dimension: '2d',
           baseArrayLayer: i,
@@ -499,30 +496,24 @@ export default class MatrixEngineWGPU {
         if(!mesh.sceneBindGroupForRender || (mesh.FINISH_VIDIO_INIT == false && mesh.isVideo == true)) {
           for(const m of this.mainRenderBundle) {
             if(m.isVideo == true) {
-              console.log('✅✅✅ set shadowVideoView', this.shadowVideoView)
+              console.log('✅shadowVideoView', this.shadowVideoView)
               m.shadowDepthTextureView = this.shadowVideoView;
               m.FINISH_VIDIO_INIT = true;
               m.setupPipeline();
             } else {
-              console.log('✅ NORMAL shadowArrayView')
               m.shadowDepthTextureView = this.shadowArrayView;
+              m.setupPipeline();
             }
           }
         }
         mesh.drawElements(pass, this.lightContainer);
       }
-
-      // End render pass
       pass.end();
       this.device.queue.submit([commandEncoder.finish()]);
       requestAnimationFrame(this.frame);
     } catch(err) {
       console.log('%cLoop(err):' + err, LOG_WARN)
-      // if(pass) pass.end();
-      // this.device.queue.submit([commandEncoder.finish()]);
       requestAnimationFrame(this.frame);
-    } finally {
-      //requestAnimationFrame(this.frame);
     }
   }