h1

CrossProcessing shader

June 11, 2008

Hi ! I’m doing a lot of image processing at work since a few weeks, and there a lots of things I wanna try, from post processes to dynamic geometry, but I would need another life for that. After having watched some (really nice) super cars videos (just check at the first one showing the Corvette to see what I mean), I’ve been talking with Nico about the Cross Processing effect, also called xpro, used in photography, and probably in the Corvette video.

corvette cross processing

corvette cross processing

corvette cross processing

corvette cross processing

After a quick talk (thanks) I made a simple pixel shader that post process a given scene with this nice effect 🙂

I followed this Photoshop tutorial to make it, here are the steps to work with the shader:

  • Make a black-to-white gradient
  • Add a New fill or adjustment layer, select Curves, and set the curves just like in the tutorial

cross processing curves gradient

  • Save the 1D image, it’ll be used in the pixel shader just like a curve modifier
  • Modify the final color of your pixels with this (GLSL) code:

vec3 curvesColor;

curvesColor.r = texture1D(curveTex, pixelColor.r ).r;
curvesColor.g = texture1D(curveTex, pixelColor.g).g;
curvesColor.b = texture1D(curveTex, pixelColor.b).b;

gl_FragColor.rgb = curvesColor;

And voila ! Here are some screenshots I took in Reverse (my end of studies project [team of 6 students]), maybe not the best example for this kind of effect but anyway:

Without
reverse no cross processing shader

Without
reverse no cross processing shader

With
reverse no cross processing shader

With
reverse no cross processing shader

With
reverse no cross processing shader

With
reverse no cross processing shader

In fact it makes me think about color temperature again, but this time the color is modifyed per channel and is dependent to the color components themselves instead of the luminance component of the pixel.

One more screen with all the effects combined during turbo (dolly zoom, desaturation, radial motion blur):

With
reverse no cross processing shader

Well, I guess these are the first public screenshots of the final version of the game 🙂

Oh and by the way

Advertisements

2 comments

  1. HI,
    Can you write out the full GLSL fragment shader math and the corresponding
    vertex shader?

    Thanks
    Adrian


  2. […] or adjustment layer in Photoshop but blended in Color mode, which reminds me Color Temperature and Cross-Processing […]



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: