BrainBrowser
v2.5.2

Fork me on GitHub

BrainBrowser is...

BrainBrowser is an open source JavaScript library exposing a set of web-based 3D visualization tools primarily targetting neuroimaging [Sherif et al. 2015]. Using open web-standard technologies, such as WebGL and HTML5, it allows for real-time manipulation and analysis of 3D imaging data through any modern web browser. The BrainBrowser Surface Viewer is a WebGL-based 3D viewer capable of displaying 3D surfaces in real-time and mapping various sorts of data to them. The BrainBrowser Volume Viewer is an HTML5 canvas-based viewer allowing slice-by-slice traversal of MINC, NIfTI and MGH/freesurfer volumetric data.

Visualization for the Web

The BrainBrowser Surface Viewer is a WebGL-based 3D viewer capable of displaying 3D surfaces in MNI object, Wavefront object, as well as FreeSurfer binary and ASCII surface file formats. Surfaces and other data are loaded either over the network or from local files and then parsed in separate threads using Web Workers. Data maps can be applied to loaded surfaces and manipulated by changing color maps, setting thresholds or blending them with other data maps. A Surface Viewer web service has also been made available, allowing developers to make a simple API call to embed a Surface Viewer in their own web pages to visualize their own data. The BrainBrowser Surface Viewer uses three.js for 3D rendering.

The BrainBrowser Volume Viewer is an HTML5 canvas-based viewer allows users to navigate 3D or 4D MINC structural or functional MRI volume data. The Volume Viewer simultaneously displays slices along the saggital, tranverse and coronal planes, and the user can navigate along each dimension by manipulating an on-screen cursor. Volumes can be loaded over the network or from local files. Intensity data visualization can be manipulated by changing color maps or setting intensity thresholds. When dealing with 4D functional data, the Volume Viewer is capable of navigating along the time dimension as well. Multiple volumes can be loaded, the navigation through them can be synchronized, and their slices can be blended together.

Try them out in the following sample applicatons:

The following sample applications require HTML5 technologies that seem to be unavailable in your browser: Google Chrome or Mozilla Firefox are recommended for optimal viewing.
Surface Viewer Surface Viewer
MACACC Viewer MACACC Dataset
Volume Viewer Volume Viewer

Sample Application Details

The the above demonstrations show BrainBrowser being used to visualize several types of data:

  • Surface Viewer: a demonstration of the Surface Viewer visualizing models of various types, formats and sizes:
    • An exploration of correlation structure for cortical thickness previously calculated at the MNI on a vertex-wise basis from the ICBM152 MRI database
    • 3D fibre pathways derived from DTI
    • Deep brain stimulation data exported from LEAD-DBS in JSON format
    • An atlas depicting regions of the brain and linking to online research about them
    • Cortical amyloid deposition of a cohort of 18 month-old transgenic mice with Alzheimer's disease
    • An aeroplane with with air density and air flow mappings
    • A left hemisphere in Freesurfer ASC format
    • An automobile in Wavefront OBJ format
  • MACACC Dataset: a demonstration of the Surface Viewer being used to visualize the MACACC Dataset. The MACACC Dataset is a 1TB database of 6.3 million data maps representing structural correlations across the cortex.
  • Volume Viewer: a demonstration of Volume Viewer various types of MINC MRI data:
    • 3D structural data
    • 4D functonal data

BrainBrowser is developed and maintained as part of the CBRAIN project at the McGill Centre for Integrative Neuroscience. BrainBrowser was originally created by Nicolas Kassis and Tarek Sherif, then developed and maintained by Robert D. Vincent and Natacha Beck.

Downloads

Download from GitHub

You can prepare your MINC data for use in the Volume Viewer using either minc2volume-viewer.js for node.js or minc2volume-viewer.py for python (requires installation of the MINC tools).

Documentation

BrainBrowser API documentation

Examples of BrainBrowser usage can be found in the Surface Viewer and Volume Viewer demonstration code used for this site.

Other information:

Publication:

Web Service

v0.3.4

Load a BrainBrowser Surface Viewer widget into your web page to view your own data! Simply make an HTTP request to the following URL:

https://brainbrowser.cbrain.mcgill.ca/surface-viewer-widget

and insert the returned HTML into your page. The Web Service will automatically load all required library files and launch the viewer. Optionally, you can provide a callback function to programatically control the viewer.

Try out some of the basic web service functionality in the BrainBrowser Web Service Demo.

Please note the Surface Viewer Web Service is still in its early stages of development. Performance is not guaranteed and the API may change rapidly. Please send any comments or feedback at cbrain-support.mni@mcgill.ca.

Examples

Load brain.obj MNI Object model into a 200 X 200 viewer: 

  <div id="display"></div>
  <script src="jquery.min.js"></script>
  <script>
    $("#display").load("https://brainbrowser.cbrain.mcgill.ca/surface-viewer-widget?version=2.5.2&model=brain.obj&width=200&height=200");
  </script>

Use a viewer callback to set up a UI for the viewer (see the viewer object API ): 

  <div id="display"></div>
  Wireframe: <input id="wireframe" type="checkbox"/>
  <script src="jquery.min.js"></script>
  <script>
    function init(viewer) {
      $("#wireframe").change(function() {
        viewer.setWireframe($(this).is(":checked"));
      });
    }
    $("#display").load("https://brainbrowser.cbrain.mcgill.ca/surface-viewer-widget?version=2.5.2&viewer_callback=init&model=brain.obj");
  </script>

Options

The loaded viewer can be customized by passing options to the web service as parameters in the URL. Supported options for the Surface Viewer Web Service include:

version
Version of the Surface Viewer to use. Set this explicitly to prevent future updates from breaking your widget. The web service must be used with version 1.5.1 or higher (default: latest)
width
Width of the loaded viewer in pixels (default: 400)
height
Height of the loaded viewer in pixels (default: 400)
model
URL of a model file to load
format
File format of the model file (mniobj, wavefrontobj or freesurferasc. Default: mniobj)
intensity_data
URL of an intensity data file to map onto the model (requires a color map)
color_map
URL of a color map file to use in mapping the intensity data
zoom
Initial zoom level on the model (default: 1.0)
viewer_callback
An optional function defined in the client page that will be called once the viewer begins rendering, and to which a viewer object will be passed. It must be a simple javascript identifier that starts with a letter and only contains plain letters or digits (a-zA-Z0-9).
element_id
ID of the HTML element that will be inserted into the page (default: "brainbrowser")
basic_controls
Load basic UI controls (default: false)
file_input_controls
Load UI controls for inputting model, intensity and color map data from local files (default: false)

Release Notes

v0.3.2

  • More cleanup of widget UI HTML

v0.3.1

  • Cleanup of widget UI HTML

v0.3.0

  • basic_controls option added
  • file_input_controls option added
  • nothreejs option removed
  • Widget now checks if three.js and BrainBrowser are already loaded, and if so, doesn't load them

v0.2.0

  • version option added
  • viewer_callback option added