Rhodonite is a Web3D(WebGL2/WebGPU) library written in TypeScript.
- Component-oriented
- Blittable Memory Architecture (Original GPU data storage system with floating point texture)
- Physically-based Rendering with Image-based Lighting
- Node-based Shader System
- Support loading the following 3D model files: glTF2, glTF1, VRM
- Support Draco compression, Basis Universal and KTX2, etc
- WebGPU Support (under development, about 85% complete)
- WebXR(VR) Support (in WebGL mode)
With the Blittable Memory Architecture, Rhodonite stores almost all of its data in a large pre-allocated ArrayBuffer. Data storage for matrix or vector classes in Rhodonite's component classes and materials are assigned from the memory pool, which means most of the data are on that memory pool, transferred to the GPU every frame as a floating-point texture. This architecture allows all shaders always to access a vast amount of data.
For example, Rhodonite can handle and blend all morph targets (38 targets) of VRM characters simultaneously in the shader.
You can try our library via https://editor.librn.com/. This viewer supports glTF/VRM files Drag & Drop to display. (Drag & Drop all files if glTF data consists of multiple files.)
Poly model
Advanced PBR
VRM avatar model and VRMA animation
Shader Node Editor
WebXR(VR) with multiview extension
Google Chrome, Firefox, Safari, Microsoft Edge (chromium-based), and other modern browsers are supported. IE11 is not supported.
You can install Rhodonite easily.
$ npm install rhodoniteIf you get an error like "webxr-input-profiles not found" when building a project using Rhodonite, Try "npm install" or "yarn install" again.
<body>
<canvas id="world"></canvas>
<script src="../../../dist/umd/rhodonite.min.js"></script>
<script>
// Init Rhodonite
await Rn.System.init({
approach: Rn.ProcessApproach.DataTexture,
canvas: document.getElementById('world'),
});
// create a Plane mesh
const planeEntity = Rn.MeshHelper.createPlane();
planeEntity.eulerAngles = Rn.Vector3.fromCopy3(Math.PI * 0.5, 0, 0);
// Render Loop
Rn.System.startRenderLoop(() => {
Rn.System.processAuto();
});
</script>
</body>There are three package versions of Rhodonite: CommmonJS, ESModule, and UMD.
You need a bundler (e.g., Webpack) to import the Rhodonite CommonJS package.
import Rn from 'rhodonite';
// Init Rhodonite
await Rn.System.init({
approach: Rn.ProcessApproach.DataTexture,
canvas: document.getElementById('world') as HTMLCanvasElement,
});
// create a Plane mesh
const planeEntity = Rn.MeshHelper.createPlane();
planeEntity.eulerAngles = Rn.Vector3.fromCopy3(Math.PI * 0.5, 0, 0);
// Render Loop
Rn.System.startRenderLoop(() => {
Rn.System.processAuto();
});You don't need any bundler.
<script type="module" src="main.js">// main.ts
import Rn from 'rhodonite/dist/esm/index.js';
// import Rn from 'rhodonite/dist/esmdev/index.js'; // use this if you want to display the source map or step through the library
// Init Rhodonite
await Rn.System.init({
approach: Rn.ProcessApproach.DataTexture,
canvas: document.getElementById('world') as HTMLCanvasElement,
});
// create a Plane mesh
const planeEntity = Rn.MeshHelper.createPlane();
planeEntity.eulerAngles = Rn.Vector3.fromCopy3(Math.PI * 0.5, 0, 0);
// Render Loop
Rn.System.startRenderLoop(() => {
Rn.System.processAuto();
});// tsconfig.json
{
...
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "node",
"esModuleInterop": true,
...
}
...
}
See the last part of https://github.com/actnwit/RhodoniteTS/wiki/Install .
- Node.js 18 or later
$ yarn installYou can use yarn instead.
$ yarn build$ yarn build-samplesAfter building Rhodonite, try:
$ yarn watch-samplesThen, access http://localhost:8082/ with your web browser. When you are finished, press ctrl + c.
$ yarn doc$ yarn testYou can execute a part of tests like this.
$ yarn test-unit-part -- ./src/foundation/core$ yarn test-unit-part -- ./src/foundation/core/Entity.test.ts$ yarn test-e2e-part -- ./samples/test_e2e/DataTextureInstancedDrawingWebGL1This project supports the VSCode devcontainer for any docker-installed OS.
Input the following command in the VSCode command palette.
> Remote-Containers: Reopen in ContainerAfter a new dev container window opens, You can work in the Debian Linux container environment. All dependencies (node, npm, yarn, typescript, chromium, and all packages for Rhodonite) are already set up.
- Install the "Debugger for Chrome" VSCode Extension.
- Start the local server with
$ yarn start. - Push the run icon by choosing "Launch Chrome to debug Rhodonite samples" in the RUN tab of VSCode's left pane to start debugging.
If you use the VSCode devcontainer environment, You should open another RhodoniteTS VSCode window locally and do debug ops on it instead of the devcontainer VSCode window.
MIT License
Our library uses the following libraries and tools and more. Thank you.
- immersive-web/webxr-input-profiles (forked version)
- glTF samples
Check the complete list on package.json.