Using ETC1 Textures with aplha

cocos2d-x
#1

Hi

I am trying to use ETC1 textures with alpha for android cocos2dx.

I am trying to follow this link:

I have two textures Img-hd.pkm and Img_aplha.pkm as described in the above link.

Then I created the shader monochrome.h

"#ifdef GL_ES\n\
precision mediump float;\n\#endif \n\
\n\
uniform lowp sampler2D u_map[2];\n\
varying mediump vec2 v_texture;\n\
\n\
void main(void)\n\
{\n\
    gl_FragColor = vec4(texture2D(u_map[0], v_texture).rgb, texture2D(u_map[1], v_texture).r);\n\
}";

In my app delegate

CCGLProgram *glProgram = new CCGLProgram();

    glProgram->initWithVertexShaderByteArray(ccPositionTextureA8Color_vert,cc_MonoChrome);
    
    glProgram->link();
    glProgram->updateUniforms();
    
    CCShaderCache::sharedShaderCache()->addProgram(glProgram,"monochromeShader");

And while making the sprite

CCTextureCache::sharedTextureCache()->addETCImage("Img-hd.pkm");
    MainScreen1 = CCSprite::create("Img-hd.pkm");


        CCGLProgram *shader = CCShaderCache::sharedShaderCache()->programForKey("monochromeShader");
        shader->reset();
        /// Same code as before to initialize the shader
        shader->initWithVertexShaderByteArray(ccPositionTextureA8Color_vert, cc_MonoChrome);
        MainScreen1->setShaderProgram(shader);
        
        MainScreen1->getShaderProgram()->addAttribute(kCCAttributeNamePosition, kCCVertexAttrib_Position);
        MainScreen1->getShaderProgram()->addAttribute(kCCAttributeNameTexCoord, kCCVertexAttrib_TexCoords);
        MainScreen1->getShaderProgram()->link();
        MainScreen1->getShaderProgram()->updateUniforms();
        MainScreen1->getShaderProgram()->use();

But I dont understand how to use the shader. Can someone help me understand how to implement the shader and change the code according to above link.

#2

it looks like you are using v2.x.

We have a few tutorials for v3:

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

And a few users have written about it:

http://afsharious.wordpress.com/2014/06/20/gotchas-shaders-in-cocos2d-x/

#3

@slackmoehrle Thanks for the inputs. I went through the ray wenderlich tutorial.

I tried the following:

Here the shader loading code:

        CCTextureCache::sharedTextureCache()->addETCImage("SpinWheel-hd.pkm");

MainScreen1 = CCSprite::create("SpinWheel-hd.pkm");
MainScreen1->setScale(0.3); //DEVSCALE4(1);
CCSize size1 = CCDirector::sharedDirector()->getWinSize();
MainScreen1->setPosition(ccp(size1.width/2, size1.height/2));
this->addChild(MainScreen1);

CCGLProgram *shader = CCShaderCache::sharedShaderCache()->programForKey("monochromeShader");
shader->reset();
/// Same code as before to initialize the shader
shader->initWithVertexShaderByteArray(cc_MonoChromeV, cc_MonoChrome);
MainScreen1->setShaderProgram(shader);

MainScreen1->getShaderProgram()->addAttribute(kCCAttributeNamePosition, kCCVertexAttrib_Position);
MainScreen1->getShaderProgram()->addAttribute(kCCAttributeNameTexCoord, kCCVertexAttrib_TexCoords);
MainScreen1->getShaderProgram()->link();
MainScreen1->getShaderProgram()->updateUniforms();

//     int color = glGetUniformLocation(MainScreen1->getShaderProgram()->getProgram(),"u_map[1]");

_maskLocation = glGetUniformLocation( MainScreen1->getShaderProgram()->getProgram(),"u_map[1]");
glUniform1i(_maskLocation, 1);

alphaTex = CCTextureCache::sharedTextureCache()->addETCImage("SpinWheel1-hd.pkm");
alphaTex->setAliasTexParameters();

MainScreen1->getShaderProgram()->use();

glActiveTexture(GL_TEXTURE1);

glBindTexture(GL_TEXTURE_2D,alphaTex->getName());

glActiveTexture(GL_TEXTURE0);

Here’s the fragment shader code:

     "#ifdef GL_ES\n\
     precision mediump float;\n\
    #endif\n\
    \n\
    uniform lowp sampler2D u_map[2];\n\
    varying mediump vec2 v_texture;\n\
    \n\
    void main(void)\n\
   {  \n\
   gl_FragColor = vec4(texture2D(u_map[0], v_texture).rgb, texture2D(u_map[1], v_texture).r);\n\
 }";

Here’s the vertex shader

 "#ifdef GL_ES \n\
 uniform mediump mat4 u_projection;\n\
 \n\
 attribute mediump vec2 a_vertex;\n\
 attribute mediump vec2 a_texture;\n\
\n\
 varying mediump vec2 v_texture;\n\
 #endif\n\
 void main()\n\
{\n\
mediump vec4 position = vec4(a_vertex, 0.0, 1.0);\n\
gl_Position = u_projection * position;\n\
v_texture = a_texture;\n\
 }";

I get no errors, but I don’t see anything on screen. Just black.

Can someone find some issue ?

#4

Hi,

Can someone help me here?

#5

I had rewritten a 3.0 shader tutorial for 2.2.x … here

The difference being that in my case the shader files are being loaded externally.

#6

IN the vertex shader, 1 samapler2D has to have the variable name uniform sampler2D CC_Texture0, as this is what is passed in by cocos2d-x I dont you can change the name of the variable, probably that is why you are getting a white screen.

For the other uniform texture you are passing change the name from an array. for example name is uniform sampler2D myTexture. In the mainscreen file pass in “myTexture” instead of the array and make changes accordingly in your vertex shader main function.