Funcionamento

Clique com o botão esquerdo e arraste para alterar a rotação do objeto.
Clique com o botão direito e arraste para alterar a iluminação.

A altura do objeto da cena é 20. Quando a opção "Utilizar Point Light pixel a pixel" estiver marcada, a distância horizontal entre o centro o objeto e o ponto luminoso é 10.

Informações úteis

Dê uma olhada no código fonte utilizado nessa página, pois ele tem muitos comentários!

Scripts adicionais utilizados:
Gamepad.js
Vector3.js
Matrix4.js
Program.js

Shaders utilizados:
Fragment shader
Fragment shader - Point Light
Vertex shader
Vertex shader - Point Light

Sobre a iluminação

Quando a opção "Utilizar Point Light pixel a pixel" estiver desmarcada, a iluminação será calculada ignorando a real posição da fonte da iluminação, considerando que ela esteja infinitamente distante, de modo a fazer com que apenas sua direção importe. Isso é basicamente a relação entre nós e o Sol, e é conhecido como "luz direcional" (Directional Light). A interação da luz com o objeto será calculada para cada vértice do objeto. Essa é a forma mais comum de iluminação utilizada, por fornecer um resultado bem aceitável com um custo computacional relativamente baixo.

Em termos de custo computacional, aparece a iluminação do tipo pontual (Point Light), onde considera-se a posição real da fonte luminosa e sua distância com cada vértice do objeto, simulando o efeito de uma luz unidirecional, como as utilizadas em casa.

Ao alterarmos o momento quando os cálculos da iluminação são realizados, fazendo com que eles passem a ser realizados para cada pixel (fragmento) da imagem, em vez de para cada vértice do objeto, os resultados ficam bem mais precisos, mas com um custo computacional bem maior! Nesse novo cenário as luzes direcionais são, novamente, calculadas mais rapidamente do que as luzes pontuais.

Quando a opção "Utilizar Point Light pixel a pixel" estiver marcada, a opção mais cara em termos computacionais das quatro mencionadas, luz pontual calculada pixel a pixel, é utilizada.

A opção "Utilizar atenuação conforme o alcance da Point Light", quando desmarcada, faz com que a intensidade luminosa não sofra atenuação conforme a distância, diferente da vida real, onde quanto mais distante um objeto está da fonte luminosa, menos iluminação ele recebe.

Mais informações sobre iluminação:
Light Types (Direct3D 9)
Mathematics of Lighting (Direct3D 9)
Diffuse Lighting (Direct3D 9)
Specular Lighting (Direct3D 9)
Attenuation and Spotlight Factor (Direct3D 9)
I'm doing it wrong - Light attenuation (Blog)

Como e onde testar

Chrome 9+ (about:flags)
Firefox 4+ (about:config)
Opera 12+ (about:gpu e about:config ver mais aqui)
Safari 5.1 (Mac OS! -> menu Develop -> Enable WebGL)
Internet Explorer 11+ (Aparentemente existe um plugin chamado IEWebGL que acrescenta suporte a outras versões, mas nunca testei)

Se você tiver um joystick com controles analógicos, é possível utilizá-los para controlar a iluminação e a rotação do objeto (por hora, aparentemente, apenas Chrome e Firefox suportam essa funcionalidade...). O primeiro botão do controle alterna entre os dois tipos de iluminação. Enquanto um joystick estiver conectado, ele irá sobrepor os comandos do mouse!