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 hard to find a good reference.
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.
Add Vertex Shader (triangle.vsh)
attribute vec4 a_position;
void main(void) {
gl_Position = a_position;
}
and Fragment Shader (triangle.fsh)
void main(void) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
Add them to the compile resource list, like so
Do some OpenGL ES
void HelloWorld::init() {
// Creates a program object
CCGLProgram *program = new CCGLProgram();
// A (check below)
bool loaded = program->initWithVertexShaderFilename("triangle.vsh","triangle.fsh");
// Check if everything is ok
if (!loaded) {
CCLOG("oh, god no");
}
// B (check below)
program->addAttribute(kCCAttributeNamePosition, 0);
// link the programs
program->link();
// C (check below)
program->updateUniforms();
// D (check below)
CCLOG("Program Log %s", program->programLog());
// Set the program to the current node
this->setShaderProgram(program);
// Release it from the memory pool
program->release();
// Set the clear color, not required actually.
glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
}
void HelloWorld::draw() {
// Clear the color Buffer
glClear(GL_COLOR_BUFFER_BIT);
// E (check below)
CC_NODE_DRAW_SETUP();
// Draw the triangle
GLfloat vVertices[9] = {
0.0f, 0.5f, 0.0f,
-0.5f, -0.5f, 0.0f,
0.5f, -0.5f, 0.0f
};
// F (check below)
ccGLEnableVertexAttribs( kCCVertexAttribFlag_Position );
glVertexAttribPointer(kCCVertexAttrib_Position, 3, GL_FLOAT, GL_FALSE, 0, vVertices);
glDrawArrays(GL_TRIANGLES, 0, 3);
// Not required, only for stats
CC_INCREMENT_GL_DRAWS(1);
}
These are the necessary elements that an OpenGL needs, so let’s have a look;
A
bool loaded = program->initWithVertexShaderFilename("triangle.vsh","triangle.fsh");
initWithVertexShaderFilename as the name suggested, will loads all external files, compile, as well as attaching all the shaders into the program.
B
program->addAttribute(kCCAttributeNamePosition, 0);
addAttribute simply adds the attribute vec4 a_position; to 0, I’m not sure why Cocos2d-x have to make a function for it, because the actual call is just this;
glBindAttribLocation(programObject, index, attributeName);
C
program->updateUniforms();
During the compilation (Step A) Cocos2d-x will bind their own uniforms into your shaders.
"uniform mat4 CC_PMatrix;n" "uniform mat4 CC_MVMatrix;n" "uniform mat4 CC_MVPMatrix;n" "uniform vec4 CC_Time;n" "uniform vec4 CC_SinTime;n" "uniform vec4 CC_CosTime;n" "uniform vec4 CC_Random01;n" "//CC INCLUDES ENDnn", source,
Notice the end is source, which is our custom shaders.
D
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.
E
CC_NODE_DRAW_SETUP();
Gets the program, and sets the built-in uniforms value in step C.
F
ccGLEnableVertexAttribs( kCCVertexAttribFlag_Position ); glVertexAttribPointer(kCCVertexAttrib_Position, 3, GL_FLOAT, GL_FALSE, 0, vVertices); glDrawArrays(GL_TRIANGLES, 0, 3);
What glVertexAttribPointer 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 explanation.
glDrawArrays(GL_TRIANGLES, 0, 3); 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).
ccGLEnableVertexAttribs( kCCVertexAttribFlag_Position ); basically just enables the Vertex attribute array, although why does it need to be defined explicitly is a bit puzzling.
And here’s the result
Not too exciting :p but you can plug in your own shaders now.
Resources
SIGGRAPH University : “An Introduction to OpenGL Programming”
OpenGL ES 2.0 programming guide
http://blog.db-in.com/all-about-opengl-es-2-x-part-1/
