SurfView.jsBrain Surface Visualization

GPU-accelerated cortical meshes, multi-layer data overlays, scientific colormaps, and temporal playback — 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

⏱️

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), plus the optional tweakpane peers if you want the built-in control panel. See Getting Started.