Textured RectAreaLights, what is the state of things?

Hi all,

I would like to know what the state of things is for supporting textures on RectAreaLight planes. This is similar to (but distinct from) textured spotlights, for which there are demos.

Area lights are a great model for studio-style lighting, and the work on RectAreaLight so far is just stunning. In real life though, area lights rarely have a perfectly rectangular shape and uniform emission of light. Being able to texture area lights would increase the value of area lights immensely, making them much more creatively useful and flexible.

It is relatively easy to hack the code to texture direct, shiny reflections of area lights, but accurately portraying an area light texture in rough and diffuse reflections seems like it will be a lot more involved. I assume this will need to involve PMREM or similar filtering approaches, but I’m not super strong on exactly why or how… :sweat_smile:

Is anyone actively working on this now? If not, can anyone offer advice on how this might be implemented in a Three-friendly way?

At least at GitHub there is no feature request for textured area lights so I believe the entire topic has never been discussed.

Thanks Michael.

I am looking into implementing this feature for our own projects but would love to see it make its way into the library too.

Would you welcome a gh feature request, or is further discussion here helpful before that?

While I would gladly welcome a seasoned Threejs dev implementing this, I’d otherwise also be happy to receive guidance in how to tackle this myself. Or anything in between.

It would be a great start if you could implement a POC and share the commit in this topic. If you don’t get enough response/feedback here, feel free to file a draft PR at GitHub then. There are few things that needs to be considered:

  • If the feature requires a lot of code, it is unlikely to get merged in WebGLRenderer. The more compact the feature is, the better.
  • If a compact solution is not possible, maybe it’s possible to implement the POC as a pure addon/example.
  • Alternatively, WebGPURenderer with its new node material might be a better place. The new approaches makes it easier to implement new materials or light types/features. This path will require more time though since the renderer is quite new, WIP and there are no documentation/tutorials so far.

This would be a really cool feature. I’m currently working on https://font.skin which is a system to create cool shader-based text effects which can be used as billboards, on shop signboards, club and top of building logos etc. Having an area light coming from them would make them twice as cool. I’d like to know what I’d have to implement to make them generate something that is being utilized by a real-time animated area lighting shader. Is it using just the orignal texture or needs processing? A relevant processed map can be generated in an extra framebuffer attachment if it needs blurring or other preprocessing.

Someone built a prototype for PlayCanvas. The code, if available, may be similar to what’s needed Implement Textured Area Lights · Issue #4320 · playcanvas/engine · GitHub