Tuesday, 10 March 2015

Rasmol.js

"That guy over there said he wrote RasMol." We were at the MGMS Meeting in Dublin in 2005, and one of the PhD students in our group came over to us excitedly. Obviously we thought the student's claim dubious to say the least; no-one wrote RasMol, it was just one of those pieces of software that had always been around.

Cut to 2015, and I'm working for the guy who wrote RasMol. Having seen Jmol take the leap to JavaScript (an impressive piece of work) some years ago already, I wondered could Emscripten make it possible for RasMol to run for the first time in the browser (sshh...don't mention Chime).

And so here's the result (note: only works in Firefox):

Notes:
1. Everything works pretty much identically to the original code, though I've not bothered to get export/save functionality working, nor reading scripts.
2. The port to the browser was done by first porting to libSDL, a graphics library used by many games (also by PyGame). Emscripten provides a library_sdl.js that emulates/replaces all of the libSDL calls. Just to note that I changed the configuration settings at the top of the library_sdl.js to speed things up.
3. The maximum speed is 60fps, which is controlled by the browser, which you may or may not hit depending on fullscreen or not and your hardware (and to a lesser extent the size of the protein model). I did some profiling (direct timings, not based on fps) to see whether I could shave some more time off the screen refresh, but it turned out that the time for a probably-avoidable screen buffer copy was dwarfed (about 15-20x) by the browser's own copy of the buffer to the canvas (putImageData) - I don't get why that is so slow.
4. While there may not be much point in porting Rasmol to the web in this day-and-age, given the rise of WebGL and indeed Jmol, it was a nice spare time project for me over the last while, and gave me practice with Emscripten. This latter lead me to figure out how to compile the cheminformatics toolkits I discussed in the previous posts.
5. Roger was particularly tickled by the fact that if you "set shadows on" for a spacefill or ball-and-stick model, you get ray tracing in JavaScript in the browser.
6. Here's the code.

7 comments:

Steve W said...

This is really nice, thanks for sharing it. I always liked rasmol and seeing this put a smile on my face.

Noel O'Boyle said...

Thanks Steve.

Markus Sitzmann said...

So we have decide now whether we should call you from now on Mr. Cross-Compiles-Every-Code-He-Finds or Mr. Atoms-And-Bonds-Need-Shadows.

Nice :-)

Noel O'Boyle said...

Dude, it's Dr. :-)

Herman Bergwerf said...

Very nice! Perhaps this should be used as retro render engine in http://molview.org ;-)

Anonymous said...

Hi,
actually delete "only works in Firefox"

Chrome: 60 FPS
Firefox: 60 FPS
IE11: 23 FPS
Edge (Win10): 72 FPS

This cross-compiler stuff always amazes me, thanks for showing us this RasMol JavaScript conversion. The problem with JavaScript I have is, that its usually hard to read long complex code, including JMOL/RASMOL and others. But if the compiling works without any problems that becomes less of a problem.

Cheers
Tobias

Noel O'Boyle said...

That comment was added after the initial post so that users would not report cross-browser incompatabilities, particularly with respect to full-screen mode.