#前言
本文总结了如何借助CCGLProgram来实现自定义绘制的节点类，使用自定义的顶点着色器和片段着色器，实现一个绘制彩色矩形的节点类。
绘制的效果图如下所示：
思路及实现
思路
目标是：实现一个可绘制对象A，绘制出一个彩色的矩形。
首先, 要能实现绘制，那么A就要能够加入到节点树之中，这样引擎在遍历节点树进行绘制的时候，它才能够被绘制出来。怎样才能被加入到节点树？成为Node的子类, 然后addChild即可。
其次，要实现自定义绘制，就要重写Node::draw()方法，并且在draw调用之前，创建好顶点shader和片段shader，以及准备好shader program, 完成shader中变量的绑定和值传递。
思路清楚后，开始写代码。
实现 第1步: 自定义节点类CustomDrawNode继承自CCNode
CustomDrawNode作为一个自定义绘制节点类的父类的角色，具体的自定义绘制类继承CustomDrawNode. 它定义了绘制逻辑的骨架，具体的绘制操作延迟到不同的子类来完成，可以扩展出各种绘制操作，恩，这是模板方法设计模式的思路。
// .h
class CustomDrawNode : public cocos2d::CCNode
{
public:
static CustomDrawNode* create(const char *vsFileName, const char *fsFileName);
bool initWithShaders(const char *vsFileName, const char *fsFileName);
virtual void customSetupBeforeLink() {}
virtual void updateCustomUniforms() {}
protected:
CustomDrawNode() {}
};
// .cpp
// create方法，使用initWithShaders来完成初始化
CustomDrawNode* CustomDrawNode::create(const char *vsFileName, const char *fsFileName)
{
CustomDrawNode *self = new CustomDrawNode;
if (self && self->initWithShaders(vsFileName, fsFileName))
{
self->autorelease();
return self;
}
return nullptr;
}
bool CustomDrawNode::initWithShaders(const char *vs, const char *fs)
{
if (CCNode::init())
{
// 创建并设置CCGLProgram.
CCGLProgram *program = new CCGLProgram;
program->initWithVertexShaderFilename(vs, fs);
setShaderProgram(program);
program->release();
customSetupBeforeLink(); // 完成shader中attribute的绑定等任务
program->link(); // 链接shader program
program->updateUniforms(); // 绑定预定义的8个uniform
updateCustomUniforms(); // 给shader中变量传值
return true;
}
return false;
}CustomDrawNode的创建通过指定一对着色器文件名，内部使用CCGLProgram来创建着色器程序
CustomDrawNode预留模板方法接口，让具体的子类来控制着色器程序的变量绑定及传值
-
customSetupBeforeLink: 在程序链接之前，实现绑定一些attribute等操作
-
updateCustomUniforms: 在程序链接之后，获取program中一些uniform的位置，并未绘制做准备，向OpenGL服务器传值等操作
实现 第2步: 定义绘制矩形类CustomRectangleNode继承CustomDrawNode
下面就开始定义要绘制的矩形类了，定义一个类叫CustomRectangleNode，它继承CustomDrawNode，并且根据自己使用的shader来实现父类预留的模板方法接口。
CustomRectangleNode的具体实现取决于其使用的shader，因此首先要确定shader。因为我只想绘制一个彩色的矩形，shader很简单：
顶点着色器
#ifdef GL_ES
precision mediump float;
#endif
attribute vec4 custom_a_position; // 为了区别于cocos预定义的shader中的a_position，名字起的繁琐一些。
void main()
{
gl_Position = CC_MVPMatrix * custom_a_position; // 使用cocos预定义的投影矩阵
}片段着色器
#ifdef GL_ES
precision mediump float;
#endif
uniform vec4 custom_u_color; // 区别于cocos预定义的u_color
void main()
{
gl_FragColor = custom_u_color;
}顶点shader中定义了一个attribute， 片段shader中定义了一个uniform，这些对于了解绘制过程足够了。下面是CustomRectangleNode的实现：
// 成员变量的类型 attribute 和 uniform是在别的文件里定义的。
// cocos_include.h
typedef GLuint uniform;
typedef GLuint attribute;
// CustomRectangleNode.h
class CustomRectangleNode : public CustomDrawNode
{
public:
static CustomRectangleNode* create(const char *vs, const char *fs);
void draw() override;
void customSetupBeforeLink() override;
void updateCustomUniforms() override;
protected:
CustomRectangleNode() : _attribPosition(0), _uniformColor(0) {}
const attribute _attribPosition;
uniform _uniformColor;
};
// CustomRectangleNode.cpp
// 创建方法，通过父类接口来初始化
CustomRectangleNode* CustomRectangleNode::create(const char *vs, const char *fs)
{
auto self = new CustomRectangleNode;
if (self && self->initWithShaders(vs, fs))
{
self->autorelease();
return self;
}
return nullptr;
}
// 模板方法接口1
void CustomRectangleNode::customSetupBeforeLink()
{
// 在链接程序之前，绑定顶点shader中唯一的attribute: custom_a_position.
getShaderProgram()->addAttribute("custom_a_position", _attribPosition);
}
// 模板方法接口2
void CustomRectangleNode::updateCustomUniforms()
{
// 程序链接之后，获得顶点着色器中唯一的uniform：custom_u_color
_uniformColor = glGetUniformLocation(getShaderProgram()->getProgram(), "custom_u_color");
// 随机颜色
getShaderProgram()->setUniformLocationWith4f(
_uniformColor,
CCRANDOM_0_1(),
CCRANDOM_0_1(),
CCRANDOM_0_1(),
CCRANDOM_0_1());
}
// 开始绘制
void CustomRectangleNode::draw()
{
// 调用program->use(), 为预定义的uniform传值
CC_NODE_DRAW_SETUP();
// 定义矩形顶点坐标，中心定位在屏幕中心，宽高是窗口一半。
auto size = CocosWindow::size();
auto center = CocosWindow::center();
GLfloat width = size.width/2;
GLfloat height = size.height/2;
GLfloat x = center.x - width/2;
GLfloat y = center.y - height/2;
GLfloat vertexes[] =
{
x, y,
x+width, y,
x, y+height,
x+width, y+height,
};
// 启用顶点数组, 并传值
glEnableVertexAttribArray(_attribPosition);
glVertexAttribPointer(_attribPosition, 2, GL_FLOAT, false, sizeof(GL_FLOAT) * 2, vertexes);
// 使用这四个顶点绘制两个三角形
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
// 关闭顶点数组
// glDisableVertexAttribArray(_attribPosition); 不注释掉这句的话，绘制会有点问题: 绘制完矩形之后，按钮什么的没有绘制。还没发现是咋回事
// 增加draw call次数
CC_INCREMENT_GL_DRAWS(1);
}好了，CustomRectangleNode定义完成了，
CustomRectangleNode重写了父类定义的模板方法customSetupBeforeLink(), 在其中中绑定了顶点着色器中的attribute: custom_a_position,
CustomRectangleNode重写了父类定义的模板方法updateCustomUniforms，在其中绑定了片段着色器中的uniform：custom_u_color, 并且给其赋值一个随机的颜色向量。
CustomRectangleNode重写了Node的draw()方法， 定义了顶点数组，并且把数组传给顶点shader中的custom_a_position，最终实现了矩形的绘制。
下面是测试代码：
创建一个CustomRectangleNode, 并且把它addChild()到节点树即可。
void CustomDrawNodePage::onEnterState()
{
// add test cases.
_createFuncs.clear();
_createFuncs.insert(_createFuncs.begin(),
{
std::bind(&CustomRectangleNode::create, "shaders/custom_rectangle_vert.glsl", "shaders/custom_rectangle_frag.glsl"),
});
loadUI();
}
void CustomDrawNodePage::loadUI()
{
auto node = _createFuncs[_testIndex](); // CustomRectangleNode::create("shaders/custom_rectangle_vert.glsl", "shaders/custom_rectangle_frag.glsl")
ADD_CHILD(node);
}