OpenGL ES Pixel Art - 缩放

Question

我无法在iPhone上的OpenGL Es 1.1上显示基于像素的艺术品（想想复古瓷砖和艺术品）。

使用8字节（每行1个字节）表示平铺，每个位代表一个像素是否被设置。

例如编号为8的图块：

0 0 0 0 0 0 0 0      ->
0 0 1 1 1 0 0 0      ->        xxx
0 1 0 0 0 1 0 0      ->       x   x
0 1 0 0 0 1 0 0      ->       x   x
0 0 1 1 1 0 0 0      ->        xxx
0 1 0 0 0 1 0 0      ->       x   x
0 1 0 0 0 1 0 0      ->       x   x
0 0 1 1 1 0 0 0      ->        xxx

使用

将其转换为iPhone上的OpenGL

glDrawArrays(GL_POINTS, 0, 64);

逻辑是正确的，但问题是它没有给出复古效果。我一直在寻找更多块状/复古风格。我读到我可以关闭像素平滑，这会导致像素显示为正方形。（我认为它是GL_Disable（POINT_SMOOTH），但不确定这是否会影响ES，因为没有任何改变。）

我发现有关问题的可能解决方案：

1. 使用帧缓冲区渲染到较小的分辨率，然后在渲染缓冲区中将其缩放。我不知道这是怎么做的，或者它是否有效。
2. 从像素创建图像，从该图像创建纹理，最后渲染该纹理。

我想到了可能的解决方案：

1. 对于每个像素，水平和垂直绘制两个像素。
2. 使用三角形将每个像素绘制为正方形。
3. 使用GLPointSize - 设置为2时会产生正确的效果，但坐标会混乱。对齐变得更难。

最终我想要呈现瓷砖：



我更了解OpenGL和像素是如何工作的，而且我正在使用gameboy模拟器来解决这个问题。如果有人认为正确的方法是手动创建图形并将其作为纹理加载，那么这不是可行的答案。

Answer 1

有很多方法可以做到这一点，我建议您找到第一个。将场景绘制到较小的缓冲区，然后将其重绘为画布。

你在这里看到的是一个FBO（帧缓冲对象）。查找有关如何创建FBO并为其附加纹理的示例。这将为您创建一个缓冲区，您将输入任何尺寸。这里的一些常见问题是你很可能需要一个POT纹理（2维的功能：2,4,8,16 ......例如64x128缓冲区）所以要控制不同的大小，你应该使用视口，然后只使用你需要的缓冲区的一部分。

所以最后这将创建一个低分辨率纹理，可用于绘制到画布（视图）。你如何绘制它应该尝试的东西。这些点可能不是最佳解决方案，即使在缓冲区的情况下，我也会使用您在示例中定义的点之间的线。此时你必须选择使用或不使用抗锯齿进行绘制。要启用它，请在iOS上查找多重采样。

获得绘制形状的纹理后，需要将其重绘为视图。这几乎是绘制全屏纹理。再次，您有多种绘制方式。这里最强大的工具是纹理参数：使用最近将丢弃所有颜色插值，方块应该是可见的;使用线性（或三线性）将进行一些插值，结果可能会更接近你想要达到的目的。然后你可以再次使用多重采样来创建抗锯齿并获得更好的结果。

所以这里的权力是：

• 不同的FBO缓冲区大小
• 抗议FBO
• 纹理参数
• 重绘到画布时的抗锯齿

至于FBO，这是最容易做的事情之一：

• 生成帧缓冲区（glGenFramebuffers）
• 绑定帧缓冲区（glBindFramebuffer）
• 创建纹理（glGenTextures）并绑定它（glBindTexture）
• 设置纹理数据glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, twidth, theight, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL);
• 将纹理附加到帧缓冲区glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, texture.textureID, 0);
• 现在当您绘制到纹理时，您需要绑定FBO帧缓冲区，当您绘制到主缓冲区时，只需绑定该帧缓冲区。

由于这是一个相当广泛的答案（问题所在）...如果您将实施此问题并且还有其他问题或问题，最好创建一个单独的问题，并可能将它们链接在评论中。< / p> 祝你好运。

Answer 2

我不确定我的问题是否不清楚，但要将像素绘制到屏幕上，您必须创建一个纹理并将像素数据传递给它，然后将该纹理渲染到屏幕上。它相当于glDrawPixels。

代码如下：

#define W 255,255,255

#define G 192,192,192

//8 x 8 tile with 3 bytes for each pixel RGB format
GLubyte pixels[8 * 8 * 3] = {
W,W,W,W,W,W,W,W,
W,W,G,G,G,W,W,W,
W,G,W,W,W,G,W,W,
W,G,W,W,W,G,W,W,
W,W,G,G,G,W,W,W,
W,G,W,W,W,G,W,W,
W,G,W,W,W,G,W,W,
W,W,G,G,G,W,W,W
};

设置中的某个地方：

glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
glGenTextures(1, &tex);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, tex);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 8, 8, 0, GL_RGB, GL_UNSIGNED_BYTE, pixels);
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_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);

然后像往常一样绘制纹理：

glActiveTexture(GL_TEXTURE0);
glUniform1i([program uniformLocation:@"s_texture"], 0);
glBindTexture(GL_TEXTURE_2D, tex);

glEnableVertexAttribArray(positionAttrib);
glVertexAttribPointer(positionAttrib, 2, GL_FLOAT, GL_FALSE, 0, v);
glEnableVertexAttribArray(texAttrib);
glVertexAttribPointer(texAttrib, 2, GL_FLOAT, GL_FALSE, 0, t);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_BYTE, i);