As far as I know, this is made using lightmap, how I can use this technique in my scene in order to reach similar shadow effects? Should be dynamic, cause my application is interactive.
Is there an alternative to lightmapping in three js that can give me similar results?
By other hand, I want to have realistic reflections in some sub objects of my models (for example, the following ceramic)
Which is the best way to do this in three js? I found that I can create a material from a CubeCamera like in the following examples provided by three js:
But that implies that these materials must be applied to each sub-object of all the objects in the scene that should have reflections. Is there a better way to do It?
Yep, tons of tricks and years of work :') The point is that there’s more to light than just light - what makes scene look realistic is the light that bounces of the objects, not the one that comes from a light source.
To create actual photorealistic shadows - take a look at progressive shadows. It does take a few seconds to generate, but the effect is similar to the one you’d get from raytracing.
there is about no chance you will get a scene like that without baking, threejs isn’t a raytracer and the existing runtime solutions are either painful to use or very expensive, or both.
baking unfortunately comes with some limitations (you can’t move objects around much). baking is very complex, one of the few tutorials that’s really going into detail is bruno simons threejs journey. in that course he’s baking scenes, and at the same time introduces dynamic elements to it, which might be what you’re looking for.
I think that for the shadows+lights it is going to be hard to apply the lights dynamically and see the effect of the shadow in real time with a good efficiency.
One thing you didn’t research (and I also haven’t experimented with much) is lightprobes and lightprobe volumes, which should be more useful for moving objects.
Yeah, I only know the examples @Chaser_Code shared, aside from the couple of official examples that are not very interesting.
There was some cool work done on this around 2019 when the functionality was added to three.js - but there was never any good documentation or killer examples so I don’t think many people know about it, or how to use it, outside of the 3 or 4 people involved in writing the code. I don’t even know if it’s production ready or if the implementation was completed yet.
right, i have no idea what this is or does, never heard of it but would love to try it. from how it looks these spheres are just in debug, and they … pre-calc emission or something so that it’s not so expensive? but can it do shadows?
ive dug out a quick test case with reflections and simple shapes: Camera pan - CodeSandbox would it be possible with a lightprobe for these objects to pick up one anothers colors? like the sphere in the middle would be a little yellow on the side due to the plane on the right etc? and does anyone know how? that would be an amazing tool to have.
That’s the idea. Especially if you can bake the lightprobes offline (much cheaper than CubeCamera online) you can pick up diffuse colors from surrounding (static) objects. Once you have a volume there are basically two ways to apply that light to the object:
(A) on the CPU, interpolate SH values for the center of the object from the nearest ~4 probes
(B) on the GPU, interpolate SH values at each vertex or fragment
In this demo you’re seeing (A), it works well for small dynamic objects and is very cheap. For larger objects (B) would look better as there’s more lighting variation across the object.
i’ve been trying to implement it from your demo, but these classes don’t seem to exist in threejs, for instance lightprobevolume. when i tried to port they’ve unfortunately fallen behind, they were not easily compatible with class based threejs. is this from an unresolved pr?
It is possible to reach such quality, but it would also slow down the rendering in real time, the best way to achieve photo realism in threejs is to use baked assets.
