LCD Shader

Today I used my lunch break to get started on an LCD shader for my current project. While the montior casing looks more likley to be CRT, I really like the subpixel element and moire looks that LCD provides.


To create the effect above, I pixelated the main image then multiplied it with the RBG component as a texture.


To pixelate the texture, I multipled the texture by the number of pixels I wanted on screen, rounded that to create a grid, then divided it by num pixels to bring the tiling back down, but clamped to the grid. (Shown below with a 10 pixel grid for ease of understanding – the image at the top uses a 100 pixel grid.)

1  2  3

fixed4 pixel = tex2D(_MainTex, (round(i.uv * _Pixel) / _Pixel));

I then made sure that the uv used to sample the rgb component texture was multiplied by the pixel value, to have them match up.

Capture5   Capture6


Intel Texture Works

Something I’ve been having a look at recently is the intel texture works plugin for photoshop. Texture compression is something new for me, but incredibly important for bringing games into memory budget and reducing shader compilation times.

Grab it here:

This plugin uses BCn compression, which has been used for a while but is new to me. It adds two new types of compression: BC6, used primarily for HDR textures, and BC7, a high quality RGBA compression format.

There’s a great explanation on BCn compression by Nathan Reed here: If you can’t be bothered to read that, the tldr; is that the types up to 5 sample a texture in  4×4 blocks, each in the same way, and 6 and 7 sample each block in the way that is most effective for that set of pixels.

BC1 is RGB + 1bit Alpha, BC4 is single channel greyscale, BC3 is RGBA (essentially BC1 + BC4) and BC5 is a two channel compression format that is often used for tangent space normals (its basically 4 BC4s). BC6 is designed for HDR and BC7 is a higher quality version of BC3, using the method described above.

I had a quick go earlier with some images grabbed from and they were very promising! I think these look great, and can barley tell the difference. The sharpness of the images isn’t spot on, but you’d really need to be looking for differences to notice it, in my opinion. These are both compressed from jpeg to dds using the BC1 format, and memory cost has been reduced by at least 60% in both cases. (The images have then been made into jpegs for the blog, and further compressed by web, but we can still see the comparison.)

Marble Compaison

Rock comparison

I’d like to see what this does to hand painted textures, so I’m going to run some of the textures from Presence (my honours project for university) though the tool and see what savings I could have made had a been a little more technical at the time!