Loading...
墨滴

麒麟子

2021/11/04  阅读:26  主题:默认主题

KylinsGraphicsDebugger

零、获取方式

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

一、客官,请留步

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

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

  • 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就是采用可视化的方式,辅助大家排查和定位问题。

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

二、开发环境

  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、目录介绍

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

5.2、用代码开启

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

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

@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的显示,如下图所示

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

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

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

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

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

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

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

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

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

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

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

1. 将半透明特效开启Overdraw

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

Overdraw经典显示,颜色越红越亮,表示Overdraw越多
Overdraw Pro显示,不同颜色代表不同的Overdraw次数

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

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

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

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

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

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

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

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

  • 1.找出能够执行BatchingGPU 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群或者关注麒麟子微信公众号`,方便第一时间获取最新进展

九、版权声明

麒麟子熬夜写的,希望大家能够喜欢

麒麟子

2021/11/04  阅读:26  主题:默认主题

作者介绍

麒麟子

Cocos布道师