Rhodonite is a WebGL library written in TypeScript.
- Entity Component System
- Blittable Memory Architecture (Original GPU data storage system with floating point texture)
- Physically based Rendering with Image Based Lighting
- Support loading the following 3D model files: glTF2, glTF1, VRM
- Support Basis Universal Compressed Texture
With the Blittable Memory Architecture, Rhodonite stores almost all of its data in a large pre-allocated ArrayBuffer. Most of data are on that memory pool, which is transferred to the GPU every frame as a floating point texture. This allows all shaders to always access to a huge amount of data.
For example, Rhodonite can handle and blend the all morph targets of VRM characters (38 targets) at the same time 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 is consists of multiple files.)
Google Chrome, Firefox, Safari, Microsoft Edge (chromium-based), and other modern browsers are supported. IE11 is not supported.
You can install the esm version of Rhodonite easily.
$ npm install rhodonite
<body>
<canvas id="world"></canvas>
<script src="../../../dist/rhodonite.min.js"></script>
<script>
async function load() {
// All Rhodonite classes you need are in window.Rn object.
await Rn.ModuleManager.getInstance().loadModule('webgl');
await Rn.ModuleManager.getInstance().loadModule('pbr');
const system = Rn.System.getInstance();
const gl = system.setProcessApproachAndCanvas(Rn.ProcessApproach.UniformWebGL1, document.getElementById('world'));
const entityRepository = Rn.EntityRepository.getInstance();
...
(After that, please refer to the sample codes.)
...
}
</script>
</body>
There are two package version of Rhodonite: esm (ESModule wrapped in CommonJS) and umd.
You need a bundler like Webpack to import Rhodonite esm package directly.
import Rn from 'rhodonite'; // All Rhodonite Objects in this
import { CameraComponent, RenderPass } from 'rhodonite'; // for type annotations
async function load() {
await Rn.ModuleManager.getInstance().loadModule('webgl');
await Rn.ModuleManager.getInstance().loadModule('pbr');
const importer = Rn.Gltf1Importer.getInstance();
const system = Rn.System.getInstance();
const gl = system.setProcessApproachAndCanvas(Rn.ProcessApproach.UniformWebGL1, document.getElementById('world') as HTMLCanvasElement);
const entityRepository = Rn.EntityRepository.getInstance();
// Camera
const cameraEntity = entityRepository.createEntity([Rn.TransformComponent, Rn.SceneGraphComponent, Rn.CameraComponent, Rn.CameraControllerComponent])
const cameraComponent = cameraEntity.getComponent(Rn.CameraComponent) as CameraComponent;
...
(After that, please refer to the sample codes.)
...
}
You also be able to use dist/umd/rhodonite.js
or dist/umd/rhodonite.min.js
for actual Rhodonite object by script tag in HTML file.
Next, import types from rhodonite
esm package.
import _Rn from 'rhodonite'; // Use this for adding type annotations to window.Rn in this sample
import { CameraComponent, RenderPass } from 'rhodonite'; // for type annotations
declare const window: any;
declare const Rn: typeof _Rn; // Use the window.Rn as Rn
async function load() {
await Rn.ModuleManager.getInstance().loadModule('webgl');
await Rn.ModuleManager.getInstance().loadModule('pbr');
const importer = Rn.Gltf1Importer.getInstance();
const system = Rn.System.getInstance();
const gl = system.setProcessApproachAndCanvas(Rn.ProcessApproach.UniformWebGL1, document.getElementById('world') as HTMLCanvasElement);
const entityRepository = Rn.EntityRepository.getInstance();
// Camera
const cameraEntity = entityRepository.createEntity([Rn.TransformComponent, Rn.SceneGraphComponent, Rn.CameraComponent, Rn.CameraControllerComponent])
const cameraComponent = cameraEntity.getComponent(Rn.CameraComponent) as CameraComponent;
...
(After that, please refer to the sample codes.)
...
In this approach, you don't need any bundler. just compile it by:
$ npx tsc ./main.ts --lib es2015,dom --target es2015 --module umd --moduleResolution node
For detail, See the typescript-based samples like ./samples/simple/VideoTexture/main.ts .
$ npm run start
Then, access http://localhost:8082/ with your web browser.
- Node.js 12.18.1 or later
$ npm install
You can use yarn instead.
$ npm run build
$ npm run build-samples
$ npm run doc
$ npm run test
Some of the E2E (visual) tests might fail due to GPU environment differences. The official test environment is our Github Action CI Runner instance.
- Install the "Debugger for Chrome" VSCode Extension.
- Start the local server with
$ npm run 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.
MIT License