Cocos Creator 3.6.0 Released!

Hi, everyone!

Cocos Creator 3.6 is an important milestone for Cocos Engine, and it also has the longest iteration since Cocos Creator 3.0. This version has significant improvements in rendering, editor features, performance, and enhancements in stability and compatibility of the engine. Due to the large number of updates (engine: 1110 commits, editor core: 678 commits), only the relatively important ones are listed here.

Download Link

Important updates


Surface Shader

Surface Shader uses a unified rendering process and structure that allows users to write shaders that focus on surface material without anything related to the lighting model. The advantages over the older version (Legacy Shader) are easier to write and maintain, better version compatibility, and less prone to rendering errors. And you can get a lot of public features from the unified process, such as unified environment lighting, rendering debug view etc. Surface Shader also makes it easier to provide a variety of common and complex materials to users in Cocos Creator.

Cascaded Shadow Maps

The regular shadow map has a serious drawback: when the projection area is large, a very high-resolution shadow map texture is needed to achieve a good shadow effect, which may exceed the limits of the hardware capacity. If the resolution is not increased, the shadows will be jagged, shapeless and unclear, but reducing the projection area will result in a very short shadow distance, objects a little further away will lose their shadows. Adjusting the balance between shadow distance and shadow quality is a major headache and it has been in previous versions.

CSM( Cascaded Shadow Maps ) divides the view frustum into multiple blocks from near to far, with a smaller projection area for the near block and a larger projection area for the far block, which is equivalent to an adaptive shadow map, thus increasing the utilization of shadow map texture several times. It can have a very precise shadow for closer objects and a just fine shadow effect at a longer distance from the view point, so developers no longer have to spend their time on shadow parameter settings.

Rendering Debug View

This feature provides a variety of custom display modes to help users investigate issues of material, lighting, and shadow display much faster. It also allows users to view specific scene information more clearly and provides a reference basis for optimization decisions.


GGX Convolution

Since the specular of direct lighting are using the GGX BRDF model, for environment lighting, the same BRDF must be used for spherical convolution in order to make the lighting effects of both light sources correspond. In addition, by storing the reflection information of different roughness in the corresponding mipmap level, the convolution calculation can fix the following problems compared to the automatically generated mip maps:

  1. Flooding and trailing of environment lighting specular are greatly reduced
  2. Different effect from Substance’s standard PBR material
  3. Difference between specular of direct lighting and environment lighting

As shown below:

AutoGen Mipmaps

GGX Convolution

GGX Convolution vs. Direct Lighting vs. Auto Generated Mipmaps

Anisotropic Lighting

With the benefit of Surface Shader, we can fully extend the PBR lighting model. In v3.6 there is complete support for isotropic and anisotropic materials and lighting models of Direct Lighting and Environment Lighting. You can work with the Substance PBR material library to create brushed metal, hair, silk, etc.


  1. Support for setting Skybox material
  2. Add the Normal Strength range of material
  3. Support for GLTF specular-glossiness workflow
  4. Enhanced support for the default FBX surface-phong material
  5. Extended Specular channel support for Blender principled BSDF materials
  6. Add support for materials of model


UI Enhancements

v3.6 has updated a new version of editor user interface, and has made an all-round reconstruction in order to achieve a “more coordinated” visual system, “more intuitive” visual feedback, and “more immersive” interactive feeling. In the future, we will continue to standardize design based on Cocos’ design principles, continue to update and iterate, and continue to optimize core interactions and workflows.

Preview in Editor

Development efficiency is a core value that Cocos Creator places great importance on, and in v3.6, this has been further improved. In addition to the “Preview in Browser” and the “Preview in Simulator”, developers can now use the “Preview in Editor” to preview the project. In this mode, the scene manager will run the code directly, allowing developers to debug scenes in real-time. While bringing a seamless preview experience, it also makes up for the shortcomings in debugging.

This feature is currently in an experimental stage. We welcome you to give us more feedback about it. In the future, we will also continue to focus on development efficiency and continue to improve user experience in script compilation, project debugging, and build release.

Embedded Players for Animation Clips

Animation Editor adds the ability to embed players, developers can embed other particles and other animations in any animation. Moreover, it can be programmed in a way like editing tracks in video editing software, with free adjustment of duration and playback position.

After editing, the content of the embedded player will play along with this AnimationClip, which is supported in both the Animation component and Animation Graph. This feature is also available for animations from FBX, allowing for more flexible effects control and solving the problem of imported animations being difficult to re-edit.

Both particle and animation players are currently available in v3.6 and can be enabled in the Preferences > Laboratory.


Localization Editor

To better produce multilingual versions of projects, v3.6 provides a built-in multilingual tool, Localization Editor (L10n), which currently supports text translation and resource replacement. It is positioned to deeply integrate with Cocos Creator and improve the efficiency of translation through highly automated tool. In a codeless way, it’s very intuitive and lowers the usage threshold.

Main Features:

  1. Support for AI translation, currently connected to Google and Youdao
  2. Support for one-click extraction of all kinds of content that needs to be translated
  3. Support for import and export Excel, csv, po files in batch
  4. Support for real-time preview and resource replacement

Localization Editor is currently in the experimental stage and will provide richer localization capabilities in the future, we look forward to your feedbacks.

Scene Editor

  1. Support for Surface Snapping and Vertex Snapping
    Surface Snapping (Press and hold ctrl/cmd + shift):
    Vertex Snapping (Press and hold v):
  2. Support for box selection, you can quickly select multiple objects


  1. Developers can freely select and combine Build, Make, Run and other subtasks in the build panel to execute
  2. Resource Server Address has been used as a common parameter for all platforms, and you can also check the useBuiltinServer option to use the built-in server address for easy local development testing
  3. Optimized the task scheduling of engine compilation and script compilation at build time, with independent process execution to reduce the memory consumption of the build process
  4. Add custom cmake tools in the preferences panel that will be used when building native projects
  5. New onError hook function in the build process to catch build failures
  6. Allow to turn off Cache Build Engine, Cache Compressed Texture, Cache Auto Atlas in Preferences > Build


  1. Support for thumbnail display of 3D meshes
  2. Support for removing the frame rate limit on the scene editor (lab feature)
  3. Supports filtering the Bundle folder directly in the assets panel to quickly find Bundles


Convert more infraustructure to native C++ implementation

For higher performance, more realistic rendering, better compatibility, more scalability, and better productivity, the Cocos Engine team has been iterating and refactoring the core engine framework continuously since the release of version 3.3.

It took the engine team more than a year to refactor the engine in multiple phases and modules to achieve a significant all-around improvement while still maintaining compatibility with old projects.

While bringing significant performance improvements and rendering enhancements, it also lays the groundwork for further iterations of the engine in the future.

From the microcosm of v3.6, we can see the determination of the Cocos Engine team: to insist on constant self-change to keep up with the update of hardware and the changing needs of our users.

2D Rendering Performance

Another important milestone for v3.6 is that it reaches the same level of 2D rendering performance as v2.x. This means that v2.x users can upgrade to v3.x with confidence. Based on the work of converting infrastructure to native C++ implementation, we have made the 2D rendering data structure, 2D batcher, and rendering process all native so that the 2D batching and rendering processes are performed natively to achieve v2.x’s performance. At this stage, there is still some legacy work left to be done, such as supporting Spine batching and fixing iOS WeChat drawbacks, but this also means that there is a higher ceiling for 2D rendering performance v3.x needs us to break through.

Native Extensions

Native extensions can link to a developer’s existing C/C++ code base, bind interfaces to the JS layer and be reused across projects.

With the power of CMake, extensions can flexibly integrate source files, static libraries or dynamic libraries. C/C++ interfaces can be exported directly to the scripting layer using the traditional auto/manual binding mechanism, or using the new sebind high-level interface added in v3.6. Once developed, the native extensions can be distributed individually as zip packages or packaged as editor extensions.

Please take a deeper look into the usage manual and the example case.

New RenderGraph Infrastructure

As the infrastructure for the next-generation custom rendering pipeline of our engine, we have wrapped the higher-level RenderGraph on top of FrameGraph to provide a series of capabilities and APIs for building rendering pipelines more easily. Includes typescript based cross-platform pipeline description, material system pre-processing, automatic management of various render states, transient render resources lifecycle management, and other capabilities. We have already implemented our web version forward and deferred rendering pipeline with RenderGraph. In future releases this year, we will replicate the native platform pipeline in its entirety, and open up the built-in pipeline customization capabilities based on RenderGraph, such as adding post-processing effects. At the same time, the ability to produce an entirely customized rendering pipeline based on RenderGraph will be fully open to developers.

Currently, you can select forward or deferred pipeline by setting CUSTOM_PIPELINE_NAME to Forward or Deferred in the project’s Macro Configuration, and you also need to turn on “Custom Render Pipeline (Experimental)” in the Feature Cropping. The usage details can be found inthe usage documentation.


  1. Added an easier-to-use JS binding layer Sebind
  2. Integrated Android Game Activity
  3. Supports Downloader breakpoint transfer on iOS/Android
  4. Added the settings module for user access, which holds the user’s pre-defined runtime project configuration
  5. Refactored the engine startup process, simplified the code of application.js, and added more events to the startup phase


Marionette Animation System

  1. Animation Graph supports preview while editing
    When editing the animation state machine, you can preview it in real-time to see the result of transition and blending, and debug it quickly without having to run the game after each modification to see the result.
  2. Animation Graph supports renaming variables and Layers
  3. Animation Graph supports sorting of transition lines to clearly see the priority of the transitions
  4. Animation Graph adds the “Destination Start Time” property, which allows the target animation to start playing from the specified position.
  5. Animation Graph can now allow specified transitions to be interrupted by other transitions, this feature can be enabled in the Preferences > Laboratory.

Particle System

  1. Add Noise Module to bring a more natural and controllable random motion effect to the particles
  2. Models in particle systems support GPU Instancing to improve emitter performance
  3. Particle editing supports “Undo” operation, improving the efficiency of particle effects creation
  4. Support for previewing and controlling particle groups in the Hierarchy


  1. Support for dynamic mesh, developers can now update the mesh data at runtime through API
  2. Add new curve type Spline to GeometryRenderer (support Linear, Bezier, Catmull-Rom curves)
  3. Support for SpriteRenderer in 3D space
  4. Fill z-values in UI vertex data to support 3D Transform of UI
  5. Support for prioritization of rendering components
  6. Supports access to PCMData and sampleRate from audio
  7. Support for terrain brush rotation
  8. Support for terrain height brush
  9. Support for using tga format texture by light map baker
  10. MeshRenderer automatically sets the light map resource for rendering
  11. Update EditBox style for iOS native platform


Import Phong & PBR materials from FBX/GLTF Automatically

When importing materials, v3.6 supports Diffuse-Specular material models (including Phong and SpecularGlossiness PBR), which can intelligently convert material parameters to standard Metallic Roughness PBR models. This allows you to get a material representation close to that of the original DCC software without changing the lighting model.

Mesh Split disabled by default

Due to the limitation of the number of uniforms, in CPU computed skeletal animation, when the number of skeletons exceeds a certain value, it is not possible to store all the skeleton data by uniforms at once, so in the previous version, we may split the meshes and bones. We often received feedback that one of our character models would take up multiple draw calls, mainly because it was automatically split here. What’s more is that since splitting cannot be done at runtime and can only be pre-processed, our splitting criteria can only be used as a reference for lower hardware devices and drivers (iPhone 6 WebGL), which is very limited for the number of skeletons.

Therefore, Cocos Creator 3.6 has made a strategic optimization of this issue as follows:

  • By default, the model is no longer split, and no changes are made to the imported model data (also keep model settings unchanged)
  • If the number of bones does not exceed the limit of the actual runtime driver, it will be passed directly using the uniforms
  • If the number of bones exceeds the limit, it will be passed using textures

Note: Using textures to pass skeletal animation data requires the ability to access textures in the vertex shader. This feature is minimally supported by OpenGL ES 3.0, WebGL 2.0. But relies on GL extensions, it has almost 100% coverage on devices which only support OpenGL ES 2.0 and WebGL 1.0 , so there is no need to worry about compatibility issues.

This option is currently retained only to maintain compatibility with old projects and will be considered for removal when appropriate.

Upgrade Tips

  • Windows platform no longer supports publishing to Win32, only Win64 is supported

  • Minimum version support for iOS platform changed from iOS 10.0 to iOS 11.0 (in order to use C++ 17)

  • The name of the built-in material is unified with the name in the editor, so you need to add the “builtin-” prefix when using the built-in Effect by calling EffectAsset.get and Material.initialize.

  • The application.js, game.js, index.js, etc. files in the build template have been updated. If you have customized the template in your project or build-extension, please regenerate it and make changes accordingly. See Upgrade Manual for details.

  • The format of settings.json file has been modified, extensions that have customized this file may not work. See Upgrade Manual for details.

  • Since the nodes under the Mask will be specially handled inside the engine, it is recommended to use the getChildByName function to get the child nodes under the Mask by the name instead of index to avoid unpredictable problems.

  • Android gradle:replaced jcenter by mavenCenter

  • Add native module that can be imported from cc, including code hints, to replace the jsb global variable.

● The ES6 to ES5 conversion feature of ByteDance Developer Tools is disabled by default to resolve some compilation issues. So developers need to manually adjust the open data domain template project to conform to CommonJS specification, otherwise it will cause the subdomain launch failure when running projects on ByteDance platforms because it cannot recognize ES Module. If your project also encounters this problem, please refer to convert OpenDataContext template into es5 by PPpro · Pull Request #12334 · cocos/cocos-engine · GitHub and make corresponding changes to files under the path “project-path/build/bytedance-mini-game/ openDataContext”


hmmmm.Is anyone using some of the new features in 3.6.0 beta?

A new version 072922 have been updated, if anyone is using community beta of v3.6, we strongly suggest you to update to the latest version

1 Like

Is there fix for supporting npm modules as in CC 2.x ?, i do remember someone promised to fix it in 3.6

It just different, the new scripting system uses rollup to build scripts into systemjs modules, the support ability for npm modules are indeed different. I will ask our engineer to explain more in detail

1 Like

What’s the problem you encountered with npm?

I’m getting limited success with moving/rotating sprites/buttons in 3D space. In order for the 3D rotation to be observed, I have to set the Projection for the camera viewing the sprites/UI elements to Perspective, but things like mouse hovers and clicks don’t work. If I tighten up the Near - Far distances on the camera (eg -0.5 - +0.5), I can get some measure of success, but it’s clearly not an accurate looking/feeling z-raycast check.

This is definitely better and an improvement, but I’d like to see the ability to put canvas components on any object in 3D space; or simply stated - have support for a world space canvas. Then I can set the transform of the canvas, and subsequently all of its children, however I like in 3D space.

Hi, The canvas is designed to adapt to the screen, so it has to be a 2D surface corresponding to the screen. However, in 3.6 we do support 3d space coordinates for UI elements under Canvas, so you can have a hierarchy like this

  • Canvas
    • Root (with 3d transform)
      • Sprite child
      • Label child

I think this can satisfy your need

Alright I’ve recreated the scene, and it’s a little better now… I still need to change the camera to Perspective projection. Still, though, hovering/clicking buttons on a Perspective camera does not work.

I see, we will consider it as a bug.

As a matter of fact, we already created an internal issue about this, the reason it doesn’t support perspective camera is because the normal hit test of UI node only consider zero depth plane. So the screen point (x, y) will be converted to (x, y, 0) for further hit test, but in perspective camera ray cast should be used for hit test. It’s planned to be supported in v3.7

Currently, you can attach collider to the buttons, and use ray cast feature to check mouse and pointer events.

An easy workaround that might suffice for all my needs (still testing, but so far so good) is to set the Near clipping distance on the camera to -0.5 and the Far clipping distance to 0.5.

New version 080521 have been updated

It seem that this version fixed getting hot issues on IOS and performances 2D was improved significantly
I will test more when 3.6.0 release officially

This version look good and i am waiting for this version
Thank you team

1 Like

We face problem with using - node-rsa - npm , can’t resolve errors after added the module in project.

Sorry, the node-rsa module can only work in node environment, it depend on a builtin node module crypto that can’t be resolved.

We cannot import this node module in the browser environment nor in the native environment

1 Like

Hello. We face problem with the VERY long loading of the application on Android, described in more detail here Significantly increased application startup time on Android after upgrade 3.5.2 to 3.6.0

Playing background music will cause stop main thread a while,please take a look into this report

Request downloading an asset bundles will cause stop main thread a while,please take into this issue