Cocos Creator3.8 项目实战(八)2D UI DrawCall优化详解(上)

2023-10-10 11:01

本文主要是介绍Cocos Creator3.8 项目实战(八)2D UI DrawCall优化详解(上),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!


游戏开发的朋友都知道,在游戏开发过程中,DrawCall 是我们优化性能的一个非常重要的指标,直接影响游戏的整体性能表现,DrawCall数量越多,帧率会降低,能明显感觉到卡顿。


那今天我们就来聊一聊,2D UI DrawCall优化方法。

本文的主要内容: 什么是Draw call ? Draw Call 中造成性能问题的原因是什么?以及在 Cocos Creator 项目中如何减少DrawCall?


一、Draw Call 介绍


1、什么是Draw Call?

通常我们把 CPU提交数据给GPU,向GPU下渲染命令的过程,称为DrawCall,也叫同一批次渲染。一次 Draw call 就代表一次图形绘制命令。


例如:

CPU调用DirectX中的DrawIndexedPrimitive命令,进行渲染的操作。

CPU调用OpenGL中的glDrawElement命令,进行渲染的操作。


2、Draw Call 中造成性能问题的原因?


CPU和GPU能并行工作,有一个命令缓冲区(Command Buffer),命令缓冲区包含了一个命令队列,当CPU需要渲染对象时,它可以向命令缓冲区添加命令,而GPU完成了上次的渲染任务后,可以继续从命令队列里取出一个命令并执行。


从以上流程,可以看出,性能问题的原因有两个方面:

  • CPU 方面

    CPU在每次调用Draw Call 之前, 需要向GPU 发送很多内容,包括数据、状态和命令等。

    在这一阶段, CPU 需要完成很多准备工作,例如检查渲染状态等,一旦CPU 完成了这些工作, GPU 就可以开始本次的渲染。

    如果Draw Call 的数量太多, CPU 就会把大量时间花费在提交Draw Call 上,造成CPU的性能瓶颈。


  • GPU 方面

    由于CPU的频繁调用绘图指令,那么GPU 也会进行频繁的渲染状态切换。渲染状态就包括:纹理状态,Blend 模式,Stencil 状态,Depth Test 状态等等,也会带来GPU的性能消耗。


那么综合以上的原因,一个很显然的优化想法:就是通过批次合并(后面简称合批)来降低 Draw call 的调用次数。


合批的本质:在一帧的渲染过程中,保证连续节点的渲染状态一致,将尽可能多的节点数据合并一次性提交,从而减少绘图指令的调用次数,降低图形 API 调用带来的性能消耗,同时也可以避免 GPU 进行频繁的渲染状态切换。


需要注意

由于我们需要在CPU 的内存中合并Draw Call,而合并的过程也需要消耗时间。

因此,合并技术更加适合于静态的物体,对于静态物体只需要合并一次即可。

当然,也可以对动态物体进行合并,但由于这些物体是不断运动的,每一帧都需要进行合并然后再发送给GPU,这对空间和时间都会造成一定的影响。


二、合批的条件


1、节点的 Layer 相同才能合批,不同的 Layer 之间不能合批

在游戏运行时,Cocos 引擎是按照节点树的渲染方式,即按层级顺序,从上往下由浅到深进行渲染。

理论上每渲染一张图像(文本最终也是图像)都需要一次 DrawCall。


例如:

下图(1),猜一下DrawCall 次数是多少?

在这里插入图片描述


DrawCall 次数结果是: 5

为什么是5呢? 因为4个item 子对象,每一次都是一次drawcall, 再加上本身引擎有一次drawcall 。

在这里插入图片描述


下图(2),调整了一下排列顺序,猜一下DrawCall 次数是多少?

在这里插入图片描述


仅仅调整了一下顺序,将相同Layer的放在一起,drawcall 次数变成了4 。


在这里插入图片描述


因此,根据上面介绍的游戏渲染按顺序可知,合批的条件之一是:节点的 Layer 相同,不同的 Layer 之间不能进行合批。


2、部分组件无法合批,且会打断其他组件合批


需要进行分模块管理节点树布局,以达到更好的合批效果,无法合批的组件:

  • 内置组件 Mask、Graphics 和 UIMeshRenderer 组件由于材质不同和数据组织方式的差异,无法与其他组件合批。
  • TiledMap、Spine 和 DragonBones 这三个中间件组件遵循自己的内部合批机制。

了解了DrawCall的原理和合批的条件后,接下来就是今日的重点,2D UI DrawCall 优化方法有哪些?


三、2D UI DrawCall 优化方法有哪些?


1、Label 组件DrawCall 优化


(1)、 将要使用的文字制作成图片,然后使用自动图集或 TexturePacker 对文字图片合并到图集

比如游戏中常用的 26个英文字母 、 数字 0-9 , 建议美术可以根据不同颜色、不同大小、不同风格分别制作一张文字图片。


(2)、Cache Mode 缓存类型的合理选择

官方 Cache Mode 说明:

类型功能说明
NONE默认值,Label 中的整段文本将生成一张位图。
BITMAP选择后,Label 中的整段文本仍将生成一张位图,但是会尽量参与动态合图。只要满足动态合图的要求,就会和动态合图中的其它 Sprite 或者 Label 合并 Draw Call。由于动态合图会占用更多内存,该模式只能用于文本不常更新的 Label。此模式在节点安排合理的情况下可大幅降低 Draw Call,请酌情选择使用。
CHAR原理类似 BMFont,Label 将以“字”为单位将文本缓存到全局共享的位图中,相同字体样式和字号的每个字符将在全局共享一份缓存。能支持文本的频繁修改,对性能和内存最友好。不过目前该模式还存在如下限制,我们将在后续的版本中进行优化: 1. 该模式只能用于字体样式和字号(通过记录字体的 fontSize、fontFamily、color、outline 为关键信息,以此进行字符的重复使用,其他有使用特殊自定义文本格式的需要注意)固定,并且不会频繁出现巨量未使用过的字符的 Label。这是为了节约缓存,因为全局共享的位图尺寸为 2048 * 2048,只有场景切换时才会清除,一旦位图被占满后新出现的字符将无法渲染。 2. Overflow 不支持 SHRINK。 3. 不能参与动态合图(同样启用 CHAR 模式的多个 Label 在渲染顺序不被打断的情况下仍然能合并 Draw Call) 4. 目前暂不支持 IsBoldIsItalicIsUnderline 属性。

对上表的实践说明:

  • NONE 一个贴图单独创建一个文本贴图,不能重用,单个贴图占用一个drawcall,不参与动态合批。即使两个相同文本的label也不能合批渲染。

    最佳实践:适用于用完即删且可能会频繁更新大批量文本的需求,如: 聊天功能。


  • BITMAP:动态合图只能往图集上加贴图,而不能继续重用上次的,更不会删除已经作废的子贴图,改变一次就多生成一张文字贴图添加到大小为 2048*2048的通用动态图集中。如果频繁使用动态的文字,则会占用大量内存。

    最佳实践:适用内容不会改变的静态文本,如:界面标题


  • CHAR: 每个字符绘制一次,并添加到大小为2048*2048 的字符图集中,场景不切换时,纹理不会重建,因为纹理大小是有限的,
    导致能显示的字符数也有限。

    最佳实践:适用频繁更新且文本字符内容有限的文本如:分数、倒计时


2、Sprite 组件 Drawcall 优化


对于 Sprite 组件,有静态合图和动态合图两种合批方案。


(1)、静态合图

静态合图就是在开发时将一系列碎图整合成一张大图

图集对于 DrawCall 优化来说非常重要,但是并不是说,把所有图片不管三七二十一,全部打成图集就万事大吉了,这里面也有门道,胡乱打图集的话说不定还会变成负优化。


这个门道就是:尽量将处于同一界面(UI)下的相邻且渲染状态相同的碎图,打包成图集,才能达到减少 DrawCall 的目的。


整合成大图有两种方式:

  • 使用手动图集资源

  • 使用自动图集资源


以上两种整合大图的方式,在往期文章 CocosCreator3.8研究笔记(十)CocosCreator 图像资源的理解,有详细介绍,这里就不再细说。


(2)、动态合图

Cocos Creator 提供了 动态合图(Dynamic Atlas)的功能,能在项目运行时动态地将贴图合并到一张大贴图中。

当渲染一张贴图的时候,动态合图系统会自动检测这张贴图是否已经被合并到了图集(图片集合)中,如果没有,并且此贴图又符合动态合图的条件,就会将此贴图合并到图集中。


动态合图是按照 渲染顺序 来选取要将哪些贴图合并到一张大图中的,这样就能确保相邻的 DrawCall 能合并为一个 DrawCall

动态合图遵循上述第二点的合批的条件


启用、禁用动态合图

Cocos Creator 在初始化过程中,会根据不同的平台设置不同的CLEANUP_IMAGE_CACHE参数,当禁用 CLEANUP_IMAGE_CACHE 时,动态合图就会默认开启。


强制开启动态合图

macro.CLEANUP_IMAGE_CACHE = false;
dynamicAtlasManager.enabled = true;

强制禁用动态合图

dynamicAtlasManager.enabled = false;

注意:

(1)、这些代码请写在项目脚本中的最外层

不要写在 onLoad/start 等类函数中,才能确保在项目加载过程中即时生效。

否则如果在部分贴图缓存已经释放的情况下才启用动态图集,可能会导致报错。

(2)、只有纹理开启了 Packable 选项的精灵才能够参与动态合图,该选项默认开启。

在这里插入图片描述


这篇关于Cocos Creator3.8 项目实战(八)2D UI DrawCall优化详解(上)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/180005

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

HDFS—存储优化(纠删码)

纠删码原理 HDFS 默认情况下,一个文件有3个副本,这样提高了数据的可靠性,但也带来了2倍的冗余开销。 Hadoop3.x 引入了纠删码,采用计算的方式,可以节省约50%左右的存储空间。 此种方式节约了空间,但是会增加 cpu 的计算。 纠删码策略是给具体一个路径设置。所有往此路径下存储的文件,都会执行此策略。 默认只开启对 RS-6-3-1024k

如何用Docker运行Django项目

本章教程,介绍如何用Docker创建一个Django,并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口,映射到宿主机的80端口上。 docker run -itd --name python311 -p

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题,本文将一起从代码层去分析为什么没有建立索引? 开源ERP项目地址:https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof