Render speed for individual pixels in loop

Question

I'm working on drawing individual pixels to a UIView to create fractal images. My problem is my rendering speed. I am currently running this loop 260,000 times, but would like to render even more pixels. As it is, it takes about 5 seconds to run on my iPad Mini.

I was using a UIBezierPath before, but that was even a bit slower (about 7 seconds). I've been looking in NSBitMap stuff, but I'm not exactly sure if that would speed it up or how to implement it in the first place.

I was also thinking about trying to store the pixels from my loop into an array, and then draw them all together after my loop. Again though, I am not quite sure what the best process would be to store and then retrieve pixels into and from an array.

Any help on speeding up this process would be great.

for (int i = 0; i < 260000; i++) {

    float RN = drand48();

    for (int i = 1; i < numBuckets; i++) {
        if (RN < bucket[i]) {
            col = i;
            CGContextSetFillColor(context, CGColorGetComponents([UIColor colorWithRed:(colorSelector[i][0]) green:(colorSelector[i][1]) blue:(colorSelector[i][2]) alpha:(1)].CGColor));
            break;
        }
    }

    xT = myTextFieldArray[1][1][col]*x1 + myTextFieldArray[1][2][col]*y1 + myTextFieldArray[1][5][col];
    yT = myTextFieldArray[1][3][col]*x1 + myTextFieldArray[1][4][col]*y1 + myTextFieldArray[1][6][col];

    x1 = xT;
    y1 = yT;
    if (i > 10000) {
        CGContextFillRect(context, CGRectMake(xOrigin+(xT-xMin)*sizeScalar,yOrigin-(yT-yMin)*sizeScalar,.5,.5));

    }
    else if (i < 10000) {
        if (x1 < xMin) {
            xMin = x1;
        }
        else if (x1 > xMax) {
            xMax = x1;
        }
        if (y1 < yMin) {
            yMin = y1;
        }
        else if (y1 > yMax) {
            yMax = y1;
        }
    }
    else if (i == 10000) {
        if (xMax - xMin > yMax - yMin) {
            sizeScalar = 960/(xMax - xMin);
            yOrigin=1000-(1000-sizeScalar*(yMax-yMin))/2;
        }
        else {
            sizeScalar = 960/(yMax - yMin);
            xOrigin=(1000-sizeScalar*(xMax-xMin))/2;
        }
    }
}

Edit

I created a multidimensional array to store UIColors into, so I could use a bitmap to draw my image. It is significantly faster, but my colors are not working appropriately now.

Here is where I am storing my UIColors into the array:

int xPixel = xOrigin+(xT-xMin)*sizeScalar;
int yPixel = yOrigin-(yT-yMin)*sizeScalar;
pixelArray[1000-yPixel][xPixel] = customColors[col];

Here is my drawing stuff:

CGDataProviderRef provider = CGDataProviderCreateWithData(nil, pixelArray, 1000000, nil);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

CGImageRef image = CGImageCreate(1000,
                                 1000,
                                 8,
                                 32,
                                 4000,
                                 colorSpace,
                                 kCGBitmapByteOrder32Big | kCGImageAlphaNoneSkipLast,
                                 provider,
                                 nil, //No decode
                                 NO,  //No interpolation
                                 kCGRenderingIntentDefault); // Default rendering

CGContextDrawImage(context, self.bounds, image);

Not only are the colors not what they are supposed to be, but every time I render my image, to colors are completely different from the previous time. I have been testing different stuff with the colors, but I still have no idea why the colors are wrong, and I'm even more confused how they keep changing.

score 7 · Answer 1 · answered Dec 17 '15 at 17:21

Per-pixel drawing — with complicated calculations for each pixel, like fractal rendering — is one of the hardest things you can ask a computer to do. Each of the other answers here touches on one aspect of its difficulty, but that's not quite all. (Luckily, this kind of rendering is also something that modern hardware is optimized for, if you know what to ask it for. I'll get to that.)

Both @jcaron and @JustinMeiners note that vector drawing operations (even rect fill) in CoreGraphics take a penalty for CPU-based rasterization. Manipulating a buffer of bitmap data would be faster, but not a lot faster.

Getting that buffer onto the screen also takes time, especially if you're having to go through a process of creating bitmap image buffers and then drawing them in a CG context — that's doing a lot of sequential drawing work on the CPU and a lot of memory-bandwidth work to copy that buffer around. So @JustinMeiners is right that direct access to GPU texture memory would be a big help.

However, if you're still filling your buffer in CPU code, you're still hampered by two costs (at best, worse if you do it naively):

sequential work to render each pixel
memory transfer cost from texture memory to frame buffer when rendering

@JustinMeiners' answer is good for his use case — image sequences are pre-rendered, so he knows exactly what each pixel is going to be and he just has to schlep it into texture memory. But your use case requires a lot of per-pixel calculations.

Luckily, per-pixel calculations are what GPUs are designed for! Welcome to the world of pixel shaders. For each pixel on the screen, you can be running an independent calculation to determine the relationship of that point to your fractal set and thus what color to draw it in. The can be running that calculation in parallel for many pixels at once, and its output is going straight to the screen, so there's no memory overhead to dump a bitmap into the framebuffer.

One easy way to work with pixel shaders on iOS is SpriteKit — it can handle most of the necessary OpenGL/Metal setup for you, so all you have to write is the per-pixel algorithm in GLSL (actually, a subset of GLSL that gets automatically translated to Metal shader language on Metal-supported devices). Here's a good tutorial on that, and here's another on OpenGL ES pixel shaders for iOS in general.

+1 If you can draw what you need to with shaders that would be the best! No need to do buffer manipulation at that point. — Justin Meiners, Dec 17 '15 at 19:35
One comment, even though GPU is certainly superior for pixel operations, up until the late 90s most PC games/graphics programs were written using CPU software renders. CPU triangle or rectangle rasterization can do just fine in a lot of cases. — Justin Meiners, Dec 17 '15 at 19:47
For fractals in the Iterated Functions Systems, each pixel is used to create the next pixel. I did some research into this today, and the GPU would work great for a Mandelbrot set or Newton's method, but for the ones I'm working with, only one pixel can be created at a time because it's position is used to create the next one. — Russell Thorman, Dec 19 '15 at 02:14

score 2 · Answer 2 · edited May 23 '17 at 12:23

If you want to maximize render speed I would recommend bitmap rendering. Vector rasterization is much slower and CGContext drawing isn't really intended for high performance realtime rendering.

I faced a similar technical challenge and found CVOpenGLESTextureCacheRef to be the fastest. The texture cache allows you to upload a bitmap directly into graphics memory for fast rendering. Rendering utilizes OpenGL, but because its just 2D fullscreen image - you really don't need to learn much about OpenGL to use it.

You can see see an example I wrote of using the texture cache here: https://github.com/justinmeiners/image-sequence-streaming

My original question related to this is here: How to directly update pixels - with CGImage and direct CGDataProvider

My project renders bitmaps from files so it is a little bit different but you could look at ISSequenceView.m for an example of how to use the texture cache and setup OpenGL for this kind of rendering.

Your rendering procedure could like something like:

1. Draw to buffer (raw bytes)
2. Lock texture cache
3. Copy buffer to texture cache
4. Unlock texture cache.
5. Draw fullscreen quad with texture

score 2 · Accepted Answer · answered Dec 17 '15 at 16:44

2

If you really want to change many different pixels individually, your best option is probably to allocate a chunk of memory (of size width * height * bytes per pixel), make the changes directly in memory, and then convert the whole thing into a bitmap at once with CGBitmapContextCreateWithData

There may be even faster methods that this (see Justin's answer).

answered Dec 17 '15 at 16:44

jcaron

17,302
6
32
46

My answer is a little complicated and is about maximum performance - other choices like this are better and easier if they fit your needs. Thanks! – Justin Meiners Dec 17 '15 at 16:56
I've looked into allocating a chunk of memory, and then converting the whole thing into a bitmap at once, but I don't see how that would be much faster since I still have to run all of the math, save it, and then write it to the screen. As it is, my code writes it all, but doesn't "print" to the screen until it is all done. – Russell Thorman Dec 19 '15 at 02:16
Of course, it won't help you with the computation part, but the difference between manipulating 3 or 4 bytes and calling a rectangle-filling function is probably huge. Just try it and let us know... – jcaron Dec 19 '15 at 07:50
So, yes it is incredibly faster to save it as the array and then create a bitmap. It is running roughly 30 times faster. The image is drawing nicely, but my colors are all messed up. I edited my post to reflect my new problem. Thanks – Russell Thorman Dec 20 '15 at 22:58
You should create a new question for this. Though my guess is that you have a problem with byte ordering of the components. – jcaron Dec 20 '15 at 23:26
And don't forget to include how you compute your colors, what you're expecting and what you're getting... – jcaron Dec 20 '15 at 23:27

Render speed for individual pixels in loop

3 Answers3