首页 > 其他分享 >CocosCreator3.x 应用在UI(Sprite)上的 shader 要怎么利用 自定义顶点参数 来实现合批?

CocosCreator3.x 应用在UI(Sprite)上的 shader 要怎么利用 自定义顶点参数 来实现合批?

时间:2023-09-28 15:01:40浏览次数:61  
标签:gfx 合批 Sprite 自定义 ts UI sprite

前言

为啥要合批

减少DC

什么是自定义顶点参数

通过 几何体实例化 特性(GPU Instancing)可使 GPU 批量绘制模型相同且材质相同的渲染对象。如果我们想在不打破这一特性的情况下单独修改某个对象的显示效果,就需要通过自定义几何体实例化属性。

参考文档

UI(Sprite) 怎么你了?

image

按照文档中的说法,需要用到 MeshRenderer 来设置自定义属性。
但 UI(Sprite) 并没有这个组件,也就无法按照文档来实现自定义 UI shader 的合批。

正文

来源于:https://forum.cocos.org/t/topic/148747/28
用户:homym(tkhoi01281)

3.x 版自定参数我是利用createMesh方法去生成ui,因为createMesh就有自定义顶点参数的方法

这个改动其实是可以弄一个新sprite 来继承老spirte, 然后把引擎里的simple.ts,splice.ts 等assembler 拷一份出来, 放到自己项目, 然后新sprite 复写一下assembler的初始化改为取你魔改的imple.ts,splice.ts就能弄一个新的sprite跟老的sprite一起用又不用改动引擎, 唯一缺点是新sprite和老sprite不能共同一个material

针对提问 “您好, 我也是想在3.x中使用自定义顶点合批。你是使用的 utils.createMesh 方法吗。”
不是,3.x版以sprite为例,需先继续Spritem,然后复写函数requestRenderData,这个父函数可以查看引擎源码的ui-renderer.ts ,其中RenderData.add([添加你想要的参数]) 比如:
RenderData.add([
new gfx.Attribute(gfx.AttributeName.ATTR_POSITION, gfx.Format.RGB32F),
new gfx.Attribute(gfx.AttributeName.ATTR_TEX_COORD, gfx.Format.RG32F),
new gfx.Attribute(gfx.AttributeName.ATTR_COLOR, gfx.Format.RGBA32F)
])
最后就是我上面回复的处理,把需要值塞到buffer里

标签:gfx,合批,Sprite,自定义,ts,UI,sprite
From: https://www.cnblogs.com/bakabird/p/ccc3_ui_shader_batch_GPUInstancing.html

相关文章

  • 后端传递Timestamp类型时间前端自定义接收格式
    Vue项目中处理后端返回日期字符串在这个Vue项目中,后端接口RentalQueryAllServlet返回的租车记录数据中,有一个rentalTime字段,其值是日期字符串,如:"Sep27,20239:23:40AM"。1.获取数据组件中使用axios调用接口获取数据: js methods:{fetchData(){axio......
  • 音频数据的自定义DataLoader及其AutoEncoder降噪算法
    DataLoader要求每一个Batch里面的数据的shape都一样,但是语音数据显然不可能都是等长的,因为每一条语音长度都不一样,因此在定制DataLoader的时候还要对每一个batch的数据进行剪裁(crop)或者填充(padding)处理。这里采用padding来对齐数据,方法采用PytorchDiscussion的网友Felix......
  • Threejs -- TweenJS自定义flyTo函数
    TweenJS参考文档笔记末尾附自定义flyTo函数动画库tweenjs简介和引入项目TweenJS是一个有javascript语言编写的补间动画库,如果需要tweenjs辅助你生成动画,对于任何前端web项目,你都可以选择tweenjs库。如果你是用three.js开发web3d项目,使用tween.js辅助three.js生成动画效果......
  • 20-自定义指令
    回顾一下前面学习的,Vue模板语法1)插值语法功能:用于解析标签体内容写法:{{xxx}},xxx是js表达式,并且可以直接读取到data中的所有属性2)指令语法功能:用于解析标签(包括:标签属性、标签体内容、绑定事件...)举例:v-bind:href="xxx"或:href="xxx",xxx同样要写js表达式备注:Vue中有很......
  • Spring Boot自定义Mybatis-Plus SQL,让你的数据库操作更得心应手!
    ......
  • Spring Boot自定义Mybatis-Plus SQL,让你的数据库操作更得心应手!
    ......
  • Dynamic CRM弹出自定义窗口的两种方式
    一、Xrm.Internal.openDialog方式1letparams={'param1':param1,'param2':param2};23varDialogOption=newXrm.DialogOptions;45DialogOption.width=750;6DialogOption.height=550;7//参数一:URL,参数二:窗体配置,参数三:Json参数,参数四:......
  • [JSON|序列化] fastjson自定义字段命名规则 (转发)
    1序言博主本人近期也遇到了基于fatsjson自定义命名字段规则的问题,为加强对此的学习和记忆,故转发这篇博文。博主本人最终采取的方法21.1前置知识fastjson在将对象转变为JSON字符串时,字段默认使用CamelCase规则命名。在1.2.15版本之后,fastjson支持配置Proper......
  • 自动化测试中自定义断言的实现方法
    断言定义熟悉单元测试的同学都知道在测试用例中,执行完测试用例后,通过断言(assert)判断测试结果是pass还是fail。不同的单元测试框架都提供了断言机制,我们这里以python为例进行说明。Python中的断言类型丰富,最常用的是基础断言和集合断言。基础断言包括的核心方法如下所示,主要功能是对......
  • OpenHarmony装饰指定自定义组件:@BuilderParam装饰器
     当开发者创建了自定义组件,并想对该组件添加特定功能时,例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法,将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题,ArkUI引入了@BuilderParam装饰器,@BuilderParam用来装饰指向@Builder方法的变量,开......