提要

为了激发读者（主要为笔者本人）对shader编程的兴趣，本文写作目的为快狠准：

1. 快速构建一个变灰特效实例
2. 掌握变灰特效的使用
3. 从变灰特效的使用窥探shader编程

快速构建

• 创建一个cocos2dx lua项目，编译好
• 特效主要由三个文件实现，我把它们托管在github上：https://github.com/limall/ccsh-helloworld，把它们下载下来并解压
• 将shader.vsh文件和shader.fsh文件复制到cocos项目的res目录内；将MainScene.lua文件复制到src/app/views目录内

• 运行项目，会看到精灵变灰了，如下图：

  
  运行效果

如何使用

直接复制shader.vsh和shader.fsh即可

如果仅仅是使用这个变灰特效，那么shader.vsh和shader.fsh是不需要研究的。虽然它们才是实现了变灰功能的shader代码，但是它们已经把功能封装好了，实际上它们使用起来更像是资源文件。我们唯一要做的就是给它们取个合适名字，比如改为begrey.vsh和begrey.fsh，把它们放到res中合适的位置，然后在lua代码中引用它们即可。

在lua中引用

MainScene.lua中引用shader.vsh和shader.fsh的代码如下，为了方便说明，给代码加了行号：

1    local prog = cc.GLProgram:create("shader.vsh","shader.fsh")
2    prog:link()
3    prog:updateUniforms()
4    local progStat= cc.GLProgramState:create(prog)
5    sprite:setGLProgramState(progStat)

如果把两个shader文件比作资源的话，那么1~4行就是资源加载和初始化的操作，最终生成progStat。
第五行是给某个精灵套用这个progStat的过程。
progState一旦生成便可以复用。

shader在cocos2d lua中的应用

这里分条列出：

• shader代码可以理解为运行在gpu上的小程序，这里的shader指的是opengl shader，cocos对它作了封装。
• shader小程序可以是一个.vsh后缀文件或者一个.fsh后缀文件。.vsh指vertex shader，中文译为顶点着色器；.fsh指fragment shader，中文译为片段着色器。通常一个shader应用包括一个顶点着色器程序和一个片段着色器程序。
  （未完待续...）