Best way to display photorealistic 3D in the browser?

#1

Post by logicziller » Mon, Apr 15, 2024, 6:43 AM UTC

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.

Re: Best way to display photorealistic 3D in the browser?

#2

Post by Kelteseth » Mon, Apr 15, 2024, 6:49 AM UTC

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

Re: Best way to display photorealistic 3D in the browser?

#3

Post by speedgoose » Mon, Apr 15, 2024, 1:14 PM UTC

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

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

Re: Best way to display photorealistic 3D in the browser?

#4

Post by adfm » Mon, Apr 15, 2024, 4:05 PM UTC

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.

Re: Best way to display photorealistic 3D in the browser?

#5

Post by stainlu » Mon, Apr 15, 2024, 7:03 PM UTC

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)

Re: Best way to display photorealistic 3D in the browser?

#6

Post by solardev » Mon, Apr 15, 2024, 7:41 PM UTC

speedgoose wrote: post #3

It’s quite state of the art, but Gaussian splatting can be considered. https://projects.markkellogg.org/threejs/demo_gaussian_splat...

These were terribly laggy for me on a Pixel 7

Re: Best way to display photorealistic 3D in the browser?

#7

Post by solardev » Mon, Apr 15, 2024, 7:46 PM UTC

adfm wrote: post #4

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

Re: Best way to display photorealistic 3D in the browser?

#8

Post by solardev » Mon, Apr 15, 2024, 8:26 PM UTC

Kelteseth wrote: post #2

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

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

Re: Best way to display photorealistic 3D in the browser?

#9

Post by speedgoose » Tue, Apr 16, 2024, 4:43 AM UTC

solardev wrote: post #6

speedgoose wrote: post #3

It’s quite state of the art, but Gaussian splatting can be considered. 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.

Re: Best way to display photorealistic 3D in the browser?

#10

Post by solardev » Tue, Apr 16, 2024, 5:41 AM UTC

speedgoose wrote: post #9

solardev wrote: post #6

Earlier quoted context omitted.

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).