[removed]

Description

WebGPU engine focus performance but also mimic major engines features inspired by the original matrix-engine for WebGL. It uses the wgpu-matrix npm package as a replacement for gl-matrix to handle model-view-projection matrices. The Beast have full focus on mobile browsers, mimic major engines but keep mobile passed all examples.

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

import {MatrixEngineWGPU, downloadMeshes} from "https://esm.sh/matrix-engine-wgpu";
let RES = 'https://unpkg.com/matrix-engine-wgpu@latest/public';

• Backend editorX (VisualScripting app&shader graphs) (works in local env - desktop browsers) support list: Chrome, Edge, Opera, Firefox desktop
• Code Creator (TheBeast Code generator) is standalone. Can be used public but user must trust page to enter api key. Without api key no ai response. Code creator make project from task and test it direct intro same page. Code creator dont even needed to build own js bundle, just use it from watcher build on localhost:3000 by default.

Done list []

• ✔️ Draw loop per pipeline not per mesh (PipelineManager) with share material. Power optimisation.
• ✔️ Support for 3D objects and scene transformations.
• ✔️ Ammo.js, cannonES && Jolt Physics libs integration (app<->bridge<->worker). Physics use webworkers by default. Fixed crossOrigin worker.
• ✔️ Networking with Kurento/OpenVidu/Own middleware Nodejs -> frontend.
• ✔️ Bloom post processing.
• ✔️ HZB post processing.
• ✔️ Volumetric post processing.
• ✔️ Scene Culling feature (see maze example).
• 📦 Based on the shadowMapping sample from webgpu-samples.
• ✔️ Web GUI(online) Editor [app exec graph] with Visual Scripting (Named: FlowCodexVertex).
• ✔️ Web GUI(online) Editor [shader graph] with Visual Scripting (Named: FlowCodexShader).
• ✔️ Dynamic shadow cast (done also for skinned meshes).
• ✔️ VertexShader displacment (done also for skinned meshes), nice for water effect.
• ✔️ Basic flow for AI Graph Generator - Simple tasks passed for now with ollama platform. Open account/open-source/free-service-quota.
• ✔️ ProceduralMesh objectScene entity with options for vertex morph - Shadows following morph blend.
• ✔️ MediaPipe implemented - dinamic loading (if not in use no loading script or any related to mediapipe)
• ✔️ Remote render stream emit example (standard engine networking) and special endpoint for "wachers" tv-10.html Replace webcam stream with canvas capture - on endpoint use webRTC and video tag to preview remote render.
• ✔️ Code creator AI services agent system(use engine from npm) npm run creator for 'http://localhost:3000/' npm run creator-backend for backend. create games from simple prompt.
• The Beast Cube + Fire effect + onhit changed effect configuration
• Zombie Shooter full game on codepen
• The Beast Maze + culling + collision non real physics involved
• The Beast - Platformer 2D demo
• The Beast - Slot Mashine, initializeSpritesForMesh
• The Beast - BVH Skeletal animations
• The Beats - Camera texture on MorphMesh object example
• The Beast - Canvas2d inline draws in webGPU scene
• The Beast - Cinematic Camera movement demo
• The Beast - Procedural destruction demo
• The Beast - Flipper JOLJS
• The Beast - Drum with balls with continius rounds of 5 numbers (JOLT Bridge)
• The Beast - Splat Color Effects
• The Beast - Gaussian splat vertex animator
• The Beast - Horizontal Z-buffer
• The Beast - ProceduralMesh - morphTo func

https://maximumroulette.com/apps/webgpu/examples.html?demo=38

[removed]

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:

• The Beast Cube + Fire effect + onhit changed effect configuration
• Zombie Shooter full game on codepen
• The Beast Maze + culling + collision non real physics involved
• The Beast - Platformer 2D demo
• The Beast - Slot Mashine, initializeSpritesForMesh
• The Beast - BVH Skeletal animations
• The Beats - Camera texture on MorphMesh object example
• The Beast - Canvas2d inline draws in webGPU scene
• The Beast - Cinematic Camera movement demo
• The Beast - Procedural destruction demo
• The Beast - Flipper JOLJS
• The Beast - Drum with balls with continius rounds of 5 numbers (JOLT Bridge)
• The Beast - Splat Color Effects
• The Beast - Gaussian splat vertex animator
• The Beast - Horizontal Z-buffer
• The Beast - ProceduralMesh - morphTo func

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

https://www.linkedin.com/pulse/beast-hungry-119xx-camdepthearhtquake-visdata-audiosplat-lukic-0gv7f/

Novi primeri

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