Best way to display photorealistic 3D in the browser?
11 comments
I would look into using spline.design or react three fiber for this. Sketchfab is an ok option as well but not as customizable and gets expensive if you want to get rid of their watermark.
I tried all of 3 of them for my hobby airline 3d cabins project lately( https://www.seatmap.ai/3d-seat-maps ) . Started from react three fiber but soon realized that it would be super easy for a user to download complete 3d model. So, I moved to sketchfab where the model is shown using their custom viewer from which it's much harder to nick the full model. But unfortunately it's much harder to customize camera movements and annotations there and I had to get their paid plan to get rid of their branding. Lastly, I started playing with Spline which is so easy to use and I love this thing. Having no previous 3D modeling experience, I can create a lot of cool things there super quickly. But it has some drawbacks as well -my 3D cabins are rather large and I'm not that good at optimizing 3D scenes. Spline's upload limit is about 60 mb. Also, their embeds could be a bit buggy at times. But it's still my favorite so far if I were to do a quick product configurator which user can explore on any device.
It’s quite state of the art, but Gaussian splatting can be considered.
https://projects.markkellogg.org/threejs/demo_gaussian_splat...
https://projects.markkellogg.org/threejs/demo_gaussian_splat...
These were terribly laggy for me on a Pixel 7
Strange. Were you running out of battery? This method is relatively lightweight and runs smoothly on my older iPhone.
Nah, plugged in. Maybe the Pixels just aren't very powerful? It feels like 15-20 fps to me. It was smooth on my laptop (M2 Max).
Seems like you’re looking for something to scrub rendered frames. Otherwise, just upload to Sketchfab and embed their viewer. It’s very capable and purpose built for what you’re looking to do.
This. No need to reinvent the wheel. If you're prerendering frames, you can just use a 360 viewer like https://www.npmjs.com/package/js-cloudimage-360-view
If it's real 3d, the Sketchfab viewer is nice indeed. Might not be photorealistic but close enough. There's also https://www.npmjs.com/package/@google/model-viewer
There's probably a ton of libs for either approach, just try a few and pick the best one for your use case.
You can also tie it into scroll state and a narrative, like https://www.scanofthemonth.com/scans/coffee
If it's real 3d, the Sketchfab viewer is nice indeed. Might not be photorealistic but close enough. There's also https://www.npmjs.com/package/@google/model-viewer
There's probably a ton of libs for either approach, just try a few and pick the best one for your use case.
You can also tie it into scroll state and a narrative, like https://www.scanofthemonth.com/scans/coffee
maybe you can try 'spriteSpin', a jquery plugin for creating rotating viewer. you can input all the images from different angles (seems reasonable for you cuz you mentioned your capability of pre-render these in Blender)
Texture maps on a cube is the simplest thing that might work.
Good luck.
Good luck.
Rather than doing it from scratch, I was thinking maybe some library already exists for this but I'm not sure what this is called, so I'm not able to find anything relevant. I am not looking for a STL renderer or some WebGL thing but just some JavaScript trickery.