🚀 me-webgpu-react

React wrapper for MatrixEngine WebGPU — a lightweight WebGPU 3D engine for meshes, physics, and more.


---

#### 🖼️ Logo

> Logo includes the official WebGPU logo.
> WebGPU logo by W3C
> Licensed under Creative Commons Attribution 4.0

---

✅ Supported Features

🎯 Mesh rendering from .obj files
🔷 Built-in primitives: Cube, Ball, and generic Mesh
🧲 Basic physics support via Ammo.js
🎯 Raycasting support — click to detect 3D object intersections
🎮 Easy access to the raw engine object
⚙️ Flexible control of transforms, rotation, scaling, and textures
🧊 GLB binary file loader with animation skeletal (bvh) support (from code for now)

---

📦 Installation

``bash
npm install me-webgpu-react

`

or

`bash
yarn add me-webgpu-react
`

⚡ Usage Example

`tsx
import React from "react";
import {MatrixEngineCanvas, Mesh} from "me-webgpu-react";

function App() {
const handleEngineReady = (engine: any) => {
console.log("Main app object [engine]:", engine);
// Access the raw engine here
};

return (
onReady={handleEngineReady}
canvasSize={{w: 256, h: 256}}
clearColor={"black"}>
position={[0, -2, -10]}
rotation={[0, 0, 0]}
rotationSpeed={[0, 0, 0]}
physics={{enabled: false}}
texture={"/res/meshes/cube.png"}
meshPath="/res/my-meshes/swat.obj"
scale={[5, 5, 5]}
/>

);
}

export default App;
`

🧠 Access the engine from anywhere

`ts
const engine = useMatrixEngineWGPU();
`

Use this hook inside any component to access the engine instance, including raycast utilities and scene graph control.

🔍 Raycasting Support

You can cast rays from the camera into the 3D scene to detect intersections with objects.

✅ Ideal for building object interaction systems like:

Object click / selection

Highlighting

UI placement in 3D

Physics-based triggers

📚 Related Projects
🔧 Core engine: matrix-engine-wgpu

🧪 Physics: ammo.js

🧪🐍 Concept "From code"

Objects (obj) sequence animation example :

`tsx
downloadMeshes(
makeObjSeqArg({
id: "swat-walk-pistol",
path: "res/my-meshes/objs-sequence/swat-walk-pistol",
from: 1,
to: 20,
}),
(m: any) => {
setMeshData(m["swat-walk-pistol"]);
engine.addMeshObj({
position: {x: 0, y: 0, z: -5},
rotation: {x: 0, y: 0, z: 0},
rotationSpeed: {x: 0, y: 0, z: 0},
texturesPaths: ["./res/meshes/cube.png"],
name: "swat-walk-pistol",
mesh: m["swat-walk-pistol"],
physics: {enabled: false},
objAnim: {
id: "swat-walk-pistol",
meshList: m,
currentAni: 1,
animations: {
active: "walk",
walk: {
from: 1,
to: 20,
speed: 3,
},
// walkPistol: { JUST FOR EXAMPLE ...
// from: 36,
// to: 60,
// speed: 3
// }
},
},
});
},
{scale: [1, 1, 1]}
);
`

🖼️ GLB loader

Material (same for addMeshObj) enumerators:
material: {type: "standard", useTextureFromGlb: true},
material: {type: "normalmap", useTextureFromGlb: true},
material: {type: "power", useTextureFromGlb: true},
material: {type: "pong", useTextureFromGlb: true},

See demo6
`js
var glbFile11 = await fetch("res/my-meshes/glb/woman1.glb").then(res =>
res.arrayBuffer().then(buf => uploadGLBModel(buf, engine.device))
);
engine.addGlbObj(
{
material: {type: "normalmap", useTextureFromGlb: true},
scale: [20, 20, 20],
position: {x: 0, y: -4, z: -28},
name: "woman1",
texturesPaths: ["./res/images/logo.png"],
},
null,
glbFile11
);
``

🌐 Live demo link:
https://maximumroulette.com/apps/webgpu/react/index.html

📄 License

MIT License
Created by Nikola Lukić
✉️ zlatnaspirala@gmail.com
🌐 maximumroulette.com

Credits
- 3d rig animations downloaded from great mixamo.com service.
- All other reference you can find on engine readme file.