The Beast Mobile focus webgpu game engine (40 diff examples)

[u/js-fanatic]

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