Go to other articles in this series
Cocos Cyberpunk is a complete open source TPS 3D game launched by the official team of the Cocos engine to demonstrate the engine's heavy-duty 3D game production capabilities and enhance the community's learning motivation. It supports Web, IOS, and Android multi-terminal releases.
This series of articles will interpret the source code from various aspects to improve everyone's learning efficiency. I hope it can help you to go further on the road of 3D game development.
Project source code free download page:
https://store.cocos.com/app/detail/4543
“HEY，麒麟子，最近突然觉得，有一个词好适合你”
“嗯？什么词？”
“姜郎才尽。”
“。。。。”
“你看吧，这都停更多久了，硬是没憋出一个字”。
“。。。。，行，我写！”
Hello everyone, please call me Qilin Pigeon.
Time flies so fast, it has been several months since the last post.
Friends who are in a hurry, you can directly drop down and jump to: Reusable technical assets in Cocos Cyberpunk
In fact, everyone does not know that Qilinzi usually writes articles, not only to ensure that the dry goods are full, but also to stick to the theme of Cocos, and at the same time, he does not want others to see that I am a trustee of Cocos. It's difficult, please bear with me.
What is Cocos Cyberpunk
New features in Cocos Creator 3.7
Inadvertently, Cocos Creator 3.7 has been released, and the most desired custom rendering pipeline , light probe , and reflection probe are available.
With these three artifacts, scene rendering can rise several steps.
It is worth noting that there are many new features in 3.7. At the same time, the engine documentation team also spent a lot of time updating the new documentation in great detail. You can go directly to the document to view the corresponding content. If you have any doubts and suggestions about the document, please feel free to give feedback.
Oh, and there is also the model LOD system. It is said that it supports up to 7 levels. The use level can be dynamically selected according to the display ratio of the model on the screen, which can effectively reduce the rendering burden of large scenes and improve running performance.
When it comes to LOD, most people's first reaction is to make Mesh with different details to achieve Mesh LOD , but everyone doesn't know: Mesh LOD is actually an option, not a preference. The real preference is the material LOD.
The rendering burden brought by complex materials to the GPU is far greater than the number of model faces. For many projects, Material LODs will be sufficient. It does not need to process the Mesh, just edit the materials used at different levels, and it can improve a lot of performance.
When the above number exceeds the standard, Culling should be considered (for example, use PVS to hide the occluded model, use distance judgment to hide small objects that are far away), instead of doing Mesh LOD. Mesh LOD needs to be considered only when the combined use of material LOD and Culling still cannot meet the requirements.
Since each layer of LOD is actually a separate node, the material can also be LOD.
For example, when the object is rendered in close range, use the highest effect PBR material. When at a distance, some details can be turned off. When it is very far away, it can degenerate into an unlit material.
However, Qilinzi has not used the feature of model LOD carefully, so I will not discuss it in depth for the time being.
Perks from the Engine Team
What is even more surprising is that to prove that Cocos Creator 3.7 is really good, the engine team also released a TPS game DEMO "Cocos Cyberpunk", and made 100% open source of the project engineering source code.
A big guy even wrote a special article: "130,000 lines of code + 500,000 3D examples of outsourced art, Cocos is giving it away for free!" "
I have to say that this title is so good that even Qilinzi, who has seen the big world, can't hold it.
Although a little excited, before downloading the code, Qilinzi confirmed some questions to the colleagues in charge of the Cyberpunk project, which may be the questions that everyone wants to ask before downloading:
Qilinzi: "Have you used the latest version of the custom pipeline?"
Answer: "Sure, a custom deferred rendering pipeline, Bloom, TAA, FSR, etc., all have to be used."
Qilinzi: "Is the engine changed? Does the user need to do any special configuration?"
Answer: "The new version of the custom pipeline code is directly written in the project with TS, no custom engine is required. It can be opened directly with Cocos Creator 3.7.1."
Qilinzi: "How about the performance, can it run on the phone?"
Answer: "Sure, both Web and Android can run natively. The minimum support for Mi 6 is 30FPS. We have done model adaptation, adjusting the image quality and maintaining the frame rate according to models with different performances"
Qilinzi: "I don't believe it"
Answer: "If you don't believe me, why do you ask me so much, go to the Cocos Store to download it yourself, pack a package and run it."
Cocos Cyberpunk reusable technical assets
Qilinzi spent a day researching the Cyberpunk project, and listened to the live broadcast of Cocos official station B, so he probably got acquainted with the project.
From personal experience, the project is still very clear and clear, it can be used as a good learning resource, or it can be used as a project framework to carry out project development on it.
It includes the following features:
1. Complete TPS game core
Although the current character control effect still has a lot of room for improvement in details, it is already a complete shooting game logic.
- character control
- Separation of upper and lower body movements, shooting on the move
- Shooting, Ballistics, Bullet Holes, Flames, Hit Logic
- Monster Spawning, Monster Pathfinding, Monster AI
2. Model adaptation mechanism
3D games are different from 2D games. The picture quality of 3D games requires higher equipment performance support. So we usually achieve the best results on high-performance devices, and adjust the effects to ensure the frame rate on lower devices. Cocos Cyberpunk implements a complete model classification and performance switching strategy, which can be directly used in your own projects.
- Based on mobile phone GPU information, classify high-end, mid-range, and low-end models (common mobile phone GPU chips have been included)
- Adjust the effect according to the high, medium and low-end models to ensure that the low-end models are still smooth
3. Custom pipeline
In Cocos Cyberpunk, the new custom pipeline provided by Cocos Creator 3.7 is used, and it is placed in the project in the form of extension, which achieves very good isolation. If your own project needs it, it can be reused directly, and it can also be used as a learning case for studying the new version of the custom pipeline.
- Implemented forward rendering pipeline and delayed rendering pipeline, which can be directly reused according to project conditions
- It realizes the post-processing pipeline and framework, provides common technologies such as Bloom, TAA, and FSR, and can also add post-processing effects that you need very conveniently.
- Visualize the custom pipeline diagram, you can see the pipeline rendering process very intuitively
4. Enhanced reflection probe
Pre-baked reflection probes can make objects reflect the surrounding scenery without performance damage. It is a very simple and easy-to-use feature, and everyone must use it more.
- Baking with reflection probes in Cocos Creator 3.7
- Use SphereProjection to make corrections so that the reflection content is close to the object
- A real-time environment reflection probe component is provided, the main function is to facilitate debugging in the editor, and it can also be used to enhance the reflection effect in some simple scenes.
5. Static occlusion culling (PVS-SOC)
The fastest way to render an object is: don't render.
In the Cocos Cyberpunk project, a simple and easy-to-use PVS mechanism has been implemented. By storing the visible relationship in the spatial grid in advance, and directly looking up the table to obtain the rendering list during rendering, the efficiency can be greatly improved, and it is most practical for scenes with dense buildings.
- Pre-segment the space into many grids
- Use the ray query method in advance to find out the visible objects of each grid and record their IDs (using gpu.js acceleration)
- When rendering, calculate which grid the camera is in, obtain a list of visible static objects in the corresponding grid, and render only visible static objects
By the way, due to the project type, the light probes and LODs newly added in Cocos Creator 3.7 mentioned above are not used. Go back to Qilinzi to find some suitable examples to share. .
Qilinzi thinks that Cocos Cyberpunk should be far more than the ones mentioned above. If you spend more time digging, you will definitely gain more.
Therefore, next, Qilinzi will study all the technical points used above, and output some content, hoping to discuss and learn with you.
One last word
Many friends often ask Qilinzi how to improve their actual combat ability after learning the basics of engine and graphics.
The answer is simple: find a project to do it.
What if there is no chance to do a project?
Just find an open source project.
Cocos Cyberpunk is established for this purpose, hoping to let more friends use Cocos Creator to make more cool projects.
So what are you waiting for, learn quickly. Cocos Cyberpunk 3D Source Code