Creating Three-Sixty Objects For Marist Archives Using Open Source JQuery Reel

Marist College is home to the Lowell Thomas Papers, which includes approximately 40,000 photographs, hundreds of hours of audio and video, 300 objects and more than 1 million pages of manuscripts. Our mission has always been to make this rich archive more accessible to the public at large. After successfully completing the eighteen months NHPRC funded project to digitize the 39,529 graphic materials from Lowell Thomas Papers, we naturally turned our attention to 300 objects in the collection. The objects date from 1911 to 1960 and consist of wide range of memorabilia belonging to Lowell Thomas family to objects from World War I and Tibet.

As with most archives we face a space constraint and most of our objects are kept in shelves hidden from the public view. While it may be an optimal situation from the perspective of preservation, it prevents our users from fully appreciating our objects. Even for objects on display, a visitor cannot see it from all angles, as some part of it remains hidden. Moreover, because of security and the fragility of the object, most objects can only be appreciated from a non-optimal distances.[1] This leaves a big void in our effort to improve discoverability and accessibility of our collections. And this is especially challenging as most of our researchers are not affiliated with Marist and discover our collections through the web.

3D modeling presented a perfect solution to our problem. With the advent of new technologies, there has been a push towards digitization of objects and to make them available online to wider public. A 3D model deployed online can really create an immersive experience where a user can interact and closely inspect each object. 3D modeling would not only make our objects accessible to distance users but also help in long-term preservation of our most fragile objects. Moreover, the ability to visualize and manipulate life like representation of objects would further enhance the user experience of our researchers. For an academic library like ours, it would also open up new avenues of learning and teaching for our students and faculty.

In this article I will look into some of the recent 3D digitization projects and highlight numerous technological and financial challenges that would be familiar to many small and medium sized archives. I will further propose jQuery Reel, an open source three-sixty player as a viable alternative to 3D modeling and discuss the workflow we employed at Marist Archives.

3D modeling and its Challenges

A 3D model can be generated using number of ways such as:

• Using a 3D modeling package like 3D Studio Max, Maya, and AutoCAD
• Using transform graphs
• Using a 3D scanner or
• Using a combined approach with any of the above[2]

3D scanning is the most popular method of creating a 3D model especially in the field of archives and museums. According to Marcos A Rodrigues, Mariza Kormann, and Lucy Davison “since objects in the museum are physical expressions that do not have an equivalent CAD (Computer-Aided Design) model and most have very complex shapes, the use of a scanner is required for 3D reconstruction.”[3] Most of the recent 3D digitization projects have used this technique to create the 3D models. Sheffield Hallam University in Sheffield, England used 3D scanning to digitize interactive 3D contents from the Designated Metalwork collection. The project was carried out in collaboration with Museums Sheffield and according to the final report by Marcos Rodrigues, the Project Manager for ‘Rapid 3D Digitization of Sheffield Metalwork Collection’, “the project used state-of-the-art 3D laser scanning technologies and 3D models were exported to the open standard COLLADA (Collaborative Design Activity) format and made suitable for visualization over the Internet with standard web browsers.”[4] Closer to home, in November 2013 Smithsonian launched a beta software, Smithsonian X 3D Explorer that allows users to view and download 3D models of Smithsonian’s artifacts. They too used 3D scanning to develop 3D models. 3D scanners were used to create ‘point clouds’ that “establishes thousands of data points that make up the contours of the artifact’s surface.”[5] British Museum took a slightly different project management approach. Rather than digitizing in-house, they outsourced the project to CyArk, a non-profit 3D modeling company.[6] CyArk used three different techniques: LIDAR, structured-light and photogrammetry to scan the British Museum’s collection of Assyrian reliefs.[7]

While these projects are impressive and the result equally engaging as well as educative for the users, they also highlight some major challenges with 3D digitization. There is a lack of standard workflows and tools to carry out 3D modeling projects especially in the archives field. These projects show that 3D modeling is a complex operation that requires multiple technologies in both hardware and software. Most of the early projects adapted tools and techniques from diverse industries requiring a patchwork of software not necessarily designed to play well together.[8] Facing similar situation, the project team in Sheffield Hallam University decided to break the project into two stages, spending half the project duration in ‘Preliminary Digitization, Post-Processing and Experimental Website’ to clarify the best procedures for access and handling specific objects.[9] The preliminary digitization included testing various scanning techniques including multiple stripes in the visible and in the near-infrared spectra, and with laser light. Similarly, post-processing operations required a number of iterative tests and adjustments and the use of several 3D modeling packages such as Geomagic, Meshlab, 3D StudioMax, PaintShop Pro, Blender and SketchUp.[10] Sheffield Hallam University’s project emphasizes the need of experimentation to counter the uncertainty with workflow and technologies in 3D digitization projects.

Training archive’s staff to master all these diverse technologies adds a significant overhead while planning for such projects. Moreover, the learning curve associated with these technologies is very steep as pointed out by Metallo and Rossi.[11] They further stress the need of “tech-savvy core staff committed to finding the right workflow for digitizing specific objects or collections”.[12] This unfortunately is a luxury many archives with limited budget and resources cannot afford. Further discouraging is the fact that even after investing in technologies, staff and their training, there is no guarantee that it will be applicable to all the objects of the collection. As Metallo and Rossi observes, “the time investment required in learning how to operate the hardware and software applicable to one set of objects or collections may not work for the next”.[13] This uncertainty over the technology and the immature workflow is especially dispiriting for archives like us who are committed to make our collections more accessible and discoverable for our users. Most of the archives do not have the necessary financial resources or organizational support to invest on multiple hardware, technical staffs and experiments to successfully carry out such 3D digitization projects. Despite the rapid breakthrough in technology and ever lowering costs of hardware, 3D modeling is still beyond the affordability of most of them. This encouraged us to turn into open source technology and come up with a viable alternative to 3D modeling.

jQuery Reel

jQuery reel is an open source three-sixty player and is free to use under the MIT License.[14] It is flash-free and compatible with all the browsers and operating systems available. Moreover, the new versions are responsive in design and compatible with Apple, Blackberry and Android 2.3+ devices. Because of its simplicity, compatibility and ease of use, jQuery Reel has been used by many prominent brands such as Volkswagen, Nikon, The New York Times, Samsung, Adidas, etc. Over the years, Reel has become a primary alternative to Adobe flash for companies looking to enrich the user experience of its visitors by providing immersing interaction with its contents. In 2012, jQuery Reel was used in the New York Times’ “Snow Fall: The Avalanche at Tunnel Creek” multimedia feature.[15] This interactive narrative on a deadly avalanche in Washington State won a Peabody award in 2012 for being “a spectacular example of the potential of digital-age storytelling”.[16] It further went on to win the Pulitzer Prize for feature writing in 2013.[17]

Unlike the 3D modeling, Reel does not create a 3D model of an object but creates an illusion of 3D by displaying a three-sixty view of an object. To do so, it relies on 36 images of an object, each taken at a different angle, stitched together as a single file of 6×6 image matrix. By using clever codes, whenever Reel detects interactions with the object, it makes automatic adjustments and moves between these images in the matrix to replace the current image.

How to implement jQuery Reel

To implement jQuery Reel, you need the initial image – the image of the object you want your viewer to see first, the 6×6 matrix of stitched images and a jQuery Reel source file jQuery.reel.js which can be downloaded from their website. But the easiest way might be to just connect directly to their CDN link http://code.vostrel.net/jQuery.reel-bundle.js. During implementation the most important thing to remember is that the new version of jQuery Reel is only compatible with jQuery 1.6.2 or higher and that the file name of the stitched file should be same as the initial file but with ‘-reel’ added at the end. For example, if the initial file is 1713.1.jpg, the stitched file should be named 1713.1-reel.jpg. Both the initial image and the stitched image should be stored in the same folder.

http://code.jquery.com/jquery-1.7.2.min.js

  http://code.vostrel.cz/jquery.reel.js

To create a three-sixty view of an object, you need to add class reel to your html <img> tag.[18]

<img class='reel' src='objects/1713.1.jpg'
  width='515' height='342'/>

Furthermore, jQuery Reel has more than 50 options that you can choose from to configure things like frames, delay, cursor, etc. to customize your objects display and its animation.[19] Along with the three-sixty view for objects, jQuery Reel can also be used to display panoramic views.

Workflow employed at Marist Archives

Fig. 3. Setup at Marist Archives to take 36 images of an object.

Fig 4. Initial Image of a World War I flannel-lined aviator’s helmet after removing the background (filename: 1713.jpg)

As mentioned earlier, jQuery reel relies on the images of the object from 36 different angles to provide the illusion of 3D. To ensure this, it is important that the object remains still throughout the photography process.
The slightest change in the position of the object or in the angle at which the images are taken will ruin the three-sixty view.

Fig 5. Stitched image of the World War I flannel-lined aviator’s helmet (filename 1713-reel.jpg)

To ensure the consistency we built a custom turntable with 36 different positions each marked at 10 degree increment and used a camera stand and a wireless remote to take the pictures. The object was positioned at the center of the turntable and as we took the pictures, it was turned to its next position. We continued this process till we were able to capture 36 different images of the object each at 10-degree increment. Once the images have been captured, we removed the background of these images using the magic wand tool in Photoshop. Magic wand selects pixel based on tone and color of the image. To make the background removal process easy, we used white background while capturing the images.

After some experimentation we came with the following specification for the images:

• dpi – 120
• width – 515 pixels
• height – 452 pixels

This is the quality and the size that we want the users to view the object. This specification can however be adjusted based on the size of the objects being digitized. The next step was to stitch these 36 images into a single 6×6 image matrix. We used our in-house built software to stitch the images. But you can also use Photoshop to stitch them manually. The width and height of the matrix would be 6 times the size of your individual image.

Once the initial image and the stitched images are ready, the next step was to set up an html template for web deployment. We wanted our users to not only interact with the objects but also have conversations around it. So, we decided to take advantage of the social media and use Facebook comments social plugin. Comments plugin allows users to comment on the contents of your site using their Facebook account and also let them share it with their friends.[20]

Each of these digitized objects were deployed as a separate html pages, which is crawled by major search engines such as Google and Bing making it easily discoverable by our users. Moreover these html pages are linked as digital files to our EAD (Encoded Archival Description) finding aid records for the collection. This deeper integration with EAD finding aid helps to provide a historical context to these objects. These EAD finding aids are also discoverable through our Library discovery system – Summon, which integrates archive’s records with the library catalog and provides a federated search results to our users from the Marist community. Discoverability of these objects with both the Google/Bing and Summon has improved its visibility among the users in the Marist community as well as external researchers with no Marist affiliation.

Fig 6. HTML page displaying three-sixty of an object

In our experience, jQuery Reel is a very stable plugin that is responsive in design and compatible with all of the modern web browsers as well as mobile device platforms. Once the workflow has been set and html template created, the process of creating three-sixty views for the objects is pretty straightforward. The only hardware you need is a turntable, a camera (preferably a DSLR), a camera stand, a wireless remote control for the camera and some lighting, which is considerably less than purchasing 3D scanners. For software we used Photoshop to remove backgrounds and to stitch images to create 6×6 matrix but you could also use free software such as Gimp to do both these things. For deployment on the web, the basic understanding of web technologies such as html, css, javascript and especially jQuery would be helpful.

For our project we hired a Digital Media student from Marist who was responsible for taking the pictures, removing backgrounds, and stitching the images into a 6×6 matrix. Since we were not using any specialized hardware or software, the student did not need to be trained except for the basic handling of archival objects. On average it took him 5 hours to complete one object and make it ready for deployment online. And the overall cost of operation was very low compared to a 3D modeling project.

Using this workflow, so far we have been able to digitize and deploy 75 different virtual objects from Lowell Thomas Papers collection. The objects are from the ‘World War I’, ‘Tibet’ and ‘Equipment’ series and includes objects such as World War I German infantry helmet, Tibetan ceremonial masks, stone carving of Buddha and Cine Kodak 16 mm movie camera.

jQuery Reel has enabled us to tell the stories of our collection and bring them outside the physical confines of our archives. The interactive nature of our virtual objects have really captured the imagination of our users and improved our digital presence. Our distance researchers can now engage with our objects and have a closer look at it. This interaction wouldn’t have been possible with the physical objects due to their fragility and sometimes inaccessibility. Moreover, it has fostered an interactive learning experience for our students by changing how they visualize resources. But most importantly it has allowed us to preserve our objects – which are no longer at risk of damage or destruction – and promote them at the same time.

Future Enhancements

There are some enhancements we would like to add for both the features of jQuery Reel and the way we deploy the three-sixty objects online. Currently the objects can be accessed either as a separate html page or as an external link of an EAD record. In future we would like to create a dedicated website to display our virtual objects. A separate portal for our users to search, browse, discover and share the objects would further enhance their experience. For objects on display at Marist, we plan to add QR codes that would link back to the html page of its corresponding three-sixty views. This will allow visitors to interact with the objects in a much deeper level. Such seamless integration will further help bridge the physical-digital divide.

Similarly, there are some features that we think would further improve jQuery Reel. The first, ‘Hotspots’ which will allow a user to click on hotspots on the virtual object and further zoom in. This will especially be useful for objects with intricate details that may need much closer inspection to be fully appreciated by a user. The second, ‘Y-axis 360 view’ to complement the current X-axis 360 views. This feature would be a game changer and further improve the usability of virtual objects powered by jQuery Reel.

The open source nature of jQuery Reel gives it a major advantage. This can facilitate collaboration between developers and archivists to further improve on the current features as well as develop new functionalities like suggested above.

Limitations

Despite jQuery Reel’s potential to compete with a 3D model and provide the same level of user experience, its inability to generate 3D prints presents a major limitation. 3D printer has already taken 3D models to a next level by allowing users to print a replica at any scale for their own personal use. British Museum has already made 3D models available for 3D printing through Sketchfab, a platform that lets user publish and share 3D content online.[21] Similarly, Smithsonian allows user to download the raw data of their 3D models for 3D printing. The data required for 3D printing cannot be generated with the current three-sixty workflow.

Conclusion

3D technologies have the potential to revolutionize the digital presence of archives creating a truly immersive and engaging experience for its users. However, they are still beyond the affordability of most of the archives. The lack of standard workflows and the uncertainty over technology presents the major hurdle for investments on 3D digitization projects. For archives with limited resources, jQuery Reel can be a viable alternative to 3D modeling. The real power of jQuery Reel lies in its simplicity and compatibility. Compare to a 3D modeling project, the operational cost of a three-sixty project is very low. The hardware, software and the workflow required are pretty straightforward and unlike a 3D modeling project, it does not need a team of highly trained staffs to digitize the objects. Moreover, jQuery Reel is open source and free to use which is a great equalizer for archives like us with limited budget and resources.

Its open source nature further allows developers and archivists to collaborate and improve on its functionalities. 3D technology promises an exciting future for archives but for most jQuery Reel might be the one that can deliver.

Bibliography

Petr Vostrel. “jQuery Reel,” 2013. http://jquery.vostrel.cz/reel.

360 View of Objects, accessed November 5, 2015. http://library.marist.edu/archives/LTP/Objects/objects360/1713.1.htm.

“3D-Imaging the Assyrian Reliefs at the British Museum: From the 1850s to Today.” British Museum Blog, November 19, 2014. http://blog.britishmuseum.org/2014/11/19/3d-imaging-the-assyrian-reliefs-at-the-british-museum-from-the-1850s-to-today/.

“Comments – Social Plugins – Documentation – Facebook for Developers.” Facebook Developers. Accessed October 24, 2015. https://developers.facebook.com/docs/plugins/comments.

Lance Ulanoff. “British Museum Now Lets You 3D Print Its Artifacts Using Sketchfab.” Sketchfab, October 31, 2014. https://sketchfab.com/models/375518e3dd85420d88f0bdf90be98d5c/embed.

L. Kelly Fitzpatrick, and Hilary Wall. “Smithsonian X 3D Tutorial.” Tutorial. Smithsonian X 3D Tutorial, 2011. https://mytechtutorials.files.wordpress.com/2011/11/smithsonianx3d-fitzpatrick-wall.pdf.

Marcos A Rodrigues, Mariza Kormann, and Lucy Davison. “A Case Study of 3D Technologies in Higher Education: Scanning the Metalwork Collection of Museums Sheffield and Its Implications to Teaching and Learning.” IEEE 10th International Conference on Information Technology Based Higher Education and Training, 2010. http://www.webarchive.org.uk/wayback/archive/20140615021221/http://www.jisc.ac.uk/media/documents/programmes/digitisation/econtent/econtent11_13/Rapid3dAppendixA.pdf.

Marcos Rodrigues, and Lucy Davison. “Rapid 3D Digitization of Sheffield Metalwork Collection.” Sheffield Hallam University, July 31, 2011. http://www.webarchive.org.uk/wayback/archive/20140615021232/http://www.jisc.ac.uk/media/documents/programmes/digitisation/econtent/econtent11_13/rapid3dfinalreport.pdf.

Metallo, Adam, and Vince Rossi. “The Future of Three-Dimensional Imaging and Museum Applications: 3D Imaging and Museums.” Curator: The Museum Journal 54, no. 1 (January 2011): 63–69. doi:10.1111/j.2151-6952.2010.00067.x.

“Our Mission.” CyArk, 2014. http://cyark.org/about/.

“Peabody Awards,” 2012. http://www.peabodyawards.com/results/Snow%20Fall/1/null/null/title/asc.

Steve Duenes, Eric Kissane, Andrew Kueneman, Jacky Myint, Graham Roberts, and Catherine Spangler. How we made snow fall, January 1, 2013. https://source.opennews.org/en-US/articles/how-we-made-snow-fall/.

“The 2013 Pulitzer Prize Winners,” 2013. http://www.pulitzer.org/citation/2013-Feature-Writing.