Displaying fMRI images in 3D on the web using three.js
Publishing fMRI results usually involves the presentation of slice images that show regions of increased BOLD (Blood Oxygen Dependent Signal). However, fMRI data is inherently three dimensional and often it is difficult to visualise or appropriately present data in 2D formats.
I chose to use the three.js library as it allows easy loading of the .VTK object format that my favourite desktop fMRI image viewer, Mango, can export. (incidentally, Mango also has it’s own full featured web based viewer but I wanted a lighter solution for displaying images).
The view below shows how a 3D image can be easily embedded in a web page. Note, WebGL is not supported in all browsers, try Firefox if you’re having trouble. The 3D object for the brain render is quite large (approx 20Mb) so it may take a minute to load.
click here to open in new window.
The code for loading these objects is very similar to one of the three.js examples (see: examples/webgl_loader_vtk.html). I only made a few small changes to load two objects and have transparency on the brain surface:
Rendering transparent objects in WebGL sometimes causes some artefacts, I found a trick to fix the issue. Essentially, we render two surfaces of the object, the front side and the back side and assign them both to the same object. In this way, the object remains transparent in all orientations:
- tutorial to help understand the three.js viewport camera
- Mango is an easy to use fMRI image viewer that has support for overlays, ROIs and rendering surfaces
- MRIcroGL, another great program for editing 3d MRI images
- global arms trading, an example of a fully fledged web-app using three.js
- some other libraries for data visualisation
- three.js examples
- three.js scene building tools which allow you to edit and export three.js scenes using an interactive editor