一 shader的基本概念
1 什么是shader
shader即着色器，就是专门用来渲染3D图形的一种技术。
通过shader，可以自己编写显卡渲染画面的算法，使画面更漂亮、更逼真。
2 shader分类
shader又分两种，一种是顶点shader（3D图形是由三角形组成的，顶点shader就是计算顶点位置，并为后期像素渲染做准备的），
另一种是像素shader，就是以像素为单位，计算光照、颜色的一系列算法。
3 shader语言
几个不同的图形API有各自的shader语言：
在DirectX中，顶点shader叫做vertex shader，像素shader叫做pixel shader；
在OpenGL中，顶点shader也叫做vertex shader，但像素shader叫做fragment shader。
此外显卡芯片厂商nVidia还推出CG显卡编程语言，也支持shader。二 shader程序
1 语言glsl
glsl即OpenGL Shading Language(OpenGL着色语言)，是用来在OpenGL中着色编程的语言。
2 顶点着色器
// vert.vshattribute vec4 a_position;
attribute vec4 a_color;
varying vec4 v_fragmentColor;
void main()
{
gl_Position = CC_MVPMatrix * a_position;
v_fragmentColor = a_color;
}
(1) 每一个Shader程序都有一个main函数;
(2) 有两种类型的变量:
attribute是从外部传进来的;
varying类型的变量是在vertex shader和fragment shader之间传递数据用的;
每一个顶点都会有attribute和varying属性，定点着色器作用于每个定点，有多少个点就会执行多少次。
3 片段着色器
// frag.fshvarying vec4 v_fragmentColor;
void main()
{
gl_FragColor = v_fragmentColor;
}
(1) main函数;
(2) varying类型的变量是在vertex shader和fragment shader之间传递数据用的;
(3) gl_FragColor系统内置变量，定义最终画在屏幕上面的像素点的颜色；三 程序调用
新建cocos工程，将上面两个文件放到Resource/shaders文件夹下，修改代码如下：
// .h#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__
#include cocos2d.h
class HelloWorld : public cocos2d::Layer
{
public:
// there's no 'id' in cpp, so we recommend returning the class instance pointer
static cocos2d::Scene* createScene();
// Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
virtual bool init();
// implement the static create() method manually
CREATE_FUNC(HelloWorld);
// 添加如下代码
virtual void draw(cocos2d::Renderer *renderer, const cocos2d::Mat4 &transform, uint32_t flags) override;
void onDraw(const cocos2d::Mat4& transform, uint32_t flags);
private:
cocos2d::CustomCommand _customCommand;
};
#endif // __HELLOWORLD_SCENE_H__
// .cpp#include HelloWorldScene.h
USING_NS_CC;
Scene* HelloWorld::createScene()
{
// 'scene' is an autorelease object
auto scene = Scene::create();
// 'layer' is an autorelease object
auto layer = HelloWorld::create();
// add layer as a child to scene
scene->addChild(layer);
// return the scene
return scene;
}
// on init you need to initialize your instance
bool HelloWorld::init()
{
//////////////////////////////
// 1. super init first
if ( !Layer::init() )
{
return false;
}
// init shader
auto glProgram = GLProgram::createWithFilenames(shaders/vert.vsh, shaders/frag.fsh);
auto state = GLProgramState::getOrCreateWithGLProgram(glProgram);
setGLProgramState(state);
return true;
}
void HelloWorld::draw(Renderer *renderer, const Mat4 &transform, uint32_t flags)
{
_customCommand.init(_globalZOrder, transform, flags);
_customCommand.func = CC_CALLBACK_0(HelloWorld::onDraw, this, transform, flags);
renderer->addCommand(&_customCommand);
}
void HelloWorld::onDraw(const Mat4& transform, uint32_t flags)
{
auto glProgram = getGLProgram();
glProgram->use();
glProgram->setUniformsForBuiltins();
// 绘制三角形
auto size = Director::getInstance()->getWinSize();
// 三个顶点的坐标
float vertercies[] = { 0, 0,
size.width, 0,
size.width / 2, size.height };
// 三个顶点的RGBA
float color[] = { 0, 1, 0, 1,
1, 0, 0, 1,
0, 0, 1, 1 };
//激活名字为position和color的vertex attribute
GL::enableVertexAttribs(GL::VERTEX_ATTRIB_FLAG_POSITION | GL::VERTEX_ATTRIB_FLAG_COLOR);
//分别给position和color指定数据源
glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_POSITION, 2, GL_FLOAT, GL_FALSE, 0, vertercies);
glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_COLOR, 4, GL_FLOAT, GL_FALSE, 0, color);
//绘制三角形，所谓的draw call就是指这个函数调用
glDrawArrays(GL_TRIANGLES, 0, 3);
//通知cocos2d-x 的renderer，让它在合适的时候调用这些OpenGL命令
CC_INCREMENT_GL_DRAWN_BATCHES_AND_VERTICES(1, 3);
//如果出错了，可以使用这个函数来获取出错信息
CHECK_GL_ERROR_DEBUG();
}
效果如下：
