DEV Community: Nikola

The Beast is hungry

Nikola — Sun, 16 Aug 2026 20:36:26 +0000

matrix-engine-wgpu
Author: Nikola Lukić 📧 zlatnaspirala@gmail.com 📅 Version: 1.19.0 2026 Alias

The Beast

Description
WebGPU engine focus performance but also mimic major engines features but optimised to work well on mobile devices. It uses the wgpu-matrix npm package as a replacement for gl-matrix to handle model-view-projection matrices. All examples work (no heat/lag) on mobile browser (android-chrome tested) thats the point of The-Beast. Performance optimization is const WIP.

Published on npm as: matrix-engine-wgpu (not always updated on last - recommended is to use github clone) From [1.18.7] ver npm package is much more stable and usable. All examples can be done by npm services not just github clone. You can also use (links tested). You can use RES like prefix for textures or objects paths. The Beast is friendly with codepen, worker physics bridge will test host origin name "is it external or not" to fix loading link. If domain is not cross origin it will use local resource always.

Main references about project:

Backend editorX (VisualScripting) (works in local env - desktop browsers) support list: Chrome, Edge, Opera, Firefox desktop.

Code Creator (TheBeast Code generator) is standalone. Can be used public but user must trust page to enter api key. Without api key no ai response. Code creator make project from task and test it direct intro same page. Code creator dont even needed to build own js bundle, just use it from watcher build on localhost:3000 by default.

Networking For one single setup with kurento-openvidu-nodejs middleware. (I will bring back custom networking options setup with MultiRTC lib).

Done list []
✔️ Draw loop per pipeline not per mesh (PipelineManager) with share material. Power optimisation.
✔️ Support for 3D objects and scene transformations.
✔️ Ammo.js, cannonES && Jolt Physics libs integration (app<->bridge<->worker). Physics use webworkers by default. Fixed crossOrigin worker.
✔️ Networking with Kurento/OpenVidu/Own middleware Nodejs -> frontend.
✔️ Bloom post processing.
✔️ HZB post processing.
✔️ Volumetric post processing.
✔️ Scene Culling feature (see maze example).
📦 Based on the shadowMapping sample from webgpu-samples.
✔️ Web GUI(online) Editor [app exec graph] with Visual Scripting (Named: FlowCodexVertex).
✔️ Web GUI(online) Editor [shader graph] with Visual Scripting (Named: FlowCodexShader).
✔️ Dynamic shadow cast (done also for skinned meshes).
✔️ VertexShader displacment (done also for skinned meshes), nice for water effect.
✔️ Basic flow for AI Graph Generator - Simple tasks passed for now with ollama platform. Open account/open-source/free-service-quota.
✔️ ProceduralMesh objectScene entity with options for vertex morph - Shadows following morph blend.
✔️ MediaPipe implemented - dinamic loading (if not in use no loading script or any related to mediapipe)
✔️ Remote render stream emit example (standard engine networking) and special endpoint for "wachers" tv-10.html Replace webcam stream with canvas capture - on endpoint use webRTC and video tag to preview remote render.
✔️ Code creator AI services agent system(use engine from npm) npm run creator for 'http://localhost:3000/' npm run creator-backend for backend. create games from simple prompt.
Roadmap/sync to external parts
(Preparing API DOCs)[https://github.com/zlatnaspirala/matrix-engine-wgpu/wiki/Visual-Scripting-API]
🎯 Test linux OS -> Editor creates and manages files internally.
🎯 Improve gizmo feature.
🎯 Sync npm version and make editor posible from npm i matrix-engine-wgpu.
🎯 Sync npm version for matrix-engine-wgpu wrapper (me-webgpu-react)[https://github.com/zlatnaspirala/me-webgpu-react]
Add fully physics options. Soft bodies etc...

FluxCodexVertex Web Graph Editor 🚀 (since version 1.8.0)

EditorX has two main parts:

Frontend (./src/tools/editor)
Backend (./src/tools/editor/backend)
Before running anything, install dependencies with npm i
in the root folder and also inside ./src/tools/editor/backend
The backend is built using Node.js 🟢

General Features 🧩
Editor creates and manages files internally (Windows tested only!).
Scene container [adding objs -> auto save]
SceneObject property container [selected object] [auto save]
Assets toolbar added (bottom panel)
Add GLB or OBJ files (also mp3) from the asset toolbox by selecting them.
Top menu for adding primitives (Cube / Sphere) with or without physics ⚙️
Integrated Visual Scripting system 🧠 FluxCodexVertex for program exec flow.
Integrated Visual Scripting system 🧠 FluxCodexShader for shader.

*Visual Scripting *– Implemented Features ✅

Add Math nodes, events / custom methods, variable popup, SceneObject access
Get SceneObject → set position → bind onTargetReach events SetTexture, setMaterial,
Fetch, GetArray, forEach, Print, IF, Math, compare, string operation etc...
Custom func editor - Function Manager after creating use it from visual scripting.
Generator physics bodies in sequence pos in choosen geometry in world pos (Pyramid, wall, in place).
onDraw Event node - called on every frame.Can be multiply used and set skip value. More skip less calls.
Audio reactive node Audio to pos , rot, scale or geometry or any... Outputs low, mid, high, energy and beat.
Run the graph ▶️
Stop the graph Just basic - clear dinamic created object and stops onDraw calls.
Save graph Saved to file direct also cached on LocalStorage For final builds, becomes a real JS object injected into the app flow.[DONE]
Export graph to JSON
Import graph from JSON
Insert graph from JSON from generated data (ai tool)
[Experimental] Generate graphs with ai tools services First working graph done with ollama platform. You need to open account on ollama platform for free quota service. Get API key and add it to the aitool config file (src\tools\editor\backend\config.js) Backend Config.js is in git ignored list. If you need to create it use this format: If not exist just create it (it's ignored).

export const aiConfig = {
  ollama: "***********",
  qrok: "************",
  anthropic: "************",
  google: "************"
};

For now i create graphs with simple tasks. In future it will be able to create whole scenes or simple games.

⚠️ Important Notes
Visual Scripting is only available when running the engine from source
(not from npm i matrix-engine-wgpu). You must clone or download the engine source from the GitHub repository.

Instructions 📌
Editor use esbuild compiler but still present browserify, both works perfect.

Run the editor with:

npm run editorx

from the engine root directory. EditorX is an alias for FluxCodexVertex backend part (needed three words to keep the name unique) Run the scene by pressing F6 or by clicking Run in the left panel If you delete all objects from the scene, you must refresh the page and add at least one object again Before importing a graph, delete all nodes from the FluxCodexVertex graph After deleting everything, click Save to store an empty [] array. All changes in graph must be saved manually/clicking for now 💾 (no autosave for graphs).

The Beast Code Creator

Running Standalone (but it is buildin) use engine from npm service not from src. Running from the Engine Monorepo: If you cloned the full matrix-engine-wgpu repo, run these from the engine root folder:

npm run creator-install   # First time
# Or go manually:
# "cd src/tools/the-beast-code-gen 
# npm i

# Running
npm 
npm run creator          # frontend
npm run creator-backend  # backend (socket server)
API Keys: src\tools\the-beast-code-gen\src\config.js

From [1.18.6] version:

Added code-creator AI driven by not for graphs it is for code direct. Backend: npm run creator-backend Frontend: npm run creator

Code Creator part (no visual nodes - just top project code) can be public. Users must trust you! I will force local usage.

Api documentation
Build api with:

typedoc index.js

Live: https://maximumroulette.com/apps/webgpu/api-docs/

Features

Scene Management

Canvas is dynamically created in JavaScript—no element needed in HTML.

Access the main scene objects:

app.mainRenderBundle[0];

or by name:

app.getSceneObjectByName("Sphere1");

Add meshes with .addMeshObj(), supporting .obj loading, unlit textures, cubes, spheres, etc.

Destroy sceneObj:

app.removeSceneObjectByName("Sphere1");

Also interest for clearing physics body and render part:

app.destroyByPrefix("towers");

app.destroyBySufix("_001");
// Destroy objects become true after calling flushDestroyQueue function.
app.flushDestroyQueue();

Cleanly destroy the scene:

app.destroyProgram();

Camera Options
Add in args for instancing main MEWGPU class.

mainCameraParams: {
  type: 'WASD',
  responseCoef: 1000
}

Access camera:

let cam = app.getCamera();
cam.setPitch(-0.26);
cam.setYaw(-0.06);
cam.setY(15);
cam.setZ(11);
cam._dirtyAngle = true;

For now translation is only with WASD keyboard keys. Supported types: WASD, RPGCamera, FirstPersonCamera, cinematicCamera

WASD also use 'c' and 'v' for up and down camera position.

To change position dont use direct edit on position array. Use methods:

maze.cameras.firstPersonCamera.movementSpeed = 0.1;
maze.collisionSystem.registerCamera(maze.cameras.firstPersonCamera.position, 1.0);
maze.cameras.firstPersonCamera.setPosition(-49, 10.40, -49);
maze.cameras.firstPersonCamera.setTarget(-49, 0.0, -49);

const cam = app.getCamera();
cam.setYaw(-0.03);
cam.setPitch(-0.49);
cam.setZ(0);
cam.setY(33);
cam._dirtyAngle = true;

Cinematic camera:

const introPath = new CameraPath([
  {position: [0, 5, 20], target: [0, 0, 0]},
  {position: [10, 12, 10], target: [0, 1, 0]},
  {position: [0, 15, -22], target: [0, 0, 0]},
], {parameterization: 'arc'});

if(cam.setPath) cam.setPath(introPath).play({
  speed: 0.3,
  onEnd: () => console.log('done'),
});

Object Position
Best way for access physics body object: app.matrixPhysics.getBodyByName(name) Return idx of body.Use that idx for any call of worker fn.

Control object position:

app.mainRenderBundle[0].position.translateByX(12);

Teleport / set directly:

app.mainRenderBundle[0].position.SetX(-2);

Adjust movement speed:

app.mainRenderBundle[0].position.thrust = 0.1;

⚠️ For physics-enabled objects, use matrixPhysics functions — .position and .rotation are not visually applied but can be read.

from 1.11.0 physics works from webworkers getBodyByName on cleaver way return body id not body inself but all funck now use ids not real body ref. interface stay same. see examples for physics like flipper game.

Example for apply physics on scene object click.

physicsPlayground.canvas.addEventListener("ray.hit.event", e => {
  console.log("ray.hit.event:", e.detail);
  const physics = app.matrixPhysics; // The engine instance
  const body = physics.getBodyByName(e.detail.hitObject.name);
  if (!body) return;
  // 1. Apply Impulse up
  // physics.applyImpulse(body, new PVector(0, 5, 0));
  // 2. Set Angular Velocity
  // physics.setAngularVelocity(body, new PVector(0, 9, 9));
  // 3. Directional hit based on ray
  // const dir = e.detail.rayDirection; // assuming [x, y, z]
  // const strength = 20;
  // physics.applyImpulse(body, new PVector(
  //   dir[0] * strength,
  //   dir[1] * strength,
  //   dir[2] * strength
  // ));
  // 4. Explosion example
  const hitPos = new PVector(
    e.detail.hitPoint.x,
    e.detail.hitPoint.y,
    e.detail.hitPoint.z,
  );
  physics.explode(idx, hitPos, 10, 50);
  // 5. Change Materials
  // const metal = {friction: 0.4, restitution: 0.1};
  // physics.setMaterial(body, metal.friction, metal.restitution);
});

Object Rotation
Manual rotation:

app.mainRenderBundle[0].rotation.x = 45;

Auto-rotate:

app.mainRenderBundle[0].rotation.rotationSpeed.y = 10;

Stop rotation:

app.mainRenderBundle[0].rotation.rotationSpeed.y = 0;

_⚠️ For physics-enabled objects, use matrixPhysics methods (e.g., .applyImpulse).
_

💡 Lighting System

Matrix Engine WGPU now supports independent light entities, meaning lights are no longer tied to the camera. You can freely place and configure lights in the scene, and they will affect objects based on their type and parameters.

Supported Light Types Ambient global also per material SpotLight – Emits light in a cone shape with configurable cutoff angles.

(Planned: PointLight)

Features:

✅ Supports multiple lights ✅ Shadow-ready

Important Required to be added manual:

engine.addLight();

Access lights with array lightContainer:

app.lightContainer[0];
app.getSceneLightByName("light1");

Materials
With last glb feature materials become part of engine also.

material: {
  type: "standard";
}
material: {
  type: "pong";
}
material: {
  type: "power";
}
material: {
  type: "water";
}
material: {
  type: "metal";
}
material: {
  type: "mirror";
}
...

Standard is fully supported with lights shadow cast down (not for anims yet)
Pong
Power - no shadows cast
Mirror is env map. If you use mirror you must pass arg
Dark
water

// Also for addMeshObj
TEST_ANIM.addGlbObj({
  material: {type: 'power'},
...
}, null, glbFile);

// Mirror example
TEST_ANIM.addGlbObj({
  material: {type: 'mirror'},
  envMapParams: {
    baseColorMix: 0.55,
    mirrorTint: [0.9, 0.95, 1.0],     // Slight cool tint
    reflectivity: 0.95,               // 25% reflection blend
    illuminateColor: [0.3, 0.7, 1.0], // Soft cyan
    illuminateStrength: 0.1,          // Gentle rim
    illuminatePulse: 0.001,           // No pulse (static)
    fresnelPower: 5.0,                // Medium-sharp edge
    envLodBias: 2.5,
    usePlanarReflection: false,       // ✅ FOr now only false - Env map mode
  },
...
}, null, glbFile);
Mirror mat update params In runtime:
// Access some object with mirror mat
app.mainRenderBundle[5].writeParamsMirror({
  baseColorMix: 0.9,
  mirrorTint: [0.9, 0.95, 1.0],
  reflectivity: 0.25,
  illuminateColor: [1.3, 0.7, 1.0],
  illuminateStrength: 11.4,
  illuminatePulse: 1.1,
  fresnelPower: 2.5,
  envLodBias: 2.5,
  usePlanarReflection: false,
});

Change only textures (no recreation of pipeline)

await app.mainRenderBundle[0].loadTex0(["res/icons/editor/chatgpt-gen-bg.png"]);
app.mainRenderBundle[0].changeTexture(app.mainRenderBundle[0].texture0);

Setup Blend (For water mat use blend!)

app.mainRenderBundle[0].setBlend(0.5);

Examples for setup water params:

app.mainRenderBundle[0].updateWaterParams(
  [0.0, 0.1, 0.3], // Deep: navy
  [0.2, 0.6, 0.9], // Shallow: blue
  2.0, // Wave speed: fast continuous
  1.8, // Wave scale: rolling waves
  0.5, // Wave height: tall active waves
  1.5, // Fresnel: strong
  50.0, // Specular: soft highlights
);

app.mainRenderBundle[0].updateWaterParams(
  [0.0, 0.3, 0.5], // Deep: medium blue
  [0.3, 0.8, 1.0], // Shallow: bright cyan
  1.2,             // Wave speed: gentle continuous (changed from 0.6)
  2.5,             // Wave scale: smooth ripples (changed from 5.0)
  0.3,             // Wave height: visible movement
  2.5,             // Fresnel: moderate reflection
  100.0,           // Specular: sharp sparkles
);

Effect (Standalone pipeline draw subsystem)
Activation for prebuild(buildin) effects

TEST_ANIM.addGlbObj({
...
pointerEffect: {
  enabled: true,
  flameEffect: true,
  flameEmitter: true,
},
...
}, null, glbFile);

// Access in runtime :
// app.mainRenderBundle[0].effects

Use random for creation than when you find perfect crazzy fancy case just collect input data see: https://gist.github.com/zlatnaspirala/8758bcfb8be81d65c2c428e222abbef2

Bloom post processing
Activete with :

app.activateBloomEffect();

Manipulate with app.bloomPass: setKnee setIntensity setThreshold setBlurRadius.

Volumetric effect
Call from app app.activateVolumetricEffect() !Note volumetric works only if bloom is activated. Bloom can work alone.

Passing arguments:

app.activateVolumetricEffect({
  density: 0.03,
  steps: 32,
  scatterStrength: 1.2,
  heightFalloff: 0.08,
  lightColor: [1.0, 0.88, 0.65],
});

Object Interaction (Raycasting)
Manual raycast example:

window.addEventListener("click", event => {
  let canvas = document.querySelector("canvas");
  let camera = app.cameras.WASD;
  // let camera = app.getCamera();
  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);
    }
  }
});

Automatic raycast listener:

addRaycastListener();

// Must be app.canvas or [Program name].canvas
app.canvas.addEventListener("ray.hit.event", event => {
  console.log("Ray hit:", event.detail.hitObject);
});

Engine also exports (box):

addRaycastsAABBListener
rayIntersectsAABB,
computeAABB,
computeWorldVertsAndAABB,

How to Load .obj Models

import MatrixEngineWGPU from "./src/world.js";
import {downloadMeshes} from "./src/engine/loader-obj.js";

export let application = new MatrixEngineWGPU(
  {
    useSingleRenderPass: true,
    canvasSize: "fullscreen",
    mainCameraParams: {
      type: "WASD",
      responseCoef: 1000,
    },
  },
  () => {
    addEventListener("PhysicsReady", () => {
      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,
      );
    });

    function onLoadObj(meshes) {
      application.myLoadedMeshes = meshes;
      for (const key in meshes) {
        console.log(`%c Loaded obj: ${key} `, LOG_MATRIX);
      }
      application.addMeshObj({
        position: {x: 0, y: 2, z: -10},
        rotation: {x: 0, y: 0, z: 0},
        rotationSpeed: {x: 0, y: 0, z: 0},
        texturesPaths: ["./res/textures/cube-g1-extra_low.png"],
        name: "CubePhysics",
        mesh: meshes.cube,
        physics: {
          enabled: true,
          geometry: "Cube",
        },
      });

      application.addMeshObj({
        position: {x: 0, y: 2, z: -10},
        rotation: {x: 0, y: 0, z: 0},
        rotationSpeed: {x: 0, y: 0, z: 0},
        texturesPaths: ["./res/textures/cube-g1-extra_low.png"],
        name: "SpherePhysics",
        mesh: meshes.sphere,
        physics: {
          enabled: true,
          geometry: "Sphere",
        },
      });
    }
  },
);

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).

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("PhysicsReady", () => {
        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/textures/cube-g1-extra_low.png"],
          name: "swat",
          mesh: m["swat-walk-pistol"],
          physics: {
            enabled: false,
            geometry: "Cube",
          },
          objAnim: objAnim,
        });

        app.mainRenderBundle[0].objAnim.play("walk");
      }
    },
  );

  window.app = loadObjFile;
};

💡 GLB binary loading bvh(rig)animations.

See examples glb-loader.js (build with npm run glb-loader)
Next update materials improvements!
Light affect just for first frame or t-pose.
For npm service import uploadGLBModel.
From 1.6.0 glb support multi skinned mesh + mutli primitives cases.

Limitation: glb loader not handled for non animation case. Use obj loader for static mesh.

Must powerfull call is new class MEMeshObjInstances. MEMeshObj is good now for optimised call(less conditionals). You can add instanced draws and modify basic color for each individualy also transformation good for fantazy or any game dev.

Example:

var glbFile01 = await fetch(p).then(res =>
  res.arrayBuffer().then(buf => uploadGLBModel(buf, this.core.device)),
);
this.core.addGlbObjInctance(
  {
    material: {type: "standard", useTextureFromGlb: true},
    scale: [20, 20, 20],
    position: {x: 0, y: -4, z: -220},
    name: this.name,
    texturesPaths: ["./res/meshes/glb/textures/mutant_origin.webp"],
    raycast: {enabled: true, radius: 1.5},
    pointerEffect: {enabled: true},
  },
  null,
  glbFile01,
);

// access  - index -0 is BASE MESH ! I added maxLimit = 5 you can change this from engine source.
// added lepr smoot translate , also color+.
app.mainRenderBundle[1].instanceTargets[1].position[2] = 10;
// This recreate buffer it is not for loop call space
app.mainRenderBundle[1].updateInstances(5);
ProceduralMesh
export const geoTypesForMorph = {
  cube: "cube",
  sphere: "sphere",
  mobius: "mobius",
  plane: "plane",
  capsule: "capsule",
  cone: "cone",
  torus: "torus",
  cylinder: "cylinder",
  wavePlane: "wavePlane",
  supershape: "supershape",
  pyramid: "pyramid",
  diamond: "diamond",
  icosahedron: "icosahedron",
  circlePlane: "circlePlane",
  rock: "rock",
  star: "star",
  star3d: "star3d",
  littleStar: "littleStar",
  flatStar: "flatStar",
  klein: "klein",
  shell: "shell",
  rippleSphere: "rippleSphere",
  twistedTorus: "twistedTorus",
  tornado: "tornado",
  galaxySpiral: "galaxySpiral",
};

Draw all buildin proceduralMesh shapes:

const spacing = 3;
const keys = Object.keys(geoTypesForMorph);
let col = 0;
let row = 0;
for (let i = 0; i < keys.length - 1; i++) {
  const typeA = keys[i];
  const typeB = keys[i + 1];
  loadObjFile.addProceduralMeshObj({
    material: {type: "power"},
    position: {x: col * spacing - 5, y: 1, z: -15 + row * spacing},
    rotation: {x: 0, y: 0, z: 0},
    scale: [1, 1, 1],
    rotationSpeed: {x: 0, y: 0, z: 0},
    texturesPaths: ["./res/textures/cube-g1_low.webp"],
    meshA: MeshMorpher[typeA](1),
    meshB: MeshMorpher[typeB](1),
    name: `morph_${typeA}_to_${typeB}`,
    physics: {
      enabled: false,
      geometry: "Sphere",
    },
  });
  col++;
  if (col % 4 === 0) {
    row++;
    col = 0;
  }
}

// Also works - but tested just two cube.
// need to improve and est more
// let test = MeshMorpher.compose(
//   {shape: MeshMorpher.cube(1), offset: [-2, 0, 0]},
//   {shape: MeshMorpher.cube(1), offset: [2, 0, 0]},
// );

// loadObjFile.addProceduralMeshObj({
//     material: {type: 'power'},
//     position: {x: 0 , y: 5, z: -15},
//     rotation: {x: 0, y: 0, z: 0},
//     scale: [1, 1, 1],
//     rotationSpeed: {x: 0, y: 0, z: 0},
//     texturesPaths: ['./res/textures/cube-g1_low.webp'],
//     meshA: test,
//     meshB: test,
//     name: `morph_1`,
//     physics: {
//       enabled: false,
//       geometry: "Sphere"
//     }
//   });

Morph between two shapes

sceneObject.morphTo(1.0, 2000, () => {
  /*callback*/
});

sceneObject.morphTo(0.0, 2000, () => {
  /*callback*/
});

📽️ Video textures

TEST.loadVideoTexture({
  type: "video", // video , camera  //not tested canvas2d, canvas2dinline
  src: "res/videos/tunel.mp4",
});

For canvasinline attach this to arg (example for direct draw on canvas2d and passing intro webgpu pipeline):

canvaInlineProgram: (ctx, canvas) => {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "white";
  ctx.font = "20px Orbitron";
  ctx.fillText(`FPS: ${Math.round(performance.now() % 60)}`, 10, 30);
};

| Scenario                       | Best Approach                      |
| ------------------------------ | ---------------------------------- |
| Dynamic 2D canvas animation    | `canvas.captureStream()` → `video` |
| Static canvas snapshot         | `createImageBitmap(canvas)`        |
| Replaying real video or webcam | Direct `video` element             |

Note
Warn can be disabled from MECongif.logLoopError (bool). If this happen less then 15 times (Loading procces) then it is ok probably...

Draw func (err):TypeError: Failed to execute 'beginRenderPass' on 'GPUCommandEncoder': The provided value is not of type 'GPURenderPassDescriptor'.

Networking
From 1.7.0 engine powered by networking. Used kurento&Openvidu server for backend. Very good for handling streams, channels etc...

All you needed to start kurento and openvidu and interconnect this nodejs server https://github.com/zlatnaspirala/matrix-stream/blob/main/middleware/server.js

See example code at ./examples/games/moba/

Buildin net sync basic: Let's say app is engine root object and net is networking object. webRTC tech with openvidu server middleware server

app.net = new MatrixStream({
  active: true,
  domain: "maximumroulette.com",
  port: 2020,
  sessionName: "forestOfHollowBlood-free-for-all",
  resolution: "160x240",
  isDataOnly: urlQuery.camera || urlQuery.audio ? false : true,
  customData: forestOfHollowBlood.player.data,
});

// `customData` if you wanna pass some extra meta data on connection-created event
// No need always camera and mic we can use is like data signaling only.
How to use buildin network operations:

// Activate emiting remote position, on remote side adapted on scene object with same name
sceneObject.position.netObject = sceneObject[0].name;
// For now net view for rot is axis separated - cost is ok for orientaion remote pass
sceneObject.rotation.emitY = sceneObject.name;
// If you need oposite remote/local situation. For example:
// you friendly object is enemy object at remote machine that just setup another flag
sceneObject.position.netObject = sceneObject[0].name; // we still need this setup!
sceneObject.position.remoteName = sceneObjecOposite[0].name;
Use toRemote arg prop in send pass, if not it is default [] emit to all.

Intelegent emit for teams (two teams implemented). Position will be emited for teams[0] and received for uniq scene obj name. Position will be emited for teams[1] and received for oposite (eg. enemy) uniq scene obj name. In this case toRemote is overrided (Don't pass it). Used for moba project.

mesh.position.teams[0] = [connId0, connId1];
mesh.position.teams[1] = [connId2, connId3];

// emiter in core engine file
if (this.teams.length > 0)
  if (this.teams[0].length > 0)
    app.net.send({
      toRemote: this.teams[0], // default null remote conns
      sceneName: this.netObject, // origin scene name to receive
      netPos: {x: this.x, y: this.y, z: this.z},
    });
if (this.teams.length > 0)
  if (this.teams[1].length > 0)
    app.net.send({
      toRemote: this.teams[1], // default null remote conns
      remoteName: this.remoteName, // to enemy players
      sceneName: this.netObject, // now not important
      netPos: {x: this.x, y: this.y, z: this.z},
    });

About URLParams
Buildin Url Param check for multiLang. MultiLang feature is also buildin options.

Load multilang json file data.

?lang=en

Access from code:

urlQuery.lang;

Also render config can be controlled:

?PHYSICS_GROUND_Y=1
?fs=true                      // Force-Fullscreen
?MAX_BONES=0                  // optimisation [use this for mobile devices]
?MAX_SPOTLIGHTS=1             // optimisation [use this for mobile devices]
?SHADOW_RES=250               // optimisation [use this for mobile devices]
?GRAVITY_Y_AXIS=10            // optimisation [use this for mobile devices]
?MOUSE_SENS: 0.01             // Works for WASD and firstPersonCamera
?TOUCH_SENS: 0.03             // Works for WASD and firstPersonCamera
?CAM_SPEED: mobile 0.1 : 0.2  // Works for WASD and firstPersonCamera
?LOAD_AFTER_CLICK_MOBILE: false

Use it : matrix-engine-wgpu/public/examples?demo=1&SHADOW_RES=250

If you wanna full performance on mobile devices than use in constructor: This is width of canvas inself. Value 1 is the best quality case also default if not exist.

fastRender = from 0.1 to 1 - Best for mobile 0.85
In this case FORCE_FULL_SCREEN is true by default. Pushed notification click anywhere to start the engine.

Note for MAX_SPOTLIGHTS : If you wanna override values from MECOnfig or even urlParam than use in main engine arg pass:

new MatrixEngineWGPU({
    canvasSize: 'fullscreen',
    fastRender: 0.9,
    render: 'culling',
    dontUsePhysics: true,
    MAX_SPOTLIGHTS: 1,
    MAX_BONES: 0,
    mainCameraParams: {
      type: 'firstPersonCamera',
      // type: 'WASD',
      responseCoef: 1000
    },
    clearColor: {r: 0, b: 0.122, g: 0.122, a: 1}
  }, () => { ... })

Exclude (for example floor/ground) from culling: floor.ignoreCulling = true;
About empty.js
Android TV or any other supported device render stream receiver
Tech: webRTC (used standard kurento/openvidu matrixStream) Look for ./public/tv-10.html

To make or build you own see android native part at: https://github.com/zlatnaspirala/web-to-native/tree/master/android-tv At thie repo (cef) you can find way to port also on windows, macos or linux OS but this not priory for project. Dev help for android studio: "adb connect 192.168.0.XX:5555"

We need somewhere to run standard render and use networking just with new flag (streamRender):

  streamRender.net = new MatrixStream({
    active: true,
    domain: 'maximumroulette.com',
    port: 2020,
    sessionName: 'tv-beast',
    resolution: '1920x1080',
    isDataOnly: false,
    streamRender: true
  });

NPM Scripts
Editor use esbuild. You can use watchify to bundle JavaScript. (still good) +Migration to the ESBUILD (note: it strange becouse it is exe file) but it is popular.

You can setup more games/apps in single bundle or make special end point for specific game/app.

"examples": "esbuild examples.js --bundle --outfile=public/examples.js --format=esm --watch",
"android-tv-cast": "esbuild android-tv-cast.js --bundle --outfile=public/android-tv-cast.js --format=esm --watch",
"jamb": "watchify ./examples/games/jamb/jamb.js -p [esmify --noImplicitAny] -o public/yacht.js",
"demo1": "watchify demo1.js -p [esmify --noImplicitAny] -o public/app.js",
"empty": "watchify empty.js -p [esmify --noImplicitAny] -o public/empty.js",
"build.jamb": "browserify main.js -p esmify > public/app.js",
"glb-loader": "watchify ./examples/glb-loader.js -p [esmify --noImplicitAny] -o public/app.js",
"moba": "watchify ./examples/games/moba/forestOfHollowBlood.js -p [esmify --noImplicitAny] -o public/moba-game.js",
"moba-menu": "watchify ./examples/games/moba/start-menu.js -p [esmify --noImplicitAny] -o public/moba-menu.js",
"build-all": "npm run examples | npm run main | npm run empty",
"creator-install": "npm --prefix src/tools/the-beast-code-gen i",
"creator": "npm --prefix src/tools/the-beast-code-gen run dev",
"creator-backend": "npm --prefix src/tools/the-beast-code-gen run backend",
"landpage": "watchify ./examples/my-lights.js -p [esmify --noImplicitAny] -o public/landpage.js",
"hosts": "http-server ./public/ -p 3000",
"editor-landing": "watchify ./src/tools/editor/template/autogen.js -p [esmify --noImplicitAny] -o public/matrix-engine-autogen.js",
"editorx": "cd src/tools/editor/backend && node matrix-editor.js"

Resources
All resources and output go into the ./public folder — everything you need in one place. This is static file storage also all builds make outputs here.

For adding new endpoint app/demo you only need to create standard html file with js script name.
Proof of Concept
🎲 The first full app example will be a WebGPU-powered Jamb 3d deluxe game, MOBA 'Forest of hollow blood' , flipper , NUI runner etc.

MOBA game Beta version done
Features done:
Supporetd on mobile browsers.
Navigation mesh
Hero class
GLB animations
Automatic team selection (South vs North)
Homebase stone (tron / enemytron)
Invertory (construct from 2 or 3 new upgraded item)
Videochat - stream video follow player character (remote & local 'one on one')

💲💲💲 Invest in Forest Of Hollow Blood 1,000$ See more details at FOHB Wiki

Live Demos & Dev Links
Matrix-engine-wgpu Live demos

💲💲💲 Support JAMB 3D this project on itch.io

MOBA Forest Of Hollow Blood from hosted on maximumroulette.com

Codepen examples:
The Beast Cube + Fire effect + onhit changed effect configuration
Zombie Shooter full game on codepen:

Performance for Jamb game:

Special licence for MOBA example:

Creative Commons Attribution 4.0 International (CC BY 4.0)

You are free to share and adapt this project, provided that you give appropriate credit.
Attribution requirement:
Include the following notice (with working link) in any distributed version or about page:

"Forest Of Hollow Blood — an MOBA example made with MatrixEngineWGPU (https://github.com/zlatnaspirala/matrix-engine-wgpu)"

Web Editor FluxCodexVertex from version [1.8.0]
Run editor

npm run editorx

Navigate to matrix-engine.html it is landing page for editor. After create new project or load project page will be redirect to ./public/<PROJECT_NAME>.html Source location : ./projects/<PROJECT_NAME>

Features:
Create new project/ load project - only on landing page
Create cubeMesh
Properties box for selected sceneObj
Events system (Create func and attach to sceneObj)
Resource navigation
Visual Scripting

@note License for fluxCodexVertex.js (MPL 2.0) Affect only this file! Just leave comment licence part in header of file.

YT video promotion :

About 'In fly' regime: Editor can be activated even without backend node but in that case no saves.

License && Credits

Usage Note
You may use, modify, and sell projects based on this code — just keep this notice and included references intact (whole licence paragraph - but you can always remove assets -> remove asset back link).

Most important is reference on matrix-engine-wgpu.
You need just to copy paste this text to about form on your web page or any other type of app.
You can remove almost all licence for assets if you remove current assest from your project (Fork this repo - remove all required link back assets - remove assets licence)
Attribution & Credits
Engine design and scene structure inspired by: WebGPU Samples

OBJ Loader adapted from: http://math.hws.edu/graphicsbook/source/webgl/cube-camera.html

Dice roll sound roll1.wav sourced from: https://wavbvkery.com/dice-rolling-sound/

Raycasting logic and glb loader assisted by ChatGPT.

GLTF Loader: https://github.com/Twinklebear/webgpu-gltf, improved with chatgpt.

Origin jpg (free format) source: http://spiralgraphics.biz/ More: Https://blenderartists.org/t/is-spiral-graphics-genetica-dead/1446058

https://polyhaven.com/a/checkered_pavement_tiles

Music by Mykola Sosin from Pixabay

Characters used from great mixamo.com -✅What you can do You can use Mixamo characters and animations royalty-free in commercial, personal, or non‑profit projects (games, films, prints, etc.).You own your creations / how you use them.No requirement to credit Adobe / Mixamo (though allowed). -🚫What you cannot do You cannot redistribute or sell the raw Mixamo character or animation files “as is” (i.e. as standalone assets) to others.You can’t use Mixamo content to create a competing library of characters / animations (i.e. you can’t just package them and sell them to others). You can’t use Mixamo’s content (or outputs) to train AI / machine learning models.

Music used: BLACK FLY by Audionautix | http://audionautix.com Music promoted by https://www.free-stock-music.com Creative Commons Attribution-ShareAlike 3.0 Unported

Used free assets from great https://craftpix.net Magic icons : https://craftpix.net/freebies/free-rpg-splash-game-512x512-icons/

For Hang3d zombi template - objects are downloaded from: www.md2.sitters-electronics.nl Keep this "readme.md" file with files.

For background music in rpg template used: Music by Dvir Silverstone from Pixabay Sound Effect by Crunchpix Studio from Pixabay Music by Emmraan from Pixabay

'Ruined rock fence' (https://skfb.ly/6RLwN) by VladNeko is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

"fantasy rock" (https://skfb.ly/oHXAz) by duckcracker02 is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

"Fantasy Rock" (https://skfb.ly/oHZSq) by lalune is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

Invertory images https://djinnbestiary.itch.io/ancient-oddities-vol-1-13-free-potions

"Dancing girl" (https://skfb.ly/p7vNU) by planetrey.com is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

Skeletal system by: Aidan Sanderson - from blender addson blenderKit.

Title: Zombies Sound Pack - Author: artisticdude Source URL: https://opengameart.org/content/zombies-sound-pack License: CC0 1.0 Universal (Public Domain Dedication)

Folder './public/res/bvh/' Special thanks to the CMU Graphics Lab Motion Capture Database which provided the data http://mocap.cs.cmu.edu/

BSD 3-Clause License (from WebGPU Samples)
Full License Text

Visual Scripting with JS&NodeJS

Nikola — Thu, 18 Dec 2025 14:29:53 +0000

YT: https://www.youtube.com/watch?v=vT1zL5oNITY
Source : https://github.com/zlatnaspirala/matrix-engine-wgpu

FluxCodexVertex Web Editor 🚀 (since version 1.8.0)

EditorX has two main parts:

Frontend (./src/tools/editor)
Backend (./src/tools/editor/backend)

Before running anything, install dependencies with npm i:

in the root folder

and also inside ./src/tools/editor/backend

The backend is built using Node.js 🟢

General Features 🧩

Editor creates and manages files (Windows tested only)
Scene container added
SceneObject property container added
Assets toolbar added (bottom panel)
- Add GLB or OBJ files from the asset toolbox by selecting them
Top menu for adding primitives (Cube / Sphere) with or without physics ⚙️
Integrated Visual Scripting system 🧠

Visual Scripting – Implemented Features ✅

Add Math nodes, events / custom methods, variable popup, SceneObject access
Get SceneObject → set position → bind onTargetReach events
Custom func editor
Run the graph ▶️
Save graph
- Currently saved to LocalStorage
- For final builds, becomes a real JS object injected into the app flow.[NOT DONE] Now it is posible to hide editor on begin.
Export graph to JSON
Import graph from JSON

⚠️ Important Notes

Visual Scripting is only available when running the engine from source

(not from npm i matrix-engine-wgpu).

You must clone or download the engine source from the GitHub repository.

Instructions 📌

Run the editor with:

npm run editorx

from the engine root directory.
EditorX is an alias for FluxCodexVertex (needed three words to keep the name unique)
Run the scene by pressing F6 or by clicking Run in the left panel
If you delete all objects from the scene, you must refresh the page and add at least one object again
Before importing a graph, delete all nodes from the FluxCodexVertex graph
Saving is still based on LocalStorage
After deleting everything, click Save to store an empty [] array
All changes in graph must be saved manually/clicking for now 💾 (no autosave for graphs).

RPG in Javascript DeepWIP

Nikola — Mon, 27 Oct 2025 21:11:44 +0000

RPG is tutorial example for matrix-engine-wgpu.

Welcome to colaborate on github.com !

webGPU engine open source :
https://github.com/zlatnaspirala/matrix-engine-wgpu

Live links:
https://maximumroulette.com/apps/webgpu/examples.html

https://www.youtube.com/watch?v=_uu_EvxK8Vc&t=20s
https://www.youtube.com/watch?v=QFsR0u6x9qw
https://www.youtube.com/watch?v=UHsRXQEd698

Rocket Crafting Platform- One source all platforms

Nikola — Tue, 27 May 2025 12:10:39 +0000

Rocket Crafting Platform is separated on two main git projects, Rocket-Craft (Unreal Engine Projects) and RocketCraftingServer (Node.js project - account session).

One source all platforms
Project Slogan
If you dont wanna to build HTML5 or dedicated servers than you no need UE4 from source. You need to build unreal engine with websocket net driver activated for HTML5 building [html5 websocket networking - Plugin]. On web page you can't use options HOST. On web platform client is just a client you can't host [open port and listen] but you can connect to other clients or dedicated server also communicate with HTTP/HTTPS protocol rocketCraftingServer [node.js].

Github repo link: Rocket Craft This is client part based on UE4 engine.

Based on Unreal Motion Graphics to create UI elements and ue4 3d graphics multiplatform implementation. Best solution for multiplatform developing choose in almost any aspect.

Rocket-craft C++/Blueprints Features:
Account registration, verification, login , user data and other func. Done in Node.js project name rocketCraftingServer. Used http/s protocol for communication.
Handling JSON response/response with rocketCraftServer or any other.Used VAST plugin for handling JSON in blueprint.
Handling active server list also add your external ip to server list if you wanna your own host - You need to open port on router page if you wanna be public visible. For LAN no need to do this.

Nature Ue4 features:
Host game with from client. Client can be used like server listener (this is not case only for web because it is not possible).
Use dedicated server (i use it like master gameplay server with public access for Brm, Hange3d nightmaregame project) Hosted on cent os 8.3 with node http server. Real time multiplayer games must have dedicated server to make instan and easy access to global main playground.

Use Unreal engine to create classic 2d context applications. Similar to the standard web application. Rocket is most powerfull cross platform tool i need to use it. 4.24.3 version is most interest checkpoint for UE. Last version with only opengles 2.0 devices support (mobile). Also is version where we use new feature exstension HTML5 build. Explanation: with opengles 2.0 (also opengles 3) we can still build our application for old android 5/6/7/8... os. In other way 4.24.3 is one of the last releases. Future upgrade will be easy.

Ue4 Editor build from source to get power of dedicated server build options.

Upgraded SurvivalGame Zombies Shooter multiplayer from Tom Looman
- BarbarianRoadMashines [primary work-in-progress] own work
- ShooterGame from Ue4 c++ template
- FullSpectrum is empty basic usage for rocketCraftinServer (Login/Register)

SOURCE : https://github.com/RocketCraftingServer/rocket-craft

SERVER ACCOUNT SESSION PART
Github repo link Rocket Craft Server. Basic account session staff based on node.js and MongoDB. This repo is private you will need to join the team and participate to get your copy: https://github.com/orgs/RocketCraftingServer/teams/rocketcraftingteam Contact me for invitation.

Barbarian Road Mashines This is race game with zombies.

[ beta version downloads / proof of concept ]:

HTML5
http://brm.maximumroulette.com/
Windows 64
Windows 32
Windows dedicated server
Mac OS No build
Linux Dedicated server
Linux
LinuxAArch64
Android No build
iOS No build
SonyPS No build
XBox No build
BarbarianRoadMashines Beta Testing Video

HANG3D NIGHTMARE [Shooter]
In 'Hang3d Nightmare' fot web platform use only INSTANT PLAY options.

Multiplayer is currently supported by maximumroulette.com dedicated server [linux cent os 8.3] Server builded on windows host mashine using v15_clang-8.0.1-centos7.

No alt text provided for this image
Use INSTANT PLAY tab in main menu if you using web (browser) version.

No alt text provided for this image

Downloads :

opengles2
Live HTML5

opengles3
https://maximumroulette.com/apps/hang3d/

Windows 64bit
Windows 32bit
Windows dedicated
Linux dedicated
MACOS
iOS
ANDROID

Chrome Test first build [beta ver] video.

Use profiler fot tex LODS and setup max value 512 or 256. To make smaller pack of data.

Shoot the zombie (Survival)
Realistic rendering - Ue4 template

No alt text provided for this image

build target HTML5
emscripten 1.39.0
Max tex lod size 512
App size 197mb

Link : https://maximumroulette.com/apps/realistic-rendering/

FUTURE WAS HERE ALL THE TIME

It gives us power of rocket to build and pack app for Windows, MacOs, Linux, Android, iOS, xBox, Sony Playstation, web/html5 etc...

One source all platforms
Project Slogan
Help for c++ template projects
This is only for ue from source case (when you wanna dedicated server builds) in other way just use build project, for full rebuild use rebuild project.

The option you are referring to (Build -> Project Only -> Clean Only "ProjectName") is a Visual Studio option, not one that is exclusive to Unreal Engine 4. What actually happens when a Project Only Clean process is begun, is that Visual Studio not only cleans the Project, but it also checks to see if it is able to clean anything that the Project depends on. Since you are using a version of the Engine that is built from source code, Visual Studio includes that dependency in the Clean process, which ends up requiring a full build of the Engine. The same occurs if you attempt to rebuild the project only. If you wish to be able to perform a clean at only the project level, you would need to navigate to where your project is located in a Windows Explorer window. In the root project folder, delete the Binaries, Build, DerivedDataCache, and Intermediate folders. Right-click on the project's .uproject file and select the Generate Visual Studio project files option (this will recreate the Intermediate folder). Open the project solution in Visual Studio and Build the project (this will recreate the Binaries and Build folders). When the build completes in Visual Studio, double-click the project's .uproject file to open it in the Editor(this will recreate the DerivedDataCache folder).You should now have a "Clean" project without needing to rebuild the Engine. Source: https://answers.unrealengine.com/questions/100921/view.html?sort=oldest

Multiplayer dedicated server not active !
If you wanna support me for new VPS and domain you will be project sponsor
paypal zlatnaspirala@gmail.com

Matrix-roulette - Physics + Server game regime

Nikola — Wed, 23 Apr 2025 12:57:51 +0000

matrix-roulette 1.0.0

Prerequirement

You need Node.js and npm to be instaled.

npm install -g browserify

Install frontend deps in root foledr with:

npm i

Install backend deps in folder `./server`

npm i

Watch/build frontend (from root folder) with:

  npm run roulette

Build your Application (from root folder) script bundle with:

  npm run build.roulette

You need to run any web server.
And navigate to /projects/matrix-roulette/?server=manual

Matrix Roulette - Server regime

In projects\matrix-roulette Used Server Events tech.

New feature is ServerEvent tech.

Run matrix-roulette-server on localhost with:

npm run dev

Run matrix-roulette-server on public server with:

npm start

For production you need to change this part and put your own SSL domain name:
I use setup frendly with letsencrypt services.
Change path whatever be...

If you wanna server regime navigate to:
/projects/matrix-roulette/?server=true

Setup SSL for server part

if(URL_ARG.indexOf("localhost") !== -1) {
    console.log('Dev regime is active...');
    options = {
        key: fs.readFileSync(__dirname + "/self-cert/privatekey.pem"),
        cert: fs.readFileSync(__dirname + "/self-cert/certificate.pem")
    };
} else {
    options = {
        key: fs.readFileSync("/etc/letsencrypt/live/[YOR_OWN_DOMAIN_ENTER_HERE]/privkey.pem"),
        cert: fs.readFileSync("/etc/letsencrypt/live/[YOR_OWN_DOMAIN_ENTER_HERE]/fullchain.pem")
    };
}

File roulette\server\matrix-roulette-server.js is example for node.js webserver running stanalone with
roulette feature. If you already have your web server then you no need this file just import
roulette\server\core.js

For node.js looks like:

let facts = [];
const matrixRouletteCore = require("./core.js");
matrixRouletteCore.clients = [];
matrixRouletteCore.init();

hostingHTTP.get('/matrix-roulette-status', (request, response) => response.json({clients: matrixRouletteCore.clients.length}));

function eventsHandler(request, response, next) {
    const headers = {
        'Content-Type': 'text/event-stream',
        'Connection': 'keep-alive',
        'Cache-Control': 'no-cache'
    };
    response.writeHead(200, headers);
    const data = `data: ${JSON.stringify(facts)}\n\n`;
    response.write(data);
    const clientId = Date.now();
    const newClient = {id: clientId, response};
    matrixRouletteCore.clients.push(newClient);
    request.on('close', () => {
        console.log(`${clientId} Connection closed`);
        matrixRouletteCore.clients = matrixRouletteCore.clients.filter(client => client.id !== clientId);
    });
}

hostingHTTP.get('/matrix-roulette', eventsHandler);

Look like:

const events = new EventSource("https://maximumroulette.com/matrix-roulette");
events.onmessage = event => {
  console.log("MatrixRoulette:", event);
};

If you see in browser debuger logs msg:

 EventSource failed loading: GET "https://localhost:8080/matrix-roulette".

It means you dont have runned server part.

Url parameters:

 +-----------------------------------------------------------------------------------+
 |-----------------------------------------------------------------------------------+
 ||       URLParameter          value          Description                           |
 +-----------------------------------------------------------------------------------+
 |                                                                                   |
 |        ?server=              manual         Server is used for video chat etc not |
 |                                             gameplay results.Wheel view is called |
 |                                                              on SPIN procedure.   |
 |        ?server=              true           Server dictate results but no wheel   |
 |                                                                                   |
 |                                                                                   |
 |        &sounds=              true/false     Sounds are active only if url param   |
 |                                             is true.                              |
 |                                                                                   |
 |        &cameraSpeed=         Number         Best range values from 0.5 to 1       |
 |                                                                                   |
 |                                                                                   |
 +-----------------------------------------------------------------------------------+

Dev links looks like:

Notes

Used cannon.js integration for matrix-engine.

Video chat support (bonus feature [wip]):

(You need to run your own openvide/kurento server)

matrixEngine.Engine.activateNet2(undefined, {
  sessionName: "matrix-roulette",
  resolution: "240x160",
});

Table bet view and Wheel view

Demo from this repo:

https://maximumroulette.com/apps/matrix-engine-starter/projects/matrix-roulette/

Code:

https://github.com/zlatnaspirala/matrix-engine-starter

Engine source link:

https://github.com/zlatnaspirala/matrix-engine

Credits

https://www.wildtextures.com https://www.freesoundtrackmusic.com/guest/demolib CenterRoll downloaded from http://www.blendswap.com/blends/view/72520 and taken only one part. In readme.md you have licence just leave it to make legal use. For example copy intro same folder like index.html file.

Join chat on slack

(GamePlay platform Rock)[https://join.slack.com/t/gameplay-rock/shared_invite/zt-ffcgl80x-CYu4s~YC0bD9Od9_bkqmzw]

Matrix-engine 2.x.x

Nikola — Fri, 06 Dec 2024 21:49:18 +0000

Detect groups from 3d obj file format.Then add collider box
on every mesh with name sufix or prefix Cube.COLLIDER.1.
This is update for matrix-engine obj loader.

See YT video:
https://www.youtube.com/watch?v=_ISsjt0GXww&t=808s

*Project source: *
https://github.com/zlatnaspirala/matrix-engine-starter

Update Details :

[2.1.6] Added map creator from starter project.

[2.1.1] Just added example how to load maps and detect groups vertices.

[2.1.0] Added MapCreator web tools
 New export for npm pack `meMapLoader`
 Usage:
Automatic load on refresh me app. MapCreator make saves on every new field.
You need just to refresh page.


    if (localStorage.getItem('map') != null) {
        var t = localStorage.getItem('map');
        t = JSON.parse(t)
        meMapLoader.load(t, physics);
    } else {
        meMapLoader.load(map, physics);
    }



If you wanna just always load map from disk/file then use:


import {map} from "../maps/map2";

...

meMapLoader.load(map, physics);



To make map goto `public\tools\map-creator.html`


[2.1.4] draObj DRAW



object.instancedDraws.overrideDrawArraysInstance(object);

objObject.instancedDraws = {
  numberOfInstance: 10,
  array_of_local_offset: [0, 0, 0],
  overrideDrawArraysInstance: function (object_) {}
};



[2.1.3] Prevent error [render file]



else if(local.physics.currentBody.shapeOrientations.length > 1) {
                    // Check
                    if (local.subObjs) for(var x = 0;x < local.subObjs.length;x++) {



[2.1.2]You can scale mesh general with:


App.scene.armor.mesh.setScale(2);



Or by axis:



App.scene.armor.mesh.setScale({x: 1, y: 2, z: 2});



[2.1.1] testTrimesh added , visual OK , physics need more updated.
Cannonjs collision not work for this type of custom geo object...



world.Add('generatorLightTex', 1, 'floorAngle', tex, {
  radius: 1,
  custom_type: 'testTrimesh',
  custom_geometry: new CANNON.Trimesh(vertices, indices)
});



[2.1.0] Much better physics for cube
Line:



var AXIS = vec3.fromValues(-parseFloat(object.rotation.axisSystem[0].x.toFixed(2)), parseFloat(object.rotation.axisSystem[0].z.toFixed(2)), parseFloat(object.rotation.axisSystem[0].y.toFixed(2)));



[2.0.38] Full custom geometry inject cannonjs shape object for
for CANNON.ConvexPolyhedron.
Example of usage:



world.Add('generatorLightTex', 1, 'outsideBox2', tex, {
  radius: 1,
  custom_type: 'testConvex',
  custom_geometry: createTetra()
});



[2.0.34] New App flag: App.printDevicesInfo: false

[2.0.31] Simplify `SET_STREAM` for ACCESS CAMERA

[2.0.30]
For FirstPersonController added move in left or right by side...
UPDATE IN setCamera func:


// For FirstPersonController
camera.setCamera = function (object) {
  if (keyboardPress.getKeyStatus(65) || App.camera.leftEdge == true) {
    /* A */
    camera.yawRate = App.camera.yawRate;
    if (App.camera.leftEdge == true) {
      camera.yawRate = App.camera.yawRateOnEdge;
    }
  } else if (keyboardPress.getKeyStatus(68) || App.camera.rightEdge == true) {
    /* D */
    camera.yawRate = -App.camera.yawRate;
    if (App.camera.rightEdge == true) {
      camera.yawRate = -App.camera.yawRateOnEdge;
    }
  } else if (keyboardPress.getKeyStatus(32)) {
    /* Right Key or SPACE */
    if (this.virtualJumpActive != true) {
      this.virtualJumpActive = true;
    }
  }

  if (keyboardPress.getKeyStatus(37)) {
    /* Left Key  || App.camera.leftEdge == true*/
    camera.moveLeft = true;
    camera.speed = App.camera.speedAmp;
  } else if (keyboardPress.getKeyStatus(39)) {
    /* Right Key || App.camera.rightEdge == true */
    camera.moveRight = true;
    camera.speed = App.camera.speedAmp;
  } else if (keyboardPress.getKeyStatus(38) || keyboardPress.getKeyStatus(87)) {
    /* Up Key or W */
    camera.speed = App.camera.speedAmp;
  } else if (keyboardPress.getKeyStatus(40) || keyboardPress.getKeyStatus(83)) {
    /* Down Key or S */
    camera.speed = -App.camera.speedAmp;
  } else {
    // if(camera.preventSpeedZero == false) camera.speed = 0;
  }

  /* Calculate yaw, pitch and roll(x,y,z) */
  if (camera.speed != 0 && camera.moveLeft == false && camera.moveRight == false) {
    camera.xPos -= Math.sin(degToRad(camera.yaw)) * camera.speed;
    if (camera.fly == true) {
      // Fly regime
      camera.yPos += Math.sin(degToRad(camera.pitch)) * camera.speed;
    } else {
      // usually for fpshooter regime
      // camera.yPos = this.virtualJumpY;
      // camera.yPos = 0;
      // leave it zero by default lets dirigent from top
    }
    camera.zPos -= Math.cos(degToRad(camera.yaw)) * camera.speed;
  } else if (camera.moveLeft == true) {
    // by side move left
    camera.xPos -= Math.sin(degToRad(camera.yaw + 90)) * camera.speed;
    camera.zPos -= Math.cos(degToRad(camera.yaw + 90)) * camera.speed;
  } else if (camera.moveRight == true) {
    // by side move rigth
    camera.xPos -= Math.sin(degToRad(camera.yaw - 90)) * camera.speed;
    camera.zPos -= Math.cos(degToRad(camera.yaw - 90)) * camera.speed;
  }

  camera.yaw += camera.yawRate * camera.yawAmp;
  camera.pitch += camera.pitchRate * camera.pitchAmp;

  mat4.rotate(object.mvMatrix, object.mvMatrix, degToRad(-camera.pitch), [1, 0, 0]);
  mat4.rotate(object.mvMatrix, object.mvMatrix, degToRad(-camera.yaw), [0, 1, 0]);
  mat4.translate(object.mvMatrix, object.mvMatrix, [-camera.xPos, -camera.yPos, -camera.zPos]);

  camera.yawRate = 0;
  camera.pitchRate = 0;
  // update
  camera.moveLeft = false;
  camera.moveRight = false;
  if (camera.preventSpeedZero == false) camera.speed = 0;
};


[2.0.27] Added for CustomGeometry object entity:


customObject.net = {
  enabled: false
};


[2.0.26] FIX CHECK NET ACTIVE FLAG FOR SCALE PROCEDURE

[2.0.25] FIX FOR MOBILE RENDER MATERIAL/ TEXTURE - Bug with white surface


// world.disableUnusedAttr(world.GL.gl, localLooper);
world.disableUnusedAttr(world.GL.gl, 4);


[2.0.24] New prop in App.camera (manifest)

    `App.camera.yawRateOnEdge`


camera.setCamera = function(object) {
    if(keyboardPress.getKeyStatus(37) || keyboardPress.getKeyStatus(65) || App.camera.leftEdge == true) {
        /* Left Key  or A */
        camera.yawRate = App.camera.yawRate;
        if(App.camera.leftEdge == true) {
            camera.yawRate = App.camera.yawRateOnEdge;
        }
    } else if(keyboardPress.getKeyStatus(39) || keyboardPress.getKeyStatus(68) || App.camera.rightEdge == true) {
        /* Right Key or D */
        camera.yawRate = -App.camera.yawRate;
        if(App.camera.rightEdge == true) {
            camera.yawRate = -App.camera.yawRateOnEdge;
        }
    }


[2.0.23] New line in EVENTS About WASD FPController
Reason - adaptation for mobile FPController
`   if (camera.preventSpeedZero == false) camera.speed = 0;`

js
/* Up Key or W */
if (keyboardPress.getKeyStatus(38) || keyboardPress.getKeyStatus(87)) {
  camera.speed = App.camera.speedAmp;
} else if (keyboardPress.getKeyStatus(40) || keyboardPress.getKeyStatus(83)) {
  /* Down Key or S */
  camera.speed = -App.camera.speedAmp;
} else {
  if (camera.preventSpeedZero == false) camera.speed = 0;
}


[2.0.17 version Vampir]
Objective

- Deplace old networking and put kurento/OV web client code.
- Mobile device ready
- GUI Editor (win) basic version ready

[2.0.17] New event from core net updater.
`dispatchEvent('network-data', {detail: e.data})`
For better customisation.

js
update(e) {
            e.data = JSON.parse(e.data);
            dispatchEvent('network-data', {detail: e.data})
            // console.log('INFO UPDATE', e);
            if(e.data.netPos) {
                if(App.scene[e.data.netObjId]) {
                    if(e.data.netPos.x) App.scene[e.data.netObjId].position.SetX(e.data.netPos.x, 'noemit');
                    if(e.data.netPos.y) App.scene[e.data.netObjId].position.SetY(e.data.netPos.y, 'noemit');
                    if(e.data.netPos.z) App.scene[e.data.netObjId].position.SetZ(e.data.netPos.z, 'noemit');
                }
            } else if(e.data.netRot) {


[2.0.16] Added to the Base Class Position `xNetOffset yNetOffset zNetOffset`
Nice for calibration.
[2.0.14] For obj sequency animation `objObject.scaleAll`



**New updates for Matrix-Roulette & hang3d FPS Basic template:**

https://maximumroulette.com/apps/matrix-engine-starter/projects/matrix-slot/

https://maximumroulette.com/apps/matrix-engine-starter/projects/hang3d/

New updates for Matrix-Roulette & hang3d FPS Basic template:

https://maximumroulette.com/apps/matrix-engine-starter/projects/matrix-slot/

https://maximumroulette.com/apps/matrix-engine-starter/projects/hang3d/

Thanks for any support ,
Welcome for collaboration.

Magic Three Project

Nikola — Fri, 13 Sep 2024 11:26:21 +0000

MagicThree

Template/Demo FPS SHOOTER HANG3d reborn

Using power of Three.js, ammo.js. MagicThree is nice class sorted top level of threejs and ammo.js lib. Magic-three use the new version threejs 149. [JS type of script module variant with last version of three.module.js]

Extreme interest facts:

No spending times on build, magic-three use type module in browser.
Using themes without scss - also no build.
Combination Three.js vs ammo.js is last physics solution from three.js project.
Using webRTC for networking/multiplayer brings video chat/stream in same time.

Description

Magic-Three is First Person Oriented but can be used for any other case of app flow.

No build needed, just copy/paste for both dev and prod mode.It is the module type of script. Nice fit with npm modules also works direct in browser.
Custom magic Map loader. All 3d objects comes from map.
No package.json [if this repo become npm package then will be back] In folder ./backend we have package.json to import deps (npm i) for server part. Run in folder ./backend cmd: npm i and npm run magic for host and broadcaster.
Must be fully PWA [cache, server compression, image format webp etc...]
MultiLang support [async load JSON MultiLang file avoid loading all multiLangs]

*Networking *

based on webRtc multiRTC3 library. Signaling server, video chat or stream to texture.
Basic example: FPS Player controller [bullet , collision]
Frontend -> Three.js, Ammo.js
Backend -> Node.js, MultiRTC3
Main gameplay template FPShoter: Hang3d Reborn

import Application from './Application.js';
import config from './config.js';
import myGamePlayMagicMap from './public/assets/maps/free-for-all.js';

let App = new Application(config, myGamePlayMagicMap);

Client Config

const config = {
  cache: false,
  stats: false,
  camera: {
    fov: 60,
    near: 0.1,
    far: 2000,
    order: 'YXZ'
  },
  map: {
    sky: {
      enabled: true
    },
    background: 0xbfd1e5,
    floorWidth: 200,
    floorHeight: 200,
    gravityConstant: 17.5,
    directionLight: {
      color: 0xffffff,
      intensity: 5
    },
    ambientLight: {
      color:  "rgb(250,250,250)"
    },
    meshShadows: {
      castShadow: false,
      receiveShadow: false,
      computeVertexNormals: false
    },
    blockingVolumes: {
      visible: false
    }
  },
  playerController: {
    type: 'FPS', // FPS | orbit
    movementType: 'velocity', // velocity | kinematic
    cameraInitPosition: {x: 0, y: 0, z: -80},
    movementSpeed : {
      forward: 8, backward: 6,
      left: 8, right: 8,
      jump : 11, jumpLimitInterval: 2000
    },
    physicsBody : {
      visible: false,
      radius: 2,
      mass: 10
    },
    bullet: {
      mass: 2,
      radius: 0.1,
      power: 100,
      bulletLiveTime: 1000
    }
  },
  networking: {
    broadcasterPort: 9001,
    broadcasterInit: true,
    // domain: "maximumroulette.com",
    domain: "localhost",
    networkDeepLogs: true,
    /**
     * masterServerKey is channel access id used to connect
     * endpoint p2p. Multimedia server channel/multiRTC3 used.
     */
    masterServerKey: "magic.three.main.channel",
    runBroadcasterOnInt: true,
    broadcasterPort: 9001, // 9010,
    broadcastAutoConnect: true,
    broadcasterSessionDefaults: {
      sessionAudio: true,
      sessionVideo: false,
      sessionData: true,
      enableFileSharing: true,
    },
    stunList: [
      "stun:stun.l.google.com:19302",
      "stun:stun1.l.google.com:19302",
      "stun:stun.l.google.com:19302?transport=udp",
    ],
    getBroadcastSockRoute() {
      return getProtocolFromAddressBar() + getDomain()
        + ":" + this.broadcasterPort + "/";
    }
  }
}

Blocking Volumes implemented for map - map.objMtlsArray : Nice for walls and env staff. Forced simple cube physics body with mass = 0.

Frontend
Frontend done in script type "module" ant it's so powerfull. No build time lost and you can use direct import/export syntax.

List of top level *CustomEvents *:

"config.map.blockingVolumes.visible" - if QueryString.dev == "true" (URL param ?dev=true)
"onMyDamage"
"onDie"
"onFire"
"hide-blocker"
"multi-lang-ready"
"addToOnlyIntersects"
Explanation in next update...

Initially video stream is deactivated.
Manage this from config :

  broadcasterSessionDefaults: {
     sessionAudio: false,     // IMPORTANT
     sessionVideo: false,     // IMPORTANT
     sessionData: true,       // IMPORTANT
     enableFileSharing: true,

Backend part based on multiRTC3.
For now only signaling pricipe is implemented. If you wanna start host server and broadcaster[webRtc] then:

cd backend
npm i
npm run magic

Setup in backend/magic-three.server.js your own domain: If you put "*" in public server someone can use your web app cross domain. This will be automated in future.

// res.setHeader('Access-Control-Allow-Origin', '*');
// res.setHeader('Access-Control-Allow-Origin', 'https://localhost:9001');
res.setHeader('Access-Control-Allow-Origin', 'https://maximumroulette:9001');

I force default browser port 443! To make all works fine (CORS problems). For localhost cert also better https. For public server you need classic ssl setup.

Navigate (most simple way to fix localhost cert problem is to click advanced -> Proceed to localhost (unsafe)) https://localhost/public/module.html

If still networking not work then goto: https://localhost:9001/ click advanced -> Proceed to localhost (unsafe)

Finally when you see html text:

********************************************************** 
* MatrixNet         version: 0.2.0                       * 
* Type of network - BROADCASTER                          * 
* Source: https://github.com/zlatnaspirala/matrix-engine * 
**********************************************************

Server is allowed for localhost.

After all goto https://localhost/public/module.html Must work now. You can easy manage paths. Default is https protocol and also recommended in multiplayer mode.

Dev stage
Easy running also on VPS:

https://maximumroulette.com/apps/magic/public/module.html
Features
Dynamic Cache/Worker, add to home screen. [pwa]✅
Graphics/Physics scene ready.✅
Add 3d object loaders [fbx, collada].✅
Script compression bash script.✅
Basic FPS controller✅
Adding map pack principle.✅
Net Players.✅
Tested on android12 devices.✅
Real Day time - sky(shaders) done + wip envelop shaders adaptaion lights.⏳
Add account options REST API [rocketCraftingServer]. singin , leaderboard. Only client part no need backend i already have running rcs on maximumroulette.com. ⏳
Net Shared objects +.⏳
Neutral enemy [bots] +.⏳
Map [] ⏳
Working example:

let map = {
  breakable: [
    {
      name: "myBreakAbleBox1",
      mass: 100,
      scale: {x: 2, y: 5, z: 2},
      pos: {x: 3, y: 1, z: 1},
      quat: [0, 0, 0, 1],
      matFlag: 'Black' // new
    }
  ],
  boxs: [
    {
      name: "myMidBox1",
      net: true,
      mass: 10,
      scale: {x: 5, y: 5, z: 5},
      pos: {x: 0, y: 1, z: 20},
      quat: [0, 0, 0, 1],
      matFlag: 'Bronze'
    }
  ],
  tubes: [
    {
      name: "myTube1",
      mass: 1000,
      scale: [5, 5, 20, 32],
      pos: {x: -20, y: 1, z: -80},
      quat: [0, 0, 0, 1]
    },
    {
      name: "myTube2",
      mass: 1000,
      scale: [5, 5, 20, 32],
      pos: {x: 20, y: 1, z: -80},
      quat: [0, 0, 0, 1]
    }
  ],
  torus: [
    {
      name: "myTorus1",
      mass: 1000,
      scale: [10, 3, 16, 100],
      pos: {x: 30, y: 1, z: 1},
      quat: [0, 0, 0, 1]
    }
  ],
  pointLights: [
    {
      name: 'l1',
      color: 0xff0040,
      radius: 2,
      intensity: 150,
      pos: {x: 30, y: 12, z: 10},
      helper: true
    },
    {
      name: 'l2',
      color: 0xeeee40,
      radius: 2,
      intensity: 510,
      pos: {x: -30, y: 12, z: 10},
      helper: true
    }
  ],
  objMtls: [
    {
      path: 'assets/objects/env/wall1.obj',
      name: 'myWall_1',
      pos: {x:-100, y:-0.5, z:-42}
    }
  ],
  objMtlsArray: [
    {
      path: 'assets/objects/env/wall1.obj',
      name: 'myWall',
      instances: [
        {pos: {x: -100, y: -0.5, z: -62}},
        {
          pos: {x: 52.8, y: -0.5, z: 86.5},
          rot: {x: 0, y: 90, z: 0}
        }
      ]
    }
  ]
};

export default map;

*More info about PWA *⏳

I have performance stable at ~90% value. I load extra fbx animation 22Mb to test little more better. Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. I use freeware GIMP he had a webp format support for exports.

*Lighthouse screenshot: *

No need for PWA at dev/localhost work. In final time you can use .prod.js compressed files to make full optimised app with better preformance.

MultiLang [strings]
Only on startup for now:

addEventListener('multi-lang-ready', () => {
  byId('header.title').innerHTML = t('title');
  byId('player.munition.label').innerHTML = t('munition');
  ...
});

*Networking [WEBRTC/IOSOCKET] *💫

I use classic broadcester from matrix-engine-server/visual ts [multiRTC3]
Every player send own net.connection.userid.
Type of gameObject boxs map loader have support for net emit. ⏳
Explanation of FPS used concept
Local Player have no any visual objs , only main three.js camera follow player position and look direction.
Net Player [remote player] have visualization with FBX animation. Net rotated only for Y axis for now.
Local Player have physics body ball who is moved from physics world on that way we got all collision problem fixed.
Net Player have no physics body also no any collision objs i use raycaster from three.js in net player case On that way i got optimised and precise situation with netplayer handling.

Credits && Licence
https://threejs.org/
https://github.com/kripken/ammo.js/
In Assets i use great https://mixamo.com/
Mobile controller used from https://github.com/KEY4d-LAB/crypto-art-town
Networking based on https://github.com/muaz-khan/RTCMultiConnection
Font wargames used from https://www.dafont.com/wargames.font
Audios , Great staff at https://gamesounds.xyz/?dir=OpenBundle https://gamesounds.xyz/OpenBundle/LICENSE.txt
More
Most effect dimanic thermes with native css and control from javascript
Using css vars from vars.css.
**
Script:**

import {setCssVar} from "./utility.js"

export class MagicTheme {

    Light() {
        console.log('THEME LIGHT SET')
        setCssVar("--bg", "#6b6b6b33")
        setCssVar("--text", "hsl(1, 20%, 100%)")
        setCssVar("--text2", "rgb(0, 0, 0)")
        setCssVar("--err", "orangered")
        setCssVar("--bgBlocker", "rgba(150, 150, 150, 0.9)")
        setCssVar("--bgTransparent1", "rgba(0, 0, 0, 0.1)")
        setCssVar("--LG1", "linear-gradient(87deg,#ff6f00,#b5830f,#df494b,#fff,#fff,#e90b0f)")
        setCssVar("--mainFont", "Accuratist")
    }

    Dark() {
        setCssVar("--bg", "#0d2d4e")
        setCssVar("--text", "hsl(0, 0%, 100%)")
        setCssVar("--text2", "rgb(255, 253, 192)")
        setCssVar("--err", "red")
        setCssVar("--bgBlocker", "rgba(10, 10, 10, 0.9)")
        setCssVar("--bgTransparent1", "rgba(0, 0, 0, 0.1)")
        setCssVar("--LG1", "linear-gradient(87deg,#00b3ff,#510fb5,#49cbdf,#000000,#000000,#1d0be9)")
        setCssVar("--mainFont", "stormfaze")
    }

    Green() {
        setCssVar("--bg", "#000")
        setCssVar("--text", "hsl(107.39deg 82.83% 47.02%)")
        setCssVar("--text2", "rgb(42 199 49)")
        setCssVar("--err", "red")
        setCssVar("--bgBlocker", "rgba(10, 10, 10, 0.9)")
        setCssVar("--bgTransparent1", "rgba(0, 0, 0, 0.1)")
        setCssVar("--LG1", "linear-gradient(87deg,#10f30f,#fff,#10f30f,#000000,#10f30f,#000000)")
        setCssVar("--mainFont", "WARGAMES")
    }

    constructor() {
        addEventListener("theme", (e) => {
            this[e.detail]();
        })
    }

}

Implementing account for GamePlay platform based on RocketCraaftingServer

 fetch("http://maximumroulette.com/rocket/login", {
                  "headers": {
                    "accept": "application/json",
                    "accept-language": "en-US,en;q=0.9,ru;q=0.8",
                    "cache-control": "no-cache",
                    "content-type": "application/json",
                    "pragma": "no-cache"
                  },
                  "referrer": "http://maximumroulette.com/apps/my-admin/",
                  "referrerPolicy": "strict-origin-when-cross-origin",
                  "body": "{\"emailField\":\"zlatnaspirala@gmail.com\",
                    \"passwordField\":\"123123123\"}",
                  "method": "POST",
                  "mode": "cors",
                  "credentials": "omit"
                });

Problem with > 100Mb file size upload on github use this link for fbx animations
(prepared in blender) you can open it in any 3d editor: https://drive.google.com/drive/folders/194gsNMBvljJgK_2nyM4paA-veBZl8_Tf?usp=sharing

Update deps

Video chat with Matrix-engine [standalone] raw yt video

Nikola — Wed, 27 Sep 2023 17:11:13 +0000

TY raw implementation

Source code of example:

/**
 * @Author Nikola Lukic
 * @Description Matrix Engine Api Example.
 */

import App from "../program/manifest";
import * as matrixEngine from "../index.js";
let VT = matrixEngine.Engine.VT;

export var runThis = world => {
  App.camera.SceneController = true;

  canvas.addEventListener('mousedown', (ev) => {
    matrixEngine.raycaster.checkingProcedure(ev);
  });

  window.addEventListener('ray.hit.event', (ev) => {
    console.log("You shoot the object! Nice!", ev)
    if(ev.detail.hitObject.physics.enabled == true) {
      ev.detail.hitObject.physics.currentBody.force.set(0, 0, 1000)
    }
  });

  var tex = {
    source: ["res/images/complex_texture_1/diffuse.png"],
    mix_operation: "multiply", // ENUM : multiply , divide ,
  };

  let gravityVector = [0, 0, -9.82];
  let physics = world.loadPhysics(gravityVector);
  // Add ground
  physics.addGround(App, world, tex);
  const objGenerator = (meObj) => {
    var b2 = new CANNON.Body({
      mass: 1,
      linearDamping: 0.01,
      position: new CANNON.Vec3(0, -14.5, 15),
      shape: new CANNON.Box(new CANNON.Vec3(3, 3, 3))
    });
    physics.world.addBody(b2);
    meObj.physics.currentBody = b2;
    meObj.physics.enabled = true;
  }
  // objGenerator(1)

  matrixEngine.Engine.activateNet();
  // let ENUMERATORS = matrixEngine.utility.ENUMERATORS;
  addEventListener('stream-loaded', (e) => {
    var _ = document.querySelectorAll('.media-box')
    var name = "videochat-" + e.detail.data.userId;
    _.forEach((i) => {
      // App.network.connection.userid  REPRESENT LOCAL STREAM 
      if(e.detail.data.userId != App.network.connection.userid) {
        // This is video element!
        world.Add("cubeLightTex", 3, name, tex);
        App.scene[name].position.x = 0;
        App.scene[name].position.z = -20;
        // App.scene[name].rotx = 45
        // App.scene[name].rotation.rotz = -90
        App.scene[name].LightsData.ambientLight.set(1, 1, 1);
        App.scene[name].net.enable = true;
        App.scene[name].net.activate();
        App.scene[name].streamTextures = matrixEngine.Engine.DOM_VT(i.children[1])
        objGenerator(App.scene[name])

        App.CUSTOM_TIMER = setInterval(() => {
          try {
            if(typeof App.scene[name] !== 'undefined' && typeof App.scene[name].geometry !== 'undefined') {
              App.scene[name].geometry.texCoordsPoints.front.right_top.x += 0.001;
              App.scene[name].geometry.texCoordsPoints.front.left_bottom.x += 0.001;
              App.scene[name].geometry.texCoordsPoints.front.left_top.x += 0.001;
              App.scene[name].geometry.texCoordsPoints.front.right_bottom.x += 0.001;
            } else {
              clearInterval(App.CUSTOM_TIMER)
              App.CUSTOM_TIMER = null;
            }
          } catch(err) {
            clearInterval(App.CUSTOM_TIMER)
            App.CUSTOM_TIMER = null;
          }
        }, 1);

        addEventListener('net.remove-user', (event) => {
          var n = "videochat-" + event.detail.data.userid;
          if(typeof App.scene[n] !== 'undefinde' &&
            typeof App.scene[n].CUSTOM_FLAG_PREVENT_DBCALL === 'undefined') {
            App.scene[n].CUSTOM_FLAG_PREVENT_DBCALL = true;
            App.scene[n].selfDestroy(1)
          }
        })
      } else {
        // own stream 
        function onLoadObj(meshes) {
          App.meshes = meshes;
          matrixEngine.objLoader.initMeshBuffers(world.GL.gl, App.meshes.TV);
          setTimeout(function() {
            world.Add("obj", 1, "TV", tex, App.meshes.TV);
            App.scene.TV.position.setPosition(-9, 4, -15)
            App.scene.TV.rotation.rotateY(90);
            App.scene.TV.LightsData.ambientLight.set(1, 1, 1);
            App.scene.TV.streamTextures = new matrixEngine.Engine.DOM_VT(i.children[1]);
          }, 1000)
        }
        matrixEngine.objLoader.downloadMeshes({TV: "res/3d-objects/balltest2.obj"}, onLoadObj);
      }
    })
  })

  world.Add("cubeLightTex", 3, "outsideBox2", tex);

  App.scene.outsideBox2.position.x = 0;
  App.scene.outsideBox2.position.y = 2;
  App.scene.outsideBox2.position.z = -24;
  App.scene.outsideBox2.rotation.rotationSpeed.y = 20
  App.scene.outsideBox2.rotation.rotx = 45
  App.scene.outsideBox2.streamTextures = new VT(
    "res/video-texture/me.mkv"
  );

  App.scene.outsideBox2.glBlend.blendEnabled = true;
  App.scene.outsideBox2.blendParamSrc = matrixEngine.utility.ENUMERATORS.glBlend.param[6];
  App.scene.outsideBox2.blendParamDest = matrixEngine.utility.ENUMERATORS.glBlend.param[6];

}

*DEMO: *
MatrixEngine video chat

Matrix-engine [1.8.4]

Nikola — Fri, 28 Oct 2022 17:28:39 +0000

About Matrix Engine project
Name: MATRIX-ENGINE 1.8.1

STATUS

[Integrated PWA addToHomePage/cache/] ✔
[Integrated raycast (hit trigger detect), bvh animation] ✔
[Basic Physics implementation based on cannon.js] ✔
[FirstPersonController/SceneController Drag and navigation scene] ✔
[Shadows vs lights (GLSL)] ✔ *Description *ℹ This is small but inspiring project. The benefits of this project is offering an overview of the entire application logic, easy native implementations (hybrid app), object structural. Thanks to Mr.Keestu i use (gl-program-structure) new version of glmatrix (2.0). Push&Pop matrix just like in opengles 1.1. Also can be downgraded to openGLES 1.1. webGL Lightweight library based on glmatrix engine. For multiplayer used webRTC done with io socket. Physics done with last version of cannon.js.

*Limitation *⚠
Basic implementation for physics (Cube, Sphere)
Raycast not work after walk behind the object in first person mode
Only static object cast spot light in right way for now.
Need general more improvement on GLSL part.
Next Features 🔜
General improvements in Lights section. Shaders must be improved based on work Links -> https://webglfundamentals.org/webgl/lessons/
For npm users recommended
Use starter project: https://github.com/zlatnaspirala/matrix-engine-starter

with command:

npm i npm run build.all

Project template in matrix-engine-starter

Slot Mashine https://maximumroulette.com/apps/matrix-engine-starter/projects/matrix-slot/index.html
Live Demos
https://maximumroulette.com/apps/matrix-engine/examples-build.html

https://maximumroulette.com/apps/matrix-engine/app-build.html

How to use it from npm services [codepen examples]
[1.7.9] Lights - Who to use matrix-engine on codepen:

https://codepen.io/zlatnaspirala/full/OJZXMWR

BHV Pseudo Skeletal animation:

https://codepen.io/zlatnaspirala/full/OJQdGVM

Physics (cannon.js)

https://codepen.io/zlatnaspirala/pen/rNvLGxE?editors=0010

Install dependencies
Matrix engine keep minimum dependency.

uglify-js, minify
browserify, watchify
npm run install.dep npm i
@note: For windows users maybe you will need to add browserify to the env PATH if you got errors on commands npm run build.*.

Help for localhost dev stage
Build Application bundle script
From [1.8.0] you can use build for develop with watch task:

npm run examples
npm run app
@note: If you use unsecured http protocol no build needed at all just navigate to the html file who loade script with type=module. No need for this any more but you can use it.

For production/public server you will use npm run build.XXX commands. and then upload project to the usually /var/www/html/.

app-build.html , examples-build.html loads compiled javascript type text/javascript.

Build entry App.js

npm run build.app
Now navigate to the app-build.html page.

Build entry App-Examples.js
npm run build.examples
Now navigate to the examples-build.html page.

Build just library
npm run build.lib
Build with uglify

build.app.ugly;

Build ALL

npm run build.all;

After all for production is recommended to use compressed script.

Production Final (bash):
./compress
Switch example with url params
Usefull also for production for switching whole pages/apps. https://localhost/matrix-engine/query.html?u=adding_color_cube

https://localhost/matrix-engine/query-build.html?u=adding_color_cube

Code access:

const QueryString = matrixEngine.utility.QueryString;
Take a look at query-build.html

List of examples:
Adding color cube
Adding color pyramyde
Adding color square
Adding tex square with raycast
Adding color triangle
Adding geometry
Adding multi (compose) textures
Adding square texture
Blending
Audion amnipulation
Camera texture (stream texture)
Cube
Cube Geometry
Cube Light & texture
Cube light dynamic
Custom texture
First Person controller
Load obj files
Object animation -morh sequence
Object animation mesh indices calculation
JS1Kilo examples implementation
Porting 2D canvas (Active textures)
Sphere geometry
Texture uv manipulation
Videos textures
Physics Cube with force on raycast trigger
Physics Sphere
BVH loader, animation play
Load obj sequences

Features description
Camera config
In ./program/manifest.js. Access is App.camera. Note: One of params FirstPersonController or SceneController must be false.

FirstPersonController is classic first person view with movement WASD and mouse look.
SceneController use direct input WASD. To make camera angle view change press shift to enable camera angle. Middle mouse button will enable drag scene to left/right/top/down. Mouse middle wheel change work only when shift is pressed.

camera: {
viewAngle: 45,
nearViewpoint: 0.1,
farViewpoint: 1000,
edgeMarginValue: 100,
FirstPersonController: false,
SceneController: false,
sceneControllerDragAmp: 0.1,
sceneControllerDragAmp: 0.1,
speedAmp: 0.5,
sceneControllerEdgeCameraYawRate: 3,
sceneControllerWASDKeysAmp: 0.1
},
Light And Shadows [1.7.6]
activateShadows works only for cube for now.

 world.Add("cubeLightTex", 1, "myCube4", textuteImageSamplers);
  App.scene.myCube4.activateShadows();
  App.scene.myCube4.shadows.activeUpdate();
  App.scene.myCube4.shadows.animatePositionY();

If you wanna color vertex but with direction and ambient light then:

// Simple direction light
world.Add("cubeLightTex", 1, "myCube7", textuteImageSamplersTest);
App.scene.myCube7.position.setPosition(3,3,-11);
App.scene.myCube7.geometry.colorData.SetGreenForAll(0.5)
App.scene.myCube7.geometry.colorData.SetRedForAll(0.5)
App.scene.myCube7.geometry.colorData.SetBlueForAll(0.5)
App.scene.myCube7.deactivateTex();

Make square pattern


  // Custom generic textures. Micro Drawing.
  // Example for arg shema square for now only.
  var options = {
    squareShema: [4,4],
    pixels: new Uint8Array(4 * 4 * 4),
    style: {
      type: 'chessboard',
      color1: 0,
      color2: 255
    }
  };

  App.scene.myCube9.textures.push(
    App.scene.myCube9.createPixelsTex(options)
  );

Physics
Physics based on cannon.js

Support list : 😇

cube
sphere

Example with physics and raycast hit detect:

 App.camera.SceneController = true;

  canvas.addEventListener('mousedown', (ev) => {
    matrixEngine.raycaster.checkingProcedure(ev);
  });

  window.addEventListener('ray.hit.event', (ev) => {
    console.log("You shoot the object! Nice!", ev)

    /**
     * Physics force apply
     */
     if (ev.detail.hitObject.physics.enabled == true) {
      ev.detail.hitObject.physics.currentBody.force.set(0,0,1000)
     }
  });

  var tex = {
    source: ["res/images/complex_texture_1/diffuse.png"],
    mix_operation: "multiply",
  };

  // Load Physics world!
  let gravityVector = [0, 0, -9.82];
  let physics = world.loadPhysics(gravityVector);
  // Add ground
  physics.addGround(App, world, tex);
  world.Add("cubeLightTex", 1, "CUBE", tex);
  var b = new CANNON.Body({
    mass: 5,
    position: new CANNON.Vec3(0, -15, 2),
    shape: new CANNON.Box(new CANNON.Vec3(1, 1, 1))
  });
  physics.world.addBody(b);
  // Physics
  App.scene.CUBE.physics.currentBody = b;
  App.scene.CUBE.physics.enabled = true;

  const objGenerator = (n) => {
    for(var j = 0;j < n;j++) {

      setTimeout(() => {
        world.Add("cubeLightTex", 1, "CUBE" + j, tex);
        var b2 = new CANNON.Body({
          mass: 1,
          linearDamping: 0.01,
          position: new CANNON.Vec3(1, -14.5, 15),
          shape: new CANNON.Box(new CANNON.Vec3(1, 1, 1))
        });

        physics.world.addBody(b2);
        App.scene['CUBE' + j].physics.currentBody = b2;
        App.scene['CUBE' + j].physics.enabled = true;
      }, 1000 * j)
    }
  }

  objGenerator(100)

Networking [1.8.0]

Networking based on webRTC. If you wanna use multiplayer mode you need to run intro folder networking/ next commands:

 npm i
 node matrix-server.js

Networking Support Methods list: ✅😇
Any scene object: ➡ position SetX() SetY() SetZ() ➡ rotation.rotateX() rotateY() rotateZ()

Cube, Sphere, Square ➡ geometry.setScale() ➡ geometry.setScaleByY() ➡ geometry.setScaleByZ() ➡ geometry.setScaleByZ() ➡ geometry.setTexCoordScaleFactor()

Pyramid ➡ geometry.setScale() ➡ geometry.setSpitz()

Networking minimal example

export var runThis = world => {

  world.Add("pyramid", 1, "MyCubeTex");
  world.Add("square", 1, "MyColoredSquare1");

  // Must be activate
  matrixEngine.Engine.activateNet();

  // Must be activate for scene objects also.
  // This is only to force avoid unnecessary networking emit!
  App.scene.MyCubeTex.net.enable = true;
  App.scene.MyCubeTex.net.activate();

  App.scene.MyColoredSquare1.net.enable = true;
  App.scene.MyColoredSquare1.net.activate();

  // Just call it normally
  App.scene.MyCubeTex.position.SetZ(-8);
  App.scene.MyColoredSquare1.position.SetZ(-8);

};

It is perfect solution webGL vs webRTC. Origin code used broadcaster class from visual-ts game engine project.

Custom textures
We just override function for texture executing code. Next level is full custom opportunity, geometry, collision, networking etc.


App.scene.MySquareTexure1.custom.gl_texture = function (object, t) {
  world.GL.gl.bindTexture(world.GL.gl.TEXTURE_2D, object.textures[t]);
  world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_MAG_FILTER, world.GL.gl.LINEAR);
  world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_MIN_FILTER, world.GL.gl.LINEAR);
  world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_WRAP_S, world.GL.gl.CLAMP_TO_EDGE);
  world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_WRAP_T, world.GL.gl.CLAMP_TO_EDGE);

  world.GL.gl.texImage2D(
    world.GL.gl.TEXTURE_2D,
    0,                         // Level of details
    world.GL.gl.RGBA,          // Format
    world.GL.gl.RGBA,
    world.GL.gl.UNSIGNED_BYTE, // Size of each channel
    object.textures[t].image
  );

  world.GL.gl.generateMipmap(world.GL.gl.TEXTURE_2D);
};

*BVH Matrix Skeletal *[1.5.0]
New deps pack bvh-loader. It is bvh parser created for matrix-engine but can be used for any other graphics language.

 const options = {
    world: world,
    autoPlay: true,
    myFrameRate: 10,
    showOnLoad: false, // if autoPLay is true then showOnLoad is inactive.
    type: 'ANIMATION', // "TPOSE' | 'ANIMATION'
    loop: 'playInverse', // true | 'stopOnEnd' | 'playInverse' | 'stopAndReset'
    globalOffset: [-30, -180, -155],
    skeletalBoneScale: 6,
    boneNameBasePrefix: 'backWalk',
    skeletalBlend: { paramDest: 7, paramSrc: 6 }, // remove arg for no blend
    boneTex: {
      source: [
        "res/icons/512.png"
      ],
      mix_operation: "multiply",
    },
    // pyramid | triangle | cube | square | squareTex | cubeLightTex | sphereLightTex'
    drawTypeBone: 'squareTex' 
  };

  const filePath = 'https://raw.githubusercontent.com/zlatnaspirala/bvh-loader/main/javascript-bvh/example.bvh';

  var myFirstBvhAnimation = new matrixEngine.MEBvhAnimation(filePath, options);

Live demo https://codepen.io/zlatnaspirala/pen/OJQdGVM

Raycast
cube , square, triangle, obj (ObjLoader) [1.8.4] From 1.8.4 raycast hit trigger works for obj's.

Raycast works fine also in firstPersonCamera operation. Raycast work perfect after local single rotation x, y, or z. Combination rotx and roty works , roty and rotz only with rotx = 180 for now. Bug if walk behind object then turn arround and try raycast but no work for now.

Usage:

 canvas.addEventListener('mousedown', (ev) => {
    matrixEngine.raycaster.checkingProcedure(ev);
  });

  canvas.addEventListener('ray.hit.event', (ev) => {
    alert("You shoot the object! Nice")
  });

First person controller:

  // In one line activate also deactivate.
  App.camera.FirstPersonController = true;
Animated female droid (morph targets):
// Obj Loader
function onLoadObj(meshes) {

  // No need from [1.8.2]
  // App.meshes = meshes;
  for (const key in App.meshes) {
    matrixEngine.objLoader.initMeshBuffers(world.GL.gl, App.meshes[key]);
  }

  textuteImageSamplers2 = {
    source: ['res/images/RustPaint.jpg'],
    mix_operation: 'multiply'
  };

  setTimeout(function () {
    var animation_construct = {
      id: 'female',
      meshList: meshes, // from [1.8.2]
      sumOfAniFrames: 18,
      currentAni: 0,
      speed: 3
    };

    world.Add('obj', 1, 'female', textuteImageSamplers2, App.meshes.female, animation_construct);

    App.scene.female.position.y = -3;
    App.scene.female.rotation.rotationSpeed.z = 20;
    App.scene.female.position.z = -13;
    // App.scene.armor.mesh.setScale(5)
  }, 100);
}

// Custom list 1, 3, 5, 9
matrixEngine.objLoader.downloadMeshes(
  {
    female: 'res/3d-objects/female/female_000001.obj',
    female1: 'res/3d-objects/female/female_000003.obj',
    female2: 'res/3d-objects/female/female_000005.obj',
    female3: 'res/3d-objects/female/female_000009.obj',
    ...
  },
  onLoadObj
);

// From [1.8.2] you can use makeObjSeqArg
matrixEngine.objLoader.downloadMeshes(
matrixEngine.objLoader.makeObjSeqArg(
{ id: objName,
path: "res/bvh-skeletal-base/swat-guy/seq-walk/low/swat",
from : 1, to: 34 }),
onLoadObj
);
Blending:

// Use it
App.scene.female.glBlend.blendEnabled = true;
App.scene.female.glBlend.blendParamSrc = ENUMERATORS.glBlend.param[4];
App.scene.female.glBlend.blendParamDest = ENUMERATORS.glBlend.param[4];

Load Obj with UV map (Blender export tested):
For more details dee this example script: load_obj_file.js

Video texture:
world.Add('cubeLightTex', 1, 'TV', textuteImageSamplers, App.meshes.TV);
App.scene.TV.streamTextures = new VIDEO_TEXTURE('Galactic Expansion Fractal Morph [Official Video]');
Camera texture:

App.scene.TV.streamTextures = new ACCESS_CAMERA('webcam_beta');

*MatrixBVHCharacter *(MEBvhAnimation)

MatrixBVHCharacter feature use class matrixEngine.MEBvhAnimation. Its load primitives for bvh skeletal. MatrixBVHCharacter is proccess where we load pre defined skelatal obj parts(head, neck, legs...) .

@note Human character failed for noe but func works.
Nice for primitive obj mesh bur rig must have nice description of position/rotation. In maximo skeletal bones simple not fit. If you pripare bones you can get nice bvh obj adaptation for animations.

Example Code:

  const options = {
    world: world,                    // [Required]
    autoPlay: true,                  // [Optimal]
    showOnLoad: false,               // [Optimal] if autoPLay is true then showOnLoad is inactive.
    type: 'ANIMATION',               // [Optimal] 'ANIMATION' | "TPOSE'
    loop: 'playInverse',             // [Optimal] true | 'stopOnEnd' | 'playInverse' | 'stopAndReset'
    globalOffset: [-30, -180, -155], // [Optimal]  for 1.5 diff from obj seq anim
    skeletalBoneScale: 2,            // [Optimal]
    /*skeletalBlend: {               // [Optimal] remove arg for no blend
      paramDest: 4,
      paramSrc: 4
    },*/
    boneTex: {
      source: [
        "res/images/default/default-pink.png",
      ],
      mix_operation: "multiply",
    },
    drawTypeBone: "matrixSkeletal",
    matrixSkeletal: "res/bvh-skeletal-base/y-bot/matrix-skeletal/",
    objList: ['spine', 'hips', 'head'] ,

    matrixSkeletalObjScale: 80,       // [Optimal]

    // Can be predefined `MatrixSkeletal` prepared skeletal obj parts/bones.
    // Can be primitives:
    // pyramid | triangle | cube | square | squareTex | cubeLightTex | sphereLightTex

    // New optimal arg
    // Sometime we need more optimisation
    ignoreList: ['spine1'],
    ifNotExistDrawType: 'triangle'
  };

  const filePath = "res/bvh/Female1_B04_StandToWalkBack.bvh";
  var myFirstBvhAnimation = new matrixEngine.MEBvhAnimation(filePath, options);

This is folder for obj parts (head arm legs ...) Filenames are simplefield like head.obj , arm.obj without any prefix from constructor...

matrixSkeletal: "res/bvh-skeletal-base/y-bot/matrix-skeletal/",

Take a look example: matrix_skeletal.js.

Character (ObjLoader/morph targets)
This good in runtime bad for loading procedure.

How to update character animation? Maximo -> download dea or fbx -> import intro blender Import multi or one animation. -> blender export -> obj (animation)

This is new feature from [1.8.2]. Take a look at : load_obj_sequence.js

For now engine use objLoader to load all morphs.

  matrixEngine.objLoader.downloadMeshes(
      matrixEngine.objLoader.makeObjSeqArg(
        {
          id: objName,
          path: "res/bvh-skeletal-base/swat-guy/anims/swat-multi",
          from: 1,
          to: 61
        }),
      onLoadObj
    );

in onLoadObj :

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
      }
    }
  };

Texture editor (runtime):
Using Vjs3 with Editor use:

 App.scene.outsideBox.streamTextures = new Vjs3(
  "./2DTextureEditor/actual.html",
  "actualTexture"
);

Running Editor Tool
npm run run.tex.editor
// or

npm run te

After creating 2d texture direct on page at the end run:

npm run build.tex.editor

to make build final pack.

Imports note we can use any canvas 2d app [anyCanvas] .
In examples:

porting2d.js [Old VJS] Example of anyCanvas
porting_text.js [Vjs3]
porting2d_particle.js [Vjs3]
It is very powerfull tool!

Research Vjs3 source examples at: https://github.com/zlatnaspirala/visualjs

On NPM Service npm i visual-js , matrix engine already have visual-js , visual-js-server editor backend part.

To show/hide iframe use: App.scene.outsideBox - is any object who have streamTextures LOADED with 2DCANVAS.

App.scene.outsideBox.streamTextures.showTextureEditor();
E('HOLDER_STREAMS').style.display = 'none';

Access to the [any] canvas2d program: anyCanvas(path-of-html,name-of-canvas)

 App.scene.outsideBox.streamTextures = new anyCanvas(
      "./apps/funny-slot/",
      "HELLO_WORLD")

Live editor [actual.js predefined]
Texture-Editor

Old VJS loading with anyCanvas()
Texture-Editor

Old Live demo: Video and webcam works at: https://maximumroulette.com/webgl2/examples.html

Changes:
From [1.8.0]
Added watchify. We have support for real time connections based on webRTC. You must work on https protocol even in localhost. Change in program/manifest net = false if you dont wanna use networking.

Node.js Multiplayer Server based on webRTC. Take a look at the folder ./netwotking.

Run it:

cd networking
node matrix.server.js

If you wanna in terminal popup then run (bash/work on win also if you have bash) dedicated.sh./ or dedicated.bat.

From [1.7.11]
No need for: // matrixEngine.Engine.load_shaders('shaders/shaders.html');Initial Shaders now loads from code (inside engine). No need any action.

PWA Fully runned
Integrated Add to Home page and regular html5 page options. In same time fixed all autoplay audio and video context construction. It is good to consult pwa test on page. Best way is to keep it on 100% pass. pwa-powered

*Secured *🛡
No Dependabot alerts opened.

Credits && Licence:

Video material used from :From youtube.com : Electric sheep - a facinating animated flame fractal TheMrNgaard Creative Commons Attribution licence (reuse allowed)
Project Base Structure inspired by Copyright (C) 2014 Tappali Ekanathan Keestu (keestu@gmail.com) GNU General Public License
Textures download from http://textures.com
Dinamic texture bitcoin used from: Author:Ioannis Cherouvim GitHub:cherouvim Reddit:/r/cherouvim Website:cherouvim.com Compo:canvas Demo link:https://js1k.com/2017-magic/demo/2853 Shortlink:https://js1k.com/2853
Female 3d Object http://www.blendswap.com/blends/view/26225 Creative Commons Attribution 3.0 http://www.blendswap.com/users/view/AndresCuccaro
https://freestocktextures.com/texture/bark-wood-plant,122.html
https://github.com/Necolo/raycaster
Great https://www.mixamo.com/
Player character https://www.mixamo.com/#/?page=1&query=walk&type=Motion%2CMotionPack
BVH collections from: Special thanks to the CMU Graphics Lab Motion Capture Database which provided the data http://mocap.cs.cmu.edu/`
Used in examples: BLACK FLY by Audionautix | http://audionautix.com Music promoted by https://www.free-stock-music.com Creative Commons Attribution-ShareAlike 3.0 Unported https://creativecommons.org/licenses/by-sa/3.0/deed.en_US
Networking based on https://github.com/muaz-khan/RTCMultiConnection
Keywords
physicscannon.jsbvh-glmatrxbvh.jsbvh-skeletalbvh-webglbvh-loaderbvh-animationraycastraycast-glmatrixvanilla-jswebcam-texturevideo-texturecanvastexturessceneopengleswebglwebgl2glmatrixopengles23djavascriptopengles3matrixECMA6no-build-devbuild-prodbrowserifymatrix-enginealternativethree.js alternative

npm package `visual-ts`

Nikola — Sun, 02 May 2021 00:24:43 +0000

Visual-Ts-Game-Engine Package Link
https://www.npmjs.com/package/visual-ts

Live:
https://codepen.io/zlatnaspirala/pen/NWdZJQJ

New example repo :

It is the strarter for visual-ts
https://github.com/zlatnaspirala/visual-ts-examples

Example:

class AppConfig extends V.ClientConfig {

  constructor(gameList: any) {
    super(gameList);
    console.info("Make changes on Application Config.");
  }

  /**
     * @description
     * You can use prop from exstended ClientConfig class
     * @name getDrawRefference
     * @returns string
     */
  public getDrawRefference(): string {
    // Do something...
    console.log("Setup draw type")
    // return "diametric-fullscreen"
    // return this.drawReference;
    return "frame"
  }
}

class Demo1 implements V.Interface.IGamePlayModelNoPlayer {

  public gameName: string = "Demo 1 - Add new element";
  public version: number = 1.0;
  public playerCategory = 0x0002;
  public staticCategory = 0x0004;

  public starter: V.Starter;
  public myFirstGamePlayObject: V.Matter.Body | any = undefined;

  constructor(starter: V.Starter) {
    this.starter = starter;
  }

  public attachAppEvents() {
    const root = this;
    root.createMyElements(true);
    root.addGround();
    console.info("App event test");
  }

  public addGround() {
    const newStaticElement: V.Type.worldElement = V.Matter.Bodies.rectangle(
      400,
      550,
      1000,
      90,
      {
        isStatic: true,
        isSleeping: false,
        label: "ground",
        collisionFilter: {
          group: this.staticCategory,
        } as any,
        render: {
          // visualComponent: new TextureComponent("imgGround",[require("./imgs/backgrounds/wall3.png")]),
          sprite: {
            olala: true,
          },
        } as any | Matter.IBodyRenderOptions,
      }
    );

    //  (newStaticElement.render as any).visualComponent.setVerticalTiles(2).
    //    setHorizontalTiles(1);
    this.starter.AddNewBodies([newStaticElement] as V.Type.worldElement);
  }

  public createMyElements(addToScene: boolean) {
    const playerRadius = 50;
    this.myFirstGamePlayObject = V.Matter.Bodies.circle(
      400,
      100,
      playerRadius,
      {
        label: "MYFIRSTOBJECT",
        density: 0.0005,
        friction: 0.01,
        frictionAir: 0.06,
        restitution: 0.3,
        ground: true,
        jumpCD: 0,
        portal: -1,
        collisionFilter: {
          category: this.playerCategory,
        } as any,
        render: {
          fillStyle: "blue",
          sprite: {
            xScale: 1,
            yScale: 1,
          },
        } as any,
      } as Matter.IBodyDefinition
    );
    this.myFirstGamePlayObject.collisionFilter.group = -1;

    // hardcode for now
    this.myFirstGamePlayObject.render.sprite.xScale = 0.2;
    this.myFirstGamePlayObject.render.sprite.yScale = 0.2;

    if (addToScene) {
      this.myFirstGamePlayObject.id = 2;
      this.starter.AddNewBodies(
        this.myFirstGamePlayObject as V.Type.worldElement
      );
      console.info('myFirstGamePlayObject body created from "https://cdn.skypack.dev/dead".');
    }
  }

  protected destroyGamePlayPlatformer() {
    this.starter.destroyGamePlay();
    this.starter.deattachMatterEvents();
  }
}

// Make instance - Run app

const gameInfo = {
  name: "Demo 1h",
  title: "Create game with module visual-ts. ",
};

const gamesList: any[] = [
  gameInfo,
];

let injectedConfig: V.Interface.IClientConfig = new AppConfig(gamesList);
const master = new V.IocSinglePlayerMode(null, injectedConfig);

master.singlton(Demo1, master.get.Starter);
master.get.Demo1.attachAppEvents();

Cross-K Visual GUI App engine Based on kivy 2.0 Python3

Nikola — Fri, 09 Apr 2021 15:07:58 +0000

Based on kivy 2.0 python framework. GPL-3.0 License with avavailable source code.
CrossK is a small but conspiratorial app engine based on kivy opengles2.0 in background.
Created to make future fast and quick. No builds losing time any more.

https://github.com/zlatnaspirala/cross-k

Objective:

Create multiplatform target builds with real time net driver.
Basic : 2D UI visual app creator. Future features player, networking, 3d/2d canvas based engine.
Because html5 is excluded for now from this story maybe some real time networking makes fit for
all platforms.
In basic we can create server-client native application for any platform (desktops, android)
This is the beginning of a beautiful friendship

Youtube presentation:
https://www.youtube.com/watch?v=Ci8GNd3FDHw&ab_channel=javascriptfanatic

Screen shot details box:

After cloning this project only need to install python3, pip3and kivy 2.0 framework You need first time to create kivy_venv:

Windows command line

python3 -m c kivy_venv
Activate env before run engine
Windows command

kivy_venv\Scripts\activate
Bash command

source kivy_venv/Scripts/activate
Installation
pip3 install kivy[full] kivy_examples
pip3 install --upgrade pip wheel setuptools
pip3 install docutils pygments pypiwin32 kivy.deps.sdl2 kivy.deps.glew --user
pip3 install docutils pygments pypiwin32 kivy.deps.sdl2 kivy.deps.glew
--extra-index-url https://kivy.org/downloads/packages/simple/
pip3 install kivy
pip3 install kivy.deps.gstreamer
pip3 install kivy.deps.angle
pip3 install --upgrade pyinstaller
pip3 install python-for-android

cd submodules/
docker build --tag=p4a --file Dockerfile .
If you have problem with:

pip3 ...
Then use this format
pip3.9 install ...
or
python3 -m pip install
Run Engine:
You can use it like this if have some paths problem kivy_venv/Scripts/python.exe.

python main.py
Package System
[WINDOWS]

Pack Application for windows10 with GUI command.

Manual you can package whole engine not just application project.

kivy_venv/Scripts/python.exe -m PyInstaller --onefile --name CROSSK_PROJECT1 --distpath packages/projectTest --workpath .cache/ main.py
[ANDROID] WIP

docker run \
--interactive \
--tty \
--volume "G:\web_server\xampp\htdocs\PRIVATE_SERVER\PYTHON\cross-k\cross-k\":/home/user/testapps \
p4a sh -c
'. venv/bin/activate \
&& cd testapps \
&& python setup_vispy.py apk \
--sdk-dir $ANDROID_SDK_HOME \
--ndk-dir $ANDROID_NDK_HOME'

docker run --interactive --tty --volume "/G/web_server/xampp/htdocs/PRIVATE_SERVER/PYTHON/cross-k/cross-k/submodules/python-for-android/testapps":/home/user/testapps p4a sh -c ". venv/bin/activate && cd testapps && python setup_testapp_python3_sqlite_openssl.py apk --package=nikola.car.sdl2 --name='nidzasdl2' --version=0.5 --bootstrap=sdl2 --sdk-dir $ANDROID_SDK_HOME --ndk-dir $ANDROID_NDK_HOME "

Docker:

p4a apk python3 setup_testapp_python3_sqlite_openssl.py --package=nikola.car.sdl2 --name='nidzasdl2' --version=0.5 --bootstrap=sdl2 --sdk-dir=/usr/lib/android-sdk --ndk-dir=/home/user/android-ndk/android-ndk-r20

/usr/lib/android-sdk
/home/user/android-ndk/android-ndk-r20

wget -c https://dl.google.com/android/repository/android-ndk-r20-linux-x86_64.zip
unzip android-ndk-r20-linux-x86_64.zip

export ANDROIDSDK="/usr/lib/android-sdk"
export ANDROIDNDK="/home/user/android-ndk/android-ndk-r20"
export ANDROIDAPI="28" # Target API version of your application
export NDKAPI="20" # Minimum supported API version of your application
export ANDROIDNDKVER="r20" # Version of the NDK you installed
export PATH=/usr/lib/android-sdk/:$PATH
export PATH=/usr/lib/android-sdk/cmdline-tools/3.0/bin/:$PATH
source /etc/bash.bash
source .bashrc

sudo su

docker cp C/Users/Nikola Lukic/Downloads/commandlinetools-linux.zip CONTAINER_ID:/usr/lib/android-sdk
android tools still needed to install
docker commit 3ecefc2ff45d crossk/android:ver2
STRUCTURE
(non project files) => Files from marked folder are not in active dependency of this software. (Auto generated) => Usually dont edit dont use it (VisualCode/debugger) => You can find help script for python debugger from MS Visual Code Editor.

BETA VERSION [0.3.0] STATUS

[EDITOR]

Add option solution for dimension ref system
(use pixels, percents or combine)
Add option solution for frameLayout and
position hint also.
(use pixels, percents or combine)
Manage scene element
- Details box with save options
- SceneContainer to select and preview render elements in left side of engine window -scroll added
- AssetsContainer to select and preview assets items in left side of engine window -scroll added
Add Element type:
- Button element
- Label element
- CheckBox element
- Picture Clickable
- Layouts (dinamic with props) element
Layouts - Handle sub components
Layouts ( Details commands:

- Add button

- Add Label

- Add layout )
CrossK Scripter, Basic script bind attacher for live (app) buttons.

[ASSETS EDITOR]

Operation ( Type of Asset: - imageResource, - fontResource)
OperationAdd

[PACKAGE-SYSTEM]

Package for windows [SUPPORTED]
Package for Linux [SUPPORTED]
Package for android [NOTESTED]
Package for macOS [NOTESTED]

[PACKAGE-ANDROID]

Test kivy solution [NOTESTED]
Test canvas solution (if ti posible) [NOTESTED]
Test opengles2/3 in native canvas manir [NOTESTED]

Android WIP
Best choose Linux Ubuntu

pip install python-for-android
For windows users use docker

Vue/Typescript/Threejs project - search & play youtube videos in 3d webGL open source

Nikola — Wed, 29 Jul 2020 07:43:45 +0000

vue-ts-starter
Project name: Vue project generator
First feature: YouTube vs Threejs
version 0.0.5
Public access for VuleTube service:
https://maximumroulette.com:3000
vuletube

Production use https node application for web server.

  git clone https://github.com/zlatnaspirala/vue-typescript-starter
  npm i

Other good solution is node serve for instant start.

Install:

  npm install -g serve

Run:

  serve -s dist
  // or
  npm run serve

Project details
Features
Note:

0.0.x => any changes
0.x.1 ... n => any changes + updated present logic or new big feature.
x.1.1 ... n => release git/build point version.

version 0.0.2 [MASTER]

Getting response for youtube search.
Call server part for saving videos

version 0.0.3 [MASTER]

Add options switch-place for two main components
Implement LocalStorageMemory class (For saving all user infly data - view options etc.)

version 0.0.4 [MASTER]

Save current (exist) options with localStorage and load on refresh.
Every next options will be implemented with localStorage support.

version 0.0.5 [MASTER]

Added new server module : npm install --save image-downloader
Prepare for search result preview in 3d. with raycast options for navigate. Add options for:
save result number per page - pagination.
show result in 3d
version 0.1.1 [WIP NEXT]

Adding paypal donate buttons
Prevent raycast click event behind 3d plane video FIX@
Adding progress for video duration.
Adding webcam options
Replace text with icons

## Project structure

├── dist/  (This is auto generated)
├── node_modules/  (This is auto generated)
├── public/
|   ├── assets/
|   |   └── logo.png
|   ├── thumbnails/
|   ├── videos/
|   |   └── list.html
|   ├── bad.html
|   ├── favicon.ico
|   ├── index.html
├── server/
|   ├── node_modules/ (This is auto generated)
|   ├── package.json
|   ├── package-lock.json
|   ├── server-connector.js
├── src/
|   ├── components/
|   |   ├── youtube-3d/
|   |   |   ├── myYouTube.vue
|   |   |   └── webgl-player.vue
|   |   ├── myFooter.vue
|   |   ├── myHeader.vue
|   ├── App.vue
|   └── styles/
|   |   └── styles.scss
|   ├── App.vue
|   ├── main.ts
|   ├── error-instance.ts
|   ├── shims-tsx.d.ts
|   ├── shims-vue.d.ts
|   └── store.ts
├── .gitignore
├── README.md (This file)
├── tsconfig.json
├── package.json
├── package-lock.json (This is auto generated)
└── babel.config.js

Components :

myYouTube.vue Getting response for youtube search. Call server part for saving videos
webgl-player.vue Open opengles port view, look for video source saved to the maximumroulette:3000 I use quick solution from npm: https://www.npmjs.com/package/youtube-dl

Response for youtube api v3 call search.
  body: "{↵  "kind": "youtube#searchListResponse",↵  "etag""
  headers: {cache-control: "private", content-encoding: "gzip",
  content-length: "5512", content-type: "application/json; charset=UTF-8", date: "Sun, 05 Jul 2020 20:47:06 GMT", …}
  result: {
    kind: "youtube#searchListResponse",
    etag: "3nOm8AR0NU4TDlCxh0UCxk1KB38",
    nextPageToken: "CBkQAA", regionCode: "RS", pageInfo: {…}, …}
  status: 200
  statusText: null
Result property:
{
"kind": "youtube#searchResult",
"etag": "mlweRndBtBgAcVC-11ZrL0oI7ok",
"id": {
  "kind": "youtube#video",
  "videoId": "YPhJOC9-M_M"
},
"snippet": {
  "publishedAt": "2019-07-14T19:27:31Z",
  "channelId": "UCc1NtMtvoVzKnOtnai9LGsA",
  "title": "Create game engine - Visual typescript game engine",
  "description": "Clone or download from : https://github.com/zlatnaspirala/visual-ts-game-engine Next video\
    developing in live - adding multiplayer feature. Project : Visual ts ...",
  "thumbnails": {
    "default": {
      "url": "https://i.ytimg.com/vi/YPhJOC9-M_M/default.jpg", "width": 120, "height": 90
    },
    "medium": {
      "url": "https://i.ytimg.com/vi/YPhJOC9-M_M/mqdefault.jpg", "width": 320, "height": 180
    },
    "high": {
      "url": "https://i.ytimg.com/vi/YPhJOC9-M_M/hqdefault.jpg", "width": 480, "height": 360
    }
  },
  "channelTitle": "javascript fanatic",
  "liveBroadcastContent": "none",
  "publishTime": "2019-07-14T19:27:31Z"
  }
}

{
  etag: "3nOm8AR0NU4TDlCxh0UCxk1KB38"
  items:
      etag: "mlweRndBtBgAcVC-11ZrL0oI7ok"
      id: {kind: "youtube#video", videoId: "YPhJOC9-M_M"}
      kind: "youtube#searchResult"
      snippet: {publis
      kind: "youtube#searchListResponse"
      nextPageToken: "CBkQAA"
      pageInfo: {totalResults: 400229, resultsPerPage: 25}
      regionCode: "RS"
      }
}

VueMaterial help
Notes:

All other attributes, such as multiple and accept, can be used on md-field.
Icons used with https://fontawesome.com/v4.7.0/icons/
eslint or any other cheker full strict only for proc build in dev status lint will pass more roles.

Spiral position
Not in use at the moment.

  var count = 10;
  var radius = 32;
  for ( var i = 1, l = count; i <= l; i ++ ) {
    var phi = Math.acos( - 1 + ( 2 * i ) / l );
    var theta = Math.sqrt( l * Math.PI ) * phi;
    var mesh = new THREE.Mesh( geometry, material );
    mesh.position.setFromSphericalCoords( radius, phi, theta );
    mesh.lookAt( this.camera.position );
    this.scene.add( mesh );
  }

YT Download module

Download from: https://www.npmjs.com/package/youtube-dl

Help links/public
https://vuematerial.io/themes/configuration https://github.com/google/google-api-javascript-client/blob/master/docs/samples.md#LoadinganAPIandMakingaRequest https://developers.google.com/youtube/v3/docs/search/list?apix=true

Direct link for dev server
VueTube web DEV [WIP] service 2020
https://maximumroulette.com:3000

Credits:

Used in my project:
project structural/methodology

https://vuejs.org/
JavaScript 3D library.

https://threejs.org/
Download videos from youtube in node.js using youtube-dl.

https://www.npmjs.com/package/youtube-dl

Download source code:

https://github.com/zlatnaspirala/vue-typescript-starter
Star project and thank you for visit my content.