Overview
Magnetic Resonance Imaging (MRI) represents a non-invasive, high-contrast medical imaging modality that relies on the nuclear magnetic resonance (NMR) signals of hydrogen nuclei ($^1\text{H}$ protons) naturally abundant in human tissue. When placed inside a strong magnetic field ($\mathbf{B}_0$), proton spin vectors align parallel or anti-parallel to the field axis. Radiofrequency (RF) excitation pulses tuned to the Larmor frequency $\omega_0 = \gamma B_0$ tip proton magnetization vectors away from equilibrium. Subsequent relaxation produces measurable RF signals collected by receiver coils.
The temporal decay of transverse magnetization is governed by spin-spin relaxation ($T_2$), while longitudinal relaxation ($T_1$) dictates thermal energy exchange with the surrounding lattice. The vector differential equation governing ensemble proton dynamics in physical space is defined by the Bloch equation:
$$\frac{d\mathbf{M}}{dt} = \mathbf{M} \times \gamma \mathbf{B} - \frac{M_x \mathbf{i} + M_y \mathbf{j}}{T_2} - \frac{(M_z - M_0)\mathbf{k}}{T_1}$$
In this application, real anatomical MRI slice scans ($256 \times 256$ PNG image sequences) and volumetric $3\text{D}$ point cloud datasets are loaded dynamically. The application performs real-time Multi-Planar Reconstruction (MPR), allowing users to navigate axial, sagittal, and coronal planes simultaneously, apply dynamic window leveling, pseudocolor mappings, and inspect volumetric brain structures in three dimensions.
Technical Details
The client-side renderer combines WebGL point cloud processing via Three.js with HTML5 Canvas 2D image pixel manipulation. Real MRI slice images are fetched asynchronously using static image directories (static/data/<orientation>/<index>.png).
The 3D point cloud is constructed by parsing volumetric.json, which contains a 3D matrix of voxel signal intensities $V(x,y,z)$. Non-zero voxel coordinates ($V(x,y,z) > 1$) are loaded into a Three.js BufferGeometry as 3D spatial points scaled by voxel physical dimensions ($0.5\text{ mm}^3$ pitch):
$$S(k_x, k_y) = \iint \rho(x,y) e^{-i 2\pi (k_x x + k_y y)} dx dy$$
Canvas display pipelines normalize for screen pixel densities by checking window.devicePixelRatio ($DPR$), enforcing crisp anti-aliased crosshair rendering and responsive frame rates under 200ms Interaction to Next Paint (INP) benchmarks.