How to bake RectAreaLight into texture?

Hi there! In my scene i have a room and lights, where the room presented by four meshes with PlaneGeometry, and lights presented by RectAreLights objects. I need to bake the shadows produced that lights into texture of each room wall. How is it possible to implement? Is there an idea?

1 Like

Hello! Here baking of directionalLight shadows, not rectacngle: three.js examples

In my case, I want to bake the distribution of light to the surface, but not a shadow of any mesh. And DirectionalLight is not suitable for my purposes.

Myabe cubeCamera? It can make screen shot of 6 sides and then apply like envmap:

1 Like

I don’t actually need an envmap, instead i to need bake a lightmap into each wall texture, and after process it by shader.
But rendering each wall separately to a renderTarget and reading pixels from it aterwards seems like a good idea.

Blender! Youtube - Lightmap Baking in Blender for Three.js.

1 Like

You can bake it in blender and export as udim textures (for acceptable resolution). So you’ll need a custom shader for this

Obviously, if everything would be so simple, I would not ask a question here

At every time when position of any light is changed, the lightmaps is should be rebaked. Therefore no, variant with prepared lightmap is not suitable for my task.

Oh, my bad for stating the obvious. I assumed saving time was the goal. not casually rewriting Blender (You know, that free, open-source miracle).

Who needs weekends anyway?

Sorry, if my answer seemed rude to you. I am only meant, that my task is more difficult .

1 Like

No hard feelings at all, I perfectly understand. My first answer was a bit on the short side. I just didn’t want to overwhelm you with an 8-hour tutorial where the author goes all-in using Blender.

That said, if you’re aiming for photorealism, baked lighting, shadows, and textures are essential, and honestly, I think Blender is the best tool.

2 Likes

To every walls fit renderer, camera size to plane and use renderToTexture. Maybe also wall must be black.

Yeah, that’s exactly how I’m trying to get what I want now. Render each wall to a separate renderTarget, then convert to ImageData using renderer.readRenderTargetPixels.


How you can see It works, but the result leaves much to be desired.

Any ideas on how to make the render smoother?

Looks bad. Maybe after converting to ImageData, texture lost HDR values. For this color banding issue i use dithering: mesh.material.dithering=true;

1 Like

Unfortunately, setting the dithering property do not affect the final result.

How looks scene if apply renderTarget textures instead ImageData?

1 Like

And set HalfFloatType for the renderTarget texture

1 Like

It looks completely black.

Try add generateMipmaps=true; for RenderTarget texture