使用自定义片段着色器（Cocos2d-x）的奇怪 y 位置偏移

Question

我正在尝试对精灵进行遮罩，因此我编写了一个简单的片段着色器，它仅渲染未隐藏在另一个纹理（遮罩）下的像素。问题是我的纹理在通过着色器后似乎有它的 y 坐标偏移量。

这是我要屏蔽的精灵（GroundZone）的init方法：

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();

    // [...]
}

这些是在精灵上实际绘制蒙版的自定义绘制方法：
你要知道m_mask是被另一个类在外部修改的，onDraw()方法只渲染它。

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);
}

下面是通过从点start 到点end 绘制一条线来修改遮罩的方法（位于另一个类GroundLayer 中）。两个点都在 Cocos2d 坐标中（点 (0,0) 位于左下方）。

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();
    }
}

最后，这是我编写的自定义着色器。

#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;
}

我的 y 坐标有问题。确实，似乎一旦它通过了我的自定义着色器，精灵的纹理就不在正确的位置：

没有自定义着色器（精灵是棕色的东西）：

使用自定义着色器：

这里发生了什么？谢谢:)

Answer 1

找到了解决方案。垂直着色器不应该使用 MVP 矩阵，所以我加载了 ccPositionTextureColor_noMVP_vert 而不是 ccPositionTextureA8Color_vert。

Answer 2

在您的垂直着色器 (.vsh) 中，您的 main 方法应如下所示：

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;
}

请注意，我们使用的是CC_PMatrix 而不是CC_MVPMatrix。