Demo: https://lwo219.csb.app
Sandbox + code: Building live envmaps - CodeSandbox
Basically this allows the env map to be declarative, so that we can compose its contents. Anything in the eco system goes, things can animate in there and so on. I’ve also abstracted pseudo light formers like ring lights or softboxes. All in all this makes it incredibly easy to create good looking scenes with little to no performance overhead or effort.
Looks very nice, not sure I understand what you mean about it being composable and animatable etc. For the sake of those who are interested, would you describe the feature set a bit more and how to use it?
env maps are usually thought of as a static cube map, an image projection. this on the other hand portals components into the scene environment. they will now emit light and reflect upon surfaces. that makes it almost trivial to get “pro-looking” scenes with the smallest imaginable effort.
say we’re starting out with some plastic looking CGI fare:
a few planes and circles here and there, acting as lights with zero expense, similar to real light formers in studio photography, and it transforms into this:
if these were rect area lights you could not have more than 1 or mobile would already fall behind, but now you can have an infinite amount. and since the environment can be live they can move around. if a component had, say, a sphere dashing around left and right, it would still do that within the environment. this is what these moving spots are, just animated circleGeometries.
This is really cool and I love your demo. Can’t wait to try it out!
Two questions:
This is really cool and I love your demo. Can’t wait to try it out!
thanks! 
- How does it differ from the dynamic cubemap example ?
it’s quite similar minus the composition part ofc, that’s where react really makes a difference. the lights that run over the car for instance, that’s a regular component that you could also throw into the scene and you’d see circles moving along in the sky.
- If you want to show the meshes in the screen is there a way to do that?
<Environment background>
and now you see the “lightformers” (they’re regular meshes with overblown colors).
in general environment can write into either scene.environment, scene.background or both:
// scene.environment, no background
<Environment />
// scene.environment and scene.background
<Environment background />
// scene.background, no light, no reflections
<Environment background="only" />
I meant if I want a mesh that’s in the scene to also be rendered into the dynamic environment, how do I do that? For example, say if I wanted to create the three.js example with a torus, cube, sphere that all reflect each other dynamically. I guess I’d need to create a copy of each component?
i guess like this: Basic demo (forked) - CodeSandbox combining it with a cubecam and another env just for the background.
im not sure how feasible something like this would be in a real project though. cubecam renders the scene 6 additional times every frame. you could lower the resolution but it seems limited.
ps. in your demo, i don’t think the sphere is reflected. it sits in the middle where the cubecam is located, it most likely can’t “see” it.
pps this would be extremely interesting in a fps game, moving the cubecam with the player. for pseudo screen space ambience. the resolution could be extremely low for that, 16x16 pixels maybe + fog to limit draw range.
Such fantastic support for r3f. How to implement it in vanilla threejs?
const g = new PMREMGenerator()
const t = g.fromScene(yourScene)
scene.environment = t.texture
or something like this. “yourScene” now contains simple planes with colors that go out of 0-1 into hd range, so they start to act as lights.