Cocos has always strived to perfect 2D development for game developers, and with an extensive catalog of incredible games making millions all over the world, we have always been looking at ways to improve our service and add 3D development for the developer. In 2014, our team opened up Cocos2d-x support for 3D. So far, games like "Art of Conquest" by Lilith Games and Tencent's "Strike of Kings" have taken advantage of our hard work with great results. At the same time, Cocos Creator gradually joined our product line. Cocos Creator is becoming a great tool for hyper-casual games and cross-platform games targeting instant gaming platforms.

However, we always knew that having a simple 3D engine without the right tools is like a blindfolded artist, unable to see their masterpiece until it’s complete. So we wanted to create something that included a 3D editor and other tools you’d expect from a professional gaming development platform. So after Cocos Creator became the core editor of Cocos, we started exploring the possibility of adding a quality 3D engine.

For more than three years, we have been working step by step to build you the perfect 3D game engine. Today we officially bring you a sneak peek at the Cocos Creator 3D Engine.

We want to show you why Cocos Creator 3D is determined to be one of the most competitive mobile game development platforms in the world, starting with this little gift for developers. We hope this excites you for the official release of the 3D engine later this year.

Let's take a look at some of the features of the 3D editor and unveil Cocos Creator 3D:

Care was taken to have Cocos Creator 3D become a great addition to Cocos Creator

Cocos Creator 2D is undoubtedly the premier game engine for a variety of smaller games. The editor's easy-to-learn features and speed of development help developers control costs, accelerate product iterations, increase success rates, and improve revenue expectations.

Technically, Cocos Creator 3D inherited from Cocos Creator 2D four years of research and works in the same way the editor framework works in prior Cocos Creator versions due to it’s improved workflow, and ease of being upgraded.

We also improved various component modules from the framework. Here are some significant changes:

• Significantly increased the startup speed
• Code isolation between modules, pure message-driven, message communication mechanism upgraded to Promise
• The file system is lighter and more reliable, optimized for large project support (project update scan time with 5k resources: 4.5s)
• The plugin system is completely modular and ready for any powerful plugin system
• Embraces ES6 and TypeScript, developers don't have to worry about compatibility issues

With these improvements to Cocos Creator 2D, Cocos Creator 3D can better support the complex needs of 3D projects and continue to keep Cocos Creator lightweight, easy to use, and highly efficient.

Creating realistic rendering and a powerful material system

To bring a better 3D game performance to the web and mobile platforms, Cocos Creator 3D will bring physics-based rendering to developed games for the first time, not only supporting PBR materials but also upgrading the lighting system and rendering for physics-based weights and measures.

The physics-based light source system

The concept of PBR material is currently very prevalent in games today, and the performance of the algorithm is very efficient compared to past material iterations. So many developers hope to use some PBR materials in their game. Having our engine support "physics-based” games means that the material system and lighting are based on the physical world's weights and measures so that artists can more realistically produce realistic rendering performance.

Cocos Creator 3D uses optical units of measure to describe the parameters of the light source, which can convert all relevant parameters of the light source into physical values ​​in the real world. In this way, the designer can adjust the light intensity, color, range, and other information according to the parameters of the relevant lighting and the actual physical parameters of the real environment, so that the overall lighting effect is more in line with the real natural environment.

Material system

In summary, Cocos Creator 3D supports unlit, physics-based standards, skybox, particles, sprites, and more.

These materials are based on EffectAsset, a user-programmable shader program and configuration format. Users can not only write new shader code with GLSL 300 es but also support the following functions:

• Preprocess macro definitions, selectable in the editor
• Editable properties, allowing you to configure property values ​​in the editor, corresponding to the runtime
• Multiple Pass support and Pass configuration (mixed mode, depth test, mask test, etc.)
• Force UBO to organize uniforms, making it more friendly to modern rendering backends (WebGL2, etc.)
• Shader fallback, based on the runtime environment to determine the use of high-end or low-end material implementation, in the environment that does not support GLSL 300 es, the high version of Shader will also be automatically compiled to run at a lower version.
• Shader function reuse and reference, which makes it easy for developers to reuse code snippets, making it more convenient to use our engine's built-in fragments.

In addition, materials that developers configure in content production tools (such as 3ds Max) can be exported directly to the Cocos Creator 3D editor via the GLTF format, or they can be selected in the editor to allow for manual editing.

With this realistic rendering engine and material system, we believe developers can create more beautiful 3D games, especially on small devices and web platforms with amazing effects.

Rich and powerful features will be available

In addition to rendering, in order to give developers a true 3D development experience close to other development products, we have done our best to complete many of the most essential functions:

Models and animation

Support for FBX and GLTF model and skeletal animation uses the same animation system as Cocos Creator 2D, so developers can use the same API to drive animation playback, editing, and preview inside the editor. 

To ensure the efficiency of skeletal animation within Cocos Creator 3D, we used double quaternion to compress the data and implemented various version of GPU animation to adopt different devices and platforms and make sure there is no issue or lag. One such experiment was running on a poorly performing iPhone 6 in Safari. We tested a build of 25 sets of independently executed (out of batch) skeletal animations (30 bones per character) to play simultaneously. The results were a frame rate stable above 30 frames.

Powerful particle effects

To support the complex special effects requirements in 3D, we have implemented a practical particle editing system. Of course, it still supports some very powerful functions. Not only can it support various types of emitters that you can directly edit, but also support for different modules like sizes, colors, rotation, speed, acceleration, speed limits, textures animation, and other modules. It also allows the specified particle material to have trailing material in the rendering module.  Simulating fire, smoke, water, clouds, snow, and fallen leaves are all a breeze, and the abstract visual effects such as illuminating trajectories and speed lines are no problem.

Physical engine support

To better support a variety of physics-based games, we also support an underlying physics engine as a convenient engine component. The different underlying physics engine interfaces are unified, and you can conveniently edit the collision boxes in the editor.

Continue Using Creator's UI Editing Experience

On the UI side, Cocos Creator 3D completely retains the design of Cocos Creator 2D, which greatly reduces the learning cost for older users. Component design, API, typesetting system, etc. are preserved, and also supports mixed rendering of 3D content into a 2D UI. Here’s a demo ported from Cocos Creator 2D using 2D graphics within the 3D engine.

HDR and LDR two sets of rendering pipelines to meet different needs

To give you a better experience on high-end devices, We have Cocos Creator 3D's rendering pipeline divided into two sets of graphics, HDR and LDR. In the HDR pipeline, the quality of images in the camera view is converted into a higher dynamic range HDR image. The conversion can be turned on for a device that supports WebGL 2.0 without adding wear and tear and with almost no performance difference from only using LDR images.

Looking to the future: multi-renderer back-end design

The last point we want to make is that we want Cocos Creator 3D to have a long life and will have the potential for continuous evolution. We have considered its design to be built up over time with minimal issues in your development process. The editor framework upgrades mentioned above, such as ES6 and TS, will also support higher versions of GLSL syntax as well. However, the most important is our multi-renderer backend abstraction and seamless switching design.

In order to embrace the next-generation graphics interface that will be popularized in the future, we designed our rendering backend API with reference to Vulkan and WebGPU and connected it to different rendering backends. Currently, we have access to WebGL 1 and WebGL 2, which are web standard. We will also have access to Metal and Vulkan soon. Also, in the ongoing upgrade process of the backend, we won’t bring any negative impact to the upper-level APIs and implementation.

The benefits of doing so are obvious. On the one hand, you can be assured that Cocos Creator 3D is an engine ready for the future, and on the other hand, you can get the most efficient performance possible in an environment that you work with today.

Getting Start

We have been working on the Cocos Creator 3D public beta with a small group of developers who want to help in the development of the engine, and there are already several games that have been tested using our engine. We're still looking for more and are asking for any developers wanting to be a part of this new feature to contact us on the forums.

We believe that with your help, we will greatly improve the product. We hope to convey our confidence in the Cocos Creator 3D Engine with upcoming examples and tutorials, and encourage everyone to try to create 3D projects when it’s left the beta stage.

At the same time, the Cocos Creator 2D version will continue to adhere to the "2D first" principle, bringing more powerful visuals, better development experience, and better performance to 2D projects to fit those who find their game more suitable for 2D. However, if you are a 3D game team, have experience with other 3D editors, and want to build a mini-game or web game, we want you to be prepared for the new experience brought to you by Cocos Creator 3D. In the long run, Cocos Creator 3D is a branch product that explores infinite possibilities and will be integrated into Cocos Creator as a unified product eventually.

We have written a lot of detailed documentation for Cocos Creator 3D and will be translating these documents from Chinese to English as quickly as possible. So please wait for a bit longer before we share all of the nuts and bolts of the Cocos Creator 3D engine.

If you have any comments, we welcome them in the forum and will be listening to your requests and recommendations. Thanks for being part of the Cocos Team, we hope you enjoy and build incredible games with our 3D engine in the future!