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:
- it needed to be easy to update with a potential for expansion
- PhP and MySql were not available for use
- The use of plugins (pdf readers, quicktime movie players, and flash players) has created browser imcompatabilities for students in the past. Thus, we attempted to use more browser native capabilities and rely less on such plugins.
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 rendering makes viewing of 3D models browser native
- Video is also done in-broswer without the use of plugins
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 http://www.khronos.org/webgl/.
You can learn more about HTML5 video at http://html5video.org/.
top
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.
top
iViewer
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).
top
Smooth Div Scroll
The scrolling images at the bottom of the navigation page use the Smooth Div Scroll plugin.
top
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.
top
