High performance 3D web exporter

Hi,

I started working on an “high-performace-3d-web-model-viewer-generator”… what’s in a name :slight_smile:
The idea is to have an extension that is able to generate a web 3d viewer that you can then host yourself and embed in your website, being the latter public of private. So: no paid service for hosting your content which you loose access to when stopping the subscription, or, have no control to where the content is hosted, … and all of this: being high performance.

I thought @TheOnlyAaron his model of the millennium falcon (featured here: Personal SketchUp Project (LEGO Millennium Falcon) - #190 by rod2) would be a good benchmark since it is downloadable from the 3d warehouse and certainly pushes the limits in SketchUp. So I have created a movie where I have exported the model to a very early version of the viewer which you can see here: WIP - SketchUp High Performance WebGL Generator. - YouTube

Although the viewer is able to handle such complex geometry, there is some finishing to do ux-wise (progress bar, widgets, …) so for now I have created a live viewer containing a slightly less complex model, which speeds up the loading time but still has somewhere around 24k faces, which you can view here: http://the-tryout-showcase.kg-dev.be/sketchup-three-buffergeometry

Now, I understand that this somewhat already is possible with the 3d warehouse, which allows you to embed models in your website. The goals for this viewer are:

  • Higher performance on technical models, thus very complex geometry, at the cost of maybe not having high res textures etc. Do you have a model which you think pushes the limits that you want to give a try? Please let me know.
  • No need to share .skp files. The geometry is extracted, no .skp files are contained in the resulting viewer.
  • The generator itself will have a cost to be determined, but, you own the result: no subscription on an online model viewer where you have to host your models and have an active subscription for keeping your ability to view your models. This also means you have full control who you share the result with.

This is still very early development, but, that is a good thing since specific requests can be added without much risk of breaking others.

Questions? Remarks? Suggestions? Please shoot.

4 Likes

Still got some work to do on UX as well as transparency.
It might take some time to load the model, without giving feedback ( yeah… ux :))

Do not test on your cellphone…the model is just too heavy :slight_smile:

Here is the MF model from @TheOnlyAaron, exported to a web viewer, from SketchUp:
http://the-tryout-showcase.kg-dev.be/sketchup-custom-binary-threejs

Updated with material transparency. Seems to work pretty fast on a macbook pro:
movie

Not so bad for a model with a mesh of over 14 million triangles.

1 Like

I miss orbit!

I made an exporter to BabylonJS, and its API allows to subclass cameras, so I made something orbit-like (it’s really hard to perfectly mimic SketchUp’s orbit) and of course space-navigator support. Though the project required more setup scripts (sky effects, material properties, manually modeling level-of-detail meshes) and the level of realism that I wanted and the lack of proper nested instancing support gave me severe performance issues.
So I was not able to make it a publicly available one-click export extension.

Some questions to think about is:

  • Do you want to perfectly mimic SketchUp’s visual style?
    (Display everything like in SketchUp; sky gradient, edges)?
  • How much customization you want to allow (beware of configuritis)?
    The more you want to cater other use cases/audiences (e.g. gaming) the more will people need to do extra work to set up features that SketchUp’s scene graph does not have (and thus are not included in an single-click export, and need extra UI work).
  • Technical models may have a lot of detailed and repeated component instances. Are they “flattened” into a giant mesh, or is the nesting hierarchy preserved?
    (In my case a flattened mesh was surprisingly performing well but with too large file size ~100MB, where as an instanced mesh had poor performance.)

That is true. For now I focused primarily on the performance. Also, the controls somewhat depend on what one is used to.

For me, personally, I do not want to mimic sketchup. I want to provide a high performant viewer of technically and detailed models.

My target audience would be the manufacturing industry that need a way to share technical details to their customers and partners and do not care to much about the looks but need something fast, with high performance and without vendor lock-in.

You can still use instancing in your storage format and recreate a flattened mesh in your runtime. For now I write out a flattened mesh to a binary format. The large model you see is over 120mb, but, with gzip compression that would become around 20 I believe.

This will make you happy: I am currently working on a project where I use a space-navigator to control some relays, over the internet intranet. More info to follow, but here is a movie (with kids on the background because I did not want to filter out the clicking noise of the relays :smiley:): https://photos.app.goo.gl/qdoSWgqU885mVZp68

1 Like