我们先看一下本教程的目标，最终要实现的效果如下：

在一个矩形区域，左右各显示不同的颜色。

在跟着操作的时候，请在脑海中仔细回想下第一节课的webgl代码，这对你理解engine背后的实现原理非常有帮助！

准备工作

1. 在资源管理器中，分别新建一个HelloEffect、HelloMaterial

2. 修改HelloMaterial属性，选择使用HelloEffect

3. 新建一个场景，添加一个Sprite到场景中，修改Sprit的Material为HelloMaterial
   

经过以上的操作，我们在场景中就添加了一个Sprite，这个Sprite我们可以修改HelloEffect改变渲染逻辑，修改HelloMaterial改变渲染的参数。

让Sprite显示红色

如果你对第一节还有印象，那么我们要做的就是修改effect的fs即可

CCProgram fs %{
    void main(){
        gl_FragColor=vec4(1,0,0,1);
    }
}%

是的，就是这么暴力，没有那么多乱七八糟的代码，main中只有这一行代码足矣，此时你会在Creator中看到一个红色的矩形。

将颜色变为可配置属性

如果调整颜色每次都修改Effect，那么这个Effect就没有什么使用的价值。

想要自由调整颜色，我们就需要把这个颜色值变为参数，在Effect中我们这样书写：

CCEffect%{
  techniques:
  - pass:
    - vert: vs
      properties:
        myColor: { value: [1,1,1,1] } # 暴露给编辑器和engine
}%

CCProgram fs %{
  uniform Hello {
    vec4 myColor; // 定义同名的uniform变量
  }; // 这里的;不能少，否则报错error EFX2209
  void main(){
    gl_FragColor = myColor; 
  }
}%

如果一切顺利，在HelloMaterial中你就会看到这个"uniform参数":

你可以尝试着修改下myColor的值，场景里面会实现反馈修改后的结果，当你发生修改后，需要应用这个修改，还记得之前我们对Material的理解么，这个应用其实就是在保存配置。

左右颜色各不同shader

经过以上的学习，要实现如下的效果其实就没什么难度了。

这里我就不再仔细讲解了，仅仅贴一些关键的核心Effect代码：

CCEffect%{
  techniques:
  - pass:
    - vert: vs
      properties:
        colorLeft: { value: [0,1,0,1] } 
        colorLeft: { value: [1,0,0,1] } 
}%

CCProgram fs %{
  uniform Hello {
    vec4 colorLeft; 
    vec4 colorRight; 
  }; 
  void main(){
    if(v_uv0.x < 0.5){
        gl_FragColor = colorLeft;
    }else{
        gl_FragColor = colorRight;
    }
  }
}%

本教程的代码我放在了GitHub