Textured lighting as a spotLight.map property

[mbredif]

This PR is a second attempt at #13057, by adding a colorMap map property to the SpotLight class :

http://localhost:8000/examples/webgl_shadowmap_viewer.html

This PR generalizes the single-channel cookie concept to a 4-channel texture : the directLight.color of the spot light is mixed with the rgb value of the colorMap lookup with a ratio corresponding to its alpha value : mix( directLight.color, spotColor.rgb, spotColor.a ). The cookie effect is reproduced using pixel values (0,0,0,1-cookie_value).

Comments :

• with this PR, each spotLight takes an extra texture slot (similar to Implement Projectors to support textured lighting #13057 (comment)). Is it an issue ? any idea ? (the second commit 8d683b8 addresses this issue.)
• it is not currently possible to control the geometry of the spotlight to match a known PerspectiveCamera (the spotShadowMatrix is used for texture lookup). This will be tackled in a follow-up PR if this one gets merged.

[looeee]

Live example

[haroldiedema]

Build files should not be part of the PR.

[mbredif]

good to know !
Rebased on three.js/dev without the build files.

[mbredif]

(Rebased on dev after shadowmap/fog was fixed by #14617)

The second commit ( 5ccf289 ) adds :

• documentation, including an extended doc example (including a video texture) with switchable textures/video. When no texture is selected, no extra texture slot is used.
• examples/webgl_shadowmap_viewer is still working, but takes one less texture slot (as one of the two spotlights has no map)
• SpotLight.colorMap is renamed to SpotLight.map for simplicity, but I can change it back if requested.

This PR is now ready for review.

[mbredif]

@mrdoob @WestLangley , any feedback on this long awaited feature ?

[WestLangley]

I definitely support this feature.

I am sure working, live links would be helpful to @mrdoob.

[mbredif]

I am sure working, live links would be helpful to @mrdoob.

sure !

• SpotLight doc that introduces the new map property.
• webgl_lights_spotlight example : you can select different project textures using the map dropdown list (defaults to 'none')
• webgl_shadowmap_viewer example : the spotlight projects the (much too faded!) uv-debuging texture.

[danielgranat]

@mbredif I think this can be a great addition to the Threejs. At my company, we are trying to use this branch, and being a noob with shaders, how would you handle rotation of the texture (maybe use Texture.rotation?
Is it possible to change the alpha so the image isn't transparent?

[mbredif]

Texture.matrix and its defining parameters (such as Texture.rotation) is not yet supported in this PR.
I see 2 solutions :

• either you rotate the camera in 3D around its optical axis to fake the texture rotation, or
• you add support for the Texture.matrix by setting up a mat3 uniform and applying it in the shader in this loop :

  three.js/src/renderers/shaders/ShaderChunk/lights_fragment_begin.glsl

  Line 53 in b6b8ce2

  for ( int i = 0; i < NUM_SPOT_LIGHT_MAPS; i ++ ) {

  , the application should be similar to :

  three.js/src/renderers/shaders/ShaderChunk/uv_vertex.glsl.js

  Line 4 in 2ad018c

  vUv = ( uvTransform * vec3( uv, 1 ) ).xy;

  , )

Please file a PR against mine if you go for the second option ! :)

[danielgranat]

Thank you! I will try the second option.

[WestLangley]

This was an excellent contribution by @mbredif, IMO.

I am disappointed it has not received the attention it deserves.

[marcofugaro]

So sad this was never implemented, would have been awesome

[mbredif]

Let me correct : textured spotlights ARE implemented in this PR. However it has not been merged yet...
I do not know what s blocking it though.

[Mugen87]

Sorry, this PR has lacked attention in the last month. I would also like to see this feature merged!

However, I would only put effort in resolving the merge conflicts if @mrdoob is fine with this. Maybe he wants to head in another direction in context of textured lighting.

BTW: I think one spotlight example is sufficient to demonstrate this new feature. Hence, I would undo the changes to webgl_shadowmap_viewer. There is also one issue in webgl_lights_spotlight example. If I switch to the video texture and then to a different one, the video is still playing in the background.

[dlawrence2060]

Any idea if this will get merged soon?

[mbredif]

Not my call unfortunately... I can update the PR if I get a green light that this is very likely to be merged by a maintainer @mrdoob @WestLangley @Mugen87

[WestLangley]

@mbredif At this point, you should get buy-in from @mrdoob before investing your time.

@mrdoob Will you please render a decision?

[carstenschwede]

@mbredif Not sure if having a milestone assigned can be considered "likely to be merged", but I would love to see this PR updated to current dev. Really nice work!

[mbredif]

@mrdoob I did not see you attached a milestone. Is it a green light that says that a rebase is likely to be merged ?

[mrdoob]

Yes! Sorry for the... 2 years late review... 🙁

I think the (This PR is the geometric counterpart of #14621) comment in #14658 made me think that the PRs were entangled and I never knew which one to start reading first 🙃

Looks good to me! Any chance you can rebase/resolve the conflicts?

[trbll]

Did this not get added in r120 as planned? Looks great and am really looking forward to having this support built in. Thanks!

[carstenschwede]

Friendly pinging @mbredif cause I am not sure he receives notifications.

[mrdoob]

@trbll The PR has conflicts...

[trbll]

@trbll The PR has conflicts...

@mrdoob Yeah, I see that now. Thank you and sorry about that. Just got going too fast in anticipation after I saw r120 had dropped. Appreciate all that you do!

[mbredif]

Sorry for the delay, I started rebasing this very old PR but it had a lot of conflicts due to the reformating of the glsl code. I was too busy to polish it but I am quite there.

[mbredif]

I got it working again : dev...mbredif:spotLightMap2
Should I file a new PR or just push force on this one ?

[mrdoob]

Whatever is easier for you 👍

[mbredif]

rebased version of this PR is available at #20290