Techniques to render photo-realistic three.js

[Kim_Young_Jin]

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!

[looeee]

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

https://threejs.org/examples/webgl_loader_gltf.html
https://threejs.org/examples/webgl_materials_car.html

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

Server-side rendering and sending data to the client as JPEG (or PNG) - with Client side interaction data

QUESTION: Hi, I am very sorry if this question already exists, but I have not been ale to find anything yet. SO, here goes, I am working on a project where I want to render a 3d scene on the server-side and then send over the scene as an image. Up to this point, I was able to find quite a few options - most relevant of those are: bsergean example However the second part of the issue remains unanswered. Once I have done server-side rendering and have sent the scene over to the client as an imag…