Did you know that in addition to game development, the Cocos engine can also be used to apply game development techniques to non-gaming fields for practical applications? It can be used for visual 3D commercial projects. Today, I will share the journey of a developer's commercial project.

 

 

PogoRockGames, founded in 2015 in Zhengzhou, focuses on mobile game development and has worked on several independent game titles.

 

 

The team began transitioning in 2021 to focus on landing multiple high-quality 3D commercial projects overseas. Today, we'll share two visual applications: a flagship refrigerator showcase and a demonstration for configuring high-end RVs online.

 

3D Refrigerator Showcase

 

The 3D refrigerator project extensively utilizes Cocos' animation editor. Users can interactively explore the refrigerator's features through animations. Compared to traditional flat advertisements, this approach provides a more realistic experience, making users' perception of the product more intuitive.

 

 

Tap the screen to see the water purification and ice-making.

 

Additionally, leveraging Cocos Engine's high-quality rendering technology, users can explore the product from all angles in a 360-degree view, creating an immersive virtual shopping experience. This feature is something that neither offline nor online shopping can provide.

 

360-degree view of the demo product's fan cover.

 

 

3D RV Online Customization

 

Thanks to the features of the Cocos Engine—lightweight, high-performance, and high-quality rendering—we can quickly develop an online 3D car customization function.

With the engine's built-in PBR material, the textures and effects of the car materials in the product are very close to reality. What users see is what they get. They can efficiently complete the customization process that would take several hours or even days at offline 4S stores with just a few clicks on the screen.

 

3D RV Customization Showcase

 

Moreover, all car materials and customization features are always available online, eliminating the situation where you can't see a sample model. Even for custom configurations, you can view them with just one click and switch in real time.

 

3D RV Interior Customization Showcase

 

Why Choose Cocos Engine?

 

Using a game engine for product visualization is not a technological innovation, as other game engines have industrial applications. However, the decision to use the Cocos engine was carefully considered by PogoRockGames CEO Haoming Hao for the following reasons:

 

Based on Core Requirements for Commercial Products:

 

- Three-dimensional real-time rendering with realism

- Lightweight for easy distribution and fast loading

- Web support, compatible with both PC and mobile platforms

- Impressive effects to showcase product functionality

 

Compared to other options, Cocos Engine offers cross-platform rendering capabilities that perfectly support Vulkan, OpenGL, WebGL, WebGPU, Metal, and more. It also provides a comprehensive scene editor that comes with endorsements from hundreds of projects with tens of millions of users.

 

In summary, PogoRockGames chose Cocos Creator as their development tool. With Cocos Engine's support for loading, rendering, and special effects, it can meet almost all its requirements. Moreover, its high development efficiency allows for a quick response to the needs of commercial clients. Web-based previews enable real-time progress synchronization with clients, ensuring product requirements meet customer demands.

 

 

Achieving Success in Commercial Projects with Cocos

 

Successful games aim to provide players with an immersive and engaging experience. Product visualization applications, on the other hand, aim to meet the marketing needs of businesses and provide audiences with an immersive experience to understand the product and drive higher conversion rates fully. Therefore, design and development should consider the product's unique characteristics from all angles.

 

 

Comprehensive Understanding of Product Features for Better User Service

 

PogoRockGames conducts thorough communication with businesses before embarking on their projects. They first determine the core objectives of product presentation, such as the visual effects desired by the manufacturer, the target audience, and the final distribution channels and platforms. All these factors directly impact the entire design and development process. In this field, there is no one-size-fits-all approach.

 

PogoRockGames views product visualization applications as unique works of interactive art for business.

 

Artistic Commercial Interactive Showcase

 

Based on the experience gained from multiple projects, PogoRockGames shares the following development insights for using Cocos Creator in product visualization implementation.

 

 

1. Model Lightweighting

 

While model lightweighting isn't directly related to the engine, having lightweight models is fundamental. The 3D gaming asset production process includes a crucial step of converting high-poly models into low-poly ones, which is equally applicable in developing visualization applications.

 

Typically, businesses provide industrial models created using parametric surface modeling, which doesn't have the concept of triangular faces found in DCC tools. However, all mesh data is constructed from triangles in the rendering pipeline.

 

 

Hence, lightweighting models for industrial models are the foundation for all subsequent development. Using triangles for model development in advance reduces the loading pressure and lightens the GPU's workload during rendering.

 

 

2. Loading Optimization

 

Because it's web-based, the goal is to show users the visuals as quickly as possible without waiting for all assets to load.

 

 

The perfect experience is achieved by minimizing initial loading, allowing users to see the product's visuals as soon as possible, and then performing background loading without the user noticing.

 

In this aspect, Cocos Creator's resource management solution, especially in version 3.8.1, offers meshOpt compression support. This can reduce the volume of 3D models by up to 70%, achieving near-instant loading.

 

3. Rendering

 

Thanks to Cocos Creator's PBR rendering pipeline, it provides a basic guarantee for visuals. However, custom rendering pipelines tailored to the product's characteristics are needed in specific scenes to achieve better results.

 

Rendering

 

Cocos Creator 3.8.1's community version also includes built-in effects for varnish and glass, making it more convenient for developers.

 

Built-in Rendering Effects

 

For objects with very sharp edges, aliasing effects can occur under highlights. To eliminate this aliasing while maintaining the highlight reflection, PogoRockGames developed a shader to eliminate highlight aliasing, significantly enhancing overall image quality.

 

The core idea for anti-aliasing highlights:

 

Aliasing can occur under highlights for specific models, especially with more detailed models and materials with lower roughness. Adjusting PBR parameters can reveal that increasing roughness slightly can prevent aliasing. However, roughness should not be increased uniformly but selectively in areas with significant normal changes to achieve the desired highlight reflection.

 

 

Anti-Aliasing Highlights

 

To identify areas with significant normal changes, dFdx and dFdy in GLSL are used to calculate the rate of change of a variable in screen space. dFdx(v_normal) and dFdy(v_normal) represent the partial derivatives of the normal in screen space. A high-pass filter is applied to these derivatives, measuring the square sum of the derivatives in the x and y directions. This is then mapped to an increase in roughness.

 

The built-in `standard.effect` in the engine's source code was modified to recalculate roughness in the `standard-fs` shader, addressing the highlight aliasing:

 

   #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;

    #endif

  

4. Special Effects

 

Deployment

 

After completing the development work, the final step is deployment. Thanks to Cocos Creator's AssetBundle feature, the entire application can be modularly split and deployed to remote servers.

 

Deployment Using AssetBundle

 

In reality, businesses don't require a powerful server. They can use convenient CDN networks to allow users from various locations to access the product pages with the fastest network speeds. This significantly reduces the initial investment cost for businesses in product promotion.

 

Conclusion

 

Cocos Creator boasts a powerful visual editor, excellent resource management solutions, and offers customizable rendering pipelines and engine source code. With its robust particle and animation systems, it lays a solid foundation for the development of product visualization applications.

 

The active community and Key Opinion Leaders (KOLs) enrich the entire Cocos ecosystem. Most solutions can be found through the Cocos community and forums. Developers are expected to create more outstanding games and commercial products in the future.

 

Click to View the Refrigerator Project Case (Change to English by clicking on the upper right button of the screen)