在 2d 平铺地图上渲染战争迷雾

Question

我目前正在使用 lwjgl 创建一个小型 2d 游戏。
我试图找出一种实现战争迷雾的方法。
我使用了黑色背景，alpha 设置为 0.5。
然后我添加了一个 Square，为每个被点亮的图块设置 alpha 为 1，最终得到一个具有不同 Alpha 值的黑色背景。

然后我使用 blendfunction 渲染了我的背景：

glBlendFunc(GL_ZERO, GL_SRC_ALPHA)

这很好用，但现在我在添加带有透明部分的第二层并对其也应用战争迷雾时遇到了问题。

我读过一些有关 FrameBufferObjects 的文章，但我不知道如何使用它们以及它们是否是正确的选择。

稍后我想用纹理/图像照亮瓷砖，使其看起来更平滑。所以这些纹理可能会重叠。这就是我选择首先渲染战争迷雾的原因。

你知道如何解决这个问题吗？

感谢 samgak。
现在，我尝试在每个深色瓷砖上渲染一个深色方块，除了点亮的瓷砖。 我将每个图块划分为 8x8 网格以获取更多详细信息。这是我的方法：

public static void drawFog() {
    int width = map.getTileWidth()>>3; //Divide by 8
    int height = map.getTileHeight()>>3;

    int mapWidth = map.getWidth() << 3;
    int mapHeight = map.getHeight() << 3;

    //background_x/y is the position of the background in pixel
    int mapStartX = (int) Math.floor(background_x / width); 
    int mapStartY = (int) Math.floor(background_y / height);

    //Multiply each color component with 0.5 to get a darker look
    glBlendFunc(GL_ZERO, GL_SRC_ALPHA);
    glColor4f(0.0f, 0.0f, 0.0f, 0.5f);

    glBegin(GL_QUADS);
    //RENDERED_TILES_X/Y is the amount of tiles to fill the screen
    for(int x = mapStartX; x < (RENDERED_TILES_X<<3) + mapStartX 
                 && x <  mapWidth; x++){
        for(int y = mapStartY; y < (RENDERED_TILES_Y<<3) + mapStartY 
                   && y < mapHeight; y++){
            //visible is an boolean-array for each subtile
            if(!visible[x][y]){
                float tx = (x * width) - background_x;
                float ty = (y * height) - background_y;

                glVertex2f(tx,      ty);
                glVertex2f(tx+width, ty);
                glVertex2f(tx+width, ty+height);
                glVertex2f(tx,      ty+height);

            }
        }
    }
    glEnd();
}

我将可见数组设置为假，除了一个小方块。 它会渲染得很好，但是如果我移动背景，除了可见方块之外的整个屏幕都会变黑。

Answer 1

一种方法是最后渲染 Fog-of-War 图层，使用在所有其他图层渲染后渲染的无纹理黑色方块。

使用此混合功能：

glBlendFunc(GL_ONE_MINUS_SRC_ALPHA, GL_SRC_ALPHA)

并设置 Fog-of-War alpha per-vertex，这样当它为 1.0 时，黑色叠加层是透明的，当它为 0.0 时，它是完全黑色的。 （如果您希望 alpha 具有相反的含义，只需交换参数即可。

为了使其更平滑，您可以设置正方形每个角的每个顶点的 alpha 值，使其在正方形上平滑变化。您还可以使用具有不同 alpha 值的纹理而不是纯黑色正方形，或者将正方形细分为 4 或 16 个正方形以进行更精细的控制。