事半功倍！巧用 WebGL 抓帧工具提高渲染效率

到上一个章节为止，我们已经将 shader 的基础内容讲得差不多了，最主要的部分就是 WebGL 的应用如何对照到 Cocos Creator。因为所有的游戏开发工具的渲染底层都是图形渲染 API 的封装，所以只要知道了原理，就可以轻松使用不同的游戏开发工具创造出想要的效果。本章将针对之前的内容做一些补充和扩展。

运行时材质修改

在第六章中，我们说过关于材质包含的可配置参数：

• effectAsset 或 effectName：effect 资源引用，指定使用哪个 EffectAsset 所描述的流程进行渲染。（必备）

• technique：指定使用 EffectAsset 中的第几个 technique，默认为第 0 个。

• defines：宏定义列表，指定开启哪些宏定义，默认全部关闭。

• states：管线状态重载列表，指定对渲染管线状态（深度模板透明混合等）有哪些重载，默认与 effect 声明一致。

因此，这里尝试着用代码的方式创建之前定义的 shader foo，并将之前我们在编辑器上的操作都用代码的形式设置：

import { _decorator, Component, Node, Sprite, Material, SpriteFrame, gfx, Texture2D, EffectAsset } from 'cc';
const { ccclass, property } = _decorator;
const { BlendFactor, CullMode } = gfx;

@ccclass('Example')
export class Example extends Component {
    @property(EffectAsset)
    foo: EffectAsset = null!;
    @property(Texture2D)
    dissolveMap: Texture2D = null!;

    start () {
        const sprite = this.getComponent(Sprite);
        const mat = new Material();
        // effect name 适用于内置 shader，可以通过 EffectAsset.get('effect name') 方式获取，判断
        mat.initialize({
            effectAsset: this.foo,
            defines: {
                USE_TEXTURE: true,
            },
            states: {
                blendState:{
                    targets: [
                        {
                            blend: true,
                            blendSrc: BlendFactor.SRC_ALPHA,
                            blendDst: BlendFactor.ONE_MINUS_SRC_ALPHA,
                            blendDstAlpha: BlendFactor.ONE_MINUS_SRC_ALPHA