cocos creator 2.1版本Material材质系统解析

Posted 2023-04-27

参考技术A

管理与缓存 shader 源码与编译后的 shader 引用
_templates 关联 shader_name 与 shader 源码 (vert, frag, defines) 。显而易见， shader_name 要求全局唯一。
_cache 缓存编译后的 shader 引用。因为支持宏， 不同的宏配置，就对应了单独的 shader 源码，
不同的宏配置编译出不一样的 program ,所以 _cache 的 key 为元组 (shader_name, defines) 计算得到。

Pass 通过 programName 绑定 shader ，并记录一些 webgl 的状态：

详见 engine\\cocos2d\\core\\renderer\\render-engine.js:10322

是不是类比于 Unity 的 Rendering Mode ?
如果是的话， 2d 游戏， stage 基本上都是设为 transparent 就可以了

Technique 管理1到多个 pass . 多个 pass 的意义在于多通道渲染一组模型。 描边或许算是一种应用场景？
Technique 也提供了 pass 中用到的 uniform 变量的名称、类型、大小和值的管理。
为 Technique 设定 Stages ,可为渲染顺序提供参考,通常设为 transparent 。 stages 为数组类型， passes 也是数组类型，是否存在一一对应的关系？
_layer 不知道作用

关联多个 Technique
配置 uniform 属性值

配置 shader 宏

注意 defines 要求在构造函数中给出，后续 define 的值可以变，但属性没办法直接调用 define 函数动态增减

关联 一个 Effect
管理 _texIds :

维护一个更新哈希值 _hash 。材质数据有变化时，需要调用 updateHash 更新哈希。

上述可知， Material , Effect , Technique , Pass 都只是数据容器而已，具体如何使用，就是渲染函数的责任了。

网上的资料讲， OGRE 的材质系统分成三层抽象: Material , Technique , Pass . Unity 的材质系统也是三层: Shader , SubShader , Pass 。多 Pass 实现同一模型，调用多次渲染。多 Technique 方便作低中高质量切换， Material 存放配置数据。
cocos creator 的材质系统多出个 Effect ，现在还是比较不理解。

渲染相关类：

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

cocos creator webview的滚动条去除如何去除

参考技术A 多谢回复！运气比较好，昨天尝试了几个修改，发现只要设置user-scalable=no即可，这个可能也是webview和PC上的其它浏览器的区别，共享给大家。本回答被提问者采纳