{"id":1117,"date":"2014-05-22T18:33:30","date_gmt":"2014-05-22T11:33:30","guid":{"rendered":"http:\/\/blog.bebensiganteng.com\/?p=1117"},"modified":"2016-03-14T08:19:49","modified_gmt":"2016-03-14T08:19:49","slug":"basic-boilerplate-opengl-es-cocos2d-x","status":"publish","type":"post","link":"https:\/\/rahmat-hidayat.com\/?p=1117","title":{"rendered":"OpenGL ES 2.0 in Cocos2d-x"},"content":{"rendered":"

Long story short, establishing OpenGL ES 2.0 is slightly different than WebGL<\/a>, but the basic principle is similar.<\/p>\n

Cocos2d-x<\/a> provides you with a few ..uh, inconvenient wrappers.. that can help you started with custom shaders but if you don’t have the knowledge in everything that is OpenGL it can get a bit hectic, plus it’s hard to find a good reference.<\/p>\n

OpenGL is a gigantic topic so I’ll explain just the basic parts (plus I’m not an expert as well) so hopefully the below will helps you a bit.<\/p>\n

Add Vertex Shader (triangle.vsh)<\/p>\n

\r\nattribute vec4 a_position;\r\n\r\nvoid main(void) {\r\n    gl_Position = a_position;\r\n}\r\n<\/pre>\n
and Fragment Shader (triangle.fsh)<\/p>\n
\r\nvoid main(void) {\r\n    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\r\n}\r\n<\/pre>\n
Add them to the compile resource list, like so
\n\"How<\/p>\n
Do some OpenGL ES<\/p>\n
\r\nvoid HelloWorld::init() {\r\n\r\n    \/\/ Creates a program object\r\n    CCGLProgram *program = new CCGLProgram();\r\n\r\n    \/\/ A (check below)\r\n    bool loaded = program->initWithVertexShaderFilename("triangle.vsh","triangle.fsh");\r\n\r\n    \/\/ Check if everything is ok\r\n    if (!loaded) {\r\n        CCLOG("oh, god no");\r\n    }\r\n\r\n\r\n    \/\/ B (check below)\r\n    program->addAttribute(kCCAttributeNamePosition, 0);\r\n\r\n    \r\n    \/\/ link the programs\r\n    program->link();\r\n    \r\n    \/\/ C (check below)\r\n    program->updateUniforms();\r\n\r\n    \/\/ D (check below)\r\n    CCLOG("Program Log %s", program->programLog());\r\n\r\n    \/\/ Set the program to the current node\r\n    this->setShaderProgram(program);\r\n\r\n    \/\/ Release it from the memory pool\r\n    program->release();\r\n\r\n    \/\/ Set the clear color, not required actually.\r\n    glClearColor(0.0f, 0.0f, 0.0f, 1.0f);\r\n\r\n}\r\n\r\nvoid HelloWorld::draw() {\r\n    \r\n    \/\/ Clear the color Buffer\r\n    glClear(GL_COLOR_BUFFER_BIT);\r\n    \r\n    \/\/ E (check below)\r\n    CC_NODE_DRAW_SETUP();\r\n    \r\n    \/\/ Draw the triangle\r\n    GLfloat vVertices[9] = {\r\n        0.0f, 0.5f, 0.0f,\r\n        -0.5f, -0.5f, 0.0f,\r\n        0.5f, -0.5f, 0.0f\r\n    };\r\n    \r\n    \/\/ F (check below)\r\n    ccGLEnableVertexAttribs( kCCVertexAttribFlag_Position );\r\n    glVertexAttribPointer(kCCVertexAttrib_Position, 3, GL_FLOAT, GL_FALSE, 0, vVertices);\r\n    glDrawArrays(GL_TRIANGLES, 0, 3);\r\n    \r\n    \/\/ Not required, only for stats\r\n    CC_INCREMENT_GL_DRAWS(1);\r\n    \r\n}\r\n<\/pre>\n
These are the necessary elements that an OpenGL needs, so let’s have a look;<\/p>\n
A<\/h5>\n
\r\nbool loaded = program->initWithVertexShaderFilename("triangle.vsh","triangle.fsh");\r\n<\/pre>\n
initWithVertexShaderFilename<\/i> as the name suggested, will loads all external files, compile, as well as attaching all the shaders into the program. <\/p>\n
B<\/h5>\n
\r\nprogram->addAttribute(kCCAttributeNamePosition, 0);\r\n<\/pre>\n
addAttribute<\/i> simply adds the attribute vec4 a_position;<\/i> to 0, I’m not sure why Cocos2d-x have to make a function for it, because the actual call is just this;<\/p>\n
\r\nglBindAttribLocation(programObject, index, attributeName);\r\n<\/pre>\n
C<\/h5>\n
\r\nprogram->updateUniforms();\r\n<\/pre>\n
During the compilation (Step A) Cocos2d-x will bind their own uniforms into your shaders.<\/p>\n
\r\n"uniform mat4 CC_PMatrix;n"\r\n"uniform mat4 CC_MVMatrix;n"\r\n"uniform mat4 CC_MVPMatrix;n"\r\n"uniform vec4 CC_Time;n"\r\n"uniform vec4 CC_SinTime;n"\r\n"uniform vec4 CC_CosTime;n"\r\n"uniform vec4 CC_Random01;n"\r\n"\/\/CC INCLUDES ENDnn",\r\nsource,\r\n<\/pre>\n
Notice the end is source<\/i>, which is our custom shaders.<\/p>\n
D<\/h5>\n
Checking every step is absolutely necessary in OpenGL, since most of the times an error will not be reported, it will rather silently present you with a blank screen for you to stare into.<\/p>\n
E<\/h5>\n
\r\nCC_NODE_DRAW_SETUP();\r\n<\/pre>\n
Gets the program, and sets the built-in uniforms value in step C.<\/p>\n
F<\/h5>\n
\r\nccGLEnableVertexAttribs( kCCVertexAttribFlag_Position );\r\nglVertexAttribPointer(kCCVertexAttrib_Position, 3, GL_FLOAT, GL_FALSE, 0, vVertices);\r\nglDrawArrays(GL_TRIANGLES, 0, 3);\r\n<\/pre>\n
What glVertexAttribPointer<\/i> does it retrieves the vertices from the buffer objects, so we need to tell it how to process those data, in order to understand it have a look at this interleaved array basics<\/a> explanation. <\/p>\n
glDrawArrays(GL_TRIANGLES, 0, 3);<\/i> draws the primitives, there are 3 types of primitives which are Triangle, Lines, and Points, each one has its own types, again explaining those things in detail can have your mind tangled after a while, but in a nutshell GL_TRIANGLES simply means drawing 1 triangle by 3 given vertex (n\/3).<\/p>\n
ccGLEnableVertexAttribs( kCCVertexAttribFlag_Position );<\/i> basically just enables the Vertex attribute array, although why does it need to be defined explicitly is a bit puzzling.<\/p>\n
And here’s the result
\n\"Result\"<\/p>\n
Not too exciting :p but you can plug in your own shaders now.<\/p>\n
Resources<\/h5>\n
SIGGRAPH University : “An Introduction to OpenGL Programming”<\/a>
\nOpenGL ES 2.0 programming guide<\/a>
\nhttp:\/\/blog.db-in.com\/all-about-opengl-es-2-x-part-1\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Long story short, establishing OpenGL ES 2.0 is slightly different than WebGL, but the basic principle is similar. Cocos2d-x provides you with a few ..uh, inconvenient wrappers.. that can help you started with custom shaders but if you don’t have the knowledge in everything that is OpenGL it can get a bit hectic, plus it’s […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[16,18,27,45,57],"tags":[80,85,101,124],"_links":{"self":[{"href":"https:\/\/rahmat-hidayat.com\/index.php?rest_route=\/wp\/v2\/posts\/1117"}],"collection":[{"href":"https:\/\/rahmat-hidayat.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rahmat-hidayat.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rahmat-hidayat.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rahmat-hidayat.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1117"}],"version-history":[{"count":1,"href":"https:\/\/rahmat-hidayat.com\/index.php?rest_route=\/wp\/v2\/posts\/1117\/revisions"}],"predecessor-version":[{"id":1634,"href":"https:\/\/rahmat-hidayat.com\/index.php?rest_route=\/wp\/v2\/posts\/1117\/revisions\/1634"}],"wp:attachment":[{"href":"https:\/\/rahmat-hidayat.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahmat-hidayat.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahmat-hidayat.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}