Three.js photorealistic shadow

Hi, there.

It’s my pleasure to ask my 3rd question.

The problems are:

  • The shadow of any object is not realistic.28%20AM

  • Not same feeling as blender.
    I am working with Blender for modeling, mapping and exporting as gltf/glb.
    But the view feeling of each model on Web browser, it’s not same as on the blender.
    Of course, I didn’t exported light and camera. Just models with textures(diffuse, bump, emissive…).

Hopefully, would like to hear your advice.

What does your Blender output look like? Pre-rendered graphics and realtime graphics are computed differently, so chances are you’ll never achieve the same quality with WebGL as with the Blender rendering engine. With that being said, you might want to increase your LightShadow.mapSize to something higher than the 512x512 default. “Higher values give better quality shadows at the cost of computation time.”


You can’t really compare shadows from software like Blender with realtime graphics, there is no contact hardening or blurring etc, it is classic shadow mapping with percentage close filtering to soften the edges.

If you want photorealistic shadows without knowing to implement the most advanced realtime techniques, you can still bake them into maps in blender, but you wont have dynamic shadows then.