Preface:个人研究学习…
核心思路
1. 核心模块和类
Class Stage:Stage类为整个项目启动的第一入口,在window监听的”load”事件抛出后进行webGl环境,系统与ios壳或者android壳,事件,项目配置,线程管理器,入口类等的初始化。Stage类为所有渲染节点的父级,mesh的绘制也是直接遍历Stage下面的children列表进行绘制。
Class Project:Project类为所有用这套框架的项目的入口类的父类,在舞台初始化完成后直接实列化这个类,一个项目有切只有一个Project类的子类,实例化完成后进行项目的资源的分析和预加载,资源里面包括整个场景的ui.json数据文件,资源加载完成通过ui.json进行场景和组件的实列化并添加到相应的渲染节点中去。
Class RectObject:RectObject类为所有显示对象的基类,通过ui.json数据进行实例化,所有显示对象的位置变换信息,子节点,父节点,资源,是否可见等信息数据都来自ui.json。
Class Transform:Transform类里面封装了一个显示对象进行渲染时候需要的所有信息,包括坐标,变换矩阵,颜色矩阵,九宫,等。在显示对象要对当前的显示状态做出任何更改时候,也只能根据这个对象所封装的成员进行变更,这样做可更效率更直观的进行对显示对象显示状态管理。
Class Ticker:Ticker类通过Window下面的requestAnimationFrame管理全局的帧频事件,fps信息,drawCall次数,内存信息,异步回调,mesh绘制等,有且只有一个Ticker的实例。
ui.json可通过unity编辑器进行编辑 然后用c#脚本进行json的导出,unity编辑器对显示,shader,动画都能呈现出较好的可视化操作
2. 关于性能优化的一些思考
在整个项目的渲染中,不是每一个显示节点都需要去每帧进行绘制操作,有需要的往往是场景上的动画,缓动,特效等。所以考虑在Ticker类里加一个静态容器例如:
/**
*ticker容器
* @type {Array<{*}>}
*/
privatestatic tickers: Array<{ ticker: (deltaTime: number) => void, thisObject:any }>;
在有需求的时候才将绘制函数已经作用域加入到列表中,且可以随时移除,这样在requestAnimationFrame下进行updata的时候再遍历列表进行显示对象以及其他线程的运行,例如:
for (leti in Ticker.tickers){
Ticker.tickers[i]&& Ticker.tickers[i].ticker.call(Ticker.tickers[i].thisObject,deltaTime);
}
减少不必要的开销。