Lymphatic Voyage: Interctive 3D Web App

Master of Arts Thesis
Currently the web app works the best rendered in Chrome on an iMac. Optimization is still in progress.

Interactive 3D Web Demo

A recorded video demonstrating the capacities of the App.

Introduction

Lymph nodes are secondary lymphoid organs where T cells and B cells meet antigens to initiate adaptive immune responses. The anatomical and molecular cues direct the cell and fluid movements to ensure that the antigens can meet the right immune cells effectively.

Lymphatic Voyage is an interactive 3D web app (WebGL) designed as an educational tool for the course “Fundamentals of Immune Recognition and Responses”, at Johns Hopkins University School of Medicine, taught to first year PhD and MD students, by Mark J. Soloski, PhD.

The 3D mouse lymph node model was created based on high resolution imaging data (unpublished) generated through an advanced tissue clearing method named Ce3D (Clarity enhanced 3D) developed by Weizhe Li, PhD and Andrea Radtke, PhD in the Lymphocyte Biology Section, Laboratory of Systems Biology, led by Ronald N. Germain, MD, PhD at NIH (National Institutes of Health).
To learn more about tissue clearing, watch this video: CLARITY

Thesis Advisor: Lydia Gregg, MA, CMI, FAMI
Assistant Professor, Division of Interventional Neuroradiology and Department of Art as Applied to Medicine, Johns Hopkins University, School of Medicine
Thesis Preceptor: Mark J. Soloski, PhD
Professor of Medicine, Division of Rheumatology, Johns Hopkins University, School of Medicine

"Communicating immune cell dynamics and lymph node architecture"

Mouse lymph node anatomy

Accuracy

Eductional material created from the newest tissue clearing – 3D imaging data.

Accessibility

WebGL – based interactive web app: accessible from any device without the use of plug-ins.

Animation

Learn about cell dynamics and lymph node architecture from the didactic 3D animations.

Interactivity

Explore the 3D model and take a closer look at different cell subsets at your own pace.

Planning/Design

Flowchart and storyboards were developed to plan out the web app.

Flowchart

One page of the storyboard

3D Model Reconstruction

Segmentation of different cell subsets in the mouse lymph node were performed in Imaris.
WebGL framework Blend4Web was used for real-time 3D rendering and interactivity. Cinema 4D and Adobe After Effects were used for pre-rendered animaiton.

Segmentation of B cell follicles in Imaris

Mouse lymph node rendered in C4D

Web App Development

The app was developed using Blend4Web, HTML5, CSS, and JavaScript.

A section of the HTML file

Web app interface

Workflow & Software

Background research was performed and feedback was gathered from students who have taken this lecture through an informal focus group meeting.
Here is a list of workflow and software used for this project.

error: ALERT: Content on this website is monitored and copyright © protected!