Cocos Creator 3D初体验

【本文参与征文活动】

Cocos Creator 3D初体验

整体的使用感受

  1. UI界面的制作一如既往的便捷高效
  2. 对Cocos Creator 2D上手很友好
  3. 有自己的3D编辑器
  4. 材质系统非常的灵活
  5. 当前版本对2D游戏的支持不够完善

目前不太完善的地方

  • 2D方面
    • 不支持LabelAtlas,可以使用bmfont间接来实现
    • mask不支持图片作为模板
    • 场景资源的自动释放不可用,可以通过一些特殊手段来释放内存
    • 暂不支持动态合图
    • 暂不支持spine、龙骨
  • 3D方面
    • 不支持动画分层,也就是不支持角色上下半身播放不同的动作。
    • v1.1.1阴影只支持平面阴影,也就是说阴影只能投到地上但无法投射到模型身上。v1.2阴影支持shadowMap但不是很完善。
    • v1.1.1不支持雾效,v1.2已支持。
    • 暂不支持后处理(HDR、景深、泛光)
  • 其他
    • 暂不支持通过npm的方式引入代码库

帮助美术同学上手新引擎的相关文档

跟Creator 2D不一样的地方

2D版本的UI组件预制体移植到3D版本注意事项

  • 官方暂时还没有Creator导出到Creator 3D的工具,可以自己写一个简单的脚本
  • prefab中组件重命名 例 “type”: “cc.Sprite”, -> “type”: “cc.SpriteComponent”,
  • 添加UITransform 组件
  • 根节点的layer改成ui_2D
  • 资源需要重新拖一遍

3D相关

对3D的理解
场景中的光线照射到模型的表面,经过反射、漫反射后被相机拍摄到构成了我们看到的画面。

  • 3D核心概念之模型

    • 模型由网格和材质组成
    • 网格mesh定义了物体表面的形状,也就是空间结构。mesh由一个个三角面片构成。一个三角面片又包含三个顶点。每一个顶点的信息包括顶点在模型坐标系下的位置、法线等。shader中的vertexShader就是专门处理顶点数据的,它的主要作用就是将顶点坐标从模型空间坐标系转换到屏幕空间(实际上vs中计算出的坐标并不是屏幕空间坐标,这里只是为了方便理解)。
    • 材质决定了模型表面在光照下看起来的效果。材质中使用的shader决定了光照的计算方式(unlit、blinn-phong、pbr)。调整材质中的参数就可以实现不同的效果,例如pbr中材质参数就有:模型表面粗糙程度、对光线的反射率、金属度、ao等。
    • 可以简单理解为,材质决定了这些三角面上色的方式。
  • Creator 3D跟Laya一样使用右手坐标系,unity使用的是左手坐标系。

  • 3D场景编辑常用操作 https://docs.cocos.com/creator3d/manual/zh/editor/scene/

  • 材质常用选项(文档最下面部分) https://docs.cocos.com/creator3d/manual/zh/material-system/overview.html

  • 如果要修改fbx里的材质,需要先dump出来再修改。

  • 平行光只支持一盏

  • 场景里面同一个物体出现多次,可以开启材质里的gpu instancing选项进行性能优化

  • 开启阴影会造成物体绘制的三角面数量翻倍,应该尽可能少的去开启物体的阴影。

  • 粒子数值太大会消耗大量内存

  • UI里面显示模型记得模型放大100倍,材质切换成不受光材质。相关文档https://docs.cocos.com/creator3d/1.1/manual/zh/ui-system/components/editor/ui-model.html?h=uimodel

  • 涉及到透明贴图的材质注意切换到transparent,另外还可以通过修改材质的priority来调整透明物体的绘制顺序.

  • 四元数

性能优化

  • 3D场景使用压缩纹理,可以显著降低显存。注意:etc1不支持透明通道。prv尺寸要求:尺寸为2的N次幂,并且宽高相同。
  • 尺寸太大的图改小从而降低显存占用(例如界面背景大图)
  • UI通过合图并调整组件层级减少drawcall
  • 关于3D合批 https://docs.cocos.com/creator3d/manual/zh/engine/renderable/model-component.html#合批的最佳实践
  • 3D场景重复物体建议开启gpu instance
  • 低端机可以关闭阴影并锁帧30
  • 地面避免使用引擎默认材质。引擎默认使用的材质是pbr性能消耗较大。

推荐的一些文章、博客、教程


一些实用功能的实现细节

blinn-phong

碎文件合并

cocos里面每一个音频、图片、预制体、模型、动画等资源都会对应生成一个json,构建后的将会导致文件数量翻倍。如果资源是放在网络上将会导致大量资源下载请求从而大大降低加载速度。

  • 实现原理:通过修改构建后的setting.js。这个文件其实就是一个配置文件,里面主要记录了resource目录下所有文件的路径到uuid的映射,以及有哪些json文件被合并到哪个大的json文件里去了。引擎在下载任意json文件之前都会去检查当前json文件是否被合并了,如果已经被合并就去下载合并后的json文件。
  • 写了一个json合并的脚本将所有json文件合并成了一个大的json文件,脚本运行环境是nodejs。缺点是合并之后单个json文件巨大
  • 贴一下引擎源码方便理解。

正常打包后的setting文件

运行脚本后会产生一个unionPack.json文件和另外一个无法被合并进去的json文件,以及修改后的setting文件。

3D UI的显示

3D场景里面显示UI是一个比较常见的需求,可以使用renderTexture来进行实现。

  1. 在资源管理器中新建一个renderTexture资源,根据需要设置宽高

  2. 在场景上新建一个canvas,并设置Canvas组件的targetTexture为刚刚新建的renderTexture。

  3. 场景中新建一个3D面片,面片材质选用unlit Effect,然后代码里设置面片材质的纹理为renderTexture。

json文件压缩。合并后的大json文件是1.1M压缩后是144k。需要修改引擎

燃烧效果shader

原理:简单的法线利用

shader.rar (2.9 KB)

3D进度条的两种实现方式

  1. 自定义mesh顶点数据
    原理:矩形拆分成5个三角形,然后根据百分度换成对应的角度。红线代表边界,绿色代表构成部分。UI中使用的环形进度条,在引擎底层应该也是用的类似实现方式。这种方法优点是可以开启动态合批减少drawcall。

    代码 (1.0 KB)
  2. shader进行圆形的剪裁

    radial-1.1.1.rar (1.2 KB)

3D中倒计时数字的一种实现方式

因为倒计时通常是个位数,此种方法就是通过找到单个数字在纹理中所在的位置,再设置uv偏移和缩放就可以了。另外计算位置的时候需要考虑到合图后的旋转。
原始BMFont文件

打包合图后

16赞

mark住了再说

期待继续更新

更新了 ···

战略mark

大佬如何修改底层加载合并后的json?

不用修改引擎。引擎自带解析合并后json这个功能了。
实现原理其实就是修改setting.js这个文件

MARK.

cc.director 这种可以用但是没有代码提示

不可以用。3D 包括后续的 Cocos Creator 3.0,都是通过模块来提供 API的:

import { director } from "cc";

ts会报错但是实际预览是可以用的。然后在控制台里面输入cc.director也是ok的。

同步到个人博客了 https://blog.csdn.net/u014560101/article/details/109215946

1赞

大佬,合并json的,有两个小问题哈。
我将web-mobile改成wechatgame 想打包wx时。
1.无法合并带md5的文件,我查了下代码,应该是读取文件前要处理,今天贼忙有空我加一下。
2.微信好像还是要改底层?看下图

1.我构建的时候没开启MD5
2.关闭json压缩开关,如果开启zip压缩需要定制一下引擎进行解压缩的。

json合并和压缩我是运行在h5环境测试过的,但我没开启MD5.
json合并不需要修改引擎,压缩合并后的文件需要定制引擎。

好的感谢老铁~

赶紧偷偷学燃烧效果:rofl:

先mark,再顶一下

https://blog.csdn.net/u014560101

1赞

mark一下