Sorry, it appears you don't have support for WebGL.


In order to run this demo, you must meet the following requirements.

  • You are running the latest version of Mozilla Firefox, Google Chrome, or Safari.
  • You have a WebGL compatible video card with the latest drivers.
  • Your video card is not blacklisted. You can check the current blacklist on Khronos.

Some browsers may require additional configuration in order to get WebGL to run. If you are having problems running this demo, visit the following sites.

Loading %

Ambient Colour

Diffuse Colour

Intensity

Gamma

Enable

Brightness

Contrast

Steps


When you render graphics in linear space, the resulting image you see is actually darker than it should be. This is because your monitor is applying a gamma to the pixels. To account for this, you must apply the inverse gamma to the pixel before sending it to the monitor. The result you see is the correct brightness.

The left side shows a gamma corrected render and the right side shows a gamma uncorrected render. The correctly rendered image is actually the one on the right side. Why? Because textures are usually already gamma corrected. The image on the left shows the texture being gamma corrected twice, causing it to be brighter than it should be.

When you use gamma corrected textures with linear lighting and gamma corrected fragments, you end up with an incorrect result. The texture is gamma corrected twice, causing the final render to appear brighter than it should be.

To render the correct result, you must uncorrect the texture by applying a gamma on it. You could do this as a pre-process to save on performance from runtime conversions. The linearized texture can then be used throughout your renderer. In your final fragment shader, you apply the inverse gamma to the pixel to produce the correct illumination.

To calibrate the perceived gamma, adjust the brightness and contrast controls such that the gradients below fall within an acceptable range. You should only just barely notice a difference between each of the black and white gradient blocks. This test works best when running in fullscreen with a completely dark background.