I’ve been working with Bernard Means who runs VCU’s Virtual Curation Laboratory1. We spoke briefly a while back about building a site to allow for interactive views and downloads of 3D STL files his team has made of passenger pigeon bones. One of the goals was to allow mobile devices to interact with the site in an “app-like” fashion. This is more than a desire for the PR boost that seems to come with creating an “app”2 What we’re working toward is the ability to cache this stuff and enable archaeologists in the field to interact with the virtual shapes on mobile devices or download the shapefiles, print them out, and carry the replicas into the field (next up is a consideration of points). We wanted to get the passenger pigeon bones out in time for the anniversary of the extinction of the species which was 100 years ago today. Due to the excitement and drama that is the new school year, I didn’t end up getting the bones or focusing on this until Thursday.
This was the first website I’ve made by hand (non-cms) in a while. I figured it’d be good for me and I thought it’d help remove complications. I don’t know if that ended up being true but it was a decent idea. It was a hassle to update the shared structure across the websites. I’ll have to figure a way out of that in the future.
The second concern was trying to think through was using an old school image map as the main visual navigation. We wanted people to be able to click on the bones and end up at the 3D interactive pieces. I hadn’t made an image map in a long time either. I did suspect that there’d be some issues with responsive image resizing and navigation like this. A bit of googling later and it turns out there’s an answer for this and it’s on github and it uses Power Puff girls for the example. It worked perfectly. The first two steps took about 10 minutes from desire to working prototype. All hail the Internet.
The third piece, and the one that ate up most of my time, was making interactive web components from the STL files. My ignorance of 3D shapefiles knows no limits but I did find three.js a while back and it has loaders for STL and a number of other common formats. I installed it and hand no trouble running the examples but failed at loading the pigeon bones. I failed at binary exports. I failed at ASCII exports. I failed, I failed, I failed in so many different ways. I then attempted to really cheat and use some of the hosted solutions where I quickly ran into size limits and requests to pay for things and other sacrifices I wasn’t willing to make.
I then circled back to GitHub. Turns out it does a really nice job of automating the display of 3D shapefiles up to 10 MB and makes a handy iframe embed option available. I had to use quadratic edge collapse decimation on a few of the files in order to get under that limit but left the larger files available because GitHub makes that so easy.
I wanted those iframes to be responsive as well. This nice little post answered that question quickly and easily.
As always, there are lots of things I need to do better and many ways I can/should improve the site. I’ll be looking at caching options, making this a more portable structure that others will be able to add to and improve.