Introducing TinyGLB
I recently built a site called TinyGLB, a way to instantly host a 3D model online, just upload the file and get a custom web page to share or embed within a website.
Idea:
I’ve done a small amount of work in the past displaying dynamic 3D models on the web using the Babylon.js library. I recently discovered
You can easily configure model-viewer in HTML or by using their Editor app. There is also a Javascript API for controlling more advanced functionality. Model-viewer is built on top of Three.js and abstracts away the complexities of dealing directly with Three.js, while providing a good default 3D scene (camera, lighting etc.).
You could probably use model-viewer without having any software development knowledge. You can load your model into their Editor app, configure how you want the model to be displayed and then download a zip file containing all the resources required to host your 3D model online. The last step would be to upload the files to a static website hosting provider.
I initially thought about building a tool to handle the final step of uploading the model-viewer output, but that would simply be another static hosting solution. So I decided to build a tool that was more like “Pastebin for 3D models”. Therefore, a way to instantly host a 3D model online, just upload the file and get a URL.
There are a few websites dedicated to hosting and sharing 3D models, the most popular being Sketchfab, and some smaller ones I discovered are p3d.in and glb.ee. I wanted to try and offer something unique compared to existing solutions, but also to try and keep the build time under 2 weeks. I decided on the following:
- It would only support GLB files where the 3D model is packaged into a single easy to upload file.
- There would be no sign up required to use the tool and no limits on storage/number of models/model views.
- There would be no branding displayed if the model was embedded in another website.
- There would be a few advanced features that the user could add to their model viewer page:
- A material selector (easily display different materials on the model)
- A variant selector (easily display different variants of the model)
- A visibility selector (easily toggle visibility of meshes)
- A node selector (easily show/hide different parts of the model)
Build:
The main challenge was how to provide the service for free with minimal hosting costs. I priced up using AWS S3 with CloudFront, but the bandwidth costs out of CloudFront would be too expensive. They provide 1TB free per month, but then it’s $85 per TB.
I then explored Cloudflare for the first time, and found that since they don’t charge for bandwidth I could run the service with very low cost:
- Cloudflare R2 storage costs are $1.5 per 100GB/month.
- Cloudflare R2 read costs are $3.6 per 100 million requests per month
So for $10 per month I could store 200GB of GLB models, and have them viewed 200 million times per month. I didn’t want to set any limits on how the service could be used but I also didn’t want the storage to grow too large over time, so I set the models to be automatically deleted after 180 days. In the future I may give the user the option to choose when to expire the model, or base it on when the model was last viewed. To keep storage size down I also used the hash of each file to ensure no duplicates are uploaded, and limited the file size to 50MB.
I’m predominantly a backend developer so I try to keep front end development as simple as possible. For the web pages I used Alpine.js and minstyle.io, with the GLB models displayed using model-viewer. The GLB files are stored in Cloudflare R2 and viewed via a Cloudflare Pages static website, so there should be no issues with scaling.
As my first “axby labs” project, the build went reasonably well, I didn’t go too far over the 2 week build time.