SurfView.jsBrain Surface Visualization

GPU-accelerated cortical meshes, multi-layer data overlays, and optional scientific controls — powered by Three.js, in the browser.

Get Started

Live Demo

API Reference

Loading cortical surface…

🧠

Real cortical surfaces

Load GIFTI, FreeSurfer, and PLY meshes — inflated, pial, or white — and render them with smooth, lit Three.js materials.

Surfaces

🎨

Multi-layer overlays

Stack data, label, RGBA, and volume-projection layers with configurable blending, opacity, and GPU compositing.

Layers

🌈

Scientific colormaps

Viridis, plasma, hot, cool, Spectral and more — with explicit threshold semantics and transparent-alpha masking.

Colormaps

🎛️

Purpose-built controls

Add an optional, keyboard-accessible scientific panel beside the canvas without changing the Three.js scene or taking over application layout.

First-party controls

⏱️

Temporal playback

Animate time-series data with frame interpolation, playback controls, and hover sparkline tooltips.

Temporal

⚛️

React ready

First-class React components and hooks for dropping a viewer straight into a React app.

React integration

⚡

Built for performance

GPU layer compositing and picking, cached RGBA buffers, and O(V·degree) curvature keep large meshes interactive.

Performance

See it run

The surface below is a real surfview viewer rendering an actual fs_LR.32k inflated cortex with a functional overlay — no screenshots, no video. Drag to orbit, scroll to zoom.

Loading cortical surface…

MultiLayerNeuroSurface — fs_LR.32k inflated left hemisphere with a Spectral data overlay.

import { NeuroSurfaceViewer, MultiLayerNeuroSurface, DataLayer, loadSurface } from 'surfview'

// Create the viewer
const viewer = new NeuroSurfaceViewer(document.getElementById('viewer'), 800, 600)
viewer.startRenderLoop()

// Load a GIFTI surface and drape a data overlay on it
const geometry = await loadSurface('/fs_LR.32k.L.inflated.surf.gii', 'gifti', 'left')
const surface = new MultiLayerNeuroSurface(geometry, { useGPUCompositing: true })
viewer.addSurface(surface, 'cortex')
viewer.centerCamera()

viewer.addLayer('cortex', new DataLayer('overlay', metric, null, 'Spectral'))

Three.js peer dependency

SurfView.js renders with Three.js. Install it alongside the library (npm install surfview three). Generated reports can instead use the self-contained browser embed, which includes Three.js.