3D animation software empowers scientific illustrators and animators to create stunning visualizations of the molecular world. While animations can be an efficient and eye-catching way of communicating scientific findings, they do not let the audience interact and explore the data. Interactive media can provide an immersive way of communicating a story, and allows the audience to explore data at their own pace, order and desired level of detail. In this tutorial, you will learn how to create a 3D visualization tool that allows anyone with access to the internet (and a modern web browser) to explore a biomolecule interactively. The goal is not to program software for data analysis, but instead to craft a flexible, fully customizable and powerful data presentation tool. You will use the protein hemoglobin as an example structure, but are welcome to use your favorite protein structure instead. After preparing and exporting the structure in UCSF Chimera, you will use a combination of HTML, CSS, Javascript, THREE.js and Tween.js to create the web-based tool. All software packages and libraries used in this tutorial are available online free of charge.
Learning Objectives:
- Understand the pros and cons of different technologies and methods of creating web-based 3D-visualizations
- Build a simple website with the basic framework necessary for browser-based 3D-visualization, using HTML, CSS, and JavaScript
- Create a setup for a 3D-viewer for biomolecular structures using the WebGL library THREE.js
- Prepare biomolecular structures in USCF Chimera for upload to a browser
- Import biomolecular structures into a browser
- Connect your 3D-model with other elements of a website to make it interactive
- Smoothly animate interactively triggered motion using the tweening library Tween.js
Software Links:
- UCSF Chimera, freely available at www.rbvi.ucsf.edu/chimera
- Any text editor for writing source code. We recommend TextWrangler (Mac only), Atom or SublimeText.
- CSS boilerplate for responsive design: http://getskeleton.com
- Javascript libraries: THREE.js (https://threejs.org, this tutorial was created using Version Number 86), and Tween.js (https://github.com/tweenjs/tween.js)
- A browser that supports WebGL to view the website that you will create. We recommend the latest version of Firefox, Chrome or Safari. (See http://caniuse.com/#search=WebGL for an overview of WebGL compatible browsers.)