I am trying to implement a "day-to-night"-filter (as commonly used in cinema) for a 2D game (XNA) by using a full screen HLSL pixel shader. The aim is to transform any bright and colorful image into a dark and bluish night version of that image somewhat like:

enter image description here

Conceptually, my ideas would be to:

  • Decrease brightness
  • Merge blueish tinted greyscale version of image with original image
  • Increase contrast

The current shader I came up with is:

// Look up the color of the original pixel
float3 colorOriginal = tex2D(TextureSampler, texCoord);

// Get corresponding greyscale value (adjusted to human vision)
float greyscale = dot(colorOriginal, float3(0.3, 0.59, 0.11));

// Merge and tint
color.rgb = lerp(colorOriginal, colorOriginal * float3(pow(greyscale,6), pow(greyscale,6), pow(greyscale,3)), timeFactor);

The result is still not completely satisfying. How could I improve this?

  • 3
    \$\begingroup\$ going to need screenshots of what it starts with, what it currently does, and if you're able, a modified version of exactly what the image is supposed to achieve. \$\endgroup\$
    – Phil
    Nov 22, 2013 at 3:03
  • 1
    \$\begingroup\$ Do you have any information on how these filters are implemented in cinema? Or how they can be done in Photoshop or similar? It can be possible to translate that into a roughly equivalent pixel shader. \$\endgroup\$ Nov 22, 2013 at 3:09

1 Answer 1


Basicly, postprocessing might be a bad way of doing "night time". "Night time" consist of alot of diffrent aspects floating into one bigger picture.

To get similar results to what happens in the image here is not a simple task. The light and shadows play a big part of this, aswell as the moonlight that they have.

What you could achive with post processing here is more of a tonemapping and filmic grain. Now i dont know your limitations and so on, so itś easy just to say that "this wont work". But elaborating your answer a bit around how your current game looks ( an image for instance would be of greate help )

But for your Grayish color tone, you have to narrow down the range betweeen the colors, so that you store 255 colors in a range from 0.2->0.4. from there you can adjust the brightness to what ever you want by simply adding a constant value.

For bluring, you probably want to do some sort of "Range", where you add blur to the image. otherwise the image will lose itś estethics. So say that you do an avrage check of the 4 adjesent pixels and if the range is in the topp then you can blur that pixel.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .