Best way to display photorealistic 3D in the browser?

4 points by logicziller 2 years ago | 11 comments

I need to display an item that a user can rotate (left/right, up/down). I can pre-render these in Blender from every angle. Maybe if the renders are done just 10° rotated on every axis, that will do what I need.

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.

DennisSFO 2 years ago |

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.

speedgoose 2 years ago |

It’s quite state of the art, but Gaussian splatting can be considered.

https://projects.markkellogg.org/threejs/demo_gaussian_splat...

solardev 2 years ago | |

These were terribly laggy for me on a Pixel 7

speedgoose 2 years ago | | |

Strange. Were you running out of battery? This method is relatively lightweight and runs smoothly on my older iPhone.

adfm 2 years ago |

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.

solardev 2 years ago | |

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

stainlu 2 years ago |

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)

Kelteseth 2 years ago |

Godot. It has by far the best and fastest web export.

solardev 2 years ago | |

Does it have to export the whole engine just to render a simple 3D product?

brudgers 2 years ago |

Texture maps on a cube is the simplest thing that might work.

Good luck.