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:
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)