Optimising 3D for the Web, AR, & VR
5 tools you can use to help your 3D data satisfy the widest online audience.
This post demonstrates several tools to optimise a 3D asset for publishing online, AR, & VR. It doesn’t go into huge detail for each tool, but hopefully it gives you a starting point for your own investigations!
I think that a lot of folks in the heritage sector are publishing interactive 3D data online that is a little too heavy for ‘regular people’ to enjoy. There, I said it 😹.
Just to be clear I am referring to interactive 3D data: for the record I think it is great to offer academics and creatives open access to high resolution data sets. For most people in the world, however, interacting with an optimised 3D file will be a much better experience: faster to download, better performance on all devices.
I’ve said as much in many keynotes and presentations over the years, but I still note the tension between professionals wanting to demonstrate their work at the highest resolution, but also wanting to reach wider audiences.
Optimising your 3D assets for online audiences is essential for reaching the widest audience.
An added bonus of optimising your 3D data for the web is that it is then often suitable for AR, VR, and game engine applications. In this way you’re facilitating more use cases for the fruits of your digitisation work. Nice.
So how much should you optimise a given 3D asset?
My answer is always the same: as much as you can while still meeting the needs of your chosen audience. I always think of 3D as ‘just another kind of image’ and I don’t think anyone regularly expects an end user to load (for comparison) a TIFF image that weighs 100s of megabytes in their web browser: we convert images to nice, tiny, web friendly JPGs. Let’s do the same for our 3D! 💪
Time. To. Optimise.
Scroll on and you will find short tutorials showing you how to optimise the same 3D asset using 5 different tools. 👇
Some notes before we begin:
We’ll going from a 3D model of 1,000,000 face geometry and an 8192x8192 PNG colour texture map (link) to a model of 50,000 faces + 4096x4096 colour texture map (links to output 3D files from each tool can be found in each article subsection below).
For the sake of simplicity, I’m not worried about generating normal maps for now (🙀 scandalous, I know).
The example 3D model (single mesh, single texture) used in these demos is pretty straight forward, things can get more complicated with some of the workflows depending on file formats, animated meshes, multiple textures, etc. etc.
Of course you can output an optimised 3D model directly from e.g. your photogrammetry software, but these tutorials are for those occasions when a 3D model already exists and you don’t have access to the source project data.
As a baseline, here is a link to a version of the 3D model optimised to 50,000 faces + 4k PNG texture using the original RealityCapture photogrammetry project.
OK, now on with the demonstrations!
Meshlab
Quick Guide:
Import.
Apply filter.
Export.
Resize texture map (I used https://onlinepngtools.com/resize-png, renamed it and replaced it in the source directory.)
In my experience, the image texture became disassociated from the .obj/.mtl and I had to re-link in my final 3D viewer.
Done!
💾 Link to output 3D file on Sketchfab.
Summary
Price: FREE!
Get Meshlab.
Time it took: 5 minutes.
Difficulty: 1/5
User control: 2/5
Output file size: 6mb
Blender
Quick Guide:
Import mesh, scale to approximate dimensions in metres.
Duplicated mesh.
Decimated Mesh > 50,000 faces (ration of 0.05).
Removed Material, created new Material.
Create new image 4096x4096, assign to material diffuse slot.
Add to shader editor.
Select high res mesh, shift-select low res mesh, select texture to bake to.
Bake using Cycles render:
Bake type diffuse.
Influence contributions: colour only
Enable Selected to active
Extrusion (how far outside of the low res mesh the bake will look for data) 0.02m
Connect baked texture in shader editor to check result.
Export mesh & texture map.
Done!
💾 Link to the output 3D model on Sketchfab.
Summary
Price: FREE!
Get Blender.
Time it took: 15 minutes.
Time it took to figure out: Hours 😅
Difficulty: 4/5
User control: 5/5
Output file size: 11MB
RapidPipeline
Quick Guide:
Sign up, log in.
Upload asset.
Choose / edit a 3D processing preset.
Hit ‘Run 3D Processor’
Done!
💾 Link to optimised file hosted on rapidpipeline.com.
Summary
Price: Starts at $15 /month billed annually, FREE trial available.
Get RapidPipeline
Time it took: 10 minutes.
Difficulty: 1/5
User control: 5/5
Output file size: 7MB
Needle Cloud (Beta)
Quick Guide
Sign up, log in.
Upload 3D asset.
Done!
Needle Cloud automatically produces a number of 3D outputs derived from your input file:
A converted GLB.
An optimised GLB.
2x progressive loading GLBs (multiple levels of detail for meshes and textures)
💾 Link to 3D file hosted on Needle Cloud
⚠️ I may be doing something wrong, but from my experience, optimised output files were not compatible with Sketchfab, Windows 3D Viewer, or Blender due to their using glTF extensions unsupported by those tools.
Summary
Price: FREE for evaluation purposes, artistic expression or non-commercial use. Commercial plans start at €17/month billed annually.
Get Needle Cloud.
Time it took: 10 minutes.
Difficulty: 1/5
User control: 1/5
Output file size: 4.5 - 11MB
Polycam
Quick Guide
Sign up, log in.
Hit ‘+ Create’ button, choose ‘Upload 3D Asset’
Select your files, upload.
Open uploaded asset, select ‘Remesh’.
Adjust remeshing parameters, hit ‘Remesh’.
Done!
💾 Link to optimised 3D file hosted on sketchfab.com.
Summary
Price: FREE plan available. Pro plan starts at $24.99/month billed annually.
Get Polycam.
Time it took: 15 minutes.
Difficulty: 1/5
User control: 3/5
Output filesize: 41MB
Conclusion
Happily, there are lots of ways to achieve 3D model simplification and several of them completely free. Which tools did I miss which you use regularly for this kind of task?