CDVRisk_Sim: Project Story & Hackathon Submission

🚀 Elevator Pitch

"CDVRisk_Sim transforms complex patient clinical data into an interactive 3D anatomical heart twin, mapping multi-vessel stenosis risk and explainable AI insights directly onto coronary arteries in real time."

📖 Project Story: About the Project

💡 Inspiration

Cardiovascular disease remains the leading cause of mortality worldwide. In clinical practice, cardiologists routinely synthesize dozens of complex diagnostic signals, such as resting ECG abnormalities, serum lipid biomarkers, and echocardiographic wall motion anomalies.

However, we noticed a critical communication gap: raw numbers and statistical probabilities fail to give clinicians or patients an intuitive understanding of where and how disease is developing inside the human body. A patient told they have a 70% cardiovascular risk leaves the clinic anxious, not knowing which vessel is in jeopardy or whether the front, lateral, or posterior myocardium is at risk.

We were inspired to build CDVRisk_Sim to turn abstract clinical spreadsheets into an interactive, spatial digital twin—enabling non-invasive pre-catheterization triage, transparent AI explainability, and empathetic doctor-patient communication.

🛠️ How We Built It

CDVRisk_Sim is architected as an end-to-end full-stack medical simulation platform.

1. Data Engineering & Machine Learning

We trained our predictive pipeline on the clinically validated Z-Alizadeh Sani Cardiology Dataset, containing 303 patients and 55 features across demographics, symptoms, ECG findings, laboratory profiles, and echocardiography.

Target Leakage Prevention: All diagnostic outcome columns, including LAD, LCX, RCA, and Cath, were strictly isolated from the input features.
Multi-Vessel Decomposition: Rather than predicting an ambiguous single binary outcome, we trained three independent XGBoost gradient-boosted tree classifiers, one for each major coronary artery: LAD, LCX, and RCA. Each model was optimized through five-fold stratified cross-validation.
Overall CAD Risk Estimation: The system combines the predicted risks for the three coronary arteries to estimate the overall likelihood of coronary artery disease, accounting for the possibility of disease affecting multiple vessels.
Model Performance: The pipeline achieved 85.25% accuracy and an ROC-AUC of 0.9519 on the held-out test cohort, alongside 86.11% recall for the critical Left Anterior Descending (LAD) artery.
Explainable AI with TreeSHAP: We integrated shap.TreeExplainer directly into the inference pipeline to calculate feature-level contributions for all 55 input features. This allows clinicians to understand whether factors such as reduced Ejection Fraction, ST-segment depression, or systolic hypertension were the primary drivers behind a specific arterial risk prediction.

2. 3D WebGL Pipeline & Custom GLSL Shaders

The frontend is built with React 19, React Three Fiber, and Three.js.

Geometry Optimization: We started with a detailed human anatomical heart mesh originally weighing 115.8 MB. Using Google Draco geometry compression through gltf-pipeline, we reduced the asset footprint by 94.2%, down to 6.73 MB, enabling smooth rendering in standard web browsers without requiring high-end discrete GPUs.
Custom GLSL Shader Distance Fields: Rather than overlaying rigid, unrealistic 3D tubes onto the heart, we injected custom GLSL fragment code into Three.js physical materials using onBeforeCompile. The shader calculates the distance between rendered surface fragments and the actual 3D coronary artery paths. This allows the system to create smooth, localized visual effects directly on the heart surface.
Dynamic Arterial Risk Visualization: As the predicted stenosis risk increases, the heart surface gradually develops darker ischemic discoloration along the corresponding anatomical vessel trajectory, providing an intuitive spatial representation of potential disease.
Spatial UI & Outlines: Anchored @react-three/drei HTML callout tags track the LAD, LCX, and RCA in 3D coordinate space, while dynamic <Outlines> boundaries highlight target vessels during user interaction.

3. Cloud Deployment

Backend: Packaged using a lightweight Dockerfile and deployed on Render. The FastAPI and Uvicorn backend serves endpoints for predictions, sample patients, and model performance metrics.
Frontend: Deployed to Vercel with client-side routing rewrites and automatic URL sanitization.

⚡ Challenges We Faced

1. The 115 MB Mesh Bottleneck

The original GLTF mesh caused performance issues on mobile browsers and exceeded GitHub's 100 MB file limit. We addressed this by building an automated Draco compression pipeline that quantized vertex buffers and normal vectors, achieving approximately 94% size reduction while preserving fine anatomical details.

2. Dynamic Tissue Heatmaps on a Single Baked Mesh

Standard 3D viewers cannot easily recolor specific regions of a single baked organ mesh. Developing the custom GLSL distance-field shader required transforming local vertex coordinates and calculating real-time segment falloffs directly inside Three.js's standard physically based rendering pipeline.

3. Preventing WebGL Context Destruction on Route Navigation

In standard React routing setups, navigating between the Predict and About pages can destroy the WebGL context, forcing the canvas to be recreated and potentially wiping user-entered clinical data.

We engineered a persistent display wrapper that keeps the 3D scene alive in memory while toggling route visibility, preserving the rendering context and improving the user experience.

4. Preventing Data Leakage in Clinical Modeling

Coronary catheterization reports inherently correlate with individual vessel labels. We therefore ensured that diagnostic catheterization outcomes were completely removed from the model's input features, forcing predictions to rely exclusively on non-invasive clinical biomarkers.

🧠 What We Learned

Bridging Clinical Nuance with Computer Graphics: We learned how vascular territories correlate with clinical ECG leads and echocardiographic wall motion abnormalities, and how to represent these relationships visually rather than purely numerically.
Trust Through Explainability: In healthcare, predictive performance alone is not enough. Integrating real-time TreeSHAP explanations helped transform our product from a black-box prediction system into a more transparent clinical decision-support prototype.
Performance Optimization in Modern WebGL: We gained practical expertise in shader compilation lifecycles, Draco decompression, and memory management in React Three Fiber.
End-to-End Product Engineering: We learned how to integrate clinical data processing, machine learning inference, interactive 3D visualization, and cloud deployment into a cohesive full-stack application.

🔮 What's Next for CDVRisk_Sim

Direct DICOM & CT Angiography Ingestion: Enable automatic patient-specific anatomical reconstruction from 3D CT and MRI scans.
Simulated Interventional Planning: Allow cardiologists to simulate virtual coronary stenting or balloon angioplasty and visualize potential post-procedural perfusion changes.
Multi-Center Clinical Validation: Expand the training dataset beyond the Z-Alizadeh Sani registry to evaluate generalization across diverse patient populations and clinical settings.

Note: CDVRisk_Sim is a research and simulation prototype. Its predictions require independent clinical validation before being used to guide real-world medical decisions.