Repository files navigation

Orillusion is a pure Web3D rendering engine which is fully developed based on theWebGPU standard. It aims to achieve desktop-level rendering effects and supports 3D rendering of complex scenes in the browser.

Beta version,NOT recommended for any commercial application.

WebGPU is the latest technology in the web domain and will play a crucial role in terms of 3D rendering as well asAI/LLM scenarios.

We aim to create a dedicated technical community for theWebGPU field, bringing together outstanding developers.

Hope more and morefront-end developers could stay updated with the latest Web technologiesNOT ONLY image slicing for web design.

Specifically, we will continuously update the excellent samples provided by open-source contributors, allowing everyone to see better works.

Hope it could help highlight the very talented individual developers within the community!

We recommend using front-end build tools for developing Web3D applications, suchVite orWebpack.

• Install dependencies:

npm install @orillusion/core --save

• Import on-demand:

import{Engine3D,Camera3D}from'@orillusion/core'

• Import globally:

import*asOrillusionfrom'@orillusion/core'

In order to use the engine more conveniently, we support to use native<script> tag to importOrillusion. Three different ways to import using the officialCDN link:

• Global Build: You can useOrillusion directly from a CDN via a script tag:

<scriptsrc="https://unpkg.com/@orillusion/core/dist/orillusion.umd.js"></script><script>const{ Engine3D, Camera3D}=Orillusion</script>

The above link loads the global build ofOrillusion, where all top-level APIs are exposed as properties on the globalOrillusion object.

• ESModule Build: We recommend using theESModule way for development. As most browsers have supportedES module, we just need to import theES build version oforillusion.es.js

<scripttype="module">import{Engine3D,Camera3D}from"https://unpkg.com/@orillusion/core/dist/orillusion.es.js"</script>

• Import Maps: In order to manage the name of dependencies, we recommend usingImport Maps

<!-- Define the name or address of ES Module --><scripttype="importmap">{"imports":{"@orillusion/core":"https://unpkg.com/@orillusion/core/dist/orillusion.es.js"}}</script><!-- Customerized names could be imported --><scripttype="module">import{Engine3D,Camera3D}from"@orillusion/core"</script>

At the beginning, we need to useEngine3D.init() and then the instanceEngine3D will be created for further use

import{Engine3D}from'@orillusion/core'Engine3D.init().then(()=>{// Next})

AsEngine3D.init() is asynchronous, we recommend usingasync/await in the code

import{Engine3D}from'@orillusion/core'asyncfunctiondemo(){awaitEngine3D.init();// Next}demo()

In default,Engine3D.init()will create acanvas the same size with the window. Also, we could create acanvas manually using tag<canvas> with aid

<canvasid="canvas"width="800"height="500"/>

Next, we need to get the<canvas> viaid and then init engine by passing the<canvas> tocanvasConfig

import{Engine3D}from'@orillusion/core';letcanvas=document.getElementById('canvas')awaitEngine3D.init({canvasConfig:{ canvas}})

Please read theDocs to Learn More.

Windows/Mac/Linux:

• Chrome 113+
• Edge: 113+

Android (Behind theenable-unsafe-webgpu flag):

• Chrome Canary 113+
• Edge Canary 113+

• Official Web Site
• Documentation
• Forum

Please make sure to read theContributing Guide before developing or making a pull request.

Orillusion engine is released under theMIT license.