使用自定义碎片着色器(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);
}

下面是通过绘制从点的线修改掩模中的方法(位于另一个类,GroundLayer)start指向end.两个点都在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

找到了解决方案.vert着色器不应该使用MVP矩阵,所以我加载ccPositionTextureColor_noMVP_vert而不是ccPositionTextureA8Color_vert.