three.js - 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 texture for a light, something like this: http://www.idjnow.com/ProductImagesLarge/GOBO-GLASS1C.jpg The texture would lower the intensity of the light, producing a shadow-like projection.

I think I have the "attaching a texture to light and passing it as a uniform for lookup in shader" covered, although haven't been able to test it, because I'm having problems calculating my position in the spotlight cone / spot.

I see the light contribution of spotlights is calculated here (I'm modifying the Three.js source directly, instead of creating my own material):

https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLShaders.js#L1013

The spot of spotlight is a circle, right? Or ellipse if its on an angle. So I would need to add some code here, that would tell me where in the spotlight spot I am (xy coordinates). I could map these coordinates on a texture lookup, lower the spotDiffuse accordingly, and hopefully have working gobo projection.

How could I calculate these coordinates in relation to each light?

Or is there better way to implement light cookies / gobos / light textures / light masks in Three.js? I see it's a popular feature in game engines, would be nice to have something like that built-in. http://docs.unity3d.com/Documentation/Components/class-Light.html describes pretty well what I'm looking for (the cookie parts).

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.