Techniques to render photo-realistic three.js

I’m trying to make an application where a user can design something using basic shapes, after which those shapes will be rendered photo-realistically on the browser for other users to browse and explore.

How do I render photo-realistic three.js without taxing a user’s GPU too much? I’ve thought of converting the scene to a panorama image in the server and then serving that back to the user, but I need the scene to have object picking, which I don’t think is possible with panorama.

Would it be feasible to have a setup similar to remote gaming? So the photo-realistic scene would be rendered on our own servers, which would be streamed to a user’s browser; the browser will receive any user inputs and send it back to our servers to change the scene accordingly and re-render.

Or are there any three.js techniques that may help me do render object-pickable photo-realistic scenes? Any suggestions or examples of existing setups are welcome. Thanks!

Check out the source of these examples. They use a PMREM which gives pretty close to photorealistic results.

There’s some discussion of server side rendering and streaming here: