大家知道吗？Cocos 引擎除了做游戏，也可以使用游戏开发技术在非游戏领域进行应用落地实践，做可视化的3D商业项目，今天就和大家分享一家游戏 CP ，基于 Cocos Creator 游戏开发技术，向非游戏领域拓展的商业化之路。
PogoRockGames 蹦石游戏，于 2015 年在郑州组建，专注于手机游戏的开发，也做过多款独立游戏。
团队在 2021 年开始扩展可视化项目业务，在海外落地过多款高品质的 3D 商业化项目。今天我们分享两款可视化应用，一款旗舰冰箱的展示，一款是高端房车在线选配的演示。
3D 冰箱项目
3D 冰箱项目大量使用了 Cocos 的动画编辑器，用户可以通过动画直观获取冰箱的功能，相比于传统的平面广告，效果更加逼真，用户的对产品的感受也更佳直观。
净水制冰
同时借助 Cocos 引擎的 3D 渲染能力，用户可以 360 度无死角查看产品，实现了身临其境般的虚拟购物感受，这也是线下购物或者线上购物都不具备的特性。
360度查看演示产品的风机遮罩
3D 房车在线选配
得益于 Cocos引擎、高性能、低功耗、高质量渲染的综合优势，我们可以轻松实现在线 3D 汽车选配的功能开发。
通过引擎自带的 PBR 材质，产品内的汽车材质无论是质感还是效果都与现实相近，用户所见即所得，只需要轻松点击屏幕，即可完成线下 4S 店数个小时，甚至数天的选配流程。
3D房车选配展示
同时汽车的所有材质和选配功能都永远在线，不会存在无法看到样车的情况，即使是定制配置，也可以一键查看，实时切换。
3D 房车室内定制效果展示
团队专访
为什么采用 Cocos 引擎？
使用游戏引擎做产品可视化并不是什么技术创新，其他游戏引擎早就有了工业化应用的案例，但是为什么使用 Cocos 引擎是经过考量的，蹦石游戏 CEO 郝鸣主要考虑了以下原因
基于商业化产品的核心需求考虑：
-
具有真实感表现的三维实时渲染
-
轻量化便于传播，加载速度快
-
优先支持移动端 Web 和 原生平台，同时也要兼容 PC 端
-
有酷炫特效来展示产品的工作原理
相比于其他因素，Cocos 引擎具备跨平台的渲染能力，完美支持 Vulkan、OpenGL、WebGL、WebGPU、Metal 等。同时有完善的场景编辑器，更有数百款千万级项目的使用背书。
综上，蹦石游戏选用了 Cocos Creator 作为开发工具。因为 Cocos 在加载、渲染、特效等游戏引擎核心功能的加持之下几乎可以满足各方面的需求，更关键的是其高效的开发效率，可以快速满足商业化客户对于快速响应的需求，同时支持Web在线预览，可以实时与客户同步进度，保证产品需求满足客户的要求。
如何使用 Cocos 取得商业化项目的成功？
成功的游戏追求的是提供给玩家回味无穷的心流体验。而产品可视化应用追求的是要满足企业宣传产品的诉求，同时要让受众以沉浸式的体验来全方位的了解产品，进而促成更高的购买转化。所以在设计和开发上都需要根据产品的特点来全方位地考虑。
全方位了解产品特点，更好为用户服务
蹦石团队在做项目时，会和企业先进行充分的沟通，先确定产品展示的核心诉求，厂商想要什么样的视觉效果，产品的受众群体，最终的投放渠道和平台等等这些都会直接影响到整个的设计和开发方式，在这个领域里并没有通用的模式。对于我们来说，我们更倾向把产品可视化应用当作一件独一无二的商业互动艺术品来看待。
艺术品般的商业互动展示
干货分享
对于如何使用 Cocos Creator 来做可视化项目产品落地，蹦石游戏团队也分享了一些从多个项目的实践中获取到的开发心得。
一、模型轻量化
虽然说模型轻量化和引擎并没有直接的关系，但是轻量化的模型是一切的基础。3D游戏在美术资产生产流程中就有高模转低模的关键步骤，这同样适用于可视化应用的开发。
一般而言，企业提供的都是工业化模型，也就是参数化曲面建模的模型。这类模型并没有 DCC 工具中三角面的概念，然而在渲染管线中，所有的网格数据都是三角形构成的。
所以，针对工业模型做轻量化是所有后续开发的基础，提前使用三角面做模型开发不仅能够减小加载的压力，同时在渲染时也减轻了 GPU 的负担。
二、加载优化
因为基于 Web 进行展示，为了更快地让用户看到画面，就不能等所有资产加载完才对用户进行展示。
完美的体验是先做最小化加载，让用户尽快看到产品的画面，然后在后台进行用户无感知的加载。
在这部分技术实现上，Cocos Creator 的资源管理方案就像一把手术刀，能够非常精准锋利地针对整个资产的加载过程做粒度非常细的解剖操作。
同时 Cocos Creator 3.8.1 版本更是支持了 meshOpt 压缩，3D 模型压缩后最多可以减小 70% 的体积，让可视化商业产品真正实现了"秒开"。
三、渲染品质
得益于 Cocos Creator 的 PBR 渲染流程，其渲染效果给予了基本的画面保证。但是这并不够，要想得到更好的效果，还需要根据产品的特点在特定的场景下定制渲染管线来达到更加艺术化的表现效果。
Cocos Creator 3.8.1 社区版本中也内置了清漆和玻璃效果，对开发者更方便了。
对于棱角特别分明的物体，在高光下会产生特别影响效果的高光锯齿。
为了消除这种锯齿同时又要表现出应有的高光效果，蹦石专门自己写了消除高光锯齿的 Cocos Shader，这使得画面的整体质量得到了非常大的提升。
抗高光锯齿的核心思路如下：
在一些模型的表现上，很容易在棱角出现高光锯齿，越精细的模型，粗糙度越低的材质，越容易出现。
其实在调整 PBR 参数时就能发现，适量的增加粗糙度就能避免高光锯齿的形成，但是为了更好的呈现模型的高光反射效果，不能机械的把整体粗糙度全部调高，简单的说------只在法线变化大的地方增加粗糙度。
那如何找到法线变化大的地方？
在 GLSL 中，有个 dFdx 和 dFdy，用于计算一个变量基于屏幕空间的变化率。那么 dFdx(v_normal) 和 dFdy(v_normal) 就是求法线在屏幕空间的偏导数。
同时，参照了一些开源算法的代码，采用 x 方向的偏导数与 y 方向的偏导数向量平方和来作为"法线变化大"的指标，再映射为粗糙度的增加量上。
直接修改引擎的 buildin-standard.effect，把 standard-fs 里面的 roughness 重新进行计算：
go
#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四、特效
企业在宣传自己的产品时，不仅仅只是展示产品的外观和介绍相关的功能，更需要让潜在用户了解产品的工作原理，这样能让用户更加了解产品也更能体现产品的科技含量。
当用户更加了解一个产品的工作原理时，购买的欲望也会更加强烈。
在这方面，就需要用一些视觉特效来表现工作原理。工作原理特效是可视化应用的杀手锏，这也是整个开发工作中最难，技术含量最高，也是工作量最大的部分。
针对这些需求，Cocos Creator 强大的粒子编辑器和动画系统为特效制作带来了极大的便利。
Cocos 引擎支持嵌入式动画播放
更加强大的是，通过代码的控制，让这些特效成为了可编程的交互式特效，而不是序列特效，这让用户可以非常直观地通过各种方式和视角来了解产品的工作原理。
五、部署
开发工作完成之后，最终是要进行上线部署的，再次得益于 Cocos Creator 的 AssetBundle 功能，可以在部署时将整个应用进行模块化的拆分，将他们部署到远程服务器上。
企业实际上并不需要一台多么强大的服务器，只需要利用十分便利的 CDN 网络就可以让各地的用户用最快的网络连接速度来访问产品页面。这在一定程度上降低了企业在产品宣传上的首次投入成本。
总结
Cocos Creator 拥有强大的可视化编辑器，优秀的资源管理方案，并提供了可定制的渲染管线和引擎源码，强大的粒子和动画系统，这些都为产品可视化应用的开发打下了坚实的基础。
同时活跃的社区和 KOL 也让整个 Cocos 生态更加丰富，大部分的解决方案都可以通过 Cocos 社区和论坛找到，相信在未来，开发者们能做出更多优秀的游戏和商业化产品。
点击【阅读原文】查看冰箱项目案例