Simultaneously published on the Cocos forum

First experience of Cocos Creator 3D

Official document https://docs.cocos.com/creator3d/manual/zh/
Download https://www.cocos.com/creator3d
The current personal version is v1.1.1, and the official version v1.2 has been released

Overall experience

UI interface production is as convenient and efficient as always
Very friendly to Cocos Creator 2D
Has its own 3D editor
The material system is very flexible
The current version does not support 2D games sufficiently

Currently not perfect

2D aspect
- Does not support LabelAtlas, can be achieved indirectly using bmfont
- mask does not support pictures as templates
- The automatic release of scene resources is not available, and memory can be released by some special means
- Does not support dynamic combination
- Spine and keel are not currently supported
3D aspect
- Does not support animation layering, that is, does not support the character's upper and lower body to play different actions.
- v1.1.1 shadows only support flat shadows, which means that shadows can only be cast on the ground but not on the model. v1.2 shadow supports shadowMap but it is not perfect.
- The fog effect is not supported in v1.1.1, but already supported in v1.2.
- Does not support post-processing (HDR, depth of field, floodlight)
other
- Currently does not support the introduction of code base through npm

Different from Creator 2D

UI layer needs to be set to UI_2D
Compared with the old version of Creator, all component names have added a Component suffix such as Sprite -> SpriteComponent node.getComponent(SpriteComponent)
Colo is no longer provided in the Node node, and the new version of Node api https://docs.cocos.com/creator3d/api/zh/classes/scene_graph.node.html
The action has been deprecated, please use tween. tween documentation https://docs.cocos.com/creator3d/manual/zh/tween/
Usage changes of opacity transparency, related documents https://docs.cocos.com/creator3d/manual/zh/ui-system/components/editor/ui-opacity.html
- 1 Sprite and Label components can directly modify the alpha component of the color attribute
- 2 In other cases, a transparency component needs to be added. For example, this.node.getComponent(UIOpacityComponent).opacity = 0
When importing UI pictures, remember to change the picture type to sprite-frame, otherwise it cannot be used in the UI.
cc.director This kind of ts will report an error but can actually run, but it will lose the code prompt
cc.audioEngine is obsolete. See documentation https://docs.cocos.com/creator3d/manual/zh/audio-system/overview.html
The convertToNodeSpaceAR related api was moved to UITransformComponent
The suffix /spriteFrame needs to be added to the dynamic loading image path
The mask is not effective in the editor, the actual preview is effective.
Did not see the documents or interfaces related to the dynamic picture

Precautions for porting the 2D version of the UI component prefab to the 3D version

Officially, there is no tool for exporting Creator to Creator 3D. You can write a simple script yourself
Example of renaming components in prefab " type ": "cc.Sprite", ->" type ": "cc.SpriteComponent",
Add UITransform component
Change the layer of the root node to ui_2D
Resources need to be dragged again

3D related

Understanding of 3D The
light in the scene illuminates the surface of the model, and is taken by the camera after reflection and diffuse reflection to form the picture we see.

3D core concept model
- The model is composed of meshes and materials
- The mesh defines the shape of the surface of the object, that is, the spatial structure. The mesh is composed of triangles. A triangular face contains three vertices. The information of each vertex includes the position and normal of the vertex in the model coordinate system. The vertexShader in shader specializes in processing vertex data. Its main function is to convert vertex coordinates from the model space coordinate system to the screen space (in fact, the coordinates calculated in vs are not screen space coordinates, but here is just to facilitate understanding).
- The material determines how the surface of the model looks under light. The shader used in the material determines the lighting calculation method (unlit, blinn-phong, pbr). Different effects can be achieved by adjusting the parameters in the material. For example, the material parameters in pbr include: model surface roughness, reflectivity to light, metallicity, ao, etc.
- It can be simply understood that the material determines the way these triangles are colored.
Creator 3D uses the right-handed coordinate system like Laya, while Unity uses the left-handed coordinate system.
Common operations for 3D scene editing https://docs.cocos.com/creator3d/manual/zh/editor/scene/
Common material options (bottom part of the document) https://docs.cocos.com/creator3d/manual/zh/material-system/overview.html
If you want to modify the material in fbx, you need to dump it first and then modify it.
Parallel light only supports one
The same object appears multiple times in the scene, you can turn on the gpu instancing option in the material to optimize performance
Turning on the shadow will double the number of triangles drawn by the object, and you should turn on the shadow of the object as little as possible.
Too large particle value will consume a lot of memory
The model displayed in the UI remembers that the model is zoomed in 100 times, and the material is switched to non-light material. Related documentation https://docs.cocos.com/creator3d/1.1/manual/zh/ui-system/components/editor/ui-model.html?h=uimodel
For materials involving transparent maps, pay attention to switch to transparent, and you can also adjust the drawing order of transparent objects by modifying the priority of the material.
Quaternion
- api documentation https://docs.cocos.com/creator3d/api/zh/classes/core_math.quat.html
- Remember to check whether the rotation related interface is normalized and distinguish between radians and degrees
- Video to help understand https://www.bilibili.com/video/BV1SW411y7W1

Performance optimization

3D scenes use compressed textures, which can significantly reduce video memory. Note: etc1 does not support transparent channels. Prv size requirements: the size is 2 to the power of N, and the width and height are the same.
Images that are too large are reduced to smaller sizes to reduce the memory usage (e.g. large background images of the interface)
UI reduces drawcall by combining pictures and adjusting component levels
About 3D batching https://docs.cocos.com/creator3d/manual/zh/engine/renderable/model-component.html#%E5%90%88%E6%89%B9%E7%9A%84%E6 %9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5
It is recommended to turn on gpu instance for repeated objects in the 3D scene
Low-end machines can close the shadow and lock the frame 30
Avoid using the engine default material for the ground. The default material used by the engine is pbr which consumes a lot of performance.

Some recommended articles, blogs, tutorials

OpenGL official https://www.khronos.org/opengl/wiki/Main_Page
OpenGL tutorial
- Chinese version https://learnopengl-cn.github.io/intro/
- English version https://learnopengl.com/
Understanding of Gamma https://www.zhihu.com/question/27467127#answer-10413243
Some posts in the Cocos forum https://forum.cocos.org/t/topic/95807
About compressed texture https://www.jianshu.com/p/a0d7eed9f44d

Implementation details of some useful functions

blinn-phong

Because the engine's default pbr performance is too expensive, and then unlit has no lighting effect, so I thought of the classic lighting blinn-phong. Since the engine does not have blinn-phong built in, one is translated.
Translated from this article https://gameinstitute.qq.com/community/detail/123553
v1.2.0 version effect file
v1.1.1 version effect file

Fragmented file merge

Every audio, picture, prefab, model, animation and other resources in cocos will generate a corresponding json, and the number of files will be doubled after construction. If the resource is placed on the network, it will cause a large number of resource download requests and greatly reduce the loading speed.

Implementation principle: by modifying the constructed setting.js. This file is actually a configuration file, which mainly records the path to uuid mapping of all files in the resource directory, and which json files are merged into which large json file. The engine will check whether the current json file has been merged before downloading any json file. If it has been merged, it will download the merged json file.
I wrote a json merge script to merge all json files into one big json file, and the script running environment is nodejs. The disadvantage is that a single json file is huge after the merge
Post the engine source code for easy understanding.

Setting file after normal packaging

After running the script, a unionPack.json file and another json file that cannot be merged will be generated, as well as a modified setting file.

Script file mergeJson.rar (11.1 KB)

3D UI display

Displaying UI in a 3D scene is a relatively common requirement, which can be implemented using renderTexture.

Create a new renderTexture resource in the resource manager, set the width and height as needed
Create a new canvas on the scene and set the targetTexture of the Canvas component to the newly created renderTexture.
Create a new 3D face in the scene, select unlit Effect as the face material, and set the texture of the face material to renderTexture in the code.

json file compression. The combined large json file is 1.1M and compressed to 144k. Need to modify the engine

Burning effect shader

Principle: Simple normals use

shader.rar (2.9 KB)

Two ways to realize 3D progress bar

Custom mesh vertex data
Principle: The rectangle is divided into 5 triangles, and then converted to the corresponding angle according to the percentage. The red line represents the boundary, and the green represents the component. The circular progress bar used in the UI should also be implemented in a similar way at the bottom of the engine. The advantage of this method is that you can turn on dynamic batching to reduce drawcall.

Code (1.0 KB)
The shader cuts the circle

radial-1.1.1.rar (1.2 KB)

A way to realize countdown numbers in 3D

Because the countdown is usually a single digit, this method is to find the position of a single digit in the texture, and then set the uv offset and zoom. In addition, when calculating the position, you need to consider the rotation after the image is combined.
The original BMFont file is

packaged and combined