The Orillusion engine is a lightweight rendering engine that fully supports the WebGPU standard. Based on the latest Web graphics API standard, we have done a lot of exploration and experimentation, implementing many techniques and features that were previously difficult or even impossible to achieve on the Web. We have summarized the architecture and feature characteristics of the engine from the following aspects.
WebGPU Support
The engine's underlying design does not consider compatibility with the existing WebGL standard, but is fully aligned with the latest WebGPU standard. As the WebGPU API and WGSL continue to develop, we will also rapidly update and iterate the underlying WebGPU computing and rendering capabilities of the engine to enhance its performance advantages.
ECS Component-Based System
As the engine framework has developed up to now, the industry has generally begun to adopt the development design principle of composition over inheritance. Therefore, we abandoned the inheritance-based architecture and instead chose the latest ECS component-based architecture as the overall design approach of the engine. This eliminates the problems of complex inheritance chains and interwoven functionality in the inheritance model. Through redesign with decoupling, encapsulation, and modularization, developers can combine and extend functionality more flexibly.
Data-Oriented (DO) Design
A strict ECS architecture requires that Entity, Component, and System be completely independent and separated. Under this design paradigm, data optimization and performance can be greatly improved. However, it also brings a significant negative problem, namely that development costs and difficulty are very high. Therefore, considering the difficulty of use for developers and the development habits of Web developers, we adopted the core Data Oriented (DO) concept in ECS and implemented an on-demand DO structure. The current usage is to create continuous memory in the GPU, and at the same time use memory mapping between the CPU and GPU to achieve continuous and efficient data transfer, reducing the waiting time and frequency of data exchange between the CPU and GPU. This can improve the cache hit rate to achieve performance improvements, while also ensuring the overall ease of development and use of the engine.
Clustered Light Culling
This is the light culling scheme in Clustered Forward Rendering. The space is divided into blocks in both two dimensions (Tile) and three dimensions (Cluster), and finally only the light sources that contribute lighting to this block space are calculated, completing the culling process of ineffective light sources and improving computational efficiency. WebGL's Uniform Buffer has many limitations and supports relatively few light sources, generally within 10. WebGPU now has the Storage Buffer, which basically directly targets the limit of GPU memory. As long as memory management and optimization are done well, the capabilities of the GPU can be fully utilized to achieve scenes with multi-light source rendering.
Physics Simulation System
We first integrated ammo.js as the basic physics simulation implementation on the CPU side. At the same time, we are building a GPU-side physics simulation engine based on Compute Shader, including particles, fluids, soft bodies, rigid bodies, cloth, etc. In the WebGL era, we could only rely on the data structures of vertices and textures for the corresponding calculation process, which was complex to implement and inefficient. Through the Compute Shader of WebGPU, memory and data structures are more flexible, giving us a lot of room for imagination. At present, many excellent physics simulation cases have been implemented, and more and more powerful physics simulation functions are in the process of rapid iteration.
Physically-Based Material Rendering
We implemented the most basic Blinn-phong model material rendering. To add better realistic rendering effects, relying on HDR Light, we also implemented material rendering based on PBR (Physically-based rendering). This is now a standard feature of mainstream engines and is a fairly common basic engine requirement.
Dynamic Diffuse Global Illumination
The DDGI (Dynamic Diffuse Global Illumination) algorithm is a Probe-based global illumination algorithm. It requires placing many Probes in space and grouping them, with each group of Probes packed into a DDGI Volume. A Compute Shader is used to calculate the irradiance (lighting information) and G-buffer (geometry information) of each Probe, and this information is stored by mapping from a sphere to an octahedron and then to a square. When shading is needed, you only need to look at the lighting and geometry information stored in the probes around the shading point to calculate the lighting information of the shading point. Binding the Volume to the camera so that it moves with it, the objects within the Volume will have indirect lighting applied, that is, they will be lit by indirect light. Based on a comprehensive consideration of rendering effects and other aspects, the maximum number of indirect light sources we currently set is 32.
Rich Post-Processing Effects
Post-processing effects are an important processing method to enhance the atmosphere of rendered content. Based on the compute shader of WebGPU, we have currently implemented commonly used post-processing effects such as HDR Bloom, Screen Space Reflections, and Ambient Occlusion. Relying on the general computing capabilities of WebGPU, we can more efficiently utilize the computing advantages of the GPU to achieve very good results.
For example, Screen Space Reflections (SSR) implements reflection effects based on the size of the screen space. Compared with planar reflection, it can achieve reflection on any surface in the scene without additional DrawCall, and is a very popular real-time reflection technique. First, each pixel of the screen space object needs to calculate its reflection vector. Then, it is necessary to determine whether the depth of the Ray Marching coordinate in screen space intersects with the object depth stored in the depth buffer. Finally, appropriately adjust the roughness and use the color of the intersection point as the reflection color to complete the shading. We implement all the calculation processes in this through the Compute Shader of WebGPU, avoiding the consumption of the CPU. In the end, very good reflection effects can be presented in the browser.
For more extended post-processing effects, refer to PostEffects