The Beast examples
Description
WebGPU engine focus on 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.
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 public provides like unpkg.com etc. You can use PREFIX for textures or objects paths. The-Beast is friendly with codepen, worker physics bridge will test host origin name is it external or not to fix loading link if not it will use local resource always. See codepen examples.
Backend editorX (App level+Shader VisualScripting) (works in local env - desktop browsers) support list: Chrome, Edge, Opera, Firefox desktop.
Code Creator (The Beast 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 (Pipeline Manager) 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.
✔️ GPU Features: texture-compression-bc - (Not active by default).
✔️ Scene Culling feature (see maze example for CPU Culling).
📦 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.
Supported browsers for final build:
Windows Chrome ✔️
Windows Firefox ✔️
MACOS Chrome (151 tested) ✔️ (golden gate)
MAXOS Firefox ✔️ (golden gate)
MACOS Opera (arm64) ✔️ (golden gate)
MACOS Edge ✔️ (golden gate)
Codepen examples:
- [The Beast Cube + Fire effect + onhit changed effect configuration]
https://codepen.io/editor/zlatnaspirala/pen/019f2f4b-2ace-7c39-b304-b4028f7e5456
- [Zombie Shooter full game on codepen]
https://codepen.io/editor/zlatnaspirala/pen/019fc918-e45f-73f4-9987-9a1599ac4a1f
- [The Beast Maze + culling + collision non real physics involved]
https://codepen.io/editor/zlatnaspirala/pen/019fc979-ef25-7fe4-8bb4-4af074fe5843
- [The Beast - Platformer 2D demo]
https://codepen.io/editor/zlatnaspirala/pen/019fd2c0-3b88-7562-98dd-195bc4f74e3f
- [The Beast - Slot Mashine, initializeSpritesForMesh]
https://codepen.io/editor/zlatnaspirala/pen/019fd2fe-77c8-7860-a2b7-ee332ce29d86
- [The Beast - BVH Skeletal animations]
https://codepen.io/editor/zlatnaspirala/pen/019fd30e-35ba-7c0c-a406-8db158bae5c7
- [The Beats - Camera texture on MorphMesh object example]
https://codepen.io/editor/zlatnaspirala/pen/019fd31d-7e1d-7149-b2e4-b82e7dd57197
- [The Beast - Canvas2d inline draws in webGPU scene]
https://codepen.io/editor/zlatnaspirala/pen/019fd323-4e24-72bb-9456-399ce2d792ff
- [The Beast - Cinematic Camera movement demo]
https://codepen.io/editor/zlatnaspirala/pen/019fd339-1abb-7622-adb5-ae2e427cad29
- [The Beast - Procedural destruction demo]
https://codepen.io/editor/zlatnaspirala/pen/019fd33f-b64d-76f4-b136-91a5e3afdf76
- [The Beast - Flipper JOLJS]
https://codepen.io/editor/zlatnaspirala/pen/019fd37a-554a-7fc8-aea8-e345f5e38caf
- [The Beast - Drum with balls with continius rounds of 5 numbers (JOLT Bridge)]
https://codepen.io/editor/zlatnaspirala/pen/019fd353-5540-79ce-8d7b-12cb2d90a3a8
- [The Beast - Splat Color Effects]
https://codepen.io/editor/zlatnaspirala/pen/019fd388-de26-71dc-a6f0-481525624b42
- [The Beast - Gaussian splat vertex animator]
https://codepen.io/editor/zlatnaspirala/pen/019fd3a0-6cd9-756c-bf77-985e2a60741e
- [The Beast - Horizontal Z-buffer]
https://codepen.io/editor/zlatnaspirala/pen/019fd635-9e66-7795-93df-3dd7ab08414b
- [The Beast - ProceduralMesh - morphTo func]
https://codepen.io/editor/zlatnaspirala/pen/019fd663-3e4e-7e1e-802f-e17f22858512
Discussion