OpenGL ES像素艺术-缩放 [英] OpenGL ES Pixel Art - Scaling

问题描述

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

Im having trouble displaying pixel based art (think retro tiles and art) on OpenGL Es 1.1 on the iPhones.

标题使用8字节(每行1字节)表示，每个位代表是否设置了像素.

Tiles are represented using 8bytes (1 byte for each row) with each bit representing a pixel being set or not.

例如，数字为8的图块:

For example a tile with the number 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

使用

glDrawArrays(GL_POINTS, 0, 64);

逻辑是正确的，但问题是它没有产生复古效果.我一直在寻找块状/复古风格.我读到我可以关闭像素平滑功能，这会导致像素显示为正方形.(我认为这是GL_Disable(POINT_SMOOTH)，但由于没有任何变化，因此不确定是否会影响ES.)

The logic is correct, but the problem is it doesn't give the retro effect. I was looking for more of a blocky/retro style. I read that i can turn off pixel smoothing which would cause pixels to be displayed as squares.(i think it was GL_Disable(POINT_SMOOTH), but not sure if this effects ES since nothing changed.)

我发现与相关问题有关的解决方案:

Possible solutions i found to relating problems:

1. 使用帧缓冲区将其渲染为较小的分辨率，然后在渲染缓冲区中按比例放大.我不知道这是如何完成的，或者是否会成功.
2. 从像素创建图像，从该图像创建纹理，最后渲染该纹理.

我考虑过的可能解决方案:

Possible solutions i thought off:

1. 对于每个像素，水平和垂直绘制两个像素.
2. 使用三角形将每个像素绘制为正方形.
3. 使用GLPointSize-设置为2时可提供正确的效果，但随后会弄乱坐标.对齐变得更加困难.

最终我希望展示这些图块:

Ultimately i would like the tiles to be presented:

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

This is more of me understanding how OpenGL and pixels work, and I'm using a gameboy emulator to work this out. If someone thinks the correct way is to create the graphics manually and load them as textures, its not the feasible answer.

推荐答案

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

Im not sure if my question was not clear, but to draw pixels to screen you have to create a texture and pass in the pixel data to it, then render that texture onto the screen. It would be the equivalent of 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);

这篇关于OpenGL ES像素艺术-缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！