Cocos2d: can't get a fragment shader to draw only non transparent pixels of an image

Question

I am trying to play around with this raywenderlich tutorial. I am interested in the CSEGrass example (button of page).

I did try to run the shader on a small image with an alpha channel that is added to the scene after a blue background. Here is the code (almost identical to the tutorial, see below). I was expecting the red image to be shown without the black border.

Here is the image:

The result is this:

I am totally inexperienced on this, but I am guess that the shader as written doesn't recognize the transparent pixels and draws them in black.. in the code (section 5) it seems like that is drawn the normal colour and in fact it should be transparent.. it looks like that the transparent pixels have an rgb value corresponding to black..

vec3 normalColor = texture2D(u_texture, fract(vec2(v_texCoord.x + offset, v_texCoord.y))).rgb;

I am a bit lost. I post here the code:

 CCSprite *background = [CCSprite spriteWithFile:@"icewallpaper.png"];
        background.anchorPoint = CGPointMake(0.5f, 0.5f);
        background.position = CGPointMake( 160.0f, 240.0f);
        [self addChild:background];

        // 1
        sprite = [CCSprite spriteWithFile:@"grass.png"];
        sprite.anchorPoint =CGPointMake(0.5f, 0.5f);
        sprite.position =  CGPointMake( 160.0f, 240.0f);
        [self addChild:sprite z:0 tag:69];

        CCSprite *altra = [CCSprite spriteWithFile:@"Icon-Small.png"];
        altra.anchorPoint = CGPointMake(0.5, 0.5f);
        altra.position = CGPointMake(20.0f, 300.0f);
        [self addChild:altra z:0 tag:99];


        // 2
        const GLchar * fragmentSource = (GLchar*) [[NSString stringWithContentsOfFile:[CCFileUtils fullPathFromRelativePath:@"CSEGrass.fsh"] encoding:NSUTF8StringEncoding error:nil] UTF8String];
        sprite.shaderProgram = [[CCGLProgram alloc] initWithVertexShaderByteArray:ccPositionTextureA8Color_vert
                                                          fragmentShaderByteArray:fragmentSource];
        [sprite.shaderProgram addAttribute:kCCAttributeNamePosition index:kCCVertexAttrib_Position];
        [sprite.shaderProgram addAttribute:kCCAttributeNameTexCoord index:kCCVertexAttrib_TexCoords];
        [sprite.shaderProgram link];
        [sprite.shaderProgram updateUniforms];

        // 3
        timeUniformLocation = glGetUniformLocation(sprite.shaderProgram->program_, "u_time");

        // 4
        [self scheduleUpdate];

        // 5
        [sprite.shaderProgram use];

And here is the shader file CSEGrass.fsh:

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform float u_time;

// 1
const float speed = 4.0;
const float bendFactor = 0.5;
void main()
{
    // 2
    float height = 0.0 + v_texCoord.y;
    // 3
    float offset = pow(height, 2.5);

    // 4 multiply by sin since it gives us nice bending
    offset *= (sin(u_time * speed) * bendFactor);

    // 5
    vec3 normalColor = texture2D(u_texture, fract(vec2(v_texCoord.x + offset, v_texCoord.y))).rgb;
    gl_FragColor = vec4(normalColor, 1);
}

Answer 1

vec3 normalColor = texture2D(u_texture, fract(vec2(v_texCoord.x + offset, v_texCoord.y))).rgb;
gl_FragColor = vec4(normalColor, 1);

You are taking RGB values of texture's color and using them with alpha value of 1. Thus, (0, 0, 0, 0) becomes (0, 0, 0, 1), solid black. Solution: use alpha value from texture.

gl_FragColor = texture2D(u_texture, fract(vec2(v_texCoord.x + offset, v_texCoord.y))).rgba;