Does anyone know? In addition to making games, the Cocos engine can also use game development technology to implement applications in non-game fields and create visual 3D commercial projects. Today I will share with you a game CP that is based on Cocos Creator game development technology and expands into non-game fields . road to commercialization.
PogoRockGames was established in Zhengzhou in 2015. It focuses on the development of mobile games and has also produced a number of independent games.
The team began to expand its visualization project business in 2021 and has launched a number of high-quality 3D commercialization projects overseas. Today we share two visual applications, one is a display of a flagship refrigerator, and the other is a demonstration of online options for high-end RVs.
3D Refrigerator Project
The 3D refrigerator project makes extensive use of Cocos' animation editor. Users can intuitively obtain the functions of the refrigerator through animation. Compared with traditional print advertisements, the effect is more realistic and the user's experience of the product is also more intuitive.
Purified water to make ice
At the same time, with the help of the 3D rendering capability of the Cocos engine, users can view products 360 degrees without blind spots, achieving an immersive virtual shopping experience, which is a feature that neither offline shopping nor online shopping has.
360-degree view of demo product’s fan mask
3D RV online selection
Thanks to the comprehensive advantages of the Cocos engine, high performance, low power consumption, and high-quality rendering, we can easily implement the function development of online 3D car selection.
Through the PBR material that comes with the engine, the car materials in the product are similar to reality in terms of texture and effect. What users see is what they get. Just click on the screen to complete offline 4S stores for hours or even days. Selection process.
3D RV options display
At the same time, all materials and optional functions of the car are always online, so there will never be a situation where you cannot see the prototype car. Even customized configurations can be viewed with one click and switched in real time.
3D RV interior customization effect display
Team interview
Why use Cocos engine?
Using a game engine for product visualization is not a technological innovation. Other game engines have already had industrial application cases. However, the reason for using the Cocos engine has been carefully considered. Hao Ming, CEO of Bianshi Games, mainly considered the following reasons.
Consider based on the core needs of commercial products :
Real-time 3D rendering with photorealistic performance
Lightweight, easy to spread, fast loading speed
Prioritize support for mobile Web and native platforms, and also be compatible with PC
Has cool special effects to show how the product works
Compared with other factors, the Cocos engine has cross-platform rendering capabilities and perfectly supports Vulkan, OpenGL, WebGL, WebGPU, Metal, etc. At the same time, it has a complete scene editor and is endorsed by hundreds of tens of millions of projects.
To sum up, Bounce Game uses Cocos Creator as a development tool. Because Cocos can meet almost all needs with the core functions of the game engine such as loading, rendering, and special effects. More importantly, its high development efficiency can quickly meet the needs of commercial customers for rapid response, and it also supports Web Online preview can synchronize progress with customers in real time to ensure that product needs meet customer requirements.
How to use Cocos to achieve success in commercialization projects?
Successful games pursue a flow experience that provides players with endless aftertaste. The pursuit of product visualization applications is to meet the needs of enterprises to promote products, and at the same time, to allow the audience to fully understand the product through an immersive experience, thereby promoting higher purchase conversions. Therefore, both design and development need to be considered comprehensively based on the characteristics of the product.
Comprehensive understanding of product features to better serve users
When the Bianshi team is working on a project, they will fully communicate with the company first to determine the core appeal of the product display, what kind of visual effects the manufacturer wants, the audience for the product, the final delivery channel and platform, etc. These will all be directly It affects the entire design and development method. There is no universal model in this field. For us, we prefer to treat product visualization applications as a unique business interactive artwork.
Art-like commercial interactive display
Sharing useful information
Regarding how to use Cocos Creator to implement visual project products, the Bianshi Game team also shared some development experience gained from the practice of multiple projects.
1. Model lightweight
Although the lightweight of the model is not directly related to the engine, the lightweight model is the foundation of everything. 3D games have a key step in the production process of high-model to low-model in the art asset production process, which also applies to the development of visualization applications.
Generally speaking, companies provide industrial models, that is, parametric surface modeling models. This type of model does not have the concept of triangular surfaces in the DCC tool. However, in the rendering pipeline, all mesh data is composed of triangles.
Therefore, lightweighting industrial models is the basis for all subsequent development. Using triangles for model development in advance can not only reduce the loading pressure, but also reduce the burden on the GPU during rendering.
2. Loading optimization
Because the display is based on the Web, in order to allow users to see the screen faster, you cannot wait for all assets to be loaded before displaying them to users.
The perfect experience is to do minimal loading first, so that users can see the product screen as soon as possible, and then load it in the background without the user noticing.
In this part of the technical implementation, Cocos Creator's resource management solution is like a scalpel, which can perform very fine-grained anatomy operations on the entire asset loading process very accurately and sharply.
At the same time, Cocos Creator version 3.8.1 also supports meshOpt compression, which can reduce the size of 3D models by up to 70% after compression, making visual commercial products truly "open in seconds."
3. Rendering quality
Thanks to the PBR rendering process of Cocos Creator, its rendering effect provides basic picture guarantee. But this is not enough. If you want to get better results, you also need to customize the rendering pipeline in specific scenes according to the characteristics of the product to achieve a more artistic performance.
Cocos Creator 3.8.1 community version also has built-in varnish and glass effects, which is more convenient for developers.
For objects with particularly sharp edges and corners, highlight aliasing will be produced under high light that particularly affects the effect.
In order to eliminate this kind of aliasing while showing the proper highlight effect, Bengshi specially wrote its own Cocos Shader to eliminate highlight aliasing, which greatly improved the overall quality of the picture.
The core idea of anti-highlight aliasing is as follows :
In the performance of some models, it is easy for highlight jagged edges to appear. The finer the model and the lower the roughness of the material, the easier it is to appear.
In fact, when adjusting the PBR parameters, you can find that increasing the roughness appropriately can avoid the formation of highlight aliasing. However, in order to better present the highlight reflection effect of the model, you cannot mechanically increase the overall roughness. To put it simply - —Add roughness only where normal changes are large.
So how to find the place where the normal changes greatly?
In GLSL , there is a dFdx sum dFdythat is used to calculate the rate of change of a variable based on screen space. Then dFdx(v_normal) the sum dFdy(v_normal) is to find the partial derivative of the normal in screen space.
At the same time, with reference to some open source algorithm codes, the sum of the squares of the partial derivative vectors in the x direction and the partial derivative vector in the y direction is used as an indicator of "large normal change", and then mapped to the increase in roughness.
If you modify the engine directly buildin-standard.effect, recalculate standard-fs it :roughness
#if USE_SPECULAR_AA
vec3 vNormalWsDdx = dFdx(v_normal);
vec3 vNormalWsDdy = dFdy(v_normal);
float spaaVariance = specularAA.x * (dot(vNormalWsDdx, vNormalWsDdx) + dot(vNormalWsDdy, vNormalWsDdy));
float spaaRoughness = saturate(s.roughness + min(spaaVariance, specularAA.y));
s.roughness = spaaRoughness;
#endif4. Special effects
When companies promote their products, they not only show the appearance of the product and introduce related functions, but also need to let potential users understand the working principle of the product, so that users can better understand the product and better reflect the technological content of the product.
When users know more about how a product works, their desire to buy will be stronger.
In this regard, some visual effects are needed to express the working principle. Working Principle Special effects are the trump card of visual applications. This is also the most difficult, most technical and workload-heavy part of the entire development work.
In response to these needs, Cocos Creator's powerful particle editor and animation system bring great convenience to special effects production.
Cocos engine supports embedded animation playback
What’s even more powerful is that through code control, these special effects become programmable interactive special effects instead of sequence effects, which allows users to understand the working principle of the product very intuitively through various methods and perspectives.
5. Deployment
After the development work is completed, it will finally be deployed online. Again, thanks to the AssetBundle function of Cocos Creator, the entire application can be modularly split during deployment and deployed to a remote server.
Enterprises actually don't need a very powerful server. They only need to use a very convenient CDN network to allow users from all over the world to access product pages with the fastest network connection speed. This reduces the company's initial investment cost in product promotion to a certain extent.
Summarize
Cocos Creator has a powerful visual editor, an excellent resource management solution, and provides customizable rendering pipeline and engine source code, as well as a powerful particle and animation system, all of which lay a solid foundation for the development of product visualization applications.
At the same time, active communities and KOLs have also enriched the entire Cocos ecosystem. Most solutions can be found through the Cocos community and forums. I believe that developers will be able to create more excellent games and commercial products in the future.
Click [read original text] to view the refrigerator project case
http://web.pogorockgames.com/freezer/index.html