DEV Community: Nikola

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.

Kure small video chat service

Nikola — Mon, 08 Jun 2020 22:25:04 +0000

About Kure application

Application based on kurento project & openvidu project
You can find origin source code and licence on: Licence page Kurento project page Openvidu project Openvidu tutorials project

Main reason for KMS:

WEBRTC VIDEOCONFERENCES One-to-One, One-to-Many, Many-to-Many. Any combination you can think of is possible with OpenVidu.
OPEN SOURCE OpenVidu is an OpenSource project licensed under Apache License v2. Use it for free.
MULTIPLATFORM Chrome, Firefox, Safari, Opera, Edge, Android, iOS, desktop apps. All compatible with each other I recommended everyone to use docker. This project is commercial and i use it to run my own services. Middleware server base on node.js.

Improvements:

Protocol http2 for node middleware server.
Implementation of session websocket based account system.

(used from visual-ts game engine project)

Kure Video Chat is commercial project but you can find code for session account system from:

https://github.com/zlatnaspirala/visual-ts-game-engine/blob/master/server/rtc/connector.js

https://github.com/zlatnaspirala/visual-ts-game-engine/blob/master/server/common/shared.js

KMS vs openvidu docker variant with nodejs middleware.
Public web server for Kure service:

https://maximumroulette.com:2020

Websocket port: 3232