Question

I would like to render image in OpenGL ES, pixel by pixel. I want to do it this way because I plan to move those pixels over time to create various effect.

For performance and design reasons I decided to use only every other pixel in both directions (thus reducing their number to one quarter)

I have only very basic understanding of opengl, so I am probably missing some key knowledge to achieve this.

What is the best way to achieve this? Do I have to really render it pixel by pixel? Or can I somehow create texture out of array of pixels?

I would like to make this work on as much devices as possible (so OpenGL ES 1.1 solution is preffered, but if it is not possible or it would be really inconvenient or slow, 2.0 can be used)

I tried to do this using VBO with mixed results. I am not sure I have done it properly, because there are some problems (and it is very slow). Here is my code:

Initialization:

glGenBuffers(1, &pointsVBO);
glBindBuffer(GL_ARRAY_BUFFER, pointsVBO);

glBufferData(GL_ARRAY_BUFFER, 160*240*sizeof(Vertex), 0, GL_DYNAMIC_DRAW);

glEnableClientState(GL_VERTEX_ARRAY);
glEnableClientState(GL_COLOR_ARRAY);

Rendering:

- (void)renderPoints:(ImagePixel**)imagePixels {
    int count = 160 * 240;
    for(int i = 0; i < count; ++i) {
         vertices[i].v[0] = imagePixels[i]->positionX;
         vertices[i].v[1] = imagePixels[i]->positionY;
         vertices[i].color[0] = imagePixels[i]->red;
         vertices[i].color[1] = imagePixels[i]->green;
         vertices[i].color[2] = imagePixels[i]->blue;
         vertices[i].color[3] = 1;
    }

    glVertexPointer(2, GL_FLOAT, sizeof(Vertex), vertices[0].v);
    glColorPointer(4, GL_FLOAT, sizeof(Vertex), vertices[0].color);

    // update vbo
    GLvoid *vbo_buffer = glMapBufferOES(GL_ARRAY_BUFFER, GL_WRITE_ONLY_OES);
    memcpy(vbo_buffer, vertices, count * sizeof(Vertex));
    glUnmapBufferOES(GL_ARRAY_BUFFER);

    // draw contents of vbo
    glDrawArrays(GL_POINTS, 0, count);
}

Vertex struct:

typedef struct Vertex
{
    float v[2];
    float color[4];
} Vertex;

imagePixels array is filled with data from image.

When I do this, I get most of my image but I am missing few last rows and I can see some random pixels around the screen. Is it possible that I hit some limit in drawArrays that uses only portion of data?

Second problem is, that points in second half of columns aren’t aligned properly. I guess this is caused by rounding errors in float math when computing position during rendering itself (supplied coordinates are all multiples of 2). Is there any way how to prevent this? I need all points to be aligned in proper grid.

I will provide you with screenshot as soon as I get my iphone back

Answer 1

If you really are wanting to manipulate every pixel, you should probably just use a single full-screen quad in OpenGL and update its texture each frame.