ETC1 Support on android alpha problem (GLSL cocos2d-x)

Question

I want to support etc1 in my game, but somehow it doesn't work (I'm using cocos2d-x

C++

 GLProgram* glp = new GLProgram();

glp->initWithVertexShaderFilename("testv.vsh", "test.fsh");
glp->addAttribute(GLProgram::ATTRIBUTE_NAME_POSITION, GLProgram::VERTEX_ATTRIB_POSITION);
glp->addAttribute(GLProgram::ATTRIBUTE_NAME_COLOR, GLProgram::VERTEX_ATTRIB_COLOR);
glp->addAttribute(GLProgram::ATTRIBUTE_NAME_TEX_COORD, GLProgram::VERTEX_ATTRIB_TEX_COORD);
glp->link();
glp->updateUniforms();

Texture2D* tex = Director::getInstance()->getTextureCache()->addImage("MenuButton_alpha.pkm");

GL::bindTexture2DN(1, tex->getName());    
GLuint t1Location = glGetUniformLocation(glp->getProgram(), "tex1");
glp->setUniformLocationWith1i(t1Location, 1);

MySprite->setShaderProgram(glp);

.vsh

attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;


varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
varying vec2 v_texCoord2;


uniform sampler2D tex1;

void main()
{
    gl_Position = CC_MVPMatrix * a_position;
    v_fragmentColor = a_color;
    v_texCoord = a_texCoord;
    v_texCoord2 = v_texCoord;

}

.fsh

varying vec4 v_fragmentColor;   
varying vec2 v_texCoord;
varying vec2 v_texCoord2;

uniform sampler2D tex1;


void main()
{
    vec3 tex = texture2D(CC_Texture0, v_texCoord).rgb;

    float alpha = texture2D(CC_Texture1, v_texCoord2).a;

    gl_FragColor = vec4(tex.rgb,alpha);
}               

Somehow it shows my sprite in the middle but the transparent part is black. can anyone help me?

Answer 1

You need to check two things:

1.Texture and Shader

ETC1 doesn't support alpha.

You'd have to use a separate texture read (which you seem to be doing on texture2D(CC_Texture1, v_texCoord2). You can use tools to extract alpha channel from a RGBA texture and use a single texCoord for both samplers. Your code could be something like this:

vec3 tex = texture2D(CC_Texture0, v_texCoord).rgb;
float alpha = texture2D(CC_Texture1, v_texCoord).a; <- use same coord

Check this link for more info on ETC1 and alpha: http://malideveloper.arm.com/develop-for-mali/sample-code/etcv1-texture-compression-and-alpha-channels/

2. Blending

You'll also need to set blending. I don't know how to do that in Cocos2D, but in OpenGL it would be something like this:

glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRCALPHA);

Now, if you want a texture compression that supports alpha you can use ETC2 (all opengl es 3 devices support it), and for better performance and quality ASTC. Not many devices support it now but the quality difference from ASTC to ETC1 is brutal, plus ASTC supports alpha.