1.9.6 Timeline preview bar

CHANGES.md

@@ -1,7 +1,20 @@
 
-## CHANGES
+## Matrix Engine [CHANGES]
+
+
+#### [1.9.6] FBO example + Scene global Timeline function with visual dom preview.
+
+```js
+matrixEngine.matrixWorld.world.useAnimationLine({ sequenceSize: 500 });
+```
+Idea about timeline is to simple count redraws. Nothig other comes from timeline.
+In app level you need to write logic to use 
+`matrixEngine.matrixWorld.world.globalAnimCounter` and
+`matrixEngine.matrixWorld.world.globalAnimCurSequence`
+
+globalAnimCurSequence exist only to reduce number of redraws. 
+You can setup sequenceSize.
 
-#### [1.9.6] FBO example
 
 #### [1.9.5] Added local shadows for obj mesh.
 

apps/basic_fbo.js

@@ -14,7 +14,11 @@ export var runThis = (world) => {
   // Image texs
   var tex = {
     source: ["res/images/complex_texture_1/diffuse.png"],
-    mix_operation: "multiply"
+    mix_operation: "multiply",
+    params: {
+      TEXTURE_MAG_FILTER: world.GL.gl.NEAREST,
+      TEXTURE_MIN_FILTER: world.GL.gl.NEAREST
+    }
   };
 
   world.Add("cubeLightTex", 0.2, "myCube", tex);
@@ -23,54 +27,115 @@ export var runThis = (world) => {
   App.scene.myCube.position.SetY(0.6);
   // App.scene.myCube.activateShadows('spot');
 
+      var textuteImageSamplers2 = {
+        source: [
+          "res/bvh-skeletal-base/swat-guy/textures/Ch15_1001_Diffuse.png",
+          "res/bvh-skeletal-base/swat-guy/textures/Ch15_1001_Diffuse.png"
+        ],
+        mix_operation: "multiply"
+      };
   // Load obj seq animation
   const createObjSequence = (objName) => {
 
     function onLoadObj(meshes) {
+      App.meshes = meshes;
+
       for(let key in meshes) {
         matrixEngine.objLoader.initMeshBuffers(world.GL.gl, meshes[key]);
       }
+
       var textuteImageSamplers2 = {
-        source: ["res/bvh-skeletal-base/swat-guy/gun2.png"],
-        mix_operation: "multiply"
+        source: [
+          "res/bvh-skeletal-base/swat-guy/textures/Ch15_1001_Diffuse.png"
+        ],
+        mix_operation: "multiply", // ENUM : multiply , divide
+        params: {
+          TEXTURE_MAG_FILTER: world.GL.gl.NEAREST,
+          TEXTURE_MIN_FILTER: world.GL.gl.NEAREST
+        }
       };
-      // Hands - in future will be weapon
-      // world.Add("obj", 1, objName, textuteImageSamplers2, meshes[objName], animArg);
-      world.Add("obj", 1, objName, textuteImageSamplers2, meshes['player']);
-      App.scene.player.position.setPosition(0.5, -0.7, -3);
-      App.scene.player.isHUD = true;
-      // Fix object orientation - this can be fixed also in blender.
-      matrixEngine.Events.camera.yaw = 0;
-      for(let key in App.scene.player.meshList) {
-        App.scene.player.meshList[key].setScale(1.85);
-      }
+
+      setTimeout(function() {
+        var animArg = {
+          id: objName,
+          meshList: meshes,
+          // sumOfAniFrames: 61, No need if `animations` exist!
+          currentAni: 0,
+          // speed: 3, No need if `animations` exist!
+          // upgrade - optimal
+          animations: {
+            active: 'walk',
+            walk: {
+              from: 0,
+              to: 35,
+              speed: 3
+            },
+            walkPistol: {
+              from: 36,
+              to: 60,
+              speed: 3
+            }
+          }
+        };
+        world.Add("obj", 1, objName,
+          textuteImageSamplers2,
+          meshes[objName],
+          animArg
+        );
+        App.scene[objName].position.y = -1;
+        App.scene[objName].position.z = -2;
+        App.scene[objName].rotation.rotationSpeed.y = 50;
+      }, 1);
     }
-    matrixEngine.objLoader.downloadMeshes({player: "res/bvh-skeletal-base/swat-guy/gun2.obj"}, onLoadObj);
+
+    matrixEngine.objLoader.downloadMeshes(
+      matrixEngine.objLoader.makeObjSeqArg(
+        {
+          id: objName,
+          path: "res/bvh-skeletal-base/swat-guy/anims/swat-multi",
+          from: 1,
+          to: 61
+        }),
+      onLoadObj
+    );
+
   };
 
   createObjSequence('player');
 
   // FBO BASIC
-  world.Add("squareTex", 5, "myCube5", tex);
-  App.scene.myCube5.position.SetZ(-12);
-  App.scene.myCube5.position.SetX(0);
-  App.scene.myCube5.position.SetY(0);
-  App.scene.myCube5.setFBO()
-  // App.scene.myCube5.activateShadows('spot');
-
+  world.Add("squareTex", 3, "myMirror", tex);
+  App.scene.myMirror.position.SetZ(-12);
+  App.scene.myMirror.position.SetX(0);
+  App.scene.myMirror.position.SetY(0);
+  App.scene.myMirror.setFBO();
+
+  world.Add("cubeLightTex", 0.5, "myMirrorBottom", tex);
+  App.scene.myMirrorBottom.position.SetZ(-5);
+  App.scene.myMirrorBottom.position.SetX(2);
+  App.scene.myMirrorBottom.position.SetY(2);
+  App.scene.myMirrorBottom.rotation.rotx = 20
+  // App.scene.myMirrorBottom.setFBO();
+
+  // App.scene.myMirror.rotation.rotationSpeed.z = 10;
+  App.scene.myMirrorBottom.activateShadows();
+
+  // TEST ALSO ANIMATIONLINE
+  matrixEngine.matrixWorld.world.useAnimationLine({ sequenceSize: 500 });
+
   // Click event
   canvas.addEventListener('mousedown', (ev) => {
     matrixEngine.raycaster.checkingProcedure(ev);
   });
 
   addEventListener("ray.hit.event", function(e) {
     e.detail.hitObject.LightsData.ambientLight.r =
-      matrixEngine.utility.randomFloatFromTo(0, 10);
+      matrixEngine.utility.randomFloatFromTo(0, 2);
     e.detail.hitObject.LightsData.ambientLight.g =
-      matrixEngine.utility.randomFloatFromTo(0, 10);
+      matrixEngine.utility.randomFloatFromTo(0, 2);
     e.detail.hitObject.LightsData.ambientLight.b =
-      matrixEngine.utility.randomFloatFromTo(0, 10);
-    console.info(e.detail);
+      matrixEngine.utility.randomFloatFromTo(0, 2);
+    // console.info(e.detail);
   });
 
 };

lib/loader-obj.js

@@ -21,7 +21,11 @@ export class constructMesh {
     this.create(objectData, inputArg);
     this.setScale = (s) => {
       this.inputArg.scale = s;
-      initMeshBuffers( world.GL.gl, this.create(this.objectData, inputArg));
+      initMeshBuffers( world.GL.gl, this.create(this.objectData, this.inputArg));
+    };
+    this.updateBuffers = () => {
+      this.inputArg.scale = 1;
+      initMeshBuffers( world.GL.gl, this.create(this.objectData, this.inputArg));
     };
   }