住房和城乡建设部课题网站,山东做网站的公司有哪些,祝贺公司网站上线,建设营销型网站流程图简介
整个渲染框架主要包含#xff1a;用于控制场景中所有渲染节点的渲染状态的流程的RenderFlow。更新渲染数据、写入Buffer的Assembler。暂存数据的RenderData。数据缓冲区的MeshBuffer、quadBuffer、spineBuffer。包含着色器程序和渲染技术的Material。渲染指令数据的装载… 简介
整个渲染框架主要包含用于控制场景中所有渲染节点的渲染状态的流程的RenderFlow。更新渲染数据、写入Buffer的Assembler。暂存数据的RenderData。数据缓冲区的MeshBuffer、quadBuffer、spineBuffer。包含着色器程序和渲染技术的Material。渲染指令数据的装载、合批的ModelBatcher。依次对每个model数据进行真正调用渲染的forwardRenderer。
RenderFlow
cocos把每个渲染数据状态都划分成不同的flag的并创建了与之对应的函数。多个flag组成了一个_renderFlag。renderFlow 主要功能是根据节点的_renderFlag 调用对应的链表函数会优选对渲染数据进行更新暂存至RenderData中再写入数据缓冲区Buffer中最后调用forwardRender的render 进行渲染。
再写入数据缓冲区之前会把符合合批条件(material的hash、cullingMask一致)的渲染进行动态合批。 _renderFlag
当渲染数据被修改需要渲染时会使用flag进行标记。其记录方式是使用掩码通过掩码的位与运算、位或运算、位取反运算。 位与运算 例如如果你有两个二进制数 A 1101 和 B 1010那么 A B 的结果将是 1000。 位取反运算~ 例如如果你有一个二进制数 A 1101那么 ~A 的结果将是 0010。 位或运算| 例如如果你有两个二进制数 A 1101 和 B 1010那么 A | B 的结果将是 1111。 链表函数
因为cocos 根据渲染状态的调用频繁度划分出了多个分支在初始化时就把所有可能存在的分支全部创建共1024个分支(此时不是完整的链表函数)。Render时会根据node的renderFlag调用对应的分支如果存在完整的链表函数直接调用。不存在会优先创建链表函数再调用。 LOCAL_TRANSFORM、WORLD_TRANSFORM、TRANSFORM 用于更新节点的本地矩阵和世界矩阵。 UPDATE_RENDER_DATA 用于更新节点的uv数据、顶点数据并暂时存在的RenderData中。 OPACITY、COLOR 用于更新节点的透明度、颜色。 RENDER 把RenderData数据写入缓冲区中在写入缓冲区之前会进行动态合批处理。 CHILDREN 使用DFS 深度遍历 所有的子节点并处理透明度。 POST_RENDER 屏幕后效效果处理。例如 技能的击打效果。 Assembler
Assembler 其主要用于对渲染数据的更新、写入数据缓冲区中。对应的数据更新函数和数据的写入函数都是在RenderFlow调用。每个渲染组件都有与之对应的Assembler。
Assembler的注册
每个渲染节点根据它们的渲染类型可能存在一个或多个Assembler。在初始化渲染时即会把渲染节点所有的Assembler注册到渲染组件中的__assembler__。
initWebGL(canvas, opts) {//注册Assemblerrequire(./webgl/assemblers);
.....
}
Assembler.register function (renderCompCtor, assembler) {renderCompCtor.__assembler__ assembler;
};
Assembler的确定
因为渲染节点会存在多个Assembler但是运行时需要确定使用的是那个Assembler即再预加载前会进行Assembler的确定此事一般都在RenderComponent的_proload函数中调用Assembler的类方法init确定_assembler值。(这里需要注意实例方法和类方法) Assembler.init function (renderComp) {let renderCompCtor renderComp.constructor;let assemblerCtor renderCompCtor.__assembler__;while (!assemblerCtor) {renderCompCtor renderCompCtor.$super;if (!renderCompCtor) {cc.warn(Can not find assembler for render component : [${cc.js.getClassName(renderComp)}]);return;}assemblerCtor renderCompCtor.__assembler__;}if (assemblerCtor.getConstructor) {assemblerCtor assemblerCtor.getConstructor(renderComp);}if (!renderComp._assembler ||renderComp._assembler.constructor ! assemblerCtor) {let assembler assemblerPool.get(assemblerCtor);assembler.init(renderComp);renderComp._assembler assembler;}
};
数据的更新
updateRenderData 方法用于更新顶点数据、uv数据并暂存至RenderData。
updateColor 函数用于更新节点的color值并暂存至RenderData。
数据的写入
fillBuffers 主要是把RenderData数据写入数据缓冲区中。例如sprite数据写入MeshBuffer中。
官方文档
RenderData
renderData 存储渲染节点的顶点数据、索引数据、颜色值。数据的存储是以ArrayBuffer进行存储的。如果需要操作读写时需要通过视图。webGL-类型化数组_雷鸣_IT的博客-CSDN博客
iDatas 是无符号整数数据主要用于存储索引数据。
顶点数据包含了位置数据、uv数据、color数据。因为位置数据、uv数据是float类型。而color数据是整数数据所以在RenderData中使用了两种视图操作一个ArrayBuffer。
vDatas 是以浮点32位进行读写主要用于位置数据、uv数据的使用。
uintVDatas 是以无符号32整数进行读写。主要用于color值的使用。 例如sprite组件 四个顶点。每个顶点包含5个Float数据位置数据2个uv数据2个color数据1个。 索引数据6个因为webGL只能渲染点、线、三角形。因此一个sprite又两个三角形组成。 uv数据的偏移量 color的偏移量因为数据都在一个连续的一维数组中前两位0,1存储位置数据接下来两位2,3存储uv数据第4位存储color数据。依次循环。 floatsPerVert: 5, //每个顶点数据 有五个floatsverticesCount: 4, //有4个顶点indicesCount: 6, //6个索引 即两个三角形uvOffset: 2, //uv数据在顶点数据的偏移colorOffset: 4, //color 数据在顶点数据的偏移 color不是包含rgba四位数吗为什么color值的存储只需要一位 rgba 每个数的范围都是0~255可用8位二进制表示。Assembler的updateColor函数读取color值是通过_val。_val的赋值如下 this._val ((a 24) 0) (b 16) (g 8) (r|0); (a 24) 0) 向左移动24位并保证位整数 (b 16) 向左移动16位、(g 8) 向左移动8位。 (r|0) 非零整数。 _val 最终得到的是一个rgba组合而成32位二进制的整数且是无符号整数。 ModelBatcher
在渲染数据RenderData 写入缓冲区之前会优先创建一个合批model用于存放可以合批的渲染指令。合批条件简单归纳即material、culingMash一致就会使用同一个model。 具体的合批条件是 1着色器程序相同顶点着色器、片元着色器 2纹理相同 3渲染状态相同深度测试Depth Test模板测试Stencil Test裁剪测试Scissor Test透明度测试Alpha Test混合blending等 4缓冲数据相同顶点缓冲数据、索引缓冲数据。此处的一致指的是同一个buffer 有两个重要数据_iaPool、modelPool。
一个ia会记录vertexBuffer、indexBuffer、索引的开始坐标、索引数。buffer对象实际由meshBuffer管理
一个model时一个drawCall的buffer数据集合、以及对应的effect。
MeshBuffer
meshBuffer主要用于管理vertexBuffer、indexBuffer。
