Using Unity and Shield UI for Displaying 3D Medical Objects in the Web Browser

Choosing the right technologies for displaying 3D content in the web browser is a tough decision for any solution architect. This article provides an insight on how Unity and Shield UI frameworks are used for building the three-dimensional object rendering section of an online knowledge management system for human anatomy. The platform itself is a Content Management System (CMS), implemented as a web application with integration and rendering of 3D content in the web browser.

The initial requirement for the project is to show the hierarchically organized groups of human anatomy objects on the screen, and make them interactive and responsive to user input. For example, when the user clicks on part of the body, the other anatomy parts are made semi-transparent and the description pane is updated with the correct text.

The 3D body digital platform makes use of several specific user interface elements like a TreeView for displaying the different systems and contained parts of the human anatomy with the ability to toggle their visibility with a checkbox. Another important UI enhancements are the WYSIWYG Editor, which enables rich text formatting for the related content, various pop-up Windows and other layout containers. Such complex UI widgets are not supported by Unity’s standard libraries and need to be implemented separately, by facilitating the Shield UI library – a modern JavaScript and HTML5 framework for building rich user interfaces for web applications.

On the 3D side, the Unity programming model makes it possible to capture events occurring inside the 3D rendering area – like interaction with the object, and propagate them to the JavaScript code, responsible for the rest of the user interface. The ability to send messages between the scene’s and the main page’s JavaScript contexts allows to enhance the 3D content and extend its functionality with responsive UI widgets.

The two key technologies used for displaying 3D content in the web browser – the Unity 3D game engine and the Shield UI JavaScript and HTML5 framework were empowered for building a complex web interface that meets the requirements of a bigger project – an online e-Learning platform for showing the human body in an interactive three-dimensional format.