Rendering with proper reflections and shadows (photorealistic) using WebGL and three.js

Question

I've been trying to render a scene which was already created using 3ds max. I've exported all the objects as obj files and used three.js libraries to render the scene on the browser. For reflections I tried using Cubecamera method but it's not giving the results that are expected. For shadows, I tried shadow maps but I guess I didn't use them right. I'd like to know if it's possible to do whatever I want to usings just the three.js and WebGl. If yes, somebody please tell me how. Also, I know the reflections and shadows are easily generated by the 3ds max software using the Mental ray renderer. So is there any similar rendering technique in three.js which helps doing it easily?

This is similar to what I want

Answer 1

It is quite a big question to answer unfortunately and there are many methods for doing real-time reflections. The way Mental Ray computes reflections is entirely different from the way you would do them in real-time using WebGL (or even OpenGL).

The simplest method is to render your scene twice, the first time you flip the scene upside down (mirrored along the plane of your reflected surface). This is (as far as reflections go) quite simple, but does limit you to a single plane of reflection. Given your image, and that the only reflective surface looks like the floor. That might be the best choice.

You can even render the mirrored scene to a texture, allowing you to manipulate it later on in the pipeline (for example, if you'd like the image warped as though looking through water). Or perform multiple reflections around different planes. The rendering cost can increase dramatically of-course.

You can use a pre-rendered cube map as you have mentioned in your original post. Though you may need more than one, for this scene. By placing points in the scene that denote where each cube map should be captured. Typically these would be of a low-quality, comparatively, to keep memory usage low.

A third option is screen space reflection mapping (a reasonable introduction can be found http://roar11.com/2015/07/screen-space-glossy-reflections/) which do work but have some issues of their own (edges of the display) to solve. You will typically find all of these in a full game engine (Unreal Engine, https://docs.unrealengine.com/latest/INT/Resources/Showcases/Reflections/, for example).