Masaryk Uni – Medical 3D Viewer

Boosted Engagement in Learning with a Medical 3D Viewer

Outcomes and Impact:

★ Enhanced medical learning through interactive, real-time 3D exploration, boosting engagement and understanding.

★ Increased accessibility to advanced visualization tools with a browser-based, open-source 3D viewer for education.

UI Design  •  Feb–Apr 2014

 / Summary

Digital 3D visualization is a powerful tool for displaying spatial information—imagine an animated model of human organs that can be rotated and explored in real-time. Such 3D interactions greatly enhance curiosity and immersion.

With advancements in web technology, complex 3D graphics can now be displayed in browsers. While working at the e-learning service center of Masaryk University in Brno, I designed and developed a web-based tool for interactive medical 3D visualizations, accessible directly from a web browser.

The Challenge

Our team at the e-learning center focused on creating digital resources for university instructors. My role centered on producing 3D visualizations, initially shared as static images or videos.

The idea for an interactive 3D viewer emerged while collaborating with dentist MUDr. Jan Vokurka on animated surgery models, such as teeth and jaw structures. Recognizing the potential of interactive 3D visualizations, I conducted interviews with other instructors who expressed similar interest in this approach.

The Solution

As the project’s UI designer, developer, and 3D artist, I created medical 3D visualizations and developed an interactive 3D viewer that requires no additional plugins. This viewer can be easily embedded on websites, allowing users to explore 3D models from multiple angles in real-time.

The tool enhances learning by allowing students to interact with complex anatomical models, fostering greater immersion and understanding.

My Role & Participation

UI Designer, Developer, 3D Artist

  • Created medical 3D models and animations using 3ds Max, After Effects, and Photoshop.
  • Designed and developed an interactive 3D viewer using HTML5, CSS3, JavaScript/jQuery, and WebGL.
3D symbol3D symbol3D symbol3D viewer in use on the laptop by a studentScreenshot from the 3D viewer

 / Process

Me during a recording session with the university tutorsMain technologies used for the 3D viewer (WebGL, HTML5, Three.js, CSS3, jQuery, Sea3D)
My initial sketches of the 3D viewer

1  Technology Research

In 2014, Web 3D graphics was still an emerging field with limited browser support, so it wasn’t widely accessible to general users. I began by researching available technologies to select the most suitable one for our needs, with careful consideration of future web evolution.

Based on my research and our target users' browser statistics, I favored HTML5 with WebGL/Three.js over Flash. This choice was more user-friendly (no additional plugins, good mobile support) and promising due to the rise of HTML5.

2  App Design & Development

In collaboration with dentist MUDr. Vokurka, we outlined requirements for the 3D viewer and discussed key functionalities that would be valuable for university students.

I also researched UI patterns used in other 3D web solutions, which helped me identify features to enhance the viewer's usability, such as fullscreen view and mouse interactions.

With the requirements and UI pattern ideas in place, I sketched the viewer on paper to quickly explore possible UI arrangements. I then began prototyping using HTML5 and JavaScript libraries.

An essential part of the solution was selecting a suitable 3D format for our visualizations and developing an efficient export system from 3D software to the viewer. To ensure smooth interaction, we chose the Sea3D format for its high-performance optimization and ability to encapsulate 3D animations and sounds.

3  Ideation Sessions & Design Reviews

My work on 3D visualizations and the viewer involved several meetings with tutors, dentists, and medical professionals to gather ideas, review resources, and assess progress.

We often needed to film physical models performing specific movements. These videos were then converted into 3D, incorporating effects that couldn't be captured directly, such as semi-transparency.

3D symbol3D symbol
3D symbol

What I’ve Learned

•  Web 3D Technologies Create Unique Experiences

The combination of 3D graphics and web technology offers outstanding solutions that foster user immersion and curiosity. One of my favorite examples is the inspiring human visualization tool → www.biodigital.com.

•  Content, Usability, and Performance Are Crucial

3D graphics can be resource-intensive, making optimization essential for smooth interaction. This includes managing loading speed, file size, and object count to support usability, along with consistent UI patterns. A strong concept, usability, and performance form the foundation of an engaging user experience.

•  In-Person Meetings Are Invaluable

Regular design reviews and progress updates are essential. While email works, in-person meetings yield richer feedback, allow for quick follow-ups, and help build a stronger client relationship by capturing their immediate reactions.

 / Designs

Screenshot from the 3D viewer (all available controls)
Key UI Features

The viewer includes controls for adjusting the view (located in the gray and black panels). These controls can be hidden to allow full focus on the visualization.

Some browsers may have difficulty displaying 3D content. In such cases, users receive an informative message and can switch to a tab with alternative content.

View Adjustment

The viewer includes controls to hide specific model parts, set specific viewing angles, and adjust the view in real time. Users can manipulate the view with either the mouse or a control panel offering options to reset, rotate, move, and zoom.

The viewer can display 3D animations from the loaded file. If animations are present, additional timeline controls appear for managing playback.

All controls are detailed in the user interface guide displayed on the right.

Screenshot from the 3D viewer (user interface help)
Screenshot from the 3D viewerScreenshot from the 3D viewer
Screenshot from the 3D viewer
Capabilities of the 3D Viewer

In the first screenshot, you can see the initial view of a human head. This can be easily changed to an uncovered view by hiding specific parts of the model.

The camera position can be adjusted to focus on specific details and view the model from different angles. Switching to fullscreen mode also enhances visual immersion.

Screenshot from the 3D viewer
Future Opportunities

Many medical visualizations can benefit from the 3D viewer, including models of the human body and organs, surgery demonstrations, and medical data representations. The viewer’s capabilities can be expanded to display complex 3D animations, allowing for even more impactful visualizations.

Screenshot from the 3D viewer

Did you enjoy my work?

Let’s work together! I'm especially passionate about projects in healthcare, smart technologies, and project management.

Contact me at → bretislav.mazoch@gmail.com or LinkedIn