GPU LUT + Photoshop

Hi there!

I would like to share with you an example that creates a 3D texture in openGL and loads it with a LUT (lookup table), for fast color correction, grading, et cetera. I will also show you how to create LUT files in Photoshop.

OF comes with a similar example (graphics/lutFilterExample) but it’s CPU based, which can get really slow easily. This one is GPU, using a shader.

I believe this example is more oriented for OF beginners like myself (or programmers who are not familiar with tools like Photoshop, but work with people like designers regularly).
You can find all this info around the web easily, this is just a “put everything together” post.

You can get the example here. It’s very simple and commented. Basically, you have 4 steps:

  • Disable rectangle textures (very important, here’s why);
  • Load the LUT file (in .cube file format);
  • Create the openGL 3D texture;
  • Use the shader to apply the LUT.

The purpose of this post is not a in depth explanation. (You can get a better understanding on how this works here and here.)

I uploaded a version that uses openGL 2, just because it’ll work with everyone. If you need modern openGL, mind that you’ll have to change some stuff like:

  • varying to in/out;
  • texture2D/texture3D to texture;
  • gl_FragColor to an out vec4.

And now, the Photoshop part…

The first thing I usually do is to grab a screen of my scene in OF (You can do it with any source, but it’ll be harder to predict the exact output). In this case, a still from my web-camera.

(That’s exactly how I look, always angry, with Jim Morrison floating over my head.)

On Photoshop, when you open your screen grab (which will be your base image) you will have to make sure that is set as a background layer. If not, select it and do:

  • Layer -> New -> Background from Layer

After this, you can go crazy with adjustment layers. This is my master piece with: levels, color balance and vibrance.

When you’re done, do:

  • File -> Export -> Color Lookup Tables…

As far Quality goes, usually for me 32 grid points is more than enough and you have a small file size. For this example, you only need CUBE format.

And you’re done!

NOTE If you are using LUT’s that you found around the web, and you don’t know the grid point size, just open the file on any text editor. The first lines are usually reserved for description/copyright and you see something like:

#LUT size
LUT_3D_SIZE 32

If you have any suggestions/corrections, please do so!

7 Likes

thanks this looks really useful. I never new that photoshop could produce these color look up tables, they seem really helpful – I’ve done this in CPU before (there’s an example in OF graphics/lutFilterExample) but to do them in GPU makes alot of sense.

Very nice, thanks for sharing, its a good way to make color filters

Thanks, It works perfectly. So nice to be able to use Lut with shaders. That could be great to be also included in the main OF lut’s example.

Hi, check out ofxFX addon. It already has the LUT shader implemented.

best

Hi @roymacdonald,

ofxFX has a different output which I dislike. :blush:

ofxFX usually creates a lot of image segmentation and, in this case, a darker reddish tint. Which, since I also use OF for print works, it doesn’t work for me.

My example doesn’t create segmentation, although it loses a bit of contrast. But that is something I can easily correct.

Hi @hubris,
That’s strange!. As far as I remember @patricio made the ofxFx lut based on the lut example, which I made. I haven’t checked its maths but it should behave in the same way. The segmentation thing might be due to the bitdepth of the rendering surface. I’ll try to check what’s going on inside ofxFX and let you know.
best

I made this addon from the @hubris code:

1 Like