Displaying fMRI images in 3D on the web using three.js

No Comments

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.

Therefore, it can be useful to implement a method for displaying graphics in 3D form.
Luckily, there are some good javascript libraries that interact with the HTML5 canvas attribute to present 3D objects.

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:

Links: