#define SCREEN_WIDTH 1920
#define SCREEN_HEIGHT 1080
#define INV_W (1.0 / SCREEN_WIDTH)
#define INV_H (1.0 / SCREEN_HEIGHT)
float3 cheapBlur(float2 texcoord)
{
float3 tl = tex2D(s0, texcoord + float2(-INV_W, -INV_H)).rgb;
float3 tm = tex2D(s0, texcoord + float2(+0, -INV_H)).rgb;
float3 tr = tex2D(s0, texcoord + float2(+INV_W, -INV_H)).rgb;
float3 ml = tex2D(s0, texcoord + float2(-INV_W, +0)).rgb;
float3 mm = tex2D(s0, texcoord + float2(+0, +0)).rgb;
float3 mr = tex2D(s0, texcoord + float2(+INV_W, +0)).rgb;
float3 bl = tex2D(s0, texcoord + float2(-INV_W, +INV_H)).rgb;
float3 bm = tex2D(s0, texcoord + float2(+INV_W, +INV_H)).rgb;
float3 br = tex2D(s0, texcoord + float2(+INV_W, +INV_H)).rgb;
float3 sum = tl + tm + tr +
ml + mm + mr +
bl + bm + br;
return sum / 9;
}
float3 properBlur(float2 texcoord)
{
float3 tl = tex2D(s0, texcoord + float2(-INV_W, -INV_H)).rgb;
float3 tm = tex2D(s0, texcoord + float2(+0, -INV_H)).rgb;
float3 tr = tex2D(s0, texcoord + float2(+INV_W, -INV_H)).rgb;
float3 ml = tex2D(s0, texcoord + float2(-INV_W, +0)).rgb;
float3 mm = tex2D(s0, texcoord + float2(+0, +0)).rgb;
float3 mr = tex2D(s0, texcoord + float2(+INV_W, +0)).rgb;
float3 bl = tex2D(s0, texcoord + float2(-INV_W, +INV_H)).rgb;
float3 bm = tex2D(s0, texcoord + float2(+INV_W, +INV_H)).rgb;
float3 br = tex2D(s0, texcoord + float2(+INV_W, +INV_H)).rgb;
float3 sum = tl * tl + tm * tm + tr * tr +
ml * ml + mm * mm + mr * mr +
bl * bl + bm * bm + br * br;
return sqrt(sum / 9);
}
After watching a minute physics video, I was reminded that colour is not stored / represented linearly. Because as humans we find it easier to see the differences in darker colours / lights, we store the square root of the colour value so that we give more weight to the darker tones. This means however, that when we do a calculation on a colour, we are doing a calculation on the square root of the value we want. So in order to do the calculation correctly we must square the colour first, then do the calculation, then square root it again. This is demonstrated by this picture:
This shows how an average might be calculated. So I decided to do a little experiment. The differences are pretty stark when blending / blurring bright and contrasting colours such as red, green and blue. But what about in a game? Time for some shaders:
Here are the outputs: The original scene, the cheap blur, and the proper blur.
There is not much of a difference. The biggest difference is the water, but I suspect that is caused by the position of the fog. So you might as well spare yourself those 10 extra calculations including that expensive square root.
0 Comments
Leave a Reply. |
AuthorHi there, the name's Matthew Jenkinson and I'm currently working at Firesprite. In my spare time I work on programming projects like you see here. Archives
March 2021
CategoriesLinks to each effect in order:
|