orillusion - Orillusion是一个纯粹的Web3D渲染引擎，完全基于WebGPU标准开发。

Created at: 2023-03-15 00:37:43

Language: TypeScript

编号: https://github.com/Orillusion/orillusion

License: MIT

幻觉

Orillusion

是一个完全基于标准开发的纯 Web3D 渲染引擎。它旨在实现桌面级渲染效果，并支持在浏览器中对复杂场景进行 3D 渲染。

WebGPU

需要知道

测试版，不建议用于任何商业应用。

安装

国家防范机制

我们建议使用前端构建工具来开发Web3D应用程序，例如Vite或Webpack。

安装依赖项：

npm install @orillusion/core --save

Import on-demand:

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

Import globally:

import * as Orillusion from '@orillusion/core'

CDN

In order to use the engine more conveniently, we support to use native

<script>

tag to import

Orillusion

. Three different ways to import using the official

CDN

link:

Global Build: You can use
```
Orillusion
```
directly from a CDN via a script tag:

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

The above link loads the global build of

Orillusion

, where all top-level APIs are exposed as properties on the global

Orillusion

object.

ESModule Build: We recommend using the ESModule way for development. As most browsers have supported
```
ES
```
module, we just need to import the
```
ES
```
build version of
```
orillusion.es.js
```

<script type="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 using Import Maps

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

Usage

Create Engine3D instance

At the beginning, we need to use

Engine3D.init()

and then the instance

Engine3D

will be created for further use

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

Engine3D.init()

is asynchronous, we recommend using

async/await

in the code

import { Engine3D } from '@orillusion/core'  
async function demo(){  
    await Engine3D.init();  
    // Next 
}  
demo()

Create canvas

In default,

Engine3D.init()

will create a

canvas

the same size with the window. Also, we could create a

canvas

manually using tag

<canvas>

with a

id

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

Next, we need to get the

<canvas>

via

id

and then init engine by passing the

<canvas>

canvasConfig

import { Engine3D } from '@orillusion/core';  
let canvas = document.getElementById('canvas')  

await Engine3D.init({  
    canvasConfig: { canvas }  
})

Please read the Docs to Learn More.

Platform

Chrome Desktop: 113+
Edge Desktop: 113+

Useful links

Dev and Contribution

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

License

Orillusion engine is released under the MIT license.