Weird y-position offset using custom frag shader (Cocos2d-x)

问题

I'm trying to mask a sprite so I wrote a simple fragment shader that renders only the pixels that are not hidden under another texture (the mask). The problem is that it seems my texture has its y-coordinate offset after passing through the shader.

This is the init method of the sprite (GroundZone) I want to mask:

bool GroundZone::initWithSize(Size size) {

    // [...]

    // Setup the mask of the sprite
    m_mask = RenderTexture::create(textureWidth, textureHeight);
    m_mask->retain();
    m_mask->setKeepMatrix(true);


    Texture2D *maskTexture = m_mask->getSprite()->getTexture();
    maskTexture->setAliasTexParameters(); // Disable linear interpolation on the mask

    // Load the custom frag shader with a default vert shader as the sprite’s program
    FileUtils *fileUtils = FileUtils::getInstance();
    string vertexSource = ccPositionTextureA8Color_vert;
    string fragmentSource = fileUtils->getStringFromFile(
                            fileUtils->fullPathForFilename("CustomShader_AlphaMask_frag.fsh"));


    GLProgram *shader = new GLProgram;
    shader->initWithByteArrays(vertexSource.c_str(), fragmentSource.c_str());

    shader->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_POSITION, GLProgram::VERTEX_ATTRIB_POSITION);
    shader->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_TEX_COORD, GLProgram::VERTEX_ATTRIB_TEX_COORDS);
    shader->link();
    CHECK_GL_ERROR_DEBUG();
    shader->updateUniforms();
    CHECK_GL_ERROR_DEBUG();

    int maskTexUniformLoc = shader->getUniformLocationForName("u_alphaMaskTexture");
    shader->setUniformLocationWith1i(maskTexUniformLoc, 1);

    this->setShaderProgram(shader);
    shader->release();

    // [...]
}

These are the custom drawing methods for actually drawing the mask over the sprite:
You need to know that m_mask is modified externally by another class, the onDraw() method only render it.

void GroundZone::draw(Renderer *renderer, const kmMat4 &transform, bool transformUpdated) {

    m_renderCommand.init(_globalZOrder);
    m_renderCommand.func = CC_CALLBACK_0(GroundZone::onDraw, this, transform, transformUpdated);
    renderer->addCommand(&m_renderCommand);

    Sprite::draw(renderer, transform, transformUpdated);
}

void GroundZone::onDraw(const kmMat4 &transform, bool transformUpdated) {

    GLProgram *shader = this->getShaderProgram();

    shader->use();
    glActiveTexture(GL_TEXTURE1);
    glBindTexture(GL_TEXTURE_2D, m_mask->getSprite()->getTexture()->getName());
    glActiveTexture(GL_TEXTURE0);
}

Below is the method (located in another class, GroundLayer) that modify the mask by drawing a line from point start to point end. Both points are in Cocos2d coordinates (Point (0,0) is down-left).

void GroundLayer::drawTunnel(Point start, Point end) {

    // To dig a line, we need first to get the texture of the zone we will be digging into. Then we get the
    // relative position of the start and end point in the zone's node space. Finally we use the custom shader to
    // draw a mask over the existing texture.
    for (auto it = _children.begin(); it != _children.end(); it++) {

        GroundZone *zone = static_cast<GroundZone *>(*it);

        Point nodeStart = zone->convertToNodeSpace(start);
        Point nodeEnd = zone->convertToNodeSpace(end);

        // Now that we have our two points converted to node space, it's easy to draw a mask that contains a line
        // going from the start point to the end point and that is then applied over the current texture.
        Size groundZoneSize = zone->getContentSize();
        RenderTexture *rt = zone->getMask();
        rt->begin(); {

            // Draw a line going from start and going to end in the texture, the line will act as a mask over the
            // existing texture
            DrawNode *line = DrawNode::create();
            line->retain();
            line->drawSegment(nodeStart, nodeEnd, 20, Color4F::RED);
            line->visit();

        } rt->end();
    }
}

Finally, here's the custom shader I wrote.

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform sampler2D u_alphaMaskTexture;

void main() {

    float maskAlpha = texture2D(u_alphaMaskTexture, v_texCoord).a;
    float texAlpha = texture2D(u_texture, v_texCoord).a;
    float blendAlpha = (1.0 - maskAlpha) * texAlpha; // Show only where mask is invisible

    vec3 texColor = texture2D(u_texture, v_texCoord).rgb;

    gl_FragColor = vec4(texColor, blendAlpha);

    return;
}

I got a problem with the y coordinates. Indeed, it seems that once it has passed through my custom shader, the sprite's texture is not at the right place:

Without custom shader (the sprite is the brown thing):

With custom shader:

What's going on here? Thanks :)

回答1:

Found the solution. The vert shader should not use the MVP matrix so I loaded ccPositionTextureColor_noMVP_vert instead of ccPositionTextureA8Color_vert.

回答2:

In your vert shader (.vsh), your main method should look something like this:

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

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;

void main() 
{                   
    //CC_PMatrix is the projection matrix, where as the CC_MVPMatrix is the model, view, projection matrix. Since in 2d we are using ortho camera CC_PMatrix is enough to do calculations.      
    //gl_Position = CC_MVPMatrix * a_position;

    gl_Position = CC_PMatrix * a_position;
    v_fragmentColor = a_color;
    v_texCoord = a_texCoord;
}

Note that we are using CC_PMatrix instead of CC_MVPMatrix.

来源：https://stackoverflow.com/questions/24045924/weird-y-position-offset-using-custom-frag-shader-cocos2d-x