I don't find a single resource that teaches how to use cocos2d-x shaders

I need to apply a fragment shader on a sprite ic cocos2d-x 3.1. But I don’t know how to do that and I can find even a single resource/tutorial/wiki to teach the concepts how cocos2d-x wraps OpenGL shaders. Please help.

I have written some Chinese tutorial to talk about this topic, maybe I should translate them into English and put them on the wiki system.
Thanks for mention this issue.

@owen I will be, of course, great to have the translation. As I understand most of cocos2d-x developers understand English. But it will take some effort and time. I would like to ask you to share the link of Chinese tutorial. Google translate will help to understand lots of things I guess.

Yeah, this stuff does exist in pieces.

http://nehe.gamedev.net/article/glsl_an_introduction/25007/

http://www.raywenderlich.com/10862/how-to-create-cool-effects-with-custom-shaders-in-opengl-es-2-0-and-cocos2d-2-x

Here is the link: http://4gamers.cn/archives/131

1 Like

Here is an English translation:

https://translate.google.com/translate?sl=auto&tl=en&js=y&prev=_t&hl=en&ie=UTF-8&u=http%3A%2F%2F4gamers.cn%2Farchives%2F131&edit-text=&act=url

@owen @slackmoehrle thanks guys!

@slackmoehrle I read this link before. But it does not help me. Also there are not descriptions what function call is for what.

See this thread please: How to use "Opengl Shader" in cocos2d-x3.0 Seems I have done everything correct but I cannot reproduce the tutorial in cocos2d-x 3.

Here are a few great links to learn modern OpenGL programming, if you are familiar with graphic programming pipeline, I think it’s easy to write cocos2d-x shaders.

1 Like

@owen thank for all the links. BTW I still didn’t finish your tutorial, but it is great! Thank you very much for sharing your knowledge!

it’s glad to hear that. :slight_smile:

@owen your second tutorial does not draw the triangle. I have copied and pasted HellowWorldScene .h and .ccp into my cocos2d-x 3.1 project and it didn’t draw. Even downloaded your project and compiled. Here is the output. With the arrow I have indicated something strange that was rendered:

And I doubt is is because in vao you missed index information. What vertices should be drawing in which order, right? Your vao is the same as IAO in this http://blog.db-in.com/all-about-opengl-es-2-x-part-2/ article yes?

For example here http://www.raywenderlich.com/3664/opengl-tutorial-for-ios-opengl-es-2-0 I see how index buffer is initialized with Indices

const GLubyte Indices[] = {
     0, 1, 2,
     2, 3, 0
};

GLuint indexBuffer;
glGenBuffers(1, &indexBuffer);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexBuffer);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(Indices), Indices, GL_STATIC_DRAW);

In your code I have expected the same. Am I right?

EDIT: I have tested more. Tried to render 6 vertices as it is above code with Indices and the strange, small, white triangle become 2 strange, white, small triangles like this:

My conclusion is: triangle is being rendered but color, size and position is wrong. What you think why it misses the vertex parameters?

I only tested the project on iOS and mac.
I think the problem might be the wrong transform matrix passed to your vertex shader.
If you could upload your code into Github , I will take a look at it and figure out what’s wrong with your code.

@owen I didn’t change anything in your project. I have just downloaded, compiled and executed the code for tutorial 2 (OpenGL ES2.0 Tutorial: write your own shader (2)) on Windows. Tutorial 1 works, tutorial 4 works too, but this one… :frowning:

Also I don’t understand the use of vao.

A Vertex Array Object (VAO) is an OpenGL Object that stores all of the state needed to supply vertex data (with one minor exception noted below). It stores the format of the vertex data as well as the Buffer Objects (see below) providing the vertex data arrays.

You could safely remove the VAO and put VBO and IBO in your draw code. In my tutorial, I store the VBO and IBO info in the init method, then when I want to draw something, I just call glBindVAO(myVAO) before glDrawElements.

@owen Did not get clearly. In VBO you store vertex related information, and you set that information using this functions:

glGenBuffers(1, &vertexVBO);
glBindBuffer(GL_ARRAY_BUFFER, vertexVBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(data), data, GL_STATIC_DRAW);
GLuint positionLocation = glGetAttribLocation(program->getProgram(), "a_position");
//    CCLOG("position =%d", positionLocation);
glEnableVertexAttribArray(positionLocation);


glVertexAttribPointer(positionLocation,
	2,
	GL_FLOAT,
	GL_FALSE,
	sizeof(Vertex),
	(GLvoid*)offsetof(Vertex,Position));

    GLuint colorLocation = glGetAttribLocation(program->getProgram(), "a_color");
glEnableVertexAttribArray(colorLocation);
glVertexAttribPointer(colorLocation,
	4,
	GL_FLOAT,
	GL_FALSE,
	sizeof(Vertex),
	(GLvoid*)offsetof(Vertex,Color));

Similarly you set IBO:

    GLuint indexVBO;
glGenBuffers(1, &indexVBO);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexVBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices) , indices, GL_STATIC_DRAW);

But I don’t understand what you set in VAO, how you set it, and how you use it. Sorry if I ask stupid questions. I am really new to OpenGL and may not understand trivial things.

Also do you know how can I debug on windows with visual studio the tutorial 2? I want to check what is wrong with OpenGL that it does not draw the triangle.

When I declare the following statements:

 // create and bind VAO
    glGenVertexArrays(1, &vao);
    glBindVertexArray(vao);

The following calls to VBO and IBO info will be stored into the VAO we just bind.
When you want to draw something, you could call

//use the info stored in the VAO to draw
    glBindVertexArray(vao);
    glDrawArrays(GL_TRIANGLES, 0, 3);

@owen still don’t get you. Why you need to store VBO and IBO info in VAO? VBO and IBO is enough to draw by using glDrawElements instead of glDrawArrays, right?

I wonder how can I fix tutorial 2. Is there any way I can debug it? If I will fix, I’ll send the code so that you could update the tutorial.

  1. Why should we use VAO, you might want to take a look at this link

  2. About how to debug OpenGL ES program, you could refer to this link

This method is working only on Xcode, I don’t know how to debug on win32, because all of my daily work are done on Mac.

@owen the links explained a lot. Great help!

I have found the problem:

glBindVertexArray(vao);

glDrawArrays(GL_TRIANGLES, 0, 3);

glBindVertexArray(0); // this line is the fix