A rotating HIV-1 capsid protein structure rendered in WebGL, showing 2.4 million atoms as interconnected spheres and ribbon diagrams against a dark background.
Load up NGL Viewer and drag in a PDB file. Watch a protein bloom into existence. Ribbons curl through space tracing the backbone. Switch to spacefill and suddenly you're staring at a cloud of van der Waals spheres, each atom claiming its territory. The viewer handles the 2.4 million atom HIV-1 capsid structure the same way it handles a simple ferredoxin: smoothly, on your phone, without complaint. That's the trick here. Alexander Rose—at RCSB Protein Data Bank and UCSD's San Diego Supercomputer Center—built something that scales. Rose has made the codebase open under the MIT license.
The rendering leans on WebGL, but the interesting decisions live in the shader code. The hyperball representation uses a unified algorithm that morphs smoothly between spheres and cylinders, making bonds feel organic rather than assembled from parts. There's screen-aligned cylinder shaders borrowed from PyMOL's playbook, quadric surface calculations adapted from VTK. The whole thing parses MMTF, a binary format designed specifically for cramming the entire PDB archive into 9 gigs. Rose co-authored that format too. Molecular graphics is a domain where file parsing speed actually matters, and NGL treats it as a first-class problem.
The gallery at nglviewer.org/ngl/gallery shows off what's possible: electrostatic surfaces, molecular surfaces with accessibility coloring, trajectory playback. There's also NGLView for Jupyter notebooks if you want to script things from Python. Worth poking at the selection language documentation. It's more expressive than you'd expect.
- Live Demo: https://nglviewer.org/ngl
- Source Code: https://github.com/nglviewer/ngl
- Author: Alexander Rose (GitHub)