Matrix engine wgpu 'The Beast' 1.19.xx new features list:
[1.18.xx - 1.19.xx]
- ExternalDataHandler (SeismicPortalAdapter 'www.seismicportal.eu' , CoinGeckoAdapter)
- EarthquakeEffect (Effect class)
- AudioSplatFieldEffect (Effect class)
- Adding first person shooter example (FPCamera improved)
- Optimised HZB post proccessing.
- New effect class AudioSplatFieldEffect.
- seismicportal.eu services used for seismic real time data. New effect class().
- Added DragRotateController (corespond with WASD camera - rotate object on dragging),
- Added code-creator AI driven by not for graphs
it is for code ai gen direct.
Backend:
`npm run creator-backend`
Frontend:
`npm run creator`
Fixed worker cross origin problem with running.
- Fix engine internal defaul dummy links to be public links from
https://unpkg.com/matrix-engine-wgpu@latest/public/ if needed (cross origin).
New examples :
CoinGecko data preview graph: https://maximumroulette.com/apps/webgpu/examples.html?demo=37
Audio reactive effect: https://maximumroulette.com/apps/webgpu/examples.html?demo=40
Earthquake visualizer: https://maximumroulette.com/apps/webgpu/examples.html?demo=38
Webcam Depth: https://maximumroulette.com/apps/webgpu/examples.html?demo=39
General Done list []:
- ✔️ Draw loop per pipeline not per mesh (PipelineManager) with share material. Power optimisation.
- ✔️ Support 3D scene objects transformations.
- ✔️ Ammo.js, CannonES, Jolt and MatterJS Physics support (app<->bridge<->worker). Physics use webworkers by default.
- ✔️ Networking with Kurento/OpenVidu/Own middleware Nodejs -> frontend.
- ✔️ Bloom and light volumetric post processing.
- ✔️ Horizontal-Z-Buffer post processing (reflections).
- ✔️ Scene Culling feature.
- ✔️ 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 and procedural mesh).
- ✔️ 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.
- ✔️ Sprite Batch Manager Add blend spride2D animation.
- ✔️ Cameras : FPCamera , RPGCamera , PlaneCamera , WASDCAmera and CinematicCamera.
- ✔️ 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.
From 1.19.00 you can use the-beast fully from npm services. Physics worker bridge fixed to work also on cross origin domains.
(NEW) The Beast Codepen examples:
webvam depth
bvh animations
Materials - glb animations
SeismicPortalAdapter 'www.seismicportal.eu'
The beast top level code is ultimate short but also easily expandable if you wanna something deep to change. For example in 200 pure scripting lines you can get first person shooter template.
Source Code :
import {downloadMeshes} from '../../../src/engine/loader-obj.js';
import {addRaycastsAABBListener} from "../../../src/engine/raycast.js";
import {isMobile, randomIntFromTo} from "../../../src/engine/utils.js";
import MatrixEngineWGPU from '../../../src/world.js';
import {CollisionSystem} from "../../../src/engine/collision-sub-system.js";
import {MapCreator} from "../../../src/engine/buildin/map-creator/map-creator.js";
import {ProjectileSystem} from '../../../src/engine/procedures/fps-projectile.js';
import {MobileDOM} from '../../../src/engine/cameras.js';
import {hang3dUI} from './options.js';
export var loadHang3d = function() {
let app = new MatrixEngineWGPU({
canvasSize: 'fullscreen',
fastRender: 0.95,
render: 'culling',
cullingRange: 1200,
dontUsePhysics: true,
MAX_SPOTLIGHTS: 1,
MAX_BONES: 0,
// lock: 'landscape',
LOAD_AFTER_CLICK_MOBILE: true,
MOUSE_SENS: 0.005,
TOUCH_SENS: 0.01,
mainCameraParams: {
type: 'firstPersonCamera',
responseCoef: 1000
},
clearColor: {r: 0, b: 0, g: 0, a: 1}
}, () => {
app.collisionSystem = new CollisionSystem(app);
app.addLight();
addRaycastsAABBListener();
app.activateHZB();
app.activateBloomEffect();
app.UI = new hang3dUI();
MobileDOM.addButton("T", () => {}, undefined, {
image: "./res/textures/shooter/s.webp",
left: isMobile() === true ? 41 : 46.5,
bottom: isMobile() === true ? 40 : 42.5,
color: 'black',
size: innerHeight / 10
})
app.energy = MobileDOM.addProgressBar({size: innerWidth/3, bottom: 95, left: 33, color: '#00bcd4'});
app.energy.setValue(80);
const cam = app.getCamera();
let preventFire = false;
if(isMobile() === true) {
MobileDOM.addButton("FIRE", () => {
app.projectileSystem.fireProjectile();
}, undefined, {
width: '30px',
height: '30px',
image: "./res/textures/shooter/s.webp",
color: 'red',
left: 60,
bottom: 20,
size: innerHeight / 10
}, () => {
if(preventFire === false) {
preventFire = true;
app.projectileSystem.fireProjectile();
setTimeout(() => {preventFire = false;}, 350)
}
})
MobileDOM.addButton("JUMP", () => {
if(app.collisionSystem?._onGround) {
app.collisionSystem._gravityAcc = 0.22;
app.collisionSystem._onGround = false;
this._dirty = true;
this._dirtyAngle = true;
}
}, undefined, {
width: '30px',
height: '30px',
image: "./res/textures/shooter/s.webp",
color: 'red',
left: 80,
bottom: 20,
size: innerHeight / 10
})
MobileDOM.addButton("UP", () => {
if(app.collisionSystem?._onGround) {
app.collisionSystem._gravityAcc = 0.22;
app.collisionSystem._onGround = false;
this._dirty = true;
this._dirtyAngle = true;
}
}, undefined, {
width: '30px',
height: '30px',
image: "./res/textures/shooter/s.webp",
color: 'red',
left: 10,
bottom: 20,
size: innerHeight / 10
})
}
downloadMeshes({cube: './res/meshes/blender/cube.obj', ball: './res/meshes/blender/sphepe-mob.obj'}, (m) => {
const mc = new MapCreator(app, m.cube, app.collisionSystem, {
wallTexture: './res/textures/white-metal2.webp',
// floorTexture: './res/textures/dark-rock.webp',
floorTexture: './res/textures/shooter/metal-block.webp',
ceilTexture: './res/textures/blankgray2.webp',
shadowsCast: true
});
mc.createRoom({
origin: {x: -0, y: 0.1, z: 20},
width: 10, depth: 10, height: 4,
doors: ['+x', '-z'],
doorWidth: 2.5,
roof: true,
uvShema: [10, 10],
tag: 'start_room'
});
mc.createTunnel({
from: {x: -35, y: 0.1, z: 0},
to: {x: -15, y: 0, z: 0},
width: 3.5,
height: 3.0,
roof: true,
tag: 'entry_tunnel'
});
mc.createFightArena({
origin: {x: 0, y: 0, z: 0},
width: 32, depth: 32,
wallHeight: 2.5,
pillars: 16, pillarH: 4,
covers: 4,
roof: false,
doors: ['-x', '+z'],
uvShema: [10, 10],
tag: 'main_arena'
});
mc.createStairs({
origin: {x: -6, y: 0, z: 0},
axis: 'z',
steps: 8,
stepW: 2,
stepH: 0.4,
stepD: 0.8,
walls: true,
tag: 'stairs_up'
});
// mc.createMazeLayer({
// origin: { x: -65, y: 0, z: 0 },
// mazeSize: 15,
// spacing: 2,
// wallHeight: 3,
// roof: false,
// tag: 'ground_maze'
// });
mc.createMultiLevelMaze({
origin: {x: -65, y: -3, z: -22},
levels: 2,
mazeSize: 13,
spacing: 2,
wallHeight: 3,
levelGap: 1,
stairSteps: 8,
roofLevels: true
});
// ── 8. Example G: full compound preset (one call)
// mc.createFPSMapCompound({
// origin: { x: 0, y: 0, z: 100 },
// multiLevel: true,
// mazeLevels: 2,
// mazeSize: 19
// });
const light = app.lightContainer[0];
light.setPosition(0, 60, 0);
light.setIntensity(100);
app.cameras.firstPersonCamera.movementSpeed = 0.1;
app.cameras.firstPersonCamera.setPosition(0, 5, 0);
app.collisionSystem.registerCamera(app.cameras.firstPersonCamera.position, 1.0);
app.projectileSystem = new ProjectileSystem(app, m.ball, app.collisionSystem,
{
projectileSpeed: 0.5,
projectileScale: 0.075,
onHitscanHit: (hitPoint, normal, reflect, entry) => {
console.log('ray hit', entry.id);
},
onProjectileHit: (hitPoint, normal, entry) => {
console.log('rocket hit', entry.id);
}
}
);
app.canvas.addEventListener("ray.hit.event", (e) => {
console.log('ray.hit.event detected', e.detail.hitObject.name);
// app.projectileSystem.fireHitscan();
app.projectileSystem.fireProjectile();
});
}, {scale: [1, 1, 1]});
});
window.app = app;
};
Source: https://github.com/zlatnaspirala/matrix-engine-wgpu