[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-71421":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":35,"lastSyncTime":36,"discoverSource":37},71421,"orillusion","Orillusion\u002Forillusion","Orillusion","Orillusion is a pure Web3D rendering engine which is fully developed based on the WebGPU standard.","https:\u002F\u002Fwww.orillusion.com",null,"TypeScript",5179,598,341,79,0,4,64.73,"MIT License",false,"main",true,[24,25,26,27,5,28,29,30,31],"3d","graphics","html5","javascript","typescript","web3d","webgpu","wgsl","2026-06-12 04:01:00","![Cover Art](https:\u002F\u002Fgithub.com\u002FOrillusion\u002Forillusion-webgpu-samples\u002Fblob\u002Fmain\u002Flogo_new.png)     \n## Orillusion\n\n[![Test](https:\u002F\u002Fgithub.com\u002FOrillusion\u002Forillusion\u002Factions\u002Fworkflows\u002Fci.yml\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002FOrillusion\u002Forillusion\u002Factions\u002Fworkflows\u002Fci.yml)\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@orillusion\u002Fcore)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@orillusion\u002Fcore)\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\u002FLLM` 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:\u002F\u002Fwww.youtube.com\u002F@orillusion7225\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FOrillusion\u002Fassets\u002Fmain\u002Fsample_src\u002Flight_city.gif\" height=\"140\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FID-Emmett\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FOrillusion\u002Fassets\u002Fmain\u002Fsample_src\u002Fphysical_car.gif\" height=\"140\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FID-Emmett\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FOrillusion\u002Fassets\u002Fmain\u002Fsample_src\u002Fmovie_camera.gif\" height=\"140\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FID-Emmett\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FOrillusion\u002Fassets\u002Fmain\u002Fsample_src\u002Fhelicopter.gif\" height=\"140\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002F@orillusion7225\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FOrillusion\u002Fassets\u002Fmain\u002Fsample_src\u002Fshooting.gif\" height=\"140\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FOriIIusion\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FOrillusion\u002Fassets\u002Fblob\u002Fmain\u002Fsample_src\u002Fbeijing_subway.gif\" height=\"140\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmate-h\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FOrillusion\u002Fassets\u002Fblob\u002Fmain\u002Fsample_src\u002Fvolumetric_clouds.gif\" height=\"140\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FID-Emmett\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FOrillusion\u002Fassets\u002Fmain\u002Fsample_src\u002Ftrack_camera.gif\" height=\"140\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FID-Emmett\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FOrillusion\u002Fassets\u002Fblob\u002Fmain\u002Fsample_src\u002Fpentagram.webp\" height=\"140\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FOriIIusion\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FOrillusion\u002Fassets\u002Fmain\u002Fsample_src\u002Flight_box.gif\" height=\"140\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fseven1031\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FOrillusion\u002Fassets\u002Fblob\u002Fmain\u002Fsample_src\u002Frabbit_box.webp\" height=\"140\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fseven1031\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FOrillusion\u002Fassets\u002Fblob\u002Fmain\u002Fsample_src\u002Ffluid_mouse.webp\" height=\"140\">\u003C\u002Fa>\n## Install\n\n### NPM\nWe recommend using front-end build tools for developing Web3D applications, such  [Vite](https:\u002F\u002Fvitejs.dev\u002F) or [Webpack](https:\u002F\u002Fwebpack.js.org\u002F).\n\n- Install dependencies:\n```text\nnpm install @orillusion\u002Fcore --save\n```\n- Import on-demand:\n```javascript\nimport { Engine3D, Camera3D } from '@orillusion\u002Fcore'\n```\n- Import globally:\n```javascript\nimport * as Orillusion from '@orillusion\u002Fcore'\n```\n\n### CDN\nIn order to use the engine more conveniently, we support to use native `\u003Cscript>` 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:\u002F\u002Funpkg.com\u002F@orillusion\u002Fcore\u002Fdist\u002Forillusion.umd.js\">\u003C\u002Fscript>\n\u003Cscript>  \n    const { Engine3D, Camera3D } = Orillusion  \n\u003C\u002Fscript>\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:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FJavaScript\u002FGuide\u002FModules) 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\">  \n    import { Engine3D, Camera3D } from \"https:\u002F\u002Funpkg.com\u002F@orillusion\u002Fcore\u002Fdist\u002Forillusion.es.js\" \n\u003C\u002Fscript>\n```\n\n- **Import Maps:** In order to manage the name of dependencies, we recommend using [Import Maps](https:\u002F\u002Fcaniuse.com\u002Fimport-maps)\n\n```html\n\u003C!-- Define the name or address of ES Module -->  \n\u003Cscript  type=\"importmap\">  \n{  \n    \"imports\": { \"@orillusion\u002Fcore\": \"https:\u002F\u002Funpkg.com\u002F@orillusion\u002Fcore\u002Fdist\u002Forillusion.es.js\" }  \n}  \n\u003C\u002Fscript>  \n\u003C!-- Customerized names could be imported -->  \n\u003Cscript  type=\"module\">  \n    import { Engine3D, Camera3D } from \"@orillusion\u002Fcore\"\n\u003C\u002Fscript>\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\u002Fcore' \nEngine3D.init().then(()=>{  \n    \u002F\u002F Next\n})\n```\nAs `Engine3D.init()` is asynchronous, we recommend using `async\u002Fawait` in the code\n```javascript\nimport { Engine3D } from '@orillusion\u002Fcore'  \nasync function demo(){  \n    await Engine3D.init();  \n    \u002F\u002F 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>` with a `id`\n\n```html\n\u003Ccanvas id=\"canvas\" width=\"800\" height=\"500\" \u002F>\n```\nNext, we need to get the `\u003Ccanvas>` via `id` and then init engine by passing the `\u003Ccanvas>` to `canvasConfig`\n\n```javascript\nimport { Engine3D } from '@orillusion\u002Fcore';  \nlet canvas = document.getElementById('canvas')  \n\nawait Engine3D.init({  \n    canvasConfig: { canvas }  \n})\n```\nPlease read the [Docs](https:\u002F\u002Fwww.orillusion.com\u002Fguide\u002F) to Learn More.\n\n## Platform\n**Windows\u002FMac\u002FLinux:**\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:\u002F\u002Fwww.orillusion.com\u002F)\n- [Documentation](https:\u002F\u002Fwww.orillusion.com\u002Fguide\u002F)\n- [Forum](https:\u002F\u002Fforum.orillusion.com\u002F)\n\n## Dev and Contribution\nPlease make sure to read the [Contributing Guide](.github\u002Fcontributing.md) before developing or making a pull request.\n\n## License \n\nOrillusion engine is released under the [MIT](https:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT) license. \n","Orillusion 是一个基于 WebGPU 标准完全开发的纯 Web3D 渲染引擎。该项目使用 TypeScript 编写，旨在实现桌面级渲染效果，并支持在浏览器中进行复杂场景的 3D 渲染。其核心功能包括高效利用现代 GPU 的计算能力来处理复杂的图形任务，以及通过 WebGPU 提供的低级 API 来优化性能。尽管目前处于测试阶段且不推荐用于商业应用，但 Orillusion 非常适合前端开发者学习和探索最新的 Web 技术，特别是在 3D 渲染、AI 和大型语言模型等领域。此外，项目还致力于建立一个专注于 WebGPU 技术的社区，促进优秀开源贡献者的合作与交流。",2,"2026-06-11 03:37:40","high_star"]