Med3Web: Free, Open source Browser-based DICOM viewer for 2D/ 3D Medical Visualization

Med3Web is an open source free DICOM 2D/ 3D viewer that supports advanced volume and surface rendering & Segmented Data Visualization. It uses web technologies that are compatible and supported by all modern major web browsers on all known operating systems such as HTML5, Javascript, CSS, NodeJS/ NPM. It leverages WebGL feature in browser to render and display advanced 3D models from DICOM Images.

What's WebGL?

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.

The project is released and maintained by web development agency (Epam.com) among other open-source projects for medical and research usage.


Though Med3Web could be packed as a desktop app, using Electron/ NW projects, however, it was designed and released to be portable, or hosted on the cloud on a web server to be used from browsers. That might be tricky from users with no web developing experience and limited hacking skills, but we will list detailed steps to install it.

Med3Web in Action

Browser support

Currently, only Chrome, Firefox, Safari, Opera browsers are supported. Other browsers can be used with some performance slowdown and other rendering artifacts. Mobile browsers are not currently supported, but some of them can be used with performance/rendering problems and so on.

Requirements

  • Modern system
  • Modern browsers (Google Chrome, Chromium, Firefox, Opera, Safari)
  • WebGL support
  • Basic knowledge of coding (NodeJS, NPM) to install

Features

  • Open source & Free
  • Read data from the local machine, or from a remote server
  • Built with HTML5 compatible with all modern browsers
  • Works on Modern browsers with WebGL support
  • Supports Android Chrome with enabled WebGL
  • DICOM, NIfTI, KTX, and HDR formats support.
  • Real-time adjustment of isosurface and transfer function levels in 3D views.
  • Measurement of distances, angles, and areas in 2D views.
  • DICOM tag browser
  • Real-time volume clipping to open areas of interest
  • Automatic volume segmentation
  • 5 Mode view support
  • Semi-automatic methods for areas of interest opening/selection.
  • Segmentation data visualization.
  • Advanced 3D visualization (Isosurface Visualization, Volume Visualization, Max Intensity Projection (MIP), Segmented Data Visualization)
  • Opens local data and remote data
  • 2D DICOM viewer
  • 3D DICOM viewer
  • 3D Volume rendering
  • Turbo 3D mode
  • Easy setup
  • Works without a Server
  • Works smoothly on legacy web servers

Technical notes

Isosurface 3D Visualization 

Med3Web is built with pure web technologies, (HTML5, JavaScript, CSS) with WebGL support, using NodeJS for development and NPM (Node Package Manager) for development and building production-ready project.  The developers use a set of libraries and framework, DICOM library and visualization tools including

  • dicomParser: DICOM parser by cornerstone library, It parses DICOM Part 10 data
  • Daikon: A JavaScript DICOM reader.
  • Xtk: a Scientific and a medical visualization Toolkit/ framework that utilizes WebGL for advanced 3D medical visualization.
  • Three.js: A JavaScript framework for WebGL visualization


Prerequisites

  • NodeJS > 6.10.3
  • NPM
  • gulp

Setup & Install


Open your desktop Terminal

Check for installed NodeJS version, If not installed, please install it

node -v

Clone the project repo

git clone https://github.com/epam/med3web.git

cd med3web

npm install

install gulp

npm install -g gulp-cli

Running the app

npm run start 

The app will run quickly and start smoothly even on old machines on those ports

Local: http://localhost:9000
External: http://192.168.1.103:9000

Building for production

Building a static web version, That can be used from the local machine (local server), or installed on a web server.

npm run build

It will build the application in dist directory, however, the static files can't work easily on the local machine, you will need a local server, I would recommend using zero-footprint quick run-up server like http-server,

npm install -g http-server
cd dist
http-server

The app will be ready at port: 8080 "http://127.0.0.1:8080/"

I have tested that on different machines and operating systems including Linux (Solus Linux) with a quite powerful machine with WebGL support, Mac OSX (2011 build with poor WebGL), and on Windows on fairly new gaming PC, It performs very well on modern machines, but poorly on old ones.


License


Licensed under the Apache License, Version 2.0.


Resources


We have covered several DICOM viewers categories:



  • Medical imaging applications are a necessity in research and clinical practice. However, unlike years ago there are medical imaging specific frameworks that ease the development of medical imaging applications. As our goal in Medevel.com to create useful resources for the medical apps developers community, here in this article we...Read more...

  • Building medical imaging applications has been evolving as the industry demands over the last decade. From creating the application from scratch to medical imaging specific frameworks, platforms and environments. Today's topic is about one of these specific tools: GIMIAS. GIMIAS is an open-source platform for creating medical imaging applications that...Read more...

  • While consulting for medical projects over the years and working on some, I collected hundreds of domain-specific libraries and frameworks built to help developers make medical applications. However, many of the libraries were not supported or popular enough to survive as they were abandoned by their creators over the years....Read more...

  • Radiopaedia.org is a rapidly growing, open-edit radiology resource, compiled by radiologists and other health professionals from across the globe. Radiopaedia is a  radiology educational web resource containing reference articles, radiology images, and patient cases. It also contains a radiology encyclopedia. It is currently the largest freely available radiology related...Read more...

  • Radiologists require up-to-date materials, applications and services to ease their work. Radiological Anatomy is one of the most important required topics for radiologists, medical students, radiology students and orthopedics. What's Radioanatomy?Radioanatomy (x-ray anatomy) is an anatomy discipline which involves the study of anatomy through the use of radiographic films....Read more...