I believe that you have experienced this year’s Alipay Wufu activities, whether this year’s Wufu home page or playing games are driven by ant interactive graphics Engine (code name: Oasis Engine).

Oasis Engine is ant Group’s Web 3D interactive graphics Engine, as well as the preferred Web 3D Engine of Ali Economy’s interactive technology direction. It has been officially open source on February 1st. If you’re interested, you can check out our Github community at github.com/oasis-engin… And join the Nail Developer exchange group: 31360432.

Whether you are in the rendering direction, TA direction, IDE direction, or more specific areas, as long as you share our ideals and goals, please send your resume to [email protected]

This article will introduce some overview of Oasis Engine and its past life and future prospects. Hopefully, this article will give you a glimpse of Oasis Engine.

The engine is introduced

Oasis Engine is a Web first, mobile first interactive/creative platform. Use a component system architecture, and strive for ease of use and lightweight. The Oasis Engine consists of Oasis Runtime, Oasis Editor, and Oasis Store. Next, we will introduce the engine in terms of overview, feature introduction, stability, and performance.

An overview of the

The Oasis Engine USESComponent system ArchitectureOasis Engine not only needs 3D rendering capability, but also contains a lot of features from various fields, such as 2D, 3D, UI, audio, physics, VR/AR, logic writing, and so on. These features are required by developers. At the same time, developers usually want the structure of the engine to be clear and the function can be flexibly combined.

In addition, business development often wants to do feature precipitation, which is actually in the category of ease of use. Given this trade-off between functional complexity and ease of use, we chose component systems architecture. In the component system architecture, everything is a component, and any function can be inserted and removed in the form of a component, flexible combination. Scripts are also special components, and developers can naturally precipitate business functions into component reuse.

Oasis engine adoptionScripting systemWrite the logic. We provide so many script lifecycle callbacks that developers can just reload the ones they need.

Scripting has clear advantages over writing logic through events, both in terms of ease of use and readability. Especially in component systems architecture, scripting systems are a more natural approach. Including when we do the engine architecture, we never think that any kind of architecture is absolutely right or wrong, more is the tradeoff and appropriate discussion. At the same time, we have also done a lot of experience optimization in the script system, such as providing clone decorator, developers can choose different clone decorator according to the actual situation of the property to set the clone mode, compared with manual writing clone function is more easy to use.

The Oasis engine’s development language uses TypeScript, which is a strongly typed superset of JavaScript and has huge advantages over weakly typed JavaScript. Especially for large, complex projects, TypeScript’s development efficiency gains are obvious. I believe many front-end developers have learned this in recent years. We also recommend that developers write logical scripts in TypeScript.

The Oasis engine’s API design aims for rigor, simplicity, ease of use, etc., which may sound very general, but there are countless design details piled up behind it. From the perspective of motion, good design is API design that is clean, natural, easy to use and in line with the developer’s intuition. We also use a lot of modern syntactic features in the API design, such as function overloading, decorators, async/await, generics, etc. These syntactic features are very important to the DESIGN of the API and directly improve the user development experience.

Function is introduced

TransformTransform is a highly used function of the engine, whether rendering or physics requires the Transform to describe coordinates and other related information. So a good Transform should not only be powerful, but also have good performance optimization.

One of the most obvious features of Transfrom is that the parent transformation affects the child transformation. For example, we can imagine that changing the local position of the parent node will trigger a change in the world position of the parent node and the child node. However, it can be more complicated than that. Modifying the local rotation of a parent node triggers not only a change in the world rotation of itself and its children, but also a change in the world position of itself and its children. Changing local scaling has a similar effect. We do a lot of atomized dirty tags inside the Transform. The basic principle is that the get attribute is not evaluated, and if the get attribute is evaluated, it will be evaluated based on the dirty tags.

Engines developed based on WebGL often face the problem that JS has no destructor. The video memory object of the engine is not in the managed scope of JS. If not processed, it will cause the video memory leak. As a result, the Oasis engine provides a manual resource release function that can directly call the object’s destruction function to release video memory. However, the actual problem is more complicated. When we design a model for the development students, we do not know the reference relationship of the model to the resources. For example, entities refer to materials, which refer to textures, and the relationship between them is complicated. First, it’s hard to find these resources; Secondly, it is difficult to ensure that it is not referenced by other models and destroyed safely.

The resource system is the fundamental capability of the engine and contains responsibilities such as resource loading and management. The Oasis engine’s resource system loading API is very simple to use and supports generics and asynchronous programming. We do resource reference counting, developers only need to care about entity node destruction, the engine automatically maintains reference counts, when calling resourcemanager.gc (), all assets with a zero reference count are automatically destroyed, thus directly balancing functionality and ease of use.

Coloring/material systemIs the heart of the engine rendering, its quality to a certain extent determines the healthy development of the engine. The Oasis engine custom shaders are very simple, allowing developers to focus on the shader logic itself. Shader data setup is also very simple, just callshaderDataIn the interface. Those of you who have had relevant development experience may also know that the shader macro function is also very simple in Oasis, just callenableMacroInterface is ok. References are internally handled automatically for the compilation of the associated child shaders.

In addition to simplicity, Oasis’s overall shader system is very powerful, and Oasis is also a GPU-friendly engine that allows you to set shader data not only through materials, but also through objects such as scenes, renderers, cameras, etc. In addition, skin calculation, particle trajectory calculation, material coloring and other modules can be naturally implemented in the GPU to give full play to the parallel computing capability of the GPU.

In addition to custom shaders, the Oasis engine provides flexible and powerfulBufferGeometry system, developers can use the system to customize geometry data. The BufferGeometry system supports staggered vertex buffering, independent vertex buffering, instance buffering, and index buffering, which may be familiar to those of you who have done low-level graphics development. Oasis’s BufferGeometry system contains almost all gPU-related geometry data processing capabilities. It’s a must for the engine to contain easy-to-use functionality, and it’s great to be flexible and powerful at the same time.

Let’s talk about exactly what BufferGeometry does. In fact, advanced developers can use it to access any custom particle, tail, and so on. For example, the Mars component and the Spine component are accessed using the BufferGeometry system. Mars is also ant Group’s high-performance animation and special effects software. Spine is a popular 2D animation software.

Stability and performance

Stability and performance are very important to the engine. We have made a lot of efforts in stability and performance, and the crash rate of the platform project with 100 million traffic is less than 0.3 per 10,000:

  • In terms of testing, we added single test cases for each function and deployed automated CI tests on Github.
  • We also put a lot of effort into performance optimization, such as component-driven related optimization, Transform optimization, video memory upload optimization, math library optimization, etc.
  • In terms of memory optimization, we provide GPU texture compression function, which can reduce texture memory by about 80%, and also provide good resource GC management mechanism. In every system design, we always consider the balance between performance and memory, and do not blindly use “space for time”.

Let’s talk about our current performance status. Based on the performance test case in the figure above, the performance of Oasis is compared with that of well-known foreign Web3D engines. In the same test scale and environment, the performance of Oasis is about twice that of well-known foreign Web3D engines. While this example is not exhaustive, it is at least a comprehensive performance of a few features.

conclusion

To conclude, the Oasis engine uses a component system architecture, scripting its logic, and TypeScript for its source code. In terms of functionality, we have introduced several basic systems of the engine, which are Transform system, Resource system, texture/coloring system, and BufferGeometry system. I believe there will be more opportunities to introduce features in the future. Stability and performance, with financial grade stability and leading performance.

All men are mortal

Next, we introduce the past life of Oasis engine. According to Wang Xiaobo’s “Age Trilogy”, Oasis engine has been developed into three stages: the Black Iron Age, the Bronze Age and the Silver Age.

Black iron age

The first stage is”Black iron age“(2016-2018). In 2016, the mobile terminal business of Alibaba and Ant developed vigorously, but the graphics technology for interactive needs was still lagging behind. Take the Web 3D engine for example, for a long time, they relied on the three. js engine which was not born for mobile terminal. In terms of asset standards,GlTF 2.0The old format obJ + MTL does not yet support the ability of advanced materials such as PBR. Although FBX is easy for designers to export, its large size and the unstable loader of Three.js have led to the failure of many projects when the art assets are in the engine.At the end of 2016, the first hero in the history of Ant Graphics Engine appeared,JingFu(Ant Senior Graphics technologist, Xianjian3 master program, R3 core developer) wrote the first line of ant graphics engine code, the project was named R3 (meaning Render for 3D). R3 is developed for the interactive business of Ant mobile terminal. It adopts the advanced component system game engine architecture in the industry. In order to minimize the runtime volume in engineering, the popular Monorepo development mode of multi-package and single warehouse is used. In order to solve the problem of scene editing more easily, R3 has also defined a set of development workflow, using the industry leading Unity editor as the scene editor, through the self-developed Unity plug-in to export glTF files for runtime loading and parsing into the scene.

The Black Iron Age left a few classics behind, and you can still see these low Ploygon-style games on ant Manor’s “Sports day” board today. Starball was one of the first interactive games to use the R3 engine, and even an AR version was developed at the time, which was a pioneer.

The Bronze Age

The second phase is the “Bronze Age” (2018-2020). Ant graphics engine was transferred from the Experience technology department to RichLab team with richer business scenarios, and upgraded from R3 to Oasis. The new team began to rethink the significance of graphics engine for Ant interactive business and front-end engineers. In the context of mobile payment and financial digitalization, a large number of rich interactive scenarios of mobile terminal business began to emerge, and the requirements for stability are very demanding. In order to address business demands faster and better, we began to embrace front-end ecology on the one hand:

  • Refactoring the Typescript engine makes the engine code more robust and gives developers a better code hint experience.
  • Integrated ant front-end development framework, enabling the engine to run naturally in React and other frameworks, and has asset precipitation capability;
  • With the cooperation of clients and small program container students to adapt the Alipay small program, so that the engine can run in more environments.

On the other hand, we have focused on improving the efficiency of 3D development. Through the self-developed Oasis Editor cloud scene Editor, we have realized the core capabilities of asset management, scene Editor, scripting and so on. At the same time, we are also concerned about the upstream and downstream of the workflow, such as the import of art assets, we recommend the use of FBX files as input, and then through the cloud asset conversion and compression capabilities into a file suitable for runtime loading; For example, we provide the ability to export different products, such as React/Rax/ applet, etc., to realize the development in one place and deployment in several places.

The silver age

The third age is the “Silver Age” (2020 -?). . The second hero in the history of ant Graphics Engine, the addition of Dust mo is like the myth of Prometheus to bring fire to the rebirth of Oasis engine. Over four iterations over eight months, the engine’s functionality, performance, and ease of use have all changed substantially:

  • In terms of functions, the engine’s entity/component system, script system, resource system, material /Shader system and other basic system capabilities have reached the industry advanced level;
  • In terms of ease of use, the core system of the engine has been redesigned and thought. In terms of API details, the former mode of passing parameters to components by objects has been completely abandoned, and the set/get property is used to control the API. The features of Typescript language are fully utilized, so that developers can fully enjoy the refreshing feeling of “guessing API”.
  • In terms of performance, the overall performance of the engine has been increased to four times that of the Bronze Age, with the BufferGeometry system and the Shader system each having more than ten times the performance of the previous version, significantly leading the well-known foreign Web 3D engine.

In addition to the continuous upgrading of technology, Oasis team also attaches great importance to business implementation. We have served the projects of many business divisions in Alibaba and Ant Group, and gained good reputation among various business parties. We have also verified the compatibility and stability of the engine in various clients.

future

The Silver Age is also an era of open source. In fact, the DEVELOPMENT iteration of Oasis engine went into internal open source as early as the Bronze Age, iterating through milestone and issue management functions in accordance with the working mode of open source. Today, the engine can meet the needs of the business on the basis of functionality, but in the future we want to put the engine on a bigger stage and further enhance the capabilities of the engine through open source. For example, in terms of the physics engine, we are currently integrating it into the engine via WebAssembly. In terms of engine integrity, we will first complement the ability of 2D graphics, while also enabling the engine to render more Sprite types needed for interaction, such as Spine and Lottie; The further goal is to make the engine cross-platform. Although currently only WebGL 1.0 and 2.0 are supported, you can see the API of the engine as followsWebCanvasIn the future, the access of Metal/Vulkan/WebGPU and other new graphical language interfaces will be implemented according to the priority of requirements.To be frank, Oasis is still in its development period, and open source is just a new starting point for Oasis today. There is still a long way to go. We hope that Oasis engine can contribute to the cause of domestic 3D engine in its own way. We also hope that Oasis team can stay true to their original aspiration. We will use 3D interaction and expression to make the world a better place and realize the Oasis in our hearts.

The related references

Oasis website: oasis-engine.github

Oasis Github community: github.com/oasis-engin…

Nail developer exchange group: 31360432

Whether you are in the rendering direction, TA direction, IDE direction, or more specific areas, as long as you share our ideals and goals, please send your resume to [email protected]