From Van Essen Lab

Jump to: navigation, search





CaretJS is a combination of HTML, JavaScript, and WebGL for visualization of a Caret surface. WebGL is a JavaScript version of OpenGL ES that is part of the HTML Canvas element. WebGL is being developed by Apple, Google, Mozilla, and Opera for their respective web browsers. WebGL is not yet in any released web browser but is available in the development versions of the browsers.

Get a Compatible Browser

Download the development version of a web browser. I used Chromium on the Mac and Minefield (Firefox) on Windows. Scroll the linked page for instructions on how to start the development versions of the web browsers.

View a CaretJS Surface


  • Drag - Rotate
  • Shift Drag: Pan
  • CTRL Drag: Zoom


Several files are used for the Caret Surface.

  • Surface*.html is the HTML file loaded into a web browser.
  • surface*.js contains the surface geometry and coloring.
  • J3DI.js contains some helpful JavaScript code for interacting with WebGL.
  • J3DIMath.js contains JavaScript code for math functions such as matrix operations.

Potential Enhancements

  • Fix lighting
  • Add coloring
  • Node Identification (picking)
  • Determine node (vertex) limit 32K or 64K ? Get around limit with surface in two pieces.
  • Remove texture coordinates.

Creating a Surface for CaretJS

  • Load the surface into Caret5.
  • Run Surface Menu->Simplify Surface. Enter 60,000 for the number of nodes and press enter.
  • Select Surface Menu->Information. Make sure the number of nodes is less than 32,767.
  • File Menu->Save Data File. Set the type to GIFTI Surface File (*.surf.gii. Enter a filename ending with .surf.gii and press the Save button.
  • Exit Caret5.
  • Start Caret6.
  • Select File Menu->Open Data File. Select the surface file that you just saved. When queried, set the Surface Type and Structure.
  • Select File Menu->Manage Loaded Files. Check the box next to the surface and press Save Checked Files.
  • Exit Caret6.
  • Run "caret6_command -surface-to-webgl" to create a WebGL Javascript file ending in .js.
  • Obtain a Surface.html file and update the include (a <script src> tag) for the .js file you created.
  • Load the HTML file into a web browser that supports WebGL.
Personal tools
Sums Database