Cocos可视化3D图形渲染调试器-KylinsGraphicsDebugger

Creator 2.x 扩展插件
#1

可视化3D图形调试工具：图形渲染调试，你还在靠猜吗？

零、获取方式

  1. 本框架已上架Cocos Store，请打开store.cocos.com并搜索kylins即可
  2. 点击文末阅读原文即可跳转到对应页面

image.png
image.png1000×564

一、客官，请留步

上面的丑图，各位可能看不出来是干嘛的，不过不担心。阅读完本文后，保证解除你所有疑惑。

在开始我们的正题之前，我想问问，大家有没有遇上过下面这些问题

  • 1、游戏渲染性能优化，就只有DrawCall吗？

  • 2、材质系统中的合批(Batching)和几何体实例化（GPU Instancing)有何异同？

  • 3、Cocos Creator 3.3赛博朋克DEMO中的Overdraw功能是什么？

  • 4、学3D就是学写Shader吗？会写Shader真的就可以为所欲为了吗？

  • 5、什么是引擎中台，什么是TA？

  • 6、为什么我已熟知某3D引擎API，转过来用Cocos Creator的3D还是那么难？

  • 7、为什么我用Cocos Creator做游戏这么多年了，用Cocos Creator做3D还是很困难？

由于这篇文章主要是做KylinsGraphicsDebugger功能说明，上面的问题不会逐一回答，对上面问题有兴趣的朋友，可以关注文末麒麟子的公众号。

等不及的朋友也可以加麒麟子个人微信，麒麟子期待和大家交流探讨相关问题。

在你成为3D大牛的路上，这几个知识点是绕不开的。

在没有需求的时候，你可以不买。

但请记住它的名字：KylinsGraphicsDebugger，相信你有一天一定会用得上。

另外，本文蕴含的信息量非常大，如果有时间的话可以阅读一下，不会白读的。

KylinsGraphicsDebugger适合以下两种情形

  • 1、想要深入研究3D游戏优化方案的开发者或团队
  • 2、想要通过一套有效的工具快速解决问题的开发者或团队

KylinsGraphicsDebugger可以使你

  • 1、精确制定3D项目中相关模型使用的贴图大小规范
  • 2、精确找到3D项目中贴图尺寸过大的地方，减少内存开销和包体大小
  • 3、精确定位场景中的3D模型材质批次，找出DrawCall问题
  • 4、快速找到Overdraw超负荷的位置，进一步提升中低端机渲染性能
  • 5、配合相关文章，深入理解工具中使用的知识，成为3D游戏性能优化大师
  • 6、包含生成带Mipmap的纹理的代码
  • 7、包含创建Mesh的代码
  • 8、包含全局替换和恢复模型材质的代码

在做2D项目的时候，我们一提到性能优化时，说得最多的就是减少DrawCall。

由于2D游戏中，GPU很难成为瓶颈，所以解决掉DrawCall问题，基本上就解决了80%的渲染性能问题。

但如今越来越多的3D项目出现，越来越多的开发者开始发现，DrawCall并不适用了。

甚至有时候，减少DrawCall反而增加了CPU的开销，一时间竟不知如何是好。

特别对于一些从2D项目转到3D项目的开发者或者团队，这个情况尤为明显。

那怎么办呢？KylinsGraphicsDebugger就是采用可视化的方式，辅助大家排查和定位问题。

注意看下图中右上角那些选项，我们将逐一展示它们的功能

image.png
image.png1000×562

二、开发环境

  1. 引擎版本：Cocos Creator 3.3.2
  2. 编程语言：TypeScript

三、特色功能

  • 1.支持原生 H5 小游戏 平台
  • 2.无需修改引擎管线
  • 3.对场景节点树零污染，只需复制到resources目录，简单调用API即可使用
  • 4.支持Mipmap Levels查看，定制美术规范，找到分辨率过剩的纹理
  • 5.支持材质实例ID显示，可配合RenderDoc,spector.JS等工具快速定位DrawCall问题
  • 6.支持Overdraw 经典模式和Overdraw Pro两种显示方式，可快速定位场景中Overdraw超过一定数量的地方
  • 7.以上特性可针单独对某个节点以及其子节点使用（如果要全体作用，只需要传入场景根节点即可），方便聚焦问题。

四、操作文档

4.1、DEMO 体验

  1. 下载后，去目录中找到zip包
  2. 解压到一个自己喜欢的目录
  3. 打开Cocos Dashboard （请确保已安装Cocos Creator 3.3.2版本编辑器）
  4. 点击导入 按钮，即可导入
  5. 打开项目
  6. 打开 assets/scene/main 场景
  7. 点击Cocos Creator 上方的 预览按钮，即可体验

4.2、项目集成

  1. 下载后，去目录中找到zip包
  2. 解压到一个自己喜欢的目录
  3. 打开Cocos Dashboard （请确保已安装Cocos Creator 3.3.2版本编辑器）
  4. 点击创建 按钮，创建一个新的Cocos Creator 3.3.2项目
  5. 打开项目
  6. 将本源码目录中的assets/resources/kylins_graphics_debugger拷贝到自己项目的 assets/resources 目录下
  7. 在适合的地方，参考本源码的TestApp.ts以及 DebugUI.ts中的写法，开启后效和设置后效参数

五、开发文档

5.1、目录介绍

image.png

如图所示，框架资源放在了assets/resources/kylins_graphics_debugger目录下，只需要拷贝kylins_post_effects目录到自己项目的assets/resources目录下，就算集成成功了

5.2、用代码开启

我直接上代码吧,简单、直接、易使用，不是吹出来的。

image.png

以下代码基于上图中的场景树结构

@ccclass('TestApp')
export class TestApp extends Component {

    start() {

        //获取场景主摄像机
        let mainCamera = find('Main Camera');

        //Overdraw Pro，需要一个***空闲***layer的支持，这里注意不要和已经使用了的layer冲突
        let layer = 1;
        
        KylinsGraphicsDebugger.inst.setup(mainCamera,layer,()=>{

            //开启Overdraw经典模式
            KylinsGraphicsDebugger.inst.enableOverdraw(find('scene_root'),false);
            //开启Overdraw Pro模式
            KylinsGraphicsDebugger.inst.enableOverdraw(find('scene_root'),false);
            //关闭Overdraw
            KylinsGraphicsDebugger.inst.disableOverdraw(find('scene_root'));

            //开启材质ID显示
            KylinsGraphicsDebugger.inst.enableMaterialIdentify(find('scene_root'));
            //重新随机材质ID颜色
            KylinsGraphicsDebugger.inst.resetMaterialIdentifierColors();
            //关闭材质ID显示
            KylinsGraphicsDebugger.inst.disableMaterialIdentify(find('scene_root'));
            
            //开启MIPMAP等级显示
            KylinsGraphicsDebugger.inst.enableMipmaps(find('scene_root'));
            //关闭MIPMAP等级显示
            KylinsGraphicsDebugger.inst.disableMipmaps(find('scene_root'));

            //关闭所有
            KylinsGraphicsDebugger.inst.disableAll();
        });
    }
}

六、DEMO面板

  1. DEMO面板中提供了效果切换，色卡对比等功能
  2. DEMO中的调节面板，不依赖于任何框架，只和KylinsGraphicsDebugger相关，如果有需要，开发者可以将此面板集成到自己的项目中进行参数调试。

6.1、如何找到适合对象的贴图大小

1.在常规视角下，开启mipmpas的显示，如下图所示

image.png
image.png1000×562

常规视角是指游戏中使用最多的视角

2.将对象颜色与色卡对比，找出适合的尺寸

图中士兵和小球的颜色以黄色和绿色为主，那说明士兵的贴图最多使用256x256就够了，超过就是浪费。

注：这个显示，只和像素大小有关，与模型是否缩放，远近无关。

如图中的两个球体，一个近得很近，一个离得很远并且有缩放。

但由于两个球体在屏幕上的像素大小一致，所以他们呈现了相同的颜色，而另一个更小的球，主色为黄色，表示可以采用更低的分辨率。

而由于三个球使用了同样的材质，所以小球的纹理贴图使用256x256就可以了。

但这个球的绿色已经泛黄，如果球代表的物体要求不高的话,128x128也是可以的。

每降一级，可以省下75%的资源开销，还是很划得来的。

image.png
image.png1001×484

如图所示，三个小球的空间关系

6.2、如何找到Overdraw严重的地方

1. 将半透明特效开启Overdraw

据项目需要来决定，有时候也需要检查非透明物体

image.png
image.png1000×565

Overdraw经典显示，颜色越红越亮，表示Overdraw越多

image.png
image.png1000×565

Overdraw Pro显示，不同颜色代表不同的Overdraw次数

本方案保留了Overdraw经典显示方式，以照顾Overdraw查看非常有经验的朋友们。但只通过颜色来对比的话，很难找出问题。比如我们如果要找到Overdraw大于5的地方，就很难了。

2.将各部分颜色与色卡对比

Overdraw Pro采用了色卡对比方式，将对应区域与色卡对比，即可找出相关区域。

比如，在本例中，如果我们要找出Overdraw大于等于10的区域，那么红色部分就是需要关注的。 如果我们要找出Overdraw大于等于5的区域，那么红色,紫色,绿色,橙色,黄色,蓝色区域就是需要关注的

6.3、材质ID是拿来干什么的？

image.png
image.png1000×566

材质ID显示，同一颜色，表示使用了同一个材质

我们给每一个材质实例设置了一个颜色，在上图中，如果两个对象使用了同一个颜色，表示他们使用的是同一个材质。

此方案可以用在以下几个地方：

  • 1.找出能够执行Batching、GPU Instancing的对象
  • 2.检查材质使用规范，找出能够使用同一个材质就能做到，却使用了多个材质的地方
  • 3.找出Batching,GPU Instancing失败的原因（可能是材质不小心被改到了，比如本来应该使用.sharedMaterial的地方，写成了.material）

由于材质ID对应的颜色是随机的，可能出现相近难以辨别的情况，因此提供了reset colors按钮，重新随机所有颜色。

七、注意事项

  • 1.Overdraw Pro，需要一个空闲的layer支持，setup函数的第二个参数在传递的时候，注意不要和已经使用了的layer冲突
  • 2.如果看到这里还是不知道这东西拿来干什么的，就不要买，可以移步公众号，多学习相关知识，等有需求的时候再买。

八、联系作者

  • 微信公众号：麒麟子随笔 qilinzisuibi
  • 微信号: qilinzi6666
  • 微信群: 无（人太多了，装不下）
  • QQ群：727901932 （麒麟书院-Cocos3D，3000人大群）
  • 关于本框架的实现以及每一种效果的详解文章，将在麒麟子的私域流量圈发布，请大家加麒麟子微信 加QQ群 或者关注麒麟子微信公众号`，方便第一时间获取最新进展

九、版权声明

麒麟子熬夜写的，希望大家能够喜欢。 下方公众号二维码，扫！

image.png

5赞
#2

支持一波 :drooling_face:

#3

:smiley: :smile: :smiley:
今天支持一波 麒麟子老大