Click here to Skip to main content
Click here to Skip to main content

Building a Molecular 3D Viewer using WebGL and HTML5

, 5 Jan 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
Use JavaScript and HTML5 to build a 3D molecule viewer.

Sample Image of 3D Viewer


While many are familiar with OpenGL, using WebGL is a little less familiar. However, many of the concepts and format of OpenGL also apply to WebGL. This article is a test to see how difficult programming something in WebGL would be. It took me less than 6 hours to make this, being a newbie at WebGL and with very little experience in OpenGL. There are many protien viewers available in either pre-packaged Java applets or C++ programs. This project attempts to see how difficult it would be to make one using JavaScript and WebGL. Surprisingly, it was fairy simple!


WebGL is a JavaScript browser implementation of graphics processing code that allows browsers to utilize the GPU.

Using the Code

Install the code on a web server, either a local web server or a remote one. Go to index.html, click on the Choose File button, select a local PDB for your computer, and see the molecule.

Keys are as follows:

A: Move Along -X Axis
W: Move Along +Y Axis
S: Move Along -Y Axis
D: Move Along +X Axis
Left Arrow: Move Along -X Axis
Right Arrow:Move Along +X Axis
Down Arrow: Move Along +Z Axis
Up Arrow: Move Along -Z Axis
Shift+A: Tilt to the left 
Shift+W: Look Up
Shift+S: Look Down
Shift+D: Tile to the right
Shift+Left Arrow: Rotate to the Left
Shift+Right Arrow:Rotate to the right
Shift+Down Arrow: Look Down
Shift+Up Arrow: Look UP
Mouse Drag Left: Rotate X
Mouse Drag Right:Rotate X
Mouse Drag Up: Rotate Y
Mouse Drag Down: Rotate Y
Mouse Wheel Forward: Zoom In
Mouse Wheel Back: Zoom Out

A sample PDB File:

AUTHOR      DAVE WOODCOCK  95  12 18
ATOM      1  C           1       1.241   0.444   0.349  1.00  0.00
ATOM      2  C           1      -0.011  -0.441   0.333  1.00  0.00
ATOM      3  C           1      -1.176   0.296  -0.332  1.00  0.00
ATOM      4  H           1       1.516   0.699  -0.675  1.00  0.00
ATOM      5  H           1       2.058  -0.099   0.827  1.00  0.00
ATOM      6  H           1       1.035   1.354   0.913  1.00  0.00
ATOM      7  H           1      -0.283  -0.691   1.359  1.00  0.00
ATOM      8  H           1       0.204  -1.354  -0.225  1.00  0.00
ATOM      9  H           1      -0.914   0.551  -1.359  1.00  0.00
ATOM     10  H           1      -1.396   1.211   0.219  1.00  0.00
ATOM     11  H           1      -2.058  -0.345  -0.332  1.00  0.00
TER      12              1

The first step is to select a file and parse the file for the ATOM entries. We select a file using the onclick operator of the file input button. Next we set up a FileReader object and parse the file. Once we have the file contents, we call var lines = contents.split("\n"); to split the file into lines. Next we have to go through the lines and split them using spaces into an array. Then we create an array to hold our ATOM objects, and fill it with the line entries. There are blank array entries when we separate the line, so we have to loop through the line and only copy the values we want. Also some lines have more spaces then others, so we cannot use a set position. Therefore we just copy all non-null values. The process looks like this:

for (y = 0; y < singleLine.length; y++)//loop through the line
	if (singleLine[y]!="" && singleLine[y]!=",")//is this a value or empty?
		objects[object_count][counter++] = singleLine[y];//has a value so lets copy it

The next step is to loop through our array of objects and find the atoms and draw them. Notice that we did not already set the atoms apart, we copied all non-empty values instead. So now we need to find the ATOM structures we want to draw. Looking at the file format above, we can see that the x, y, z coordinates for each atom are in the 5th, 6th, 7th columns, respectively. The code looks like this:

for (i = 0; i < object_count; ++i) {
	if (objects[i][0] == "ATOM")
		if (setcamera != true)
		//have we set the camera to focus
		//on an atom yet? if not pick the first one
            //look at the 0,0,zPosition of the atom
			g.perspectiveMatrix.lookat(0, 0, objects[i][7], 0, 0, 0, 0, 1, 0);
			setcamera = true;

		//draw one molecule
		drawOne(ctx, 30,
			objects[i][5],//x coord
			objects[i][6],//y coord
			objects[i][7],//z coord
			molTexture);//our texture

Next, we need to set the camera and object in the right position. To do this, we use a model-view matrix and set it to translate and rotate by the camera, then translate again by the atom we are drawing. It looks like this:

// Add in camera controller's position and rotation
var pos = controller.getPosition();//get the camera position
mvMatrix.translate(pos[0],pos[1],pos[2]);//translate by the camera position if needed
mvMatrix.rotate(controller.getRoll(), 1, 0, 0);//rotate if needed
mvMatrix.rotate(controller.getYaw(), 0, 1, 0);//rotate if needed
mvMatrix.rotate(controller.getPitch(), 0, 0, 1);//rotate if needed
mvMatrix.translate(-x,-y,-z);//set the object in the proper place in view

Okay, so we have our matrix of where to draw the atom, now we draw the atom after any final projections:

ctx.bindTexture(ctx.TEXTURE_2D, texture);
ctx.drawElements(ctx.TRIANGLES, g.sphere.numIndices, ctx.UNSIGNED_SHORT, 0);

All that is left is to move our camera using keys:

function keyCamera(event){//a key is released
	var cam = controller;
	if(event.shiftKey) {
		switch(event.keyCode) {//determine the key pressed
			case 65://a key
				cam.roll(-Math.PI * 0.25);//tilt to the left
			case 37://left arrow
				cam.yaw(Math.PI * 0.25);//rotate to the left
			case 68://d key
				cam.roll(Math.PI * 0.25);//tilt to the right
			case 39://right arrow
				cam.yaw(-Math.PI * 0.25);//rotate to the right
			case 83://s key
			case 40://down arrow
				cam.pitch(Math.PI * 0.25);//look down
			case 87://w key
			case 38://up arrow
				cam.pitch(-Math.PI * 0.25);//look up
	else {
		var pos = cam.getPosition();
		switch(event.keyCode) {//deterime the key pressed
			case 65://a key
			case 37://left arrow
				cam.setPosition(pos[0]-0.5,pos[1],pos[2]);//move - along the X axis
			case 68://d key
			case 39://right arrow
				cam.setPosition(pos[0]+0.5,pos[1],pos[2]);//more + along the X axis
			case 83://s key
				cam.setPosition(pos[0],pos[1]-0.5,pos[2]);//move - along the Y axis (down)
			case 40://down arrow
				cam.setPosition(pos[0],pos[1],pos[2]+0.5);//move + on the Z axis
			case 87://w key
				cam.setPosition(pos[0],pos[1]+0.50,pos[2]);//move + on the Y axis (up)
			case 38://up arrow
				cam.setPosition(pos[0],pos[1],pos[2]-0.5);//move - on the Z axis

To initialize the WebGL, we use something like this:

var gl = initWebGL("molview");
if (!gl) {
var c = document.getElementById("molview");//canvas where we will draw

c.addEventListener('webglcontextlost', handleContextLost, false);
c.addEventListener('webglcontextrestored', handleContextRestored, false);
g.program = simpleSetup(gl, "vshader", "fshader",
					[ "vNormal", "vTexCoord", "vPosition"],
					[ 0, 0, 0, 1 ], 10000);
gl.uniform3f(gl.getUniformLocation(g.program, "lightDir"), 0, 0, 1);
gl.uniform1i(gl.getUniformLocation(g.program, "sampler2d"), 0);

if (g.program) {
	g.u_normalMatrixLoc = gl.getUniformLocation(g.program, "u_normalMatrix");
	g.u_modelViewProjMatrixLoc = gl.getUniformLocation(g.program, "u_modelViewProjMatrix");

g.sphere = makeSphere(gl, 1, 30, 30);

// get the images
molTexture = loadImageTexture(gl, "./h1.jpg");

And finally the camera, we just implement something to keep track of our position and rotation and then we are good to go. There is too much code in the camera to post, so I will leave it up to interested parties to look at the source code attached. I have left out some of the functionality on an effort to keeping it brief. The attached code has everything needed and a couple of PDB file samples.

Points of Interest

I learned how relatively easy it is program using WebGL. Nice little introduction to creating something visible in a short amount of time. WebGL and HTML5 are both things I look forward to using in the future.


version 0.1: Basic ATOM viewer implemented for PDB files.



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Fred Ackers
Web Developer
United States United States
Programming using MFC and ATL for almost 12 years now. Currently studying Operating System implementation as well as Image processing. Previously worked on DSP and the use of FFT for audio application. Programmed using ADO, ODBC, ATL, COM, MFC for shell interfacing, databasing tasks, Internet items, and customization programs.

Comments and Discussions

GeneralMy vote of 5 PinmemberMadhan Mohan Reddy6-Sep-12 0:38 
Hi fred, first of all, thank u so much for ur valuable share.
I am also learning WebGL, but my task is to show a CAD file in the WebGL context. Just now I have started learning WebGL. So could you guide me like what books and website are better to refer for beginners ... please help me ..
QuestionMouse to zoom doesn't work PinmemberH. Gohel24-Feb-12 12:21 
GeneralMy vote of 5 PinmemberAnurag Gandhi9-Jan-12 19:51 
QuestionDid something similar PinmemberDavid Sehnal7-Jan-12 4:36 
GeneralGuillain Barre Syndrome PinmemberPaul Issa5-Jan-12 23:36 
QuestionMy vote of 5 PinmemberMarkDaniel5-Jan-12 23:32 
QuestionThis look great but... PinmvpSacha Barber5-Jan-12 21:43 
AnswerRe: This look great but... PinmemberFred Ackers6-Jan-12 2:53 
GeneralRe: This look great but... PinmvpSacha Barber6-Jan-12 3:40 
GeneralMy vote of 5 Pinmembersam.hill5-Jan-12 16:14 
GeneralMy vote of 5 Pinmemberzexspectrum5-Jan-12 16:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.141015.1 | Last Updated 5 Jan 2012
Article Copyright 2012 by Fred Ackers
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid