深圳小爱灵动基于 Cocos Creator 推出元宇宙项目「灵动元境」刷爆了很多人的朋友圈,该项目发力品牌元宇宙生态基础设施建设。
Shenzhen Xiaolingi, based on Cocos Creator's introduction of the meta-cosm project, "Episodes", has swiped a lot of people's circles of friends, and it's a dynamic branding of the eco-infrastructure of the universe.
Demo 演示效果
Demo Presentation
体验地址:(长按复制)
Experiential address: (long copy)
??https://cdn.aigamify.cn/AI-GAME/CocosClub/??
材质优化
Demo 中所有材质都使用了定制化,分别基于 Cocos Creator 的 Unlit、PBR 和 Toon 材质做了精简和优化。
All materials in Demo have been customized, and Unlit, PBR and Toon materials based on Cocos Creator have been streamlined and optimized.
以 Unlit 材质为例,在 FS 部分去除了 MainColor,假如需要用到 Color,后续可以通过宏开关控制。
Take Unlit material, for example, and remove MainColor from the FS section, if you need to use Color, the follow-up can be controlled by macro switches.
同时在 VS 里,把 TilingOffset 去除了 Offset 部分,只使用 Tiling 就可以了(大部分情况下 offset 用不到),同时也增加了宏开关。
At the same time, in VS, to remove Tilingoffffset from the Offfset part, just use Tiling (most of the time outfset is not available) and also add macro switches.
PBR 材质是一个通用材质,需要针对各个建模软件做适配的一些参数,所以做了很多兼容性处理,比如 albedoScale、emissiveScale 等精度参数都可以通过宏开关或者注释的方法去掉。
The PBR material is a generic material that needs to be adapted to the parameters of the modeling software, so many compatibility treatments have been made, such as the precision parameters as albedoScale, emissiveScale, etc., which can be removed by macro switches or annotation.
如果不需要使用 occlusion 或者 specularIntensity,还可以对 PBR 材质做进一步的优化。同时 PBR 中的 Lightmap 部分也有很大的优化空间,这块的优化可以根据项目去决定。
If there is no need to use the occlusion or specular Intensity, the PBR material can be further optimized. At the same time, the Lightmap part of the PBR has much room for optimization, which can be determined by the project.
角色优化
角色渲染
role rendering
角色整体的的定位与渲染偏卡通风格,这里采用了 Cocos Creator 默认的 Toon 材质进行优化与精简,减少了卡通渲染的色阶。去除二阶着色的同时,也减少了一阶着色的参数。
The positioning and rendering of the characters as a whole, using Cocos Creator's default Toon material
Cocos 默认的 Toon 材质是三阶着色,分别是 BaseColor 基础着色 + Shade1 + Shade2,这里去除了 Shade2,把 Shade1 称为一阶着色,BaseColor 称为基础着色。
The Toon material that Cocos defaults to be colored is the third order of colour: BaseColor base color + Shade1 + Shade2, where Shade2 is removed, Shade1 is called first order colour, and BaseColor is called base colour.
此外,对一阶着色设置了宏开关进行控制。
In addition, macro switches are controlled for first-order colouring.
我们可以在材质里通过拖动条(slider)更方便地拖动一阶着色。
We can drag a step of color more easily in the material by dragging strips.
高光部分则增加了宏开关,只有眼镜、头发等部分使用了高光,进一步减少渲染的开销。
The high light section of
皮肤、头发和衣服使用了边缘光,考虑到角色的颜色可能会改变,对边缘光的颜色也做了简化,改变肤色的时候边缘光可以随之改变。
The skin, hair and clothing use
为了减少材质数量和网格开销,角色的丝袜使用了细节贴图实现。这里同样做了宏开关的配置。
To reduce the amount of material and grid costs, the character stockings are implemented using details . The macro switch is also configured here.
性能优化
Performance Optimization
角色的贴图增加了 Multi_Texture 和对应的宏开关,方便进行 instancing 合批。
The role tab was added to Multi_Texture and corresponding macro switches to facilitate instancing.
同理,角色的细节贴图也可以设置,Multi_Detail_Texture,并增加对应的宏开关,通过宏减少设置的属性。
Similarly, role details can be set, Multi_Detail_Texture, and the macro switch should be increased to reduce the properties of the settings by macro.
其他设置
Other settings
角色的身体和脸部都设置的 Blendshapes,方便支持 Morph,Morph 可以同时支持实时动画和烘焙动画。
The character's body and face are designed to support Morph, Morph can support both real-time animation and baking animation.
因为脸部的物件比较多,所以为了减少骨骼和蒙皮压力,把面部以 socket 物件的形式绑定在了骨骼的头部节点。
Because of the number of objects on the face, the face was tied to the skull nodes in the form of socket objects in order to reduce bone and skin pressure.
预制体生成
Prefabricated body generation
光照优化
Lightly Optimized
整个场景使用了1个平行光和20个 Sphere Light。环境材质使用了 Cocos 自带的 PBR,进行了光照烘焙,并对光照烘焙进行了精简。
The whole scene uses one parallel light and 20 Sphere Light. The environmental material uses Cocos self-carried PBR, light baked and streamlined light baked.
材质 Tiling
使用大量材质 Tiling,把零散的砖块合并成一个面片,并在材质中设置 Tilling,减少加载时间(前文提到过,这里没有使用 offset)。
Using a large quantity of materials, Tiling combines fragmented bricks into a single plate and sets Tilling in the material to reduce loading time (as mentioned earlier, no objects are used here).
遮挡剔除
covers the removal of
为了保证视野完整,增加了摄像机的遮挡剔除,使用射线检测或者碰撞体的 Trigger 检测,检测到固定范围内的碰撞体,通过设置 setInstancedAttribute 改变材质透明度,保证不会打断合批。
In order to ensure the integrity of the field of view, cameras have been added to screen out, to detect collisions within a fixed range using ray or collision detection Trigger, and to change material transparency by setting setInstanced Attribute to ensure that the combination is not interrupted.
场景加载
场景粗略地分成了碰撞层、地表层、物件层和细节层,按照这个顺序去做分帧加载,减少加载与实例化时候的卡顿。除了碰撞层外,每个层级有自己的 Json 配置文件,预制体根据配置生成层级。
The scene is roughly divided into collision layers, surface layers, object layers, and detail layers, and in this order the frame loads are carried in order to reduce the Caden when loading and exemplifying. In addition to collision layers, each level has its own Jason configuration file, and prefabricated bodies are generated according to configuration.
性能优化
performance optimization
机型检测
machine-type testing
可以从引擎的 piplelineSceneData 中获取 GPU 型号,通过 GPU 型号和开源的 BenchMark 信息做对比,获取手机档次。
The GPU model can be obtained from the engine's PiplelineSceneData, comparing it with the GPU's and open source's Benchmark information and getting cellular files.
Akeytsu,一款动画制作软件,目前可以免费下载社区或者教育版。支持一键射出多余骨骼和空骨骼节点,并一键蒙皮多个手指,方便做骨骼删减和进行 Mixamo 的动作绑定。
strang>Akeytsu, is an animated software that currently downloads community or educational versions free of charge. Supports one key to eject extra bones and empty skeletal nodes and to skin multiple fingers to make skeletal cuts and to bind Mixamo movements.
地址:??https://www.nukeygara.com/??
address: https://www.nukeygara.com/??
3D 动态骨骼插件,开箱即用,可以很方便快速地绑定动态骨骼,并可以实现动态骨骼碰撞。
strang>3D dynamic bone plugs, open and easily binding dynamic bones and enabling dynamic skeletal collisions.
地址:??https://store.cocos.com/app/detail/3782??
address: https://store.cococos.com/app/detil/3782??
KylinsPostEffects,麒麟子写的一套不依赖 prefab、不污染场景节点树、简单调用几个参数就能使用的后期效果解决方案。支持多种后效,配置简单。
KylinsPostEffects, a set of post-effect solutions that do not rely on prefab, non-polluted site node trees, simple call with several parameters. Support multiple after-effects, simple configuration.
地址:??https://store.cocos.com/app/detail/3333??
address: https://store.cococos.com/app/detail/3333?
strong> camera screenshot supports 3D/2D or mixed screenshots, simple to operate.
地址:??https://store.cocos.com/app/detail/3812??
address: https://store.cococos.com/app/deta/3812?
TSRPC,一个专为 TypeScript 设计的开源 RPC 框架,功能和使用可以点击查看文章《多人实时对战如何实现神同步?》《如何实现十万人在线的房间和匹配系统》。
地址:??https://store.cocos.com/app/detail/3766??
address: https://store.cococos.com/app/detil/3766?
Cinestation,一个可视化智能相机系统。方便简单,支持虚拟相机和相机运镜。
地址:??https://store.cocos.com/app/detail/3422??
address: https://store.cococos.com/app/deil/3422?
本次分享就到这里,有对品牌元宇宙合作、游戏化营销感兴趣的小伙伴,欢迎联系我们!
注册有任何问题请添加 微信:MVIP619 拉你进入群
打开微信扫一扫
添加客服
进入交流群
发表评论