CreatorPrimer | CustomMaterial.js源码分析

最新推荐文章于 2024-03-30 11:49:15 发布

晓衡的成长日记

最新推荐文章于 2024-03-30 11:49:15 发布

阅读量514

点赞数

分类专栏： Cocos Creator视频教程探索cocos H5正确的开发姿式 Cocos Creator基础教程

本文链接：https://blog.csdn.net/6346289/article/details/98833322

版权

本文深入分析了Cocos Creator 2.x中的CustomMaterial源码，探讨了Material、Effect、Technique和Pass的概念及其相互关系。通过源码解读，阐述了CustomMaterial如何实例化这些对象，并提供了材质系统的基本框架理解。

摘要由CSDN通过智能技术生成

1. 回顾

《ShaderHelper组件速递》一篇我们介绍了ShaderHelper组件的使用，以及如何定义一个shader程序并添加到ShaderHelper组件的program枚举属性中，这里我们再简单回顾下shader模板对象定义：

/**
 * shader模板
 **/
const renderEngine = cc.renderer.renderEngine;
const renderer = renderEngine.renderer;

//定义一个shader对象
const shader = {
    //名字必须字段 
    name: "xxx",
    //着色器代码中需要与js交互的参数名字与数据类型
    params: [
        {name: 'yyy', type: renderer.PARAM_FLOAT},
        {name: 'zzz', type: renderer.PARAM_FLOAT2}
    ],
    //着色器中使用到的define定义，非必要字段
    defines: [],
    //start回调，此可以初始化着色器中的参数
    start(sprite, material) { ... },
    //update每帧回调，如果是动态效果，可以在此设置Shader参数
    update(sprite, material) { ... }, 
    //vert顶点着色器代码，它是一个字符串
    vert: '...',
    //frag片元着色器
    frag: `...`
};
//将shader对象添加到自定义材质中
let CustomMaterial = require('Custo