cocos2d-x shader(2) openGL初探

原创 2016年03月16日 17:09:16

* 1.ocos2d-x从3.0开始引入了一种新的渲染机制,所有的openGL渲染代码不再放到每一个node的draw函数里面,而是通过各种RenderCommand封装起来,然后添加到一个渲染队列里面去,最后在每一帧结束时把所有的这些命令都渲染出来*
.* 2.CCNode是cocos2d-x的渲染链,写游戏基本上就是和他打交道了,cocos2d-x同时只能渲染一个CCScene,因此CCScene是渲染的根节点。在构建游戏时,一般是一个Scene中添加一个或者多个CCLayer,一个Layer中又添加多个CCSprite或者CCMenu,CCSprite中还可以添加CCParticleSystem等等。这样就构建了一个渲染树,cocos2d-x历遍这个树来将图像显示在屏幕上。*
* 3.coco2d-x的渲染实际上是调用visit()函数来完成的:即visit()这个函数调用它包含的Child的zOrder<0的visit()函数,之后调用draw()函数,再调用Child的zOrder>=0的visit()函数,它实际上是一个深度优先的算法。他的Child是按照zOrder排序的,以保证渲染的正确性。draw()的作用是绘制自己。在CCSprite这些确实需要绘制的类中,draw()调用openGL的函数来完成绘制功能——把一个纹理映射到一个矩形上。*
** 4.如果要自定义绘制一些图像,可以重写draw()函数,不过不要忘记调用父类的draw()函数。

可以进行网状关系的管理,其实CCScene,CCLayer也是一个CCNode.它提供节点增删,包含,提供节点缩放,每个节点有一个照相机,提供动画支持,也就是说每一个从CCNode派生的类都可以执行动画操作; **


上一节我们学习了了cocos2d 如何使用shader,这一次我们来使用一下openGL,我参考了网上一些例子,很认同一句话,版本是硬伤,下面我们来使用openGL在cocos2d里绘制一个三角形,首先是3.7版本的,我们新建一个工程,修改HelloWorld里的代码如下

#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;
    }
    this->setGLProgram(GLProgramCache::getInstance()->getGLProgram(GLProgram::SHADER_NAME_POSITION_COLOR));

    return true;
}

void HelloWorld::onDraw()
{
    //获得当前HelloWorld的shader
    auto glProgram = getGLProgram();
    //使用此shader
    glProgram->use();
    //设置该shader的一些内置uniform,主要是MVP,即model-view-project矩阵
    glProgram->setUniformsForBuiltins();

    auto size = Director::getInstance()->getWinSize();
    //指定将要绘制的三角形的三个顶点,分别位到屏幕左下角,右下角和正中间的顶端
    float vertercies[] = { 0, 0,   //第一个点的坐标
        size.width, 0,   //第二个点的坐标
        size.width / 2, size.height };  //第三个点的坐标
    //指定每一个顶点的颜色,颜色值是RGBA格式的,取值范围是0-1
    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();
}

void HelloWorld::visit(cocos2d::Renderer *renderer, const Mat4 &transform, uint32_t parentFlags)
{
    Layer::visit(renderer, transform, parentFlags);
    _command.init(_globalZOrder);
    _command.func = CC_CALLBACK_0(HelloWorld::onDraw, this);
    Director::getInstance()->getRenderer()->addCommand(&_command);
}



#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"
USING_NS_CC;
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();

    virtual void visit(Renderer *renderer, const Mat4& parentTransform, uint32_t parentFlags) override;

    void onDraw();

    // implement the "static create()" method manually
    CREATE_FUNC(HelloWorld);
private:
    CustomCommand _command;
};

#endif // __HELLOWORLD_SCENE_H__


这里写图片描述

为什么说版本是硬伤?在3.0里我修改到能运行结果。。。。。

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"
USING_NS_CC;
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();

    virtual void visit(Renderer *renderer, const Mat4& parentTransform, uint32_t parentFlags) override;

    void onDraw();

    // implement the "static create()" method manually
    CREATE_FUNC(HelloWorld);
private:
    CustomCommand _command;
};

#endif // __HELLOWORLD_SCENE_H__


#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;
    }
    this->setGLProgram(GLProgramCache::getInstance()->getGLProgram(GLProgram::SHADER_NAME_POSITION_COLOR));

    return true;
}

void HelloWorld::onDraw()
{
    //获得当前HelloWorld的shader
    auto glProgram = getGLProgram();
    //使用此shader
    glProgram->use();
    //设置该shader的一些内置uniform,主要是MVP,即model-view-project矩阵
    glProgram->setUniformsForBuiltins();

    auto size = Director::getInstance()->getWinSize();
    //指定将要绘制的三角形的三个顶点,分别位到屏幕左下角,右下角和正中间的顶端
    float vertercies[] = { 0, 0,   //第一个点的坐标
        size.width, 0,   //第二个点的坐标
        size.width / 2, size.height };  //第三个点的坐标
    //指定每一个顶点的颜色,颜色值是RGBA格式的,取值范围是0-1
    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();
}

void HelloWorld::visit(cocos2d::Renderer *renderer, const Mat4 &transform, uint32_t parentFlags)
{
    Layer::visit(renderer, transform, parentFlags);
    _command.init(_globalZOrder);
    _command.func = CC_CALLBACK_0(HelloWorld::onDraw, this);
    Director::getInstance()->getRenderer()->addCommand(&_command);
}

结果是这样的

这里写图片描述

Model View Matrix,Projection Matrix

转自:http://blog.sina.com.cn/s/blog_43699c540101o1wu.html 上个星期最happy的事情之一是帮某一直说做游戏的朋友解决了几个问题。他正...
  • hr8610
  • hr8610
  • 2015-01-06 10:19:49
  • 1078

C/C++面试(3)——矩阵编程题(模拟法)

谈谈机试吧,虽然一举通过某知名学府的机试获得预录取,但是之后找实习过程中的机试方得通过率只有10%,十分惭愧。所以特地开了编程版,之后继续有彩蛋(⊙o⊙)哦~ 1.螺旋矩阵——模拟法 Tips:考虑到...
  • programmer_at
  • programmer_at
  • 2015-10-24 14:31:44
  • 1523

【玩转cocos2d-x之四十】如何在Cocos2d-x 3.0中使用opengl shader?

有小伙伴提出了这个问题,其实GLProgramCocos2d-x引擎自带了。完全可以直接拿来用。 先上图吧。使用opengl前后的对比: 1.在cpp中使用openGL shader。 (1...
  • jackyvincefu
  • jackyvincefu
  • 2014-04-17 23:34:33
  • 9403

Cocos2D-X shader(二) OpenGL渲染管线

OpenGL渲染管线     Cocos2D-X底层是基于OpenGL的,所以在变现我们自己的Shader之前,得了解一下渲染管线的知识。 如上图所示,OpenGL的渲染管线主要包括:     1...
  • operhero1990
  • operhero1990
  • 2015-12-10 11:34:12
  • 1040

Android OpenGL相机视角

Android OpenGL相机视角 1、矩阵层次结构 (1) 模型矩阵 模型矩阵是用来把物体放在世界控件坐标系的。比如模型初始的中心点都在(0, 0, 0),如果想要移动它们,可以使用一个模型矩阵,...
  • chennai1101
  • chennai1101
  • 2017-08-04 13:38:17
  • 427

OpenGl面试题(持续更新)

1.什么是model,view,project矩阵? 世界矩阵(World Matrix)、视图矩阵(View Matrix)以及投影矩阵(Projection Matirx);  世界矩阵确定一个...
  • u014800094
  • u014800094
  • 2016-11-03 20:49:13
  • 2695

cocos2d-x 强大的shader系列:【OpenGL】Shader实例分析(一)-Wave

转发请保持地址:http://blog.csdn.net/stalendp/article/details/21993227 这篇文章主要分析一个Shader,从而感受shader的魅力,并学习...
  • kaka626
  • kaka626
  • 2015-01-19 11:13:31
  • 1746

Opengl GLSL和DX Shader Model对应关系

Opengl 3.3以上对应DX10以上,对应Shader Model4.0以上,GLSL版本3.3以上。 OpenGL 3.3以上的,Opengl版本和GLSL版本一致,例如:Opengl4....
  • Blues1021
  • Blues1021
  • 2016-05-05 11:11:56
  • 2109

Cocos2D-X shader(一) 渲染机制

Cocos2D-X渲染机制     Cocos2D-X 从3.0开始引入了一种新的渲染机制,所有的OpenGL渲染代码不再放到每一个node的draw函数里面,而是通过各种RenderCommand...
  • operhero1990
  • operhero1990
  • 2015-12-08 11:25:11
  • 1473

gluUnProject glUnProject4包含w值 glProject求取屏幕z坐标

1.gluUnProject传入OGL屏幕坐标值,产生世界坐标系中的值,经过ViewPort矩阵,Project矩阵,Model-View矩阵的逆变换得到。 gluUnProject个参数中的值见OG...
  • Blues1021
  • Blues1021
  • 2016-06-03 11:35:08
  • 1474
收藏助手
不良信息举报
您举报文章:cocos2d-x shader(2) openGL初探
举报原因:
原因补充:

(最多只允许输入30个字)