{"id":15026276,"url":"https://github.com/orillusion/orillusion","last_synced_at":"2025-04-23T06:47:06.183Z","repository":{"id":142922457,"uuid":"613977151","full_name":"Orillusion/orillusion","owner":"Orillusion","description":"Orillusion is a pure Web3D rendering engine which is fully developed based on the WebGPU standard.","archived":false,"fork":false,"pushed_at":"2025-04-17T06:15:31.000Z","size":3997,"stargazers_count":4568,"open_issues_count":74,"forks_count":515,"subscribers_count":307,"default_branch":"main","last_synced_at":"2025-04-23T06:46:58.077Z","etag":null,"topics":["3d","graphics","html5","javascript","orillusion","typescript","web3d","webgpu","wgsl"],"latest_commit_sha":null,"homepage":"https://www.orillusion.com","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/Orillusion.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/contributing.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","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":"2023-03-14T16:37:43.000Z","updated_at":"2025-04-22T05:23:44.000Z","dependencies_parsed_at":"2023-05-07T12:31:44.573Z","dependency_job_id":"5e0bee67-08de-496a-a2a5-d0f3c447b560","html_url":"https://github.com/Orillusion/orillusion","commit_stats":{"total_commits":338,"total_committers":20,"mean_commits":16.9,"dds":0.5857988165680473,"last_synced_commit":"fc3614ec0103624ecd37289d952ae3fd8d5ee86b"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Orillusion%2Forillusion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Orillusion%2Forillusion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Orillusion%2Forillusion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Orillusion%2Forillusion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Orillusion","download_url":"https://codeload.github.com/Orillusion/orillusion/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250386745,"owners_count":21422026,"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":["3d","graphics","html5","javascript","orillusion","typescript","web3d","webgpu","wgsl"],"created_at":"2024-09-24T20:04:11.733Z","updated_at":"2025-04-23T06:47:06.155Z","avatar_url":"https://github.com/Orillusion.png","language":"TypeScript","readme":"![Cover Art](https://github.com/Orillusion/orillusion-webgpu-samples/blob/main/logo_new.png)     \n## Orillusion\n\n[![Test](https://github.com/Orillusion/orillusion/actions/workflows/ci.yml/badge.svg)](https://github.com/Orillusion/orillusion/actions/workflows/ci.yml)\n[![npm](https://img.shields.io/npm/v/@orillusion/core)](https://www.npmjs.com/package/@orillusion/core)\n\n`Orillusion`  is a pure Web3D rendering engine which is fully developed based on the `WebGPU` standard. It aims to achieve desktop-level rendering effects and supports 3D rendering of complex scenes in the browser.\n\n## Need to know\nBeta version,  **NOT**  recommended for any commercial application.\n\n## Contributing (ongoing)\n\n`WebGPU` is the latest technology in the web domain and will play a crucial role in terms of 3D rendering as well as `AI/LLM` scenarios. \n\nWe aim to create a dedicated technical community for the `WebGPU` field, bringing together outstanding developers. \n\nHope more and more `front-end` developers could stay updated with the latest Web technologies `NOT ONLY` image slicing for web design.\n\nSpecifically, we will continuously update the excellent samples provided by open-source contributors, allowing everyone to see better works. \n\nHope it could help highlight the very talented individual developers within the community!\n\n\u003ca href=\"https://www.youtube.com/@orillusion7225\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Orillusion/assets/main/sample_src/light_city.gif\" height=\"140\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ID-Emmett\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Orillusion/assets/main/sample_src/physical_car.gif\" height=\"140\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ID-Emmett\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Orillusion/assets/main/sample_src/movie_camera.gif\" height=\"140\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ID-Emmett\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Orillusion/assets/main/sample_src/helicopter.gif\" height=\"140\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.youtube.com/@orillusion7225\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Orillusion/assets/main/sample_src/shooting.gif\" height=\"140\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/OriIIusion\"\u003e\u003cimg src=\"https://github.com/Orillusion/assets/blob/main/sample_src/beijing_subway.gif\" height=\"140\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/mate-h\"\u003e\u003cimg src=\"https://github.com/Orillusion/assets/blob/main/sample_src/volumetric_clouds.gif\" height=\"140\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ID-Emmett\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Orillusion/assets/main/sample_src/track_camera.gif\" height=\"140\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ID-Emmett\"\u003e\u003cimg src=\"https://github.com/Orillusion/assets/blob/main/sample_src/pentagram.webp\" height=\"140\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/OriIIusion\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Orillusion/assets/main/sample_src/light_box.gif\" height=\"140\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/seven1031\"\u003e\u003cimg src=\"https://github.com/Orillusion/assets/blob/main/sample_src/rabbit_box.webp\" height=\"140\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/seven1031\"\u003e\u003cimg src=\"https://github.com/Orillusion/assets/blob/main/sample_src/fluid_mouse.webp\" height=\"140\"\u003e\u003c/a\u003e\n## Install\n\n### NPM\nWe recommend using front-end build tools for developing Web3D applications, such  [Vite](https://vitejs.dev/) or [Webpack](https://webpack.js.org/).\n\n- Install dependencies:\n```text\nnpm install @orillusion/core --save\n```\n- Import on-demand:\n```javascript\nimport { Engine3D, Camera3D } from '@orillusion/core'\n```\n- Import globally:\n```javascript\nimport * as Orillusion from '@orillusion/core'\n```\n\n### CDN\nIn order to use the engine more conveniently, we support to use native `\u003cscript\u003e` tag to import `Orillusion`. Three different ways to import using the official `CDN` link:\n\n- **Global Build:** You can use `Orillusion` directly from a CDN via a script tag:\n```html\n\u003cscript src=\"https://unpkg.com/@orillusion/core/dist/orillusion.umd.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e  \n    const { Engine3D, Camera3D } = Orillusion  \n\u003c/script\u003e\n```\nThe above link loads the global build of `Orillusion`, where all top-level APIs are exposed as properties on the global `Orillusion` object.\n\n-  **ESModule Build:** We recommend using the [ESModule](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) way for development. As most browsers have supported `ES` module, we just need to import the `ES` build version of `orillusion.es.js`\n```html\n\u003cscript type=\"module\"\u003e  \n    import { Engine3D, Camera3D } from \"https://unpkg.com/@orillusion/core/dist/orillusion.es.js\" \n\u003c/script\u003e\n```\n\n- **Import Maps:** In order to manage the name of dependencies, we recommend using [Import Maps](https://caniuse.com/import-maps)\n\n```html\n\u003c!-- Define the name or address of ES Module --\u003e  \n\u003cscript  type=\"importmap\"\u003e  \n{  \n    \"imports\": { \"@orillusion/core\": \"https://unpkg.com/@orillusion/core/dist/orillusion.es.js\" }  \n}  \n\u003c/script\u003e  \n\u003c!-- Customerized names could be imported --\u003e  \n\u003cscript  type=\"module\"\u003e  \n    import { Engine3D, Camera3D } from \"@orillusion/core\"\n\u003c/script\u003e\n```\n\n## Usage\n### Create Engine3D instance\n\nAt the beginning, we need to use `Engine3D.init()` and then the instance `Engine3D` will be created for further use\n\n```javascript\nimport { Engine3D } from '@orillusion/core' \nEngine3D.init().then(()=\u003e{  \n    // Next\n})\n```\nAs `Engine3D.init()` is asynchronous, we recommend using `async/await` in the code\n```javascript\nimport { Engine3D } from '@orillusion/core'  \nasync function demo(){  \n    await Engine3D.init();  \n    // Next \n}  \ndemo()\n```\n### Create canvas\nIn default, `Engine3D.init()`will create a `canvas` the same size with the window. Also, we could create a `canvas` manually using tag `\u003ccanvas\u003e` with a `id`\n\n```html\n\u003ccanvas id=\"canvas\" width=\"800\" height=\"500\" /\u003e\n```\nNext, we need to get the `\u003ccanvas\u003e` via `id` and then init engine by passing the `\u003ccanvas\u003e` to `canvasConfig`\n\n```javascript\nimport { Engine3D } from '@orillusion/core';  \nlet canvas = document.getElementById('canvas')  \n\nawait Engine3D.init({  \n    canvasConfig: { canvas }  \n})\n```\nPlease read the [Docs](https://www.orillusion.com/guide/) to Learn More.\n\n## Platform\n**Windows/Mac/Linux:**\n- Chrome 113+\n- Edge: 113+\n\n**Android (Behind the `enable-unsafe-webgpu` flag):** \n- Chrome Canary 113+ \n- Edge Canary 113+\n\n## Useful links\n- [Official Web Site](https://www.orillusion.com/)\n- [Documentation](https://www.orillusion.com/guide/)\n- [Forum](https://forum.orillusion.com/)\n\n## Dev and Contribution\nPlease make sure to read the [Contributing Guide](.github/contributing.md) before developing or making a pull request.\n\n## License \n\nOrillusion engine is released under the [MIT](https://opensource.org/licenses/MIT) license. \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forillusion%2Forillusion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Forillusion%2Forillusion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forillusion%2Forillusion/lists"}