cocos2dx opengl入门系列三-画一个四边形

心已赠人 2022-06-13 00:53 123阅读 0赞

运行环境：

mac10.12.2

xcode Version 8.2.1

cocos2dx-x-3.13.1

代码：

新建cocos2dx项目，具体操作官网有教程。新建好后，

新建Test.cpp，代码如下：

//
    //  Test.cpp
    //  Rectangle
    //
    //  Created by zhufu on 2017/3/27.
    //
    //
    
    #include "Test.h"
    typedef struct {
        float Position[3];
        float Color[4];
    } Vertex;
    Test* Test::create()
    {
        Test* test = new(std::nothrow) Test();
        if(test && test->init())
        {
            test->autorelease();
            return test;
        }
        else
        {
            delete test;
            test = nullptr;
            return nullptr;
        }
    }
    
    bool Test::init()
    {
        _glProgram = new GLProgram();
        _glProgram->initWithFilenames("shader/myVertexShader.vsh", "shader/myFragmentShader.fsh");
        _glProgram->link();
        //set uniform locations
        //使用此shader
        _glProgram->use();
        
        
        
        
        glGenVertexArrays(1, &_vao);
        glBindVertexArray(_vao);
        
        GLubyte indices[] = { 0,1,2,  //第一个三角形索引
            2,3,1}; //第二个三角形索引
        
        GLuint indexVBO;
        glGenBuffers(1, &indexVBO);
        glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexVBO);
        glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices) , indices, GL_STATIC_DRAW);
        
        GLuint vertexVBO, colorVBO;
        //创建和绑定vbo
        glGenBuffers(1, &vertexVBO);
        glBindBuffer(GL_ARRAY_BUFFER, vertexVBO);
        
        
        Vertex data[] =
        {
            {
       {-1,-1, 0},{0,1,0,1}},
            
            {
       {1,-1, 0},{1,0,0,1}},
            
            { {-1,1, 0},{0,0,1,1}},
            
            {
       {1,1, 0},{0,0,0,1}}
        };
        glBufferData(GL_ARRAY_BUFFER, sizeof(data), data, GL_STATIC_DRAW);
        
        //获取vertex attribute "a_position"的入口点
        GLuint positionLocation = glGetAttribLocation(_glProgram->getProgram(), "a_position");
        //打开入a_position入口点
        glEnableVertexAttribArray(positionLocation);
        //传递顶点数据给a_position，注意最后一个参数是数组的偏移了。
        glVertexAttribPointer(positionLocation, 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), (GLvoid*)offsetof(Vertex,Position));
        
        //set for color
        glGenBuffers(1, &colorVBO);
        glBindBuffer(GL_ARRAY_BUFFER, colorVBO);
        glBufferData(GL_ARRAY_BUFFER, sizeof(data), data, GL_STATIC_DRAW);
        
        GLuint colorLocation = glGetAttribLocation(_glProgram->getProgram(), "a_color");
        glEnableVertexAttribArray(colorLocation);
        glVertexAttribPointer(colorLocation, 4, GL_FLOAT, GL_FALSE, sizeof(Vertex), (GLvoid*)offsetof(Vertex,Color));
        
        _command.init(_globalZOrder);
        _command.func = CC_CALLBACK_0(Test::onDraw, this);
        
        return true;
    }
    
    void Test::draw(Renderer *renderer, const Mat4 &parentTransform, uint32_t parentFlags)
    {
        CCLOG("vvv");
        
        
        Director::getInstance()->getRenderer()->addCommand(&_command);
    }
    
    void Test::onDraw()
    {
        glClearColor(0, 0, 0, 1); // black
        glClear(GL_COLOR_BUFFER_BIT);
        
        // bind the program (the shaders)
        glUseProgram(_glProgram->getProgram());
        // bind the VAO (the triangle)
        glBindVertexArray(_vao);
        
        // draw the VAO
        glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_BYTE,(GLvoid*)0);
        // unbind the VAO
        glBindVertexArray(0);
        
        // unbind the program
        glUseProgram(0);
    }

新建Test.h，代码如下：

//
    //  Test.h
    //  Rectangle
    //
    //  Created by zhufu on 2017/3/27.
    //
    //
    
    #ifndef Test_h
    #define Test_h
    
    #include <stdio.h>
    USING_NS_CC;
    class Test : public Node
    {
    public:
        GLuint _program = 0;
        virtual bool init() override;
        static Test* create();
        virtual void draw(Renderer *renderer, const Mat4& parentTransform, uint32_t parentFlags) override;
        void onDraw();
        
        cocos2d::CustomCommand _command;
        GLProgram* _glProgram;
        
        GLuint _vao = 0;
        GLuint _vertexVBO = 0;
        GLuint _colorVBO = 0;
    };
    
    #endif /* Test_h */

如图：

![Center][]

修改HelloWorldScene.cpp，

先

include "Test.h"

再修改CreateScene方法：

Scene* HelloWorld::createScene()
    {
        // 'scene' is an autorelease object
        auto scene = Scene::create();
        
        auto test = Test::create();
        scene->addChild(test);
        
        // 'layer' is an autorelease object
        auto layer = HelloWorld::create();
    
        // add layer as a child to scene
        scene->addChild(layer);
    
        // return the scene
        return scene;
    }

如图：

![Center 1][]

在Resources方位夹下新建shader文件夹，再在shader新建myVertexShader.vsh和myFragmentShader.fsh文件。

如图：

![Center 2][]

myVertexShader.vsh

attribute vec4 a_position;
    attribute vec4 a_color;
    
    varying vec4 v_fragmentColor;
    
    void main()
    {
        gl_Position = a_position;
        v_fragmentColor = a_color;
    }

myFragmentShader.fsh

varying vec4 v_fragmentColor;
    
    void main()
    {
        gl_FragColor = v_fragmentColor;
    }

接下来，可以开心地运行程序了。

运行效果：

![Center 3][]

[Center]: /images/20220613/950bddb26df54649b70d17b53272ef73.png
[Center 1]: /images/20220613/7e64e33dcaf74e70814e51e479507d2b.png
[Center 2]: /images/20220613/67b7c5d1a9b4459393c3a1ae9bfe9816.png
[Center 3]: /images/20220613/a90c56383823439eab7fdfc1bce9adfe.png