matrix-engine-wgpu 1.3.16 → 1.3.18

package/examples/games/jamb/readme.md

@@ -0,0 +1,3 @@
+
+
+Sound Effect by <a href="https://pixabay.com/users/u_qpfzpydtro-29496424/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=142528">u_qpfzpydtro</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=142528">Pixabay</a>

package/examples/load-jamb.js

@@ -0,0 +1,6 @@
+import {loadJambApp} from "../main.js";
+
+export var loadJamb = function() {
+  console.log('Just loader for example page')
+  window.app = loadJambApp();
+}

package/examples/load-obj-file.js

@@ -0,0 +1,95 @@
+import MatrixEngineWGPU from "../src/world.js";
+import {downloadMeshes} from '../src/engine/loader-obj.js';
+import {LOG_FUNNY, LOG_INFO, LOG_MATRIX} from "../src/engine/utils.js";
+import {addRaycastsAABBListener} from "../src/engine/raycast.js";
+
+export var loadObjFile = function() {
+
+  let loadObjFile = new MatrixEngineWGPU({
+    useSingleRenderPass: true,
+    canvasSize: 'fullscreen',
+    mainCameraParams: {
+      type: 'WASD',
+      responseCoef: 1000
+    },
+    clearColor: {r: 0, b: 0.122, g: 0.122, a: 1}
+  }, () => {
+
+
+    // loadObjFile.addLight()
+
+    addEventListener('AmmoReady', () => {
+      downloadMeshes({
+        ball: "./res/meshes/blender/sphere.obj",
+        cube: "./res/meshes/blender/cube.obj",
+      }, onLoadObj,
+        {scale: [1, 1, 1]})
+      downloadMeshes({
+        cube: "./res/meshes/blender/cube.obj",
+      }, onGround,
+        {scale: [25, 0.1, 25]})
+
+        // loadObjFile.addLight();
+    })
+
+    function onGround(m) {
+
+      loadObjFile.addMeshObj({
+        position: {x: 0, y: -5, z: -10},
+        rotation: {x: 0, y: 0, z: 0},
+        rotationSpeed: {x: 0, y: 0, z: 0},
+        texturesPaths: ['./res/meshes/blender/cube.png'],
+        name: 'ground',
+        mesh: m.cube,
+        physics: {
+          enabled: false,
+          mass: 0,
+          geometry: "Cube"
+        },
+        // raycast: { enabled: true , radius: 2 }
+      })
+
+    }
+
+    function onLoadObj(m) {
+      loadObjFile.myLoadedMeshes = m;
+      for(var key in m) {
+        console.log(`%c Loaded objs: ${key} `, LOG_MATRIX);
+      }
+      loadObjFile.addMeshObj({
+        position: {x: 0, y: 2, z: -10},
+        rotation: {x: 0, y: 0, z: 0},
+        rotationSpeed: {x: 0, y: 0, z: 0},
+        texturesPaths: ['./res/meshes/blender/cube.png'],
+        name: 'cube1',
+        mesh: m.cube,
+        physics: {
+          enabled: true,
+          geometry: "Cube",
+        },
+        // raycast: { enabled: true , radius: 2 }
+      })
+
+      loadObjFile.addMeshObj({
+        position: {x: 3, y: 2, z: -15},
+        rotation: {x: 0, y: 0, z: 0},
+        rotationSpeed: {x: 0, y: 111, z: 0},
+        texturesPaths: ['./res/meshes/blender/cube.png'],
+        name: 'ball1',
+        mesh: m.ball,
+        physics: {
+          enabled: true,
+          geometry: "Sphere"
+        },
+        // raycast: { enabled: true , radius: 2 }
+      })
+
+      var TEST = loadObjFile.getSceneObjectByName('cube2');
+      console.log(`%c Test access scene ${TEST} object.`, LOG_MATRIX);
+
+            loadObjFile.addLight();
+    }
+  })
+  // just for dev
+  window.app = loadObjFile;
+}

package/examples/load-objs-sequence.js

@@ -0,0 +1,68 @@
+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');
+    }
+  })
+  // Just for dev - easy console access
+  window.app = loadObjFile;
+}

package/examples/unlit-textures.js

@@ -0,0 +1,31 @@
+import MatrixEngineWGPU from "../src/world.js";
+
+export var unlitTextures = function() {
+  let unlitTextures = new MatrixEngineWGPU({
+    useSingleRenderPass: false,
+    canvasSize: 'fullscreen'
+  }, () => {
+    addEventListener('AmmoReady', () => {
+      let c = {
+        scale: 2,
+        position: {x: -3, y: 0, z: -10},
+        rotation: {x: 0, y: 0, z: 0},
+        rotationSpeed: {x: 10, y: 0, z: 0},
+        texturesPaths: ['./res/textures/rust.jpg']
+      };
+
+      let o = {
+        scale: 2,
+        position: {x: 3, y: 0, z: -10},
+        rotation: {x: 0, y: 0, z: 0},
+        rotationSpeed: {x: 10, y: 0, z: 0},
+        texturesPaths: ['./res/textures/default.png']
+      };
+      unlitTextures.addCube(o)
+      unlitTextures.addBall(c)
+    });
+  })
+
+  window.app = unlitTextures;
+
+}

package/examples/video-texture.js

@@ -0,0 +1,61 @@
+import MatrixEngineWGPU from "../src/world.js";
+import {downloadMeshes} from '../src/engine/loader-obj.js';
+import {LOG_FUNNY, LOG_INFO, LOG_MATRIX} from "../src/engine/utils.js";
+import {addRaycastsAABBListener} from "../src/engine/raycast.js";
+
+export var loadVideoTexture = function() {
+
+  let videoTexture = new MatrixEngineWGPU({
+    useSingleRenderPass: true,
+    canvasSize: 'fullscreen',
+    mainCameraParams: {
+      type: 'WASD',
+      responseCoef: 1000
+    },
+    clearColor: {r: 0, b: 0.122, g: 0.122, a: 1}
+  }, () => {
+
+    addEventListener('AmmoReady', () => {
+      downloadMeshes({
+        welcomeText: "./res/meshes/blender/piramyd.obj",
+        armor: "./res/meshes/obj/armor.obj",
+        sphere: "./res/meshes/blender/sphere.obj",
+        cube: "./res/meshes/blender/cube.obj",
+      }, onLoadObj,
+        {scale: [1, 1, 1]})
+    })
+
+    function onLoadObj(m) {
+      videoTexture.myLoadedMeshes = m;
+      for(var key in m) {
+        console.log(`%c Loaded objs: ${key} `, LOG_MATRIX);
+      }
+
+      videoTexture.addMeshObj({
+        position: {x: 0, y: 2, z: -10},
+        rotation: {x: 0, y: 0, z: 0},
+        rotationSpeed: {x: 0, y: 0, z: 0},
+        texturesPaths: ['./res/meshes/blender/cube.png'],
+        name: 'MyVideoTex',
+        mesh: m.cube,
+        physics: {
+          enabled: true,
+          geometry: "Cube"
+        },
+        // raycast: { enabled: true , radius: 2 }
+      })
+
+      var TEST = videoTexture.getSceneObjectByName('MyVideoTex');
+      setTimeout(() => {
+        console.log(`%c Test video-texture...`, LOG_MATRIX);
+        TEST.loadVideoTexture({
+          type: 'video',
+          src: 'res/videos/tunel.mp4'
+        });
+      }, 4000);
+    }
+  })
+
+  window.app = videoTexture;
+
+}

package/examples.js

@@ -0,0 +1,73 @@
+/**
+ * @examples
+ * MATRIX_ENGINE_WGPU EXAMPLE WORKSPACE
+ * Nikola Lukic 2024
+ */
+
+// import {loadJamb} from "./examples/load-jamb.js";
+import {loadCameraTexture} from "./examples/camera-texture.js";
+import {loadObjFile} from "./examples/load-obj-file.js";
+import {loadObjsSequence} from "./examples/load-objs-sequence.js";
+import {unlitTextures} from "./examples/unlit-textures.js";
+import {loadVideoTexture} from "./examples/video-texture.js";
+import {byId} from "./src/engine/utils.js";
+
+// For future
+var examples = {
+  // loadJamb,
+  loadObjFile,
+  unlitTextures,
+  loadVideoTexture
+};
+
+function destroyJambDoms() {
+  if(byId('hud')) byId('hud').remove();
+  if(byId('jambTable')) byId('jambTable').remove();
+  if(byId('topTitleDOM')) byId('topTitleDOM').remove();
+}
+
+byId('loadObjFile').addEventListener("click", () => {
+  // byId('loadObjFile').setAttribute('disabled', true)
+  // byId('unlitTextures').removeAttribute('disabled')
+  if(typeof app !== "undefined") app.destroyProgram()
+  destroyJambDoms();
+  loadObjFile();
+})
+
+byId('unlitTextures').addEventListener("click", () => {
+  // byId('unlitTextures').setAttribute('disabled', true)
+  // byId('loadObjFile').removeAttribute('disabled')
+  if(typeof app !== "undefined") app.destroyProgram()
+  destroyJambDoms();
+  unlitTextures();
+})
+
+byId('camera-texture').addEventListener("click", () => {
+  if(typeof app !== "undefined") app.destroyProgram()
+  destroyJambDoms();
+  loadCameraTexture();
+})
+
+byId('video-texture').addEventListener("click", () => {
+  if(typeof app !== "undefined") app.destroyProgram()
+  destroyJambDoms();
+  loadVideoTexture();
+})
+
+byId('jamb').addEventListener("click", () => {
+  // byId('unlitTextures').setAttribute('disabled', true)
+  // byId('loadObjFile').setAttribute('disabled', true)
+  // byId('jamb').removeAttribute('disabled')
+  if(typeof app !== "undefined") app.destroyProgram()
+  destroyJambDoms();
+  // loadJamb()
+})
+
+byId('objs-anim').addEventListener("click", () => {
+  // byId('unlitTextures').setAttribute('disabled', true)
+  // byId('loadObjFile').setAttribute('disabled', true)
+  // byId('jamb').removeAttribute('disabled')
+  if(typeof app !== "undefined") app.destroyProgram()
+  destroyJambDoms();
+  loadObjsSequence()
+})