ProgramLib(Shader库)
管理与缓存shader
源码与编译后的shader
引用
_templates
关联shader_name
与shader
源码(vert, frag, defines)
。显而易见,shader_name
要求全局唯一。
_cache
缓存编译后的shader
引用。因为支持宏, 不同的宏配置,就对应了单独的shader
源码,
不同的宏配置编译出不一样的program
,所以_cache
的key
为元组(shader_name, defines)
计算得到。
Pass(渲染)
Pass
通过programName
绑定shader
,并记录一些webgl
的状态:
- cullMode 剔除模式
- blend 混合模式
- depth 深度测试开关
- stencil 模板测试配置
详见 engine\cocos2d\core\renderer\render-engine.js:10322
Stage
是不是类比于Unity
的Rendering Mode
?
如果是的话,2d
游戏,stage
基本上都是设为transparent
就可以了
Technique(技术)
Technique
管理1到多个pass
. 多个pass
的意义在于多通道渲染一组模型。 描边或许算是一种应用场景?
Technique
也提供了pass
中用到的uniform
变量的名称、类型、大小和值的管理。
为Technique
设定Stages
,可为渲染顺序提供参考,通常设为transparent
。stages
为数组类型,passes
也是数组类型,是否存在一一对应的关系?
_layer
不知道作用
Effect(表现)
关联多个Technique
配置uniform
属性值
Effect.prototype.setProperty(name, value)
Effect.prototype.getProperty(name)
配置shader
宏
Effect.prototype.getDefine(name)
Effect.prototype.define(name, value)
注意 defines
要求在构造函数中给出,后续define
的值可以变,但属性没办法直接调用define
函数动态增减
Material(材质)
关联一个Effect
管理 _texIds
:
_texIds: ids collected from texture defines
维护一个更新哈希值_hash
。材质数据有变化时,需要调用updateHash
更新哈希。
作用
上述可知,Material
,Effect
,Technique
,Pass
都只是数据容器而已,具体如何使用,就是渲染函数的责任了。
网上的资料讲,OGRE
的材质系统分成三层抽象:Material
,Technique
, Pass
. Unity
的材质系统也是三层:Shader
,SubShader
,Pass
。多Pass
实现同一模型,调用多次渲染。多Technique
方便作低中高质量切换,Material
存放配置数据。
cocos creator
的材质系统多出个Effect
,现在还是比较不理解。
渲染流程
渲染相关类:
class Base;
class ForwardRenderer extends Base;
render-engine.js
中定义了唯一一个stage
:transparent
.并在ForwardRenderer
中注册了transparent
stage的渲染函数_transparentStage
。
渲染入口函数为ForwardRenderer.prototype.render
,遍历所有相机,为每个相机调用一次ForwardRenderer.prototype.renderCamera(camera, scene)
。然后跳入Base._render
,清除设备,从scene._models
中extractDrawItem
,遍历每个drawItem
,从effect.getTechnique(stage)
中得到tech
。最后调用_transparentStage
。
_transparentStage
设定下矩阵,又回到Base._draw
函数中,执行真正的渲染。
Base._draw
根据Effect
,Technique
,Pass
的数据,得到shader
,并为shader
设置好webgl
状态和各个Uniform
变量,最后调用device.draw
完成一个渲染流程。
根据渲染流程,可推测,cocos creator
的材质系统也是三层:Effect
,Technique
,Pass
。Material
继承Asset
,对Effect
作进一步封闭, 是为了方便编辑器?
详见 engine\cocos2d\core\renderer\render-engine.js:13303
和engine\cocos2d\core\renderer\render-engine.js:13677