Releases: zlatnaspirala/matrix-engine
2.0.24
New networking based on kurento/openvidu server.
Still support for old networking but not active.
New links examples for 2.0.xx (Comes with First Person shooter Multiplayer example)
https://maximumroulette.com/apps/matrix-engine-starter/projects/hang3d/
Special build for codepen
1.9.54
[1.9.54]
Added custom shaders also glsl files from zlatnaspirala/GLSLShaders
Add new example apps/shaders.js
.
-
[1.9.40] First version with both support opengles11/2 and opengles300 - Default : 1.3/opengles300 - Switch with URL param 'app.html?GLSL=1.3' for opengle300 and '?GLSL=1.1' for opengles1.1/2 - Implemented URL param for examples-build.html?GLSL=1.1 [Affect after first demo choose.]
-
Key Events
addEventListener('hit.keyDown' , (e) => {
if (e.detail.origin.key == "Escape" || e.detail.keyCode == 27) {
console.log('PAUSE GAME_PLAY')
}
})
e.detail.origin is native evt arg passed.
[1.9.6] Thunder
ObjLoader Load sequence of obj
[1.8.2]
- Added [SceneObject].selfDestroy ( timeoutInterval )
- fix phisics set position
- Added :
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
}
}
};
Change animation sequence with:
App.scene.player.play('walkPistol')
or
App.scene.player.play('walk')
1.7.7 Light & Shadows Improved
[1.7.6] Shadows VS Lights (Local SpotLight implementation)
/**
*@Author Nikola Lukic
*@Description Matrix Engine Api Example
* From version [1.7.6]
* Local Light/Shadows shader
* - Spot ligth for now works perfect for fixed camera movement.
* - Direction, ambient working fine also with spot light.
*/
/* globals world App */
import App from "../program/manifest";
export var runThis = (world) => {
// Camera
App.camera.SceneController = true;
// Image texs
var textuteImageSamplers = {
source: ["res/images/complex_texture_1/diffuse.png"],
mix_operation: "multiply",
};
var textuteImageSamplersTest = {
source: ["res/images/texture_spiral1.png", "res/images/complex_texture_1/diffuse.png"],
mix_operation: "multiply",
};
var textuteBlanko = {
source: ["res/images/blankoB.png"],
mix_operation: "multiply"
};
world.Add("cubeLightTex", 1, "myCube1", textuteImageSamplers);
App.scene.myCube1.activateShadows();
App.scene.myCube1.position.setPosition(-3,3,-11);
// Local Shadows cast must be activated!
App.scene.myCube1.shadows.activeUpdate();
App.scene.myCube1.shadows.animatePositionX();
world.Add("cubeLightTex", 1, "myCube2", textuteImageSamplers);
App.scene.myCube2.activateShadows();
App.scene.myCube2.shadows.lightPosition = [0, 0, 3];
App.scene.myCube2.shadows.innerLimit = 0;
App.scene.myCube2.position.SetX(-3);
App.scene.myCube2.position.SetZ(-11);
App.scene.myCube2.shadows.activeUpdate();
App.scene.myCube2.shadows.animateRadius({from: 0, to: 25, step: 0.5});
world.Add("cubeLightTex", 1, "myCube3", textuteImageSamplers);
App.scene.myCube3.activateShadows();
App.scene.myCube3.shadows.innerLimit = 0;
App.scene.myCube3.position.SetY(-3);
App.scene.myCube3.position.SetZ(-11);
App.scene.myCube3.position.SetX(-3);
App.scene.myCube3.shadows.lightPosition = [0, 3, 3];
// Animate local spot
var option = {
from: 0.01, to: 0.02, step: 0.001,
centerX: 0, centerY: 0,
flyArroundByIndexs: [1, 2] // Means that Y,Z coords are orbiting
};
App.scene.myCube3.shadows.activeUpdate();
App.scene.myCube3.shadows.flyArround(option);
// Animate by Y pos
world.Add("cubeLightTex", 1, "myCube4", textuteImageSamplers);
App.scene.myCube4.activateShadows();
App.scene.myCube4.position.SetY(3);
App.scene.myCube4.position.SetZ(-11);
App.scene.myCube4.shadows.activeUpdate();
App.scene.myCube4.shadows.animatePositionY();
App.scene.myCube4.position.SetX(0);
// Created with blanko texture or red, blue or green solid.
// then add new tex sampler created generic square 2x2 by default.
world.Add("cubeLightTex", 1, "myCube5", textuteBlanko);
App.scene.myCube5.position.SetZ(-11);
App.scene.myCube5.activateShadows();
App.scene.myCube5.shadows.activeUpdate();
App.scene.myCube5.shadows.animateRadius({from: 15, to: 45, step: 0.05});
App.scene.myCube5.textures.push(App.scene.myCube5.createPixelsTex())
// Created with blanko texture or red, blue or green solid.
world.Add("cubeLightTex", 1, "myCube6", textuteImageSamplersTest);
App.scene.myCube6.position.SetZ(-11);
App.scene.myCube6.position.SetY(-3);
App.scene.myCube6.activateShadows();
// Animate local spot
var option = {
from: 0.01, to: 0.02, step: 0.001,
centerX: 0, centerY: 0,
flyArroundByIndexs: [0, 2] // Means that X,Z coords are orbiting
};
App.scene.myCube6.shadows.outerLimit = 2;
// Local Shadows cast must be activated!
App.scene.myCube6.shadows.activeUpdate();
App.scene.myCube6.shadows.flyArround(option);
App.scene.myCube6.textures.push(
App.scene.myCube6.createPixelsTex()
);
// 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();
world.Add("cubeLightTex", 1, "myCube8", textuteImageSamplersTest);
App.scene.myCube8.position.setPosition(3,0,-11);
// Custom generic textures. Micro Drawing.
// Example for arg shema square for now only.
var options = {
squareShema: [8,8],
pixels: new Uint8Array(8 * 8 * 4)
};
// options.pixels.fill(0);
var I = 0, localCounter = 0;
for (var funny = 0; funny < 8*8*4; funny+=4) {
localCounter++;
options.pixels[funny] = I + localCounter;
options.pixels[funny + 1] = I + 1.5* localCounter;
options.pixels[funny + 2] = I + 1.2* localCounter;
options.pixels[funny + 3] = 1;
}
options.pixels[4 * 7] = 255;
options.pixels[4 * 7 + 1] = 1;
options.pixels[4 * 7 + 2] = 1;
App.scene.myCube8.textures.push(
App.scene.myCube8.createPixelsTex(options)
);
// Custom generic textures
world.Add("cubeLightTex", 1, "myCube9", textuteImageSamplersTest);
App.scene.myCube9.position.setPosition(3,-3,-11);
// 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)
);
// App.scene.myCube9.activateShadows();
// App.scene.myCube9.shadows.activeUpdate();
// App.scene.myCube9.shadows.animateRadius({from: 15, to: 45, step: 0.05});
// Click event
canvas.addEventListener('mousedown', (ev) => {
matrixEngine.raycaster.checkingProcedure(ev);
});
addEventListener("ray.hit.event", function(e) {
e.detail.hitObject.LightsData.ambientLight.r =
matrixEngine.utility.randomFloatFromTo(0, 10);
e.detail.hitObject.LightsData.ambientLight.g =
matrixEngine.utility.randomFloatFromTo(0, 10);
e.detail.hitObject.LightsData.ambientLight.b =
matrixEngine.utility.randomFloatFromTo(0, 10);
// console.info(e.detail);
});
};
Texture Editor Dev tool
Removed old visual-js dmeo projects and reimported new VJS3 from npm service.
New deps 👍🏻
"visual-js": "^3.0.19",
"visual-js-server": "3.0.4",
You need to run editor dev tool with npm run te
.
Read more about VJS3 at https://github.com/zlatnaspirala/visualjs
[note GUI for windows is undercostruct use ON-PAGE Editor supported with node editor.js]
VJS3 is good for easy and fast creation of dinamic textures for 3d view port.
You can read from code or use node editor.
Important :
node editor.js is only for dev stage !
Example of Vjs3
at
https://maximumroulette.com/apps/matrix-engine/query-build.html?u=porting2d_text
Example of anyCanvas()
is :
https://maximumroulette.com/apps/matrix-engine/query-build.html?u=porting2d
Screens 👍🏻
1.5.3
BVH Matrix Skeletal - from [1.5.x]
New deps bvh-loader (https://www.npmjs.com/package/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
Full Changelog: 1.4.13...1.5.3
1.4.13
New features:
- Raycaster for click triggering
- ObjLoader improved
Stable version - PWA Installed
-
Added cache static/dynamic
-
Cheking pwa status is ot not installed
-
For develop [localhost] Use app.html [No need for build at all]
-
For production use npm run build.XXX commands e.g app-build.html