orillusion / orillusion Goto Github PK
View Code? Open in Web Editor NEWOrillusion is a pure Web3D rendering engine which is fully developed based on the WebGPU standard.
Home Page: https://www.orillusion.com
License: MIT License
Orillusion is a pure Web3D rendering engine which is fully developed based on the WebGPU standard.
Home Page: https://www.orillusion.com
License: MIT License
Improve engine functionality and provide high-performance 2D rendering components, making it easy for developers to create 2D interfaces.
Add a DirectLight and a SpotLight to scene. when DirectLight is disabled, the SpotLight will disabled too。
(DirectLight is red color,SpotLight is blue color。)
DirectLight disable, SpotLight is enable
engine version 0.5.0
chrome 114.0.5696.0 (Official Build) canary (64-bit)
this is all code:
Engine3D.setting.shadow.enable = true;
await Engine3D.init({});
GUIHelp.init();
let scene = new Scene3D();
let cameraObj = new Object3D();
cameraObj.name = `cameraObj`;
let mainCamera = cameraObj.addComponent(Camera3D);
mainCamera.perspective(60, webGPUContext.aspect, 1, 5000.0);
let hoverCameraController = mainCamera.object3D.addComponent(HoverCameraController);
scene.addChild(cameraObj);
//set camera data
hoverCameraController.setCamera(0, -45, 1000, new Vector3(0, 50, 0));
{
let obj = new Object3D();
obj.localPosition = new Vector3(0, 0, 0);
obj.localRotation = new Vector3(135, 45, 0);
let lt: DirectLight = obj.addComponent(DirectLight);
lt.castShadow = true;
lt.intensity = 50;
lt.lightColor = Color.COLOR_RED;
let mr = obj.addComponent(MeshRenderer);
mr.castShadow = true;
mr.geometry = new SphereGeometry(30, 30, 30);
let mat = new UnLitMaterial();
mat.baseColor = Color.COLOR_RED;
mr.material = mat;
scene.addChild(obj);
lt.debug();
GUIHelp.addButton("direct enable switch", () => lt.enable = !lt.enable)
}
{
let obj = new Object3D();
obj.localPosition = new Vector3(100, 130, 100);
obj.localRotation = new Vector3(135, 100, 0);
let lt: SpotLight = obj.addComponent(SpotLight);
lt.castShadow = true;
lt.intensity = 100;
lt.at = 4;
lt.radius = 10;
lt.range = 500;
lt.lightColor = Color.COLOR_BLUE;
let mr = obj.addComponent(MeshRenderer);
mr.castShadow = true;
mr.geometry = new SphereGeometry(30, 30, 30);
let mat = new UnLitMaterial();
mat.baseColor = Color.COLOR_BLUE;
mr.material = mat;
scene.addChild(obj);
lt.debug();
GUIHelp.addButton("spot enable switch", () => lt.enable = !lt.enable)
}
// floor
{
let mat = new LitMaterial();
mat.baseMap = defaultTexture.grayTexture;
let floor = new Object3D();
let mr = floor.addComponent(MeshRenderer);
mr.geometry = new BoxGeometry(2000, 1, 2000);
mr.material = mat;
scene.addChild(floor);
}
let renderJob = new ForwardRenderJob(scene);
Engine3D.startRender(renderJob);
使用 Engine3D.res.loadGltf 来加载 glb 模型,无法加载某些glb文件,问题如下图
无法加载的模型文件为https://github.com/mrdoob/three.js/tree/dev/examples/models/gltf 下的Horse.glb
部分模型可以加载
可以加载的模型为https://github.com/mrdoob/three.js/tree/dev/examples/models/gltf 下的Flower.glb和BoomBox.glb,暂时只尝试了这三个模型,希望能够优化或者在文档中提示一下。
Chrome
版本 113.0.5657.0(正式版本)canary (64 位)
Vite +Vue3
*All samples run on the same physical device.
*All samples are from WebGPU-samples.
*All systems are native and do not have a virtual machine.
*All sample pages run in fullscreen, using [Command + Shift + F] on macOS and [F11] on Windows.
*All sample FPS statistics are from Chrome's Render Frame status.
Device: MacBook Air (2015)
CPU: Intel Core i5-5250U @1.6GHz
GPU: Intel HD Graphics 6000
RAM: DDR3 4GB
Sample | macOS 12.6.5 (Chrome 113.0.5672.92) |
Windows 11 (Chrome 113.0.5672.92) |
macOS 12.6.5 (Canary 115.0.5773.0) |
Windows 11 (Canary 115.0.5773.0) |
---|---|---|---|---|
instancedCube | 59.4 FPS | 59.4 FPS | 59.4 FPS | 59.4 FPS |
fractalCube | 59.4 FPS | 59.4 FPS | 59.4 FPS | 59.4 FPS |
cubemap | 59.4 FPS | 59.4 FPS | 59.4 FPS | 59.4 FPS |
computeBoids | 59.4 FPS | 59.4 FPS | 59.4 FPS | 59.4 FPS |
animometer (20k) |
42.6 FPS | 42.6 FPS | 42.0 FPS | 42.0 FPS |
videoUploading | 59.4 FPS | 59.4 FPS | 59.4 FPS | 59.4 FPS |
shadowMapping | 59.4 FPS | 59.4 FPS | 59.4 FPS | 59.4 FPS |
deferredRendering (256 light) |
59.4 FPS | 59.4 FPS | 59.4 FPS | 59.4 FPS |
deferredRendering (512 light) |
51.0 FPS | 43.8 FPS | 51.0 FPS | 45.6 FPS |
deferredRendering (1024 light) |
33.6 FPS | 28.2 FPS | 33.6 FPS | 28.8 FPS |
particles | 59.4 FPS | 59.4 FPS | 59.4 FPS | 59.4 FPS |
cornell | 54.0 FPS | error: bgra8unorm-storage not supported |
52.8 FPS | error: bgra8unorm-storage not supported |
gameOfLife | 59.4 FPS | 59.4 FPS | 59.4 FPS | 59.4 FPS |
renderBundles (5k) |
56.4 FPS | 59.4 FPS | 51.6 FPS | 59.4 FPS |
renderBundles (10k) |
39.6 FPS | 59.4 FPS | 38.4 FPS | 59.4 FPS |
Test Orillusion on Android Chrome/Edge 113+, failed to run with webgpu errors
Should work on Android Chrome, since it also support the same WebGPU APIs
0.6.2
If there are point/spot lights and dir lights in one scene, only dir light shadow is visible
Steps to reproduce the behavior:
there should be two shadows
on 0.6.3 - 0.6.5, point shadow can't render even with dir light disabled
0.6.3 - 0.6.5
报错信息
TypeError: this.textures[e].bindStateChange is not a function
代码
let scene3D = new Scene3D()
let skyTexture = Engine3D.res.loadLDRTextureCube('/mg.jpg');
let sky = scene3D.addComponent(SkyRenderer)
sky.map = skyTexture;
scene3D.envMap = skyTexture;
我是想试一下自定义全景图天空,按照官网的代码写的,但是报错了
在使用自定义canvas时,canvas会自己自动变得很大,无法修改
const canvas = document.getElementById('canvas')
await Engine3D.init({
canvasConfig: { canvas }
})
const canvas = document.getElementById('canvas')
简介明要的阐述你期待发生什么结果
如果可以,提供发生错误的截图
本地运行出错的Orillusion引擎版本, e.g. 0.6.1
https://codepen.io/FliPPeDround/pen/mdzzBBJ
添加关于bug的其他描述信息
view hemisphere 二重积分计算 screen ao
If destroy an object with ColliderComponent
on pixel pick mode, there will be an error on destroy
life hook of ColliderComponent
.
Steps to reproduce the behavior:
pixel
modeColliderComponent
to the objectdestroy()
on the objectUncaught TypeError
Object3D could destroy with ColliderComponent
with picker
0.6.2
Orillusion有类似于THREE.EdgesGeometry这样的类吗?
deepkolos/shader-graph-wgsl#2
打算给orillusion 支持上ShaderGraphMaterial
https://github.com/deepkolos/shader-graph-wgsl
文档和示例对应的,看你们是否愿意提供一些playground,如http://examples.maptalks.com/ 或者这种
https://playground.babylonjs.com/
We can call destroy(true)
to release all resource of an object.
But if there are multi objects in a scene, call destroy(true)
will cause a webgpu error:
Destroyed texture [Texture "default-whiteTexture1616rgba8unorm"] used in a submit.
- While calling [Queue].Submit([[CommandBuffer]])
Steps to reproduce the behavior:
destroy(true)
on one objectif no geometry or material was shared, an object could be destroyed and released
0.6.2
onCompute function in meshRendererhas some action , but some static mesh not use this function . this is a waste of resources .
you can create a new meshRendererhasto fix this .
State the version you use for developement, e.g. 0.6.0
MeshRenderer.ts
protected onCompute(view: View3D, command: GPUCommandEncoder): void {
if (this.morphData && this.morphData.enable) {
this.morphData.computeMorphTarget(command);
}
}
The Engine3D
could be destroyed and re-create in one window context
async function demo(){
//init first Engine3D instance
await Engine3D.init()
// ...
// Destroy it later
await Engine3D.destroy()
//init a second Engine3D instance
await Engine3D.init()
// could destroy it sometime
await Engine3D.Destroy()
// ...
}
demo()
The Engine3D memory and resources should be released/cleaned after destroy
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
A clear and concise description of what you want to happen
A clear and concise description of any alternative solutions or features you've considered
Add any other context or screenshots about the feature request here
When use LDR/normal images as skybox background, e.g. jpg, png or webp, the rendering color mismatch the pixel color from the source image.
the original rendering by THREE:
the skybox rendering by Orillusion:
Looks like orillusion also add some HDR process on LDR images.
The skybox could show the original pixel color from LDR images,
0.6.2
If there are multiple lights in one scene, some strange rendering result on disable/enable:
0.6.2
The Mesh renderer is not working after change new material
Steps to reproduce the behavior:
A clear and concise description of what you expected to happen
0.6.3
官网demo高光频闪(类于阳光打在湖面的闪动),高光部分非常不自然,Chome 113在 MAC和Windows下均有同样的表现。
通过以下步骤产生bug:
高光过渡自然
视频地址一:https://github.com/Orillusion/orillusion/assets/5469785/b02c581a-eafd-43dc-b4f1-beed62433348
视频地址二:https://github.com/Orillusion/orillusion/assets/5469785/a49abf94-0f4a-4c3b-9e17-a52b2d36670b
本地运行出错的Orillusion引擎版本, e.g. 0.6.1
期待能有一些复杂的examples展示
If the size of the renderer is considered, it can be added in an extended form.
当我离开视图(router), 需要清理Orillusion哪些资源?希望文档能补充对这章的明确说明
我目前用到react,react-router-dom,
orillusion demo代码取自于它 https://www.orillusion.com/guide/getting_start/draw_cube.html
我封装了一个orillusion操作类,当离开react router对应的视图时候(组件销毁),调用dispose,发生了如下截图的错误。
import {
Engine3D,
Scene3D,
Object3D,
Camera3D,
LitMaterial,
BoxGeometry,
MeshRenderer,
DirectLight,
HoverCameraController,
View3D,
AtmosphericComponent,
} from "@orillusion/core";
export class Tourial {
canvas: HTMLCanvasElement
scene: Scene3D|null = null
view: View3D | null = null
constructor(canvas: HTMLCanvasElement) {
this.canvas = canvas
return this;
}
async initEngine(){
await Engine3D.init({
canvasConfig: { canvas: this.canvas },
});
}
async initView() {
// create new scene as root node
const scene3D: Scene3D = new Scene3D();
this.scene = scene3D;
// add an Atmospheric sky enviroment
const sky = scene3D.addComponent(AtmosphericComponent);
sky.sunY = 0.6;
// create camera
const cameraObj: Object3D = new Object3D();
const camera = cameraObj.addComponent(Camera3D);
// adjust camera view
camera.perspective(60, Engine3D.aspect, 1, 5000.0);
// set camera controller
const controller = cameraObj.addComponent(HoverCameraController);
controller.setCamera(0, 0, 15);
// add camera node
scene3D.addChild(cameraObj);
// create light
const light: Object3D = new Object3D();
// add direct light component
const component: DirectLight = light.addComponent(DirectLight);
// adjust lighting
light.rotationX = 45;
light.rotationY = 30;
component.intensity = 1;
// add light object
scene3D.addChild(light);
// create new object
const obj: Object3D = new Object3D();
// add MeshRenderer
const mr: MeshRenderer = obj.addComponent(MeshRenderer);
// set geometry
mr.geometry = new BoxGeometry(5, 5, 5);
// set material
mr.material = new LitMaterial();
// set rotation
obj.rotationY = 45;
// add object
scene3D.addChild(obj);
// create a view with target scene and camera
const view = new View3D();
view.scene = scene3D;
view.camera = camera;
// start render
Engine3D.startRenderView(view);
}
dispose(){
console.log('销毁')
this.view?.dispose()
this.scene?.dispose()
}
}
Temporal Anti-Aliasing 时间性抗锯齿
This is very important to use the engine, otherwise it is very inefficient to adjust to the appropriate parameters.
In the test, the debug method of many components has not been implemented. For example: Camera, Transform...
我在尝试将orillusion用于bim轻量化展示。
bim的建筑模型会保留相当多的内部细节。当前遇到了一些规模很大的bim模型,大概50万个物体,超过数十亿面。
能否有针对大场景绘制的解决方案。
非常感谢。
gltf 压缩 draco js , 减少模型的体积,优化模型 的 gltf 扩展支持
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.