18 January 2016
版权声明:本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名elloop(包含链接)

#前言

本文总结了如何借助CCGLProgram来实现自定义绘制的节点类,使用自定义的顶点着色器和片段着色器,实现一个绘制彩色矩形的节点类。

绘制的效果图如下所示:

custom_draw_rectangle.jpg

思路及实现

思路

目标是:实现一个可绘制对象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);
}

源码

CustomDrawNodePage.h

CustomDrawNodePage.cpp


作者水平有限,对相关知识的理解和总结难免有错误,还望给予指正,非常感谢!

在这里也能看到这篇文章:github博客, CSDN博客, 欢迎访问



分享到