Visualization - VolumeRC/AtlasConversionScripts GitHub Wiki

Visualization

Once you have generated the atlas you can interactively visualize it using X3DOM and a WebGL compatible browser. Just, simply creating a basic HTML page.

Loading the X3DOM framework

You can use the latest version of X3DOM from x3dom.org. It is also mandatory to load the volume rendering component. An example HTML header is as follows:

<head> 
    <title>My first X3DOM page</title> 			
    <script type='text/javascript' src='http://www.x3dom.org/download/dev/x3dom.js'> </script>
    <script type='text/javascript' src='http://www.x3dom.org/download/dev/components/VolumeRendering.js'> </script> 
    <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link> 
</head>

More info about X3DOM on doc.x3dom.org.

ImageTextureAtlas node

X3DOM provides a node to use the atlas as a texture for the volume rendering component. After generating the atlas an _atlasDim.txt file is created. This file contains the necessary information to define the ImageTextureAtlas.

Example output of an atlasDim.txt file:

(97,(10,10))

The first value represents the total number of slices and the other two values indicate the number of slices on X and Y axis. Taking this values into account an ImageTextureAtlas is defined as follows:

<ImageTextureAtlas containerField='[voxels|surfaceNormals]' url='[url to your atlas]' numberOfSlices='97' slicesOverX='10' slicesOverY='10'></ImageTextureAtlas>

The containerField specifies if the atlas contains only the volume data when using the voxels parameter or the gradient data, when using the surfaceNormals parameter.

Basic Scene Declaration

A basic volume rendering scene is pretty straightforward to declare. You can use the following as a boilerplate for your scene:

<html>
	<head>
		<title>My first Volume Rendering page</title> 			
		<script type='text/javascript' src='http://www.x3dom.org/download/dev/x3dom.js'> </script>
		<script type='text/javascript' src='http://www.x3dom.org/download/dev/components/VolumeRendering.js'> </script> 
		<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link> 
	</head>
	<body>
		<X3D showStat='false' showLog='false' width='500px' height='500px'>
			<Scene>
				<Background DEF='BG' skyColor='1 1 1' transparency='0'></Background> 
				<Viewpoint description='Default' zNear='0.0001' zFar='100'></Viewpoint>
				<Transform>
					<VolumeData id='volume' dimensions='4.0 4.0 4.0'>
						<ImageTextureAtlas containerField='voxels' url='[url to your atlas]' numberOfSlices='97' slicesOverX='10' slicesOverY='10'></ImageTextureAtlas>
						<OpacityMapVolumeStyle lightFactor='1.0' opacityFactor='10.0'></OpacityMapVolumeStyle>
					</VolumeData>
				</Transform>
			</Scene>
		</X3D>
	</body>
</html>

Do not forget to launch a web server to access your HTML page and serve the atlas image.

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️