Generating Interactive Protein Structure Tutorial Using WebGL and HTML5

Proteins are large biological molecules of long polymers of amino acid residues, typically containing thousands of atoms and consisting of a uniform repetitive backbone and variable side chains attached to each residue. They fold into complex 3D structures to perform a vast array of functions within living organisms. In order to help students to better understand the protein structures, it is important that the student can visualize the details of 3D structures, and manipulate them interactively to focus on aspects of interest. Recent developments in web technologies such as WebGL and HTML5, available in a wide range of browser on different platforms, made them the perfect choice to build cross-platform interactive tutorials for learning protein structures. This project, WebGL and HTML5 Interactive Protein Structure Tutorial Generator (WHIPSTG:, made it possible for biochemistry or biology professors to easily generate web tutorials that can facilitate students’ learning of protein structures. The generated tutorials allow the user to interact with protein visualization in 3D, answer true/false questions and multiple-choice questions, and read text. WHIPSTG uses GLmol – a 3D molecular viewer based on WebGL and JavaScript – to visualize and interactively manipulate the 3D protein. For the scope of this project, GLmol has been modified to include functionality for highlighting amino acids and highlighting a part of a protein sequence. I developed a web interface that provides the user with a short introduction about the project, the ability to easily generate an interactive tutorial and various examples of generated tutorials.