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);
}

结果是这样的

这里写图片描述

OpenGL Shader 绘制天空盒_基础 2

http://learnopengl-cn.readthedocs.io/zh/latest/04%20Advanced%20OpenGL/06%20Cubemaps/
  • yulinxx
  • yulinxx
  • 2016年12月23日 17:31
  • 1023

OpenGL 各个shader的作用和区别

OpenGL4.0发布了Tessellation shader(Control + Evaluation shader)。到OpenGL4.* 为止,现在OpenGL已经支持了5种不同类型的shade...
  • fanhenghui
  • fanhenghui
  • 2017年05月03日 18:47
  • 617

OpenGL ES2.0教程:编写自己的shader(2)

原文:http://4gamers.cn/blog/2014/06/07/write-your-own-shader/ 在上篇文章中,我给大家介绍了如何在cocos2d-x里面绘制一个三角形,当时我...
  • u013790419
  • u013790419
  • 2014年10月15日 15:32
  • 1413

OpenGL加载shader代码

c++加载shader的代码: #include #include #include #include "glew.h" #include "stdafx.h" static char *sh...
  • sh15285118586
  • sh15285118586
  • 2015年04月21日 17:53
  • 725

(二)OpenGL中的Shader

学习总结自:http://learnopengl.com/#!Getting-started/Hello-Triangle http://learnopengl.com/#!Getting-star...
  • huangcanjun187
  • huangcanjun187
  • 2016年09月08日 19:30
  • 2002

【cocos2d-x 2.x 学习与应用总结】10: cocos2d-x自带的shader及其使用

本文介绍了cocos2d-x中自带的shader代码, 及其在引擎中的使用情况。作者的引擎版本是2.2.3,在这个版本的cocos中有9种自带的shader,详情请见下文。...
  • elloop
  • elloop
  • 2016年01月19日 22:16
  • 1181

OpenGL-- Shader 颜色 光照 5 多光源

OGLMultipleLights-OpenGL-- Shader 颜色 光照 5 多光源
  • yulinxx
  • yulinxx
  • 2017年06月02日 00:09
  • 634

opengl shader 入门 超详细

http://bbs.gameres.com/upload/sf_20061018193133.pdf 第三章:语言的定义  John Kessenich 在这章里,我们将介绍 ...
  • anypkv
  • anypkv
  • 2014年05月13日 20:52
  • 6201

OpenGL shader的简单交互工具

介绍 现在比较流行的编程语言基本上都自带了某种交互式工具,可以在里头直接输入代码,就地执行观察结果。比如Groovy提供的Groovy Shell和Groovy Console。 ...
  • xingxiliang
  • xingxiliang
  • 2014年06月13日 13:47
  • 1012

OpenGL-- Shader 颜色 光照 4 光照贴图 柔光射灯

光照越远,衰减越厉害 衰减算法: 常数项通常是1.0,它的作用是保证分母永远不会比1小,因为它可以利用一定的距离增加亮度,这个结果不会影响到我们所寻找的。 一次项用于与距离值相乘,这会以线性的方...
  • yulinxx
  • yulinxx
  • 2017年05月25日 01:01
  • 407
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:cocos2d-x shader(2) openGL初探
举报原因:
原因补充:

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