如何在GLSL中渲染无限2D网格？

NeomerArcana 发表于 Dev

NeomerArcana

理想情况下，我想做的是绘制一个四边形并让GLSL处理实际网格线的创建。

到目前为止，在我的尝试中，顶点着色器：

#version 400

layout (location = 0) in vec4 in_position;
layout (location = 2) in vec3 in_UV;

uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;

smooth out vec3 ex_UV;
smooth out vec3 ex_originalPosition;

void main()
{
    gl_Position = projection * view * model * in_position;

    ex_UV = in_UV;
    ex_originalPosition = vec3(in_position.xyz);
}

模型矩阵将四边形放大一些，例如10,000。

#version 400

layout (location = 0) out vec4 color;

smooth in vec3 ex_UV;
smooth in vec3 ex_originalPosition;

uniform vec4 lineColor;

void main(void)
{
    if(fract(ex_UV.x / 0.001f) < 0.01f || fract(ex_UV.y / 0.001f) < 0.01f)
        color = lineColor;
    else
        color = vec4(0);
}

我试过同时使用纹理坐标和世界空间位置。两者都产生相同的效果，在某些角度看起来不错，但在其他角度则开始看起来很恐怖。

在此处输入图片说明

我以为可以根据距离缩放Alpha，这样我的网格就消失了，但是问题是您可以在第二个图像中从屏幕中心看到，即使这些线也是通过它们的间隙进行渲染（网格的点是围绕原点提供可视的参照系）。

有没有更简单的方法可以做到这一点？

编辑

截屏要求：

具有x8多采样帧缓冲器的VBO行

在此处输入图片说明

具有x8多采样帧缓冲区和glEnable（GL_LINE_SMOOTH）的VBO行

在此处输入图片说明

我安顿下来

我选择了以上两种方法（都无关紧要），只是根据与原点的距离来降低alpha值。尽管这不是我问的问题，但这符合我的目的。在此处输入图片说明

jozxyqk

一个简单的别名现象。就像多边形渲染一样，片段着色器每个像素运行一次。颜色仅针对单个中心坐标进行计算，并不代表真实颜色。

在此处输入图片说明

您可以创建一个多样本FBO并启用超级采样。但这很昂贵。
您可以数学精确地计算每个像素下有多少行区域和空网格区域，然后在片段着色器中对其进行相应着色。考虑到它是一个统一的网格，这可能在可能的范围内，但是数学可能仍然变得相当复杂。
Mipmapping已对纹理执行此操作。创建仅包含几行的网格纹理并对其进行映射，以使其在您很大的四边形上重复（确保设置GL_REPEAT）。为纹理设置正确的mipmap过滤参数，然后调用glGenerateMipmap。在片段着色器中调用texture2D()/时texture()，OpenGL会根据相邻像素之间的纹理坐标增量自动计算要使用的mipmap级别。最后，为各向异性的网格设置一个各向异性的过滤器。
- https://www.opengl.org/registry/specs/EXT/texture_filter_anisotropic.txt
- https://gamedev.stackexchange.com/q/69374/34435

如果要使网格真正“无限”，我已经看到一些海洋渲染器将网格的边缘与垂直几何图形连接到地平线。如果在它们之前有足够的网格，则可以将它们设置为一种纯色，即mipmap顶层的颜色。

示例（与评论有关）：

从VBO ^{45fps提取的}1024x2 GL_LINES
在此处输入图片说明
^{（为高清分辨率的基准绘制100次）}

请参阅有关多重采样的注释，以解决GL_LINES别名。

将32 ^ 2纹理映射到具有^954fps的四边形的四边形
在此处输入图片说明
^{（绘制100次以获得高清分辨率的基准）}

Image img;
int w = 128;
int h = 128;
img.resize(w, h, 1);
for (int j = 0; j < h; ++j)
    for (int i = 0; i < w; ++i)
        img.data[j*w + i] = (i < w / 16 || j < h / 16 ? 255 : 0);

tex = img.upload();

glBindTexture(GL_TEXTURE_2D, tex);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAX_ANISOTROPY_EXT, 16);
glGenerateMipmap(GL_TEXTURE_2D);
glBindTexture(GL_TEXTURE_2D, 0);

...

//for the quick and dirty, immediate mode
glEnable(GL_TEXTURE_2D);
glBindTexture(GL_TEXTURE_2D, tex);
glBegin(GL_QUADS);
glTexCoord2f(0,       0); glVertex3f(0, 0, 0);
glTexCoord2f(1024,    0); glVertex3f(1, 0, 0);
glTexCoord2f(1024, 1024); glVertex3f(1, 0, 1);
glTexCoord2f(0,    1024); glVertex3f(0, 0, 1);
glEnd();
glBindTexture(GL_TEXTURE_2D, 0);
glDisable(GL_TEXTURE_2D);