Axby Labs

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.

tinyglb2

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 model-viewer, built by Google, which is an incredibly simple way to display 3D models on the web. It specifically supports the glTF/GLB file type, which is known as the JPEG of 3D.

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:

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:

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.

#tinyglb