Search code examples
htmlwebglpdb-files

Loading PDB (Protein Data Bank) files onto an HTML webpage


I'm still new to loading data. I know there's a method to load multimedia files onto HTML using the <object> tag but that only applies for the common file types like PDF.

Is there a way to load PDB (Protein Data Bank) files onto HTML and display the results? Like the actual molecules.

Do I need WebGL to display it? It would be good to at least display the molecules.


Solution

  • I don't have any experience of the PDB file format but at a guess there's no native support for this format in browsers. You'll probably have to load the file (via an AJAX call) and manually parse it with JavaScript. If you're lucky someone else has already written a parser in JavaScript. You'll then need to display that data in meaningful way, plain text/2d canvas/3d canvas etc. If you're super lucky, someone will have written the whole thing for you.


    I just did a quick Google search for "protein data bank javascript renderer" and found https://biasmv.github.io/pv/. If you click through to the GitHub page you can see they mention PDB files a few times so it seems you're in luck.