让模型渲染更快、网格更小的优化插件

基于 Cocos Creator 3D v1.1 的模型优化插件

尽管目前还未开放编辑器插件开发的相关文档和细节,但其已具备了插件开发相关的基础功能,更多插件体系相关的细节和功能也正在积极的讨论和开发中,相信很快就可以和大家见面。

模型优化插件

这里基于Cocos Creator 3D v1.1为大家提供一个针对 gltf 模型优化相关的体验插件,它具有 提高渲染性能简化模型顶点数和面数压缩数据大小等功能。对开发编辑器插件感兴趣的朋友也可以参考插件的相应实现。

为更好的了解此插件的目的,这里翻译一段来自meshoptimizer的介绍:

GPU渲染三角形网格时,GPU流水线的各个阶段都要处理顶点和索引数据,这些阶段的效率取决于你提供给它们的数据;

这段简明概要的介绍已经说明了此插件的主要目的:优化渲染数据,其更多详细介绍请参考meshoptimizer

如何获取

预先需要: git

得益于强大的插件体系,安装方法特别的简单:

  • 下载插件包plugin_mesh-optimizer.zip (110.4 KB),并解压。熟悉git工作流的朋友也可以拉取这个远端
  • 然后执行 git clone plugin_mesh-optimizer.bundle,将克隆出的文件夹移动到以下目录中:
    1. ${user}/.CocosEditor3D/packages
    2. ${project}/packages
  • 最后检验,打开编辑器,若在菜单项中看见Packages/Mesh Optimizer项,则说明插件安装成功。

注:${user}代表用户文件夹,${project}代表工程文件夹。
注:在${user}/.CocosEditor3D/packages中表示为全局插件,所有工程都可以使用。

如何使用

依赖工具:node.js
可选的依赖工具:basisu

首先打开相应的面板:

必填项

其中最主要的是Basics中的必填项:

在填完以上选项后,点击执行按钮,将会生成相应优化过的GLTF文件。

额外选项

部分额外展开的非必填项:

注:纹理项中除了 纹理进入到主缓冲纹理质量之外的选项依赖basisu,需要先安装和设置好环境变量,其中 纹理到KTX2依赖KHR_image_ktx2扩展,目前暂不支持。
注:压缩级别功能依赖MESHOPT_compression扩展,目前暂不支持,只可以使用None
注:由于暂不支持KHR_mesh_quantization扩展,在编辑器中使用的gltf模型目前必须开启 禁用量子化
注:其它选项目前建议使用默认值,如果有更高的要求可以根据需求修改,相关细节请参考这里

最佳实践

  • 快速复制编辑器内文件路径:

  • 将输出文件路径设置到同目录下
    例如输入文件路径为:D:\mesh_opt\assets\buggy\Buggy.gltf,则将输出文件路径设置为 D:\mesh_opt\assets\buggy\ + ${输出文件名称}.gltf,这样的好处是可以共享纹理图片资源

  • 开启详细输出,通过输出信息可以分析优化的程度

注:图片资源不会拷贝到输出目录中,所以建议输入文件和输出文件在同一目录下。
注:此插件为体验性质,目前仅测试了部分模型,其中测试模型均得到了相应的数据优化,请开发者谨慎使用。

最后,恳请大家尝试体验,也恳请为我们提供宝贵的建议或者是 BUG 反馈,以及感兴趣的朋友可以一起参与贡献,如果觉得不错也请分享给更多的朋友,谢谢

13赞

mark!!!!

mark!!!

MARK !!!!!!

阿祖,能帮我看下我提出的两个问题吗,么么哒

支持呢一下呢。mark

assets/resources/tbx/untitled.gltf: file requires Draco mesh compression support
运行时这个报错是为什么呢?

应该是这个文件使用了 draco 相关扩展,现在还不支持

模型压缩成功后顶点色丢失要怎么处理?是面板上哪个属性需要调整的?

3d网格动画能用这个优化吗?面板怎么勾选?自己用这个插件压缩完蒙皮会有问题。

目前 1.2 已经内置到模型资源面板中,可以选择模型后进行配置和优化

1.2中使用优化会报错

已修复,下个版本就可以了

想问下“目前 1.2 已经内置到模型资源面板中,可以选择模型后进行配置和优化” 具体是怎么操作啊?我在编辑器里没看到入口。

Mark much