基于webGl的html5框架说法(一)

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);
}

减少不必要的开销。


版权声明:本文为u012870281原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。