Calculating the position on spotlight cone in Phong shader

Question

I\'m trying to implement light cookies (or gobos, or light textures, or light masks) for THREE.SpotLight in PhongMaterial in WebGLRenderer. The aim is to be able to attach a

Answer 1

Have a look here: http://www.evpopov.com/threejstest/test_spot_projtexture.html

I think it is doing what you want.

It is in fact standard projective texturing, except the texture is not used "as is" but instead attenuate the lighting calculation.

For this sample, I have used the alpha channel of the projective texture as the attenuation factor.

To create the vertex/fragment shaders I use, I have taken the vertex/fragment shaders from the phong material and kept only the relevant part for spot light rendering. I have also setup a constant ambient color to avoid having black areas (outside of the spot range).

The specific code for projective texturing has comments starting by // in the vertex/fragment shaders, if you want to reuse that in your own shaders.

You also have to generate the projection matrix corresponding to your light: the makeProjectiveMatrixForLight function does it for you => it's nearly the same code you can find in three JS source code for shadow mapping.

When launching the example, the wall rotates and the spot light stays fixed. You can make the target of the spot light moves by changing moveLightTarget to true, in which case you would want to set rotateCube to false to better see what is going on.