In this tutorial you will learn how to visualize medical surfaces using Voxelent.

Many medical applications involve 3D visualization of patient data to assist physicians in performing diagnosis, pre-operative planning, or even training. Recent advances in both hardware and software technologies opens new possibilities to the medical community by harnessing the power of the Internet and cutting edge WebGL technology. Using Voxelent, one can develop a 3D visualization application like never before!

You can download our sample model from here (It’s my own DTI tracts, so feel free to use, copy, or modify it as you wish!). If you’re willing to use your own data,  you’re required to convert your data into a JSON model that is compatible with Voxelent. Please refer to the tutorial about how to import VTK meshes into a Voxelent application  for more details.

The following code is all you need to load your VTK mesh model into a web page (make sure your file name and the relative paths are correct). In the following sections, I will  walk you through the code.

<html>
<head>
<title>Hello 3D World!</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type='text/javascript' src='lib/voxelent_v0.87.6.js'></script>

<script type='text/javascript'>
var view;

function runVoxApp(){
     vxl.api.subscribe(vxl.events.MODELS_LOADED, this);
     view = vxl.api.setup('view-1');
     vxl.api.load('myVTKModel.json');
     view.start();
}

function handleEvent(event){
    vxl.c.camera.closeUp('myVTKModel');
}
</script>
</head>
<body onload='runVoxApp()'>
    <canvas id ='view-1' width=800 height=650></canvas>
</body>
</html>

 

Step 1. Create empty HTML file

Let’s create an empty HTML file. This file should include the required libraries (JQuery and Voxelent) and a canvas called view-1:

<html>
<head>
<title>Hello 3D World!</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type='text/javascript' src='lib/voxelent_v0.87.6.js'></script>

</head>
<body onload='runVoxApp()'>
<canvas id ='view-1' width=800 height=650>
</canvas>

</body>
</html>

In the code above, we placed onload = 'runVoxApp()' in the <body> tag. This way we can ensure that the function runVoxApp() will be called immediately when your page is loaded.

 

Step 2. Add the JavaScript code

Now fun begins! We are going to write our JavaScript code inside a <script> tag:

<script type='text/javascript> //Your code in here </script>.

In this tutorial, we would like to visualize our model immediately. Therefore, everything from setting up a view to loading the model will be placed into the runVoxApp() function:

<head>
<title>Hello 3D World!</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type='text/javascript' src='lib/voxelent_v0.87.6.js'></script>

<script type='text/javascript'>
    var view;
    function runVoxApp(){
        vxl.api.subscribe(vxl.events.MODELS_LOADED, this);
        view = vxl.api.setup('view-1');
        vxl.api.load('myVTKModel.json');
        view.start(); 
    }

    function handleEvent(event){
        vxl.c.camera.closeUp('myVTKModel'); // Place the current camera in front of your model
    }
</script>
</head>

 

Handling asynchronous events

Because we are loading assets remotely (coming from the web server) we can’t be sure of when they will arrive. This is completely dependant of your internet connection. Here we are assuming that the web server exists in a remote location though it would be completely viable to run one locally. However a remote web server is the general case scenario and for that, we need to handle asynchronous events.

In this case, we subscribe to vxl.events.MODELS_LOADED, which is a Voxelent’s asynchronous event:

vxl.api.subscribe(vxl.events.MODELS_LOADED, this);

This event will be triggered eventually by calling vxl.api.load or by calling vxlModelManager.load. Voxelent checks when the models passed to these methods are completely downloaded and then it triggers the event.

As we are subscribing to a Voxelent event, it is expected that we provide a handleEvent function. In this case, as we passed this as the second parameter of vxl.api.subscribe:

vxl.api.subscribe(vxl.events.MODELS_LOADED, this);

given that we are not inside an object, this will refer to the object in which our functions exist, which by default is the JavaScript window object. In this context, we just need to define the handleEvent function.

If we were subscribed to more than one Voxelent events, we would need to write a switch to verify which event we are receiving and then react to it. Since we are just subscribed to one event, there is no need to do that. In this case we just move the camera to the object that has been loaded.

Focusing on an actor

We would like to automatically focus the camera on the model when the model is loaded. This can be easily done using the vxlCamera.closeUp() method.

function handleEvent(event){
    vxl.c.camera.closeUp('myVTKModel.json'); // Place the current camera in front of your model
}

Step 3. Interact with your model

Now you’re ready to save your .html file and experience the awesomeness of Voxelent! You may use the following combinations to interact with your model:

Click and drag to rotate the object
CTRL + click and drag to zoom in/out (Command instead of CTRL on Mac computers).
SHIFT + click and drag to translate the object

Here is the demo.

viva Voxelent!