Using OpenGL ES 2.0 inside CCRenderTexture

Question

I am trying to follow a tutorial on Dynamic Textures in iOS by Ray Wenderlich

http://www.raywenderlich.com/3857/how-to-create-dynamic-textures-with-ccrendertexture

but using Cocos2D 2.0 and OpenGL ES 2.0 instead of 1.1. The tutorial begins by drawing a coloured square to the screen with a shadow gradient applied to it, but I cannot get the gradient to render to the coloured square. This part of the tutorial is where OpenGL ES code is sent to the CCRenderTexture, so I figure I must be setting up my OpenGL ES 2.0 code wrong (I have very little experience with OpenGL / OpenGL ES). The OpenGL ES 1.1 code is

glDisable(GL_TEXTURE_2D);
glDisableClientState(GL_TEXTURE_COORD_ARRAY);

float gradientAlpha = 0.7;    
CGPoint vertices[4];
ccColor4F colors[4];
int nVertices = 0;

vertices[nVertices] = CGPointMake(0, 0);
colors[nVertices++] = (ccColor4F){0, 0, 0, 0 };
vertices[nVertices] = CGPointMake(textureSize, 0);
colors[nVertices++] = (ccColor4F){0, 0, 0, 0};
vertices[nVertices] = CGPointMake(0, textureSize);
colors[nVertices++] = (ccColor4F){0, 0, 0, gradientAlpha};
vertices[nVertices] = CGPointMake(textureSize, textureSize);
colors[nVertices++] = (ccColor4F){0, 0, 0, gradientAlpha};

glVertexPointer(2, GL_FLOAT, 0, vertices);
glColorPointer(4, GL_FLOAT, 0, colors);
glDrawArrays(GL_TRIANGLE_STRIP, 0, (GLsizei)nVertices);

glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glEnable(GL_TEXTURE_2D);

which goes between the CCRenderTexture begin and end methods (full code can be found at the above link). My Cocos2D 2.0 / OpenGL ES 2.0 attempt is

float gradientAlpha = 0.7;    
CGPoint vertices[4];
ccColor4F colors[4];
int nVertices = 0;

vertices[nVertices] = CGPointMake(0, 0);
colors[nVertices++] = (ccColor4F){0, 0, 0, 0 };

vertices[nVertices] = CGPointMake(textureSize, 0);
colors[nVertices++] = (ccColor4F){0, 0, 0, 0};
vertices[nVertices] = CGPointMake(0, textureSize);
colors[nVertices++] = (ccColor4F){0, 0, 0, gradientAlpha};
vertices[nVertices] = CGPointMake(textureSize, textureSize);
colors[nVertices++] = (ccColor4F){0, 0, 0, gradientAlpha};

// Setup OpenGl ES shader programs

CCGLProgram *positionColourProgram = [[CCShaderCache sharedShaderCache] programForKey:kCCShader_PositionColor];

[rt setShaderProgram:positionColourProgram];

ccGLEnableVertexAttribs(kCCVertexAttribFlag_Position | kCCVertexAttribFlag_Color);

glVertexAttribPointer(kCCVertexAttrib_Position, 2, GL_FLOAT, GL_FALSE, 0, vertices);
glVertexAttribPointer(kCCVertexAttrib_Color, 4, GL_FLOAT, GL_FALSE, 0, colors);

glDrawArrays(GL_TRIANGLE_STRIP, 0, (GLsizei)nVertices);

where rt is the CCRenderTexture object. There are no errors in the console but the image on the screen is a solid colour square with no gradient. Do I need to use an OpenGL blending function perhaps? Any help would be much appreciated. Thanks in advance.

Nope, afraid not. I've been learning more Open GL ES 2.0 and had another go at this after your interest but still no progress [rt set shaderProgram:positionColourProgram] should be [[[rt sprite] texture] setShaderProgram:positionColourProgram] as it is the CCRenderTexture's Sprite's Texture that is used to create the new Sprite. CCRenderTexture's beginWithClear: and end methods should be where to look further but I have been using iOS 5+'s GLKit so have no experience of frame buffers etc so can't make any sense of those methods right now. — Josh_Campion

ylwong ylwong · Accepted Answer · 2012-08-09T01:34:13

I have figured out the changes needed to make it \work and I posted my comment in the tutorial's forum http://www.raywenderlich.com/forums//viewtopic.php?f=20&t=512&start=40 Hope it is not too late for you.

To save you time from looking through the forum to find my posting, here it is what I posted there:

I have posted my fix at: http://www.wfu.edu/~ylwong/download/cocos2d-2.0-texture/ The HelloWorldLayer.mm is the final file incorporated all the changes so you do not have to type them in. The pdf file marks up the changes in case you want to see what the changes are.

Basically, in addition to replacing the statements that are not supported in OpenGLES 2.0, I have to add code to set up the shaders for vertex and fragment. Also, instead of using the range 0 to textureSize in the vertex arrays, I have to use the range -1 to 1, which means that in setting up the vertex arrays, the texture width is now 2, 0 becomes -1, and textureSize becomes 1.

To set up the shaders for that tutorial, we can use the ones that come with Cocos2d or write custom but simple shaders. I have included both methods to choose from.

Hope this helps!

Using OpenGL ES 2.0 inside CCRenderTexture

1 Answers