I believe everyone has experienced this year's Alipay Wufu activities. Both the Wufu homepage and the Nian Beast game this year are driven by the Ant Interactive Graphics Engine (code name: Oasis Engine).
This article will introduce you some overview of Oasis Engine and the past and present of Oasis Engine and future prospects. I hope this article can give you a preliminary understanding of Oasis Engine.
Engine introduction
Oasis Engine is an engine interactive/creation platform with Web first and mobile first. Use component system architecture, and pursue ease of use and light weight. Oasis Engine mainly includes three parts: Oasis Runtime, Oasis Editor and Oasis Store. Next, we will introduce the engine through several dimensions of overview, function introduction, stability and performance.
Overview
Oasis Engine adopts a component system architecture. Oasis Engine not only needs to have 3D rendering capabilities, but also needs to include a lot of functions from various fields, such as 2D, 3D, UI, audio, physics, VR/AR, logic writing, etc., these functions They are all just needed by developers. At the same time, developers usually hope that the structure of the engine can be kept clear and the functions can be flexibly combined.
In addition, usually business development also hopes to carry out functional precipitation, in fact, these belong to the category of ease of use. With such a balance of functional complexity and ease of use, we chose a component system architecture. Under the component system architecture, everything is a component, and any function can be plugged and unplugged in the form of a component for flexible combination. At the same time, scripts are also a special component, and developers can naturally deposit business functions into component reuse.
The Oasis engine uses a scripting system for logic writing. We provide a lot of script life cycle callbacks, and developers only need to reload the callback functions they need.
In terms of ease of use and readability, scripts have obvious advantages over writing logic through events. Especially in the component system architecture, the script system is a more natural way. Including when we are doing engine architecture, we never think that any architecture is absolutely right or wrong. It is more about trade-offs and suitable discussions. At the same time, we have also made a lot of experience optimizations in the script system, such as providing a clone decorator. Developers can choose different clone decorators to set the clone mode according to the actual situation of the attribute, which is easier to use than manually writing clone functions. .
The development language of the Oasis engine adopts TypeScript. TypeScript is a strong type superset of JavaScript, which has great advantages over weakly typed JavaScript. Especially for large and complex projects, TypeScript has brought significant improvements in research and development efficiency. I believe that many front-end developers have experienced it in recent years. We also recommend that developers use TypeScript to write logic scripts.
The Oasis engine pursues rigorous, concise, and easy-to-use purposes in the API design. It sounds very general, but behind this is the accumulation of countless design details. From the perspective of somatosensory, a refreshing, natural, easy-to-use, and intuitive API design is a good design. We also use a lot of modern syntax features in API design, such as function overloading, decorators, async/await, generics, etc. These syntaxes are very important to API design and will directly improve the user's R&D experience.
Features
Transform is a high-frequency use function of the engine. Whether it is rendering or physics, Transform is required to describe coordinates and other related information. Therefore, an excellent Transform must not only be powerful, but also have good performance optimization.
One of the most notable features of Transfrom is that the parent transformation will affect the child transformation. For example, we can think that modifying the local position of the parent node will trigger the world position change of itself and the child node. However, the actual situation may be far more complicated than this. If you modify the local rotation of the parent node, it will not only trigger the world rotation change of itself and the child nodes, but also trigger the world position change of itself and the child nodes. The same modification of the local zoom also has a similar effect. We have made a lot of atomized dirty marks inside Transform. The basic principle is that no attributes are calculated without getting attributes. If the attributes are gotten, it will be judged whether to recalculate according to the dirty marks.
Engines developed based on WebGL usually face the trouble that JS has no destructor. The engine's video memory object is not within the scope of JS hosting, if it is not processed, it will cause video memory leakage. Therefore, the Oasis engine provides a manual resource release function, which can directly call the object's destruction function to release the video memory. But the actual problem is more complicated. When designing a model for developers, we don't know the reference relationship of this model to resources. For example, the entity refers to the material, and the material refers to the texture. The reference relationship between them is intricate. First of all, it is difficult for us to find these resources; secondly, it is difficult to ensure that they are not referenced by other models and are safely destroyed if they are found.
The resource system is the basic capability of the engine, including responsibilities such as resource loading and management. The resource system loading API of the Oasis engine is very simple and easy to use, and supports generic and asynchronous programming. We have done resource reference counting. Developers only need to care about the destruction of entity nodes. The engine will automatically maintain the reference count. When resourceManager.gc() is called, all assets with a reference count of 0 will be automatically destroyed. It is directly balanced with ease of use.
The shading/material system is the rendering heart of the engine, and its quality determines the healthy development of the engine to a certain extent. Oasis engine custom shader is very simple, allowing developers to focus on the shader logic itself. The data setting of the shader is also very simple, just call the relevant interface in shaderData. Students with relevant development experience may also know the shader macro function, which is also very simple in Oasis, just call the enableMacro interface. The reference will automatically handle the compilation of related sub-shaders internally.
In addition to simplicity, Oasis' entire shading system is also very powerful. Oasis is also a GPU-friendly engine that can not only set shading data through materials, but also set shading data through objects such as scenes, renderers, and cameras. In addition, modules such as skin calculation, particle trajectory calculation, and material shading can also be put into the GPU for execution very naturally, giving full play to the GPU's parallel computing capabilities.
In addition to custom shaders, the Oasis engine also provides a flexible and powerful BufferGeometry system, which developers can use to customize geometry data. The BufferGeometry system supports staggered vertex buffers, independent vertex buffers, instance buffers and index buffers. Students who have done low-level graphics development may be very familiar with these functions. Oasis' BufferGeometry system includes almost all GPU-related geometry data processing capabilities. It is necessary for the engine to contain simple and easy-to-use functions, and it is naturally excellent if it can be flexible and powerful at the same time.
Let's talk about what BufferGeometry can specifically do. In fact, advanced developers can use it to access any custom particles, tailing and other functions. For example, the Mars component and the Spine component are connected using the BufferGeometry system. Mars is also a high-performance animation and special effects software of the Ant Group. Spine must be familiar to everyone, a very popular 2D animation software.
Stability and performance
Stability and performance are very important to the engine. We have made a lot of efforts in terms of stability and performance. The crash rate on platform projects with billions of traffic is less than 0.3 per 10,000:
- In terms of testing, we will add corresponding single test cases while writing each function, and we have also deployed automated CI tests on github.
- In terms of performance optimization, we have also paid a lot of effort, such as component-driven optimization, Transform optimization, video memory upload optimization, math library optimization, and so on.
- In terms of memory optimization, we provide GPU texture compression, which can reduce texture memory by about 80%, while also providing a good resource GC management mechanism. In every system design, we will comprehensively consider the balance of performance and memory, and will not use "space for time" blindly.
Let's talk about our current performance status. Based on the performance test cases in the above figure, we have also compared the performance with well-known foreign Web3D engines. With the same test scale and environment, the performance of Oasis is about twice that of well-known foreign Web3D engines. Although this case is not very comprehensive, it is at least the comprehensive performance of a few functions.
to sum up
Finally, we summarize the introduction of the engine. The Oasis engine adopts the component system architecture, the logic is written by the script system, and the engine source code is written by TypeScript. Functionally, we introduced several basic systems of the engine, namely the Transform system, the resource system, the material/shading system and the BufferGeometry system. I believe we will have the opportunity to introduce more functions with you in the future; in terms of stability and performance, With financial-grade stability and leading performance.
Past and Present
Next, we introduce the past and present of the Oasis engine, applying Wang Xiaobo's "Trilogy of Times", and dividing the development of the Oasis engine into three stages: the Black Iron Age, the Bronze Age and the Silver Age.
Dark Iron Age
The first stage is the "Black Iron Age" (2016-2018). In 2016, the mobile business of Alibaba and Ant was booming, but the graphics technology for interactive demand was still relatively backward. Taking the Web 3D engine as an example, they have relied on the Three.js engine that was not born for mobile for a long time. In terms of asset standards, glTF 2.0 has not yet been born. The ancient format of obj + mtl does not support the ability of advanced materials such as PBR. Although fbx designers are convenient to export, it is too large and the Three.js loader is unstable. As a result, many projects were aborted when the art assets entered the engine stage.
At the end of 2016, the first hero in the history of the Ant graphics engine appeared. Jing Fu (Ant senior graphics technology expert, Xianjian three main program, and R3 core developer) wrote the first line of code for the Ant graphics engine. This project was named R3 (It means Render for 3D). R3 was born for the interactive business of Ant's mobile terminal. It adopts the industry's advanced component system game engine architecture. In order to pursue the minimization of runtime volume in engineering, it uses the popular monorepo multi-package warehouse development model. In order to solve the scene editing problem more conveniently, R3 also defines a set of its own development workflow, using the industry's leading Unity editor as the scene editor, and exporting glTF files through the self-developed Unity plug-in for loading and parsing at runtime. Scenes.
There are several classic works left in the Black Iron Age. Today, when you open the "sports meeting" panel of Ant Manor, you can still see these low ploygon-style games. "Star Ball" was the first interactive game to use the R3 engine, and even an AR version was developed at that time, which was relatively pioneering.
Bronze Age
The second stage is the "Bronze Age" (2018-2020). The Ant graphics engine was transferred from the experience technology department to the RichLab team with richer business scenarios. After upgrading from R3 to Oasis, the new team began to rethink the meaning of the graphics engine to Ant Interactive's business and front-end engineers. In the context of mobile payment and financial digitization, a large number of rich interactive scenarios in mobile terminal services have begun to emerge, and the requirements for stability are very demanding. In order to solve business demands faster and better, we started to embrace the front-end ecology on the one hand:
Use Typescript to refactor the engine to make the engine code more robust, and at the same time developers can get a better code hint experience;
Integrate into the ant front-end development framework, so that the engine can naturally run in React and other frameworks, and has the ability to deposit assets;
Cooperated with the client and the classmates of the applet container to adapt the Alipay applet, so that the engine can run in more environments.
On the other hand, we put our focus on 3D research and development to improve efficiency. Through the self-developed Oasis Editor cloud scene editor, we have realized core capabilities such as asset management, scene editor, and script writing. At the same time, we are also concerned about the connection between the upstream and downstream of the workflow, such as the import of art assets. We recommend using fbx files as input, and then processing them into files suitable for runtime loading through cloud asset conversion and compression capabilities; for example, We provide the ability to export different products, such as React/Rax/small programs, etc., to achieve multiple deployments in one place.
Silver Age
The third era is the "Silver Age" (2020-?). The second hero in the history of the ant graphics engine appeared, and the addition of dust was like the prometheus myth that brought flames to the rebirth of the Oasis engine. After eight months of four iterations, the engine's functions, performance and ease of use have undergone qualitative changes:
- In terms of functions, the basic system capabilities of the engine's entity/component system, script system, resource system, and material/Shader system have reached the advanced level of the industry;
- In terms of ease of use, the core system of the engine has been redesigned and thought about. The API details completely abandoned the previous mode of component passing parameters by objects. It is controlled by set/get attributes and makes full use of the characteristics of the Typescript language to allow developers Fully enjoy the refreshment of "Guess API";
- In terms of performance, the overall performance of the engine has been increased to four times that of the Bronze Age. The individual performance of the BufferGeometry system and the material/Shader system have reached more than ten times that of the previous version, which is significantly ahead of the well-known foreign Web 3D engines.
In addition to the continuous upgrading of technology, the Oasis team also attaches great importance to the implementation of the business. We have served the projects of many business units within Alibaba and Ant Group. We have gained a good reputation among various business parties and verified the engine in various clients. Compatibility and stability.
Future outlook
The Silver Age is also an open source era. In fact, the R&D iteration of the Oasis engine entered internal open source as early as the Bronze Age, and iterated through milestones and issue management functions in accordance with the open source working model. Although the engine can meet business needs in terms of basic functions, we hope to put the engine on a larger stage in the future and further enhance the engine's capabilities through open source. For example, in the physics engine, we are currently integrating it into the engine through WebAssembly. In terms of engine integrity, we will first supplement the 2D graphics capabilities, and at the same time allow the engine to render more sprite types required for interaction, such as Spine and Lottie; the further goal is to achieve cross-platform engine, although currently only WebGL 1.0 and 2.0 are supported, but it can be seen that the engine APIs such as WebCanvas have already been designed for cross-platform engine interfaces. In the future, new graphical language interfaces such as Metal/Vulkan/WebGPU will be implemented according to the priority of needs.
Frankly speaking, Oasis is still in the development stage, and open source today is only a new starting point for Oasis, and there is still a long way to go in the future. I hope that the Oasis engine can contribute to the domestic 3D engine business in its own way. I also hope that the Oasis team can not forget its original intention. We will use 3D interaction and expression to make the world a better place and realize the oasis in our hearts.
Author | Oasis Team
This article is the original content of Alibaba Cloud and may not be reproduced without permission.