使用自定义frag shader（Cocos2d-x）的奇怪y位置偏移

问题描述

我试图掩盖一个sprite，所以我写了一个简单的片段着色器，只渲染未隐藏在另一个纹理（掩码）下的像素。问题是，看起来我的纹理通过着色器后的y坐标偏移。

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.

这是sprite（GroundZone）的init方法我想掩蔽：

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

    // [...]
}

是实际在子画面上绘制蒙版的自定义绘图方法：

您需要知道 m_mask 是由另一个类外部修改的， onDraw（）方法只渲染它。

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

下面是修改掩码的方法（位于另一个类GroundLayer中）通过从点开始到点结束绘制一条线。两个点都在Cocos2d坐标中（Point（0,0）是左下角）。

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

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

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

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

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):

使用自定义着色器：

这里发生了什么？感谢：）

What's going on here? Thanks :)

推荐答案

找到解决方案。 vert shader不应该使用MVP矩阵，所以我加载 ccPositionTextureColor_noMVP_vert 而不是 ccPositionTextureA8Color_vert 。

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

这篇关于使用自定义frag shader（Cocos2d-x）的奇怪y位置偏移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！