skull University of Minnesota
Anthropolgy Labs

The UMN Anthropology labs website was created to house the 3D digital collection and exapand the capabilities of the collection. Most of these pages rely on basic html and javascript coding. The navigation page, 3D models, and movies on this page take advantage of the HTML5 capabilities including embedded video and WebGL. This page serves as an overview of the technologies we used.

Creation of the library navigation pages on this website had to keep in mind the following restrictions:

With these restrictions in mind, we set out to build a comprehensive filtering system that utilized the in-broswer capabilities provided with HTML5 structure. The sections below highlight some of the features we used with links to resources for you to follow if interested.

HTML 5 Technologies

WebGL limits us to a subset of broswers (firefox, chrome, safari), we can tell students to use those browsers instead of explaining how to check that they are using the right plugin. This is much easier for us and creates less of a barrier for students. Additionally, new broswer versions are expecting to integrate video and webGl with nearby updates.

We have also built in a fall back mechanism which allows users to download 3D PDF files to view on their machine. In the event that WebGL is not compatible with thier machines, they can still view the objects in Adobe Reader (7.0+) so long as they have the reader installed.

You can learn more about WebGL at

You can learn more about HTML5 video at



Javascript, jQuery, and Plugins

Since PhP and MySql were not available, the site is run on Javascript exclusively. The jQuery library is used extensively both in our coding as well as the coding of the plugins that we used.

Javascript is also used to impliment an easy updating processs. All of our model data are stored in Google spreadsheets. The javascript pulls all the neccesary information for each model page from the spreadsheet and populates the navigation page. Thus updating can be acheived by changing the spreadsheet. New models can be added by incorporating them into the spreadsheet and creating a new page from a template. Because the template uses the spreadsheet to populate the page, the user need only change a single variable for the page to work.

Additionally, there are several pre-built plugins that we have integrated into our page. Each plugin is described below with an example and a link to the original code.




The jQuery iviewer plugin is used for ineractive image display. It allows for zoomin in and out, panning the image, and rotation. Additionally, it has functions for setting the image to fill the screen and setting the image to it's native resolution (1:1).




Among our materials we have several videos of lithic reduction sequences. While the videos themselvs are informative, it can also be useful to view the removed flakes at their point of removal. Using the popocorn.js plugin, we were able to have each flake populate next to the video at the appropriate time. The plugin allows for several types of time-based interactions with HTML5 video.



Smooth Div Scroll

The scrolling images at the bottom of the navigation page use the Smooth Div Scroll plugin.



Three JS

The Three JS library is used as a 3D engine for our models. The plugin leverages HTML5's WebGL capabilities to render 3D objects in the user's browser. The plugin has a variety of functionalities which are not included here. We used the BoilerPlate Builder as a base code and made a few modifications to add the download files and the model information.