{"id":15019019,"url":"https://github.com/actnwit/rhodonitets","last_synced_at":"2025-04-12T22:20:34.823Z","repository":{"id":36991224,"uuid":"155550747","full_name":"actnwit/RhodoniteTS","owner":"actnwit","description":"Rhodonite Web3D(WebGL2\u0026WebGPU) Library in TypeScript","archived":false,"fork":false,"pushed_at":"2025-03-30T06:59:24.000Z","size":536726,"stargazers_count":145,"open_issues_count":41,"forks_count":6,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-04-04T10:01:35.283Z","etag":null,"topics":["webgl","webgpu","webxr"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/actnwit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-31T12:03:40.000Z","updated_at":"2025-03-30T06:58:31.000Z","dependencies_parsed_at":"2024-01-13T08:22:37.354Z","dependency_job_id":"462d7c87-0a43-4921-8862-2dde61c877df","html_url":"https://github.com/actnwit/RhodoniteTS","commit_stats":{"total_commits":5173,"total_committers":11,"mean_commits":"470.27272727272725","dds":"0.18229267349700362","last_synced_commit":"23bf91bb424f234c7795a8ce8e7b4bf49d5b06c3"},"previous_names":[],"tags_count":100,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actnwit%2FRhodoniteTS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actnwit%2FRhodoniteTS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actnwit%2FRhodoniteTS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actnwit%2FRhodoniteTS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/actnwit","download_url":"https://codeload.github.com/actnwit/RhodoniteTS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247157275,"owners_count":20893220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["webgl","webgpu","webxr"],"created_at":"2024-09-24T19:52:46.807Z","updated_at":"2025-04-04T10:02:09.833Z","avatar_url":"https://github.com/actnwit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Rhodonite\n\n![Rhodonite](./assets/images/Rhodonite_Logo_2.png)\n\nRhodonite is a Web3D(WebGL2/WebGPU) library written in TypeScript.\n\n![npm](https://img.shields.io/npm/v/rhodonite)\n![license](https://img.shields.io/npm/l/rhodonite)\n![test workflow](https://github.com/actnwit/RhodoniteTS/actions/workflows/test.yml/badge.svg)\n\n## Feature\n\n* Component-oriented\n* Blittable Memory Architecture (Original GPU data storage system with floating point texture)\n* Physically-based Rendering with Image-based Lighting\n* Node-based Shader System\n* Support loading the following 3D model files: [glTF2](https://github.com/KhronosGroup/glTF), glTF1, [VRM](https://vrm.dev/en/)\n* Support [Draco compression](https://google.github.io/draco/), [Basis Universal](https://github.com/BinomialLLC/basis_universal) and [KTX2](http://github.khronos.org/KTX-Specification/), etc\n* WebGPU Support (under development, about 85% complete)\n* WebXR(VR) Support (in WebGL mode)\n\n## What's the \"Blittable Memory Architecture\"\n\n\nWith 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.\nThis architecture allows all shaders always to access a vast amount of data.\n\nFor example, Rhodonite can handle and blend all morph targets (38 targets) of VRM characters simultaneously in the shader.\n\n## Viewer\n\nYou can try our library via https://editor.librn.com/.\nThis viewer supports glTF/VRM files Drag \u0026 Drop to display.\n(Drag \u0026 Drop all files if glTF data consists of multiple files.)\n\nPoly model\n![poly](./assets/images/screenshot_poly.jpg)\n\nAdvanced PBR\n![PBR](./assets/images/screenshot_pbr.jpg)\n\nVRM avatar model and VRMA animation\n![VRM](./assets/images/screenshot_vrm.jpg)\n\nShader Node Editor\n![ShaderNodeEditor](./assets/images/screenshot_shader_node_editor.jpg)\n\nWebXR(VR) with [multiview](https://blog.mozvr.com/multiview-on-webxr/) extension\n![WebXR_VR](./assets/images/screenshot_webxr_vr.jpg)\n\n## Supported Browsers\n\nGoogle Chrome, Firefox, Safari, Microsoft Edge (chromium-based), and other modern browsers are supported.\nIE11 is not supported.\n\n## Install\n\nYou can install Rhodonite easily.\n\n```bash\n$ npm install rhodonite\n```\n\n### Note\n\nIf you get an error like \"webxr-input-profiles not found\" when building a project using Rhodonite, Try \"npm install\" or \"yarn install\" again.\n\n## Coding with Rhodonite\n\n### In JavaScript\n\n```html\n\u003cbody\u003e\n  \u003ccanvas id=\"world\"\u003e\u003c/canvas\u003e\n  \u003cscript src=\"../../../dist/umd/rhodonite.min.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003e\n  // Init Rhodonite\n  await Rn.System.init({\n    approach: Rn.ProcessApproach.DataTexture,\n    canvas: document.getElementById('world'),\n  });\n\n  // create a Plane mesh\n  const planeEntity = Rn.MeshHelper.createPlane();\n  planeEntity.eulerAngles = Rn.Vector3.fromCopy3(Math.PI * 0.5, 0, 0);\n\n  // Render Loop\n  Rn.System.startRenderLoop(() =\u003e {\n    Rn.System.processAuto();\n  });\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n\n### In TypeScript\n\nThere are three package versions of Rhodonite: CommmonJS, ESModule, and UMD.\n\n#### Using CommonJS package\n\nYou need a bundler (e.g., Webpack) to import the Rhodonite CommonJS package.\n\n```typescript\nimport Rn from 'rhodonite';\n\n// Init Rhodonite\nawait Rn.System.init({\n  approach: Rn.ProcessApproach.DataTexture,\n  canvas: document.getElementById('world') as HTMLCanvasElement,\n});\n\n// create a Plane mesh\nconst planeEntity = Rn.MeshHelper.createPlane();\nplaneEntity.eulerAngles = Rn.Vector3.fromCopy3(Math.PI * 0.5, 0, 0);\n\n// Render Loop\nRn.System.startRenderLoop(() =\u003e {\n  Rn.System.processAuto();\n});\n```\n\n#### Using ESModule package\n\nYou don't need any bundler.\n\n```html\n\u003cscript type=\"module\" src=\"main.js\"\u003e\n```\n\n```typescript\n// main.ts\nimport Rn from 'rhodonite/dist/esm/index.js';\n// import Rn from 'rhodonite/dist/esmdev/index.js'; // use this if you want to display the source map or step through the library\n\n// Init Rhodonite\nawait Rn.System.init({\n  approach: Rn.ProcessApproach.DataTexture,\n  canvas: document.getElementById('world') as HTMLCanvasElement,\n});\n\n// create a Plane mesh\nconst planeEntity = Rn.MeshHelper.createPlane();\nplaneEntity.eulerAngles = Rn.Vector3.fromCopy3(Math.PI * 0.5, 0, 0);\n\n// Render Loop\nRn.System.startRenderLoop(() =\u003e {\n  Rn.System.processAuto();\n});\n```\n\n```\n// tsconfig.json\n{\n  ...\n  \"compilerOptions\": {\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"node\",\n    \"esModuleInterop\": true,\n    ...\n  }\n  ...\n}\n```\n\n#### Using UMD package\n\nSee the last part of https://github.com/actnwit/RhodoniteTS/wiki/Install .\n\n## Building Rhodonite\n\n### Prerequisites\n\n* Node.js 18 or later\n\n### Setup Project\n\n```bash\n$ yarn install\n```\n\nYou can use yarn instead.\n\n### Build command for Rhodonite library\n\n```bash\n$ yarn build\n```\n\n### Build command for samples\n\n```bash\n$ yarn build-samples\n```\n\n## Try Samples\n\nAfter building Rhodonite, try:\n\n```bash\n$ yarn watch-samples\n```\n\nThen, access http://localhost:8082/ with your web browser.\nWhen you are finished, press ctrl + c.\n\n## Build command for API documents\n\n```bash\n$ yarn doc\n```\n\n## Testing Rhodonite\n\n```bash\n$ yarn test\n```\n\nYou can execute a part of tests like this.\n\n### For unit test\n\n```bash\n$ yarn test-unit-part -- ./src/foundation/core\n```\n\n```bash\n$ yarn test-unit-part -- ./src/foundation/core/Entity.test.ts\n```\n\n### For E2E (visual) test\n\n```bash\n$ yarn test-e2e-part -- ./samples/test_e2e/DataTextureInstancedDrawingWebGL1\n```\n\n## Development using VSCode devcontainer\n\nThis project supports the VSCode devcontainer for any docker-installed OS.\n\nInput the following command in the VSCode command palette.\n\n```bash\n\u003e Remote-Containers: Reopen in Container\n```\n\nAfter 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.\n\n## Debugging inside VSCode (Step execution in VSCode Debug tab)\n\n1. Install the \"Debugger for Chrome\" VSCode Extension.\n2. Start the local server with `$ yarn start`.\n3. Push the run icon by choosing \"Launch Chrome to debug Rhodonite samples\" in the RUN tab of VSCode's left pane to start debugging.\n\nIf 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.\n\n## License\n\nMIT License\n\n## Acknowledgements\n\n### Libraries \u0026 Tools\n\nOur library uses the following libraries and tools and more. Thank you.\n\n- [immersive-web/webxr-input-profiles](https://github.com/immersive-web/webxr-input-profiles) (forked version)\n- [glTF samples](KhronosGroup/glTF-Sample-Models)\n\nCheck the complete list on package.json.\n\n### Contributors\n\n![GitHub Contributors Image](https://contrib.rocks/image?repo=actnwit/RhodoniteTS)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factnwit%2Frhodonitets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Factnwit%2Frhodonitets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factnwit%2Frhodonitets/lists"}