首页 发现 帮助
登录
javascript
/
three.js
镜像自地址 https://github.com/tazdij/three.js.git
2
0
派生 0
文件 工单管理 0 Wiki
浏览代码

Add Texture 2D array example and rename Texture 3D volume example to Texture 3D example

Takahiro 6 年之前
父节点
2752ab4cb7
当前提交
5ab8129d92
共有 4 个文件被更改，包括 401 次插入 和 403 次删除
合并视图 显示文件统计
  1. 1 1
      examples/files.js
  2. 212 0
      examples/webgl2_materials_texture2darray.html
  3. 188 190
      examples/webgl2_materials_texture3d.html
  4. 0 212
      examples/webgl2_materials_texture3d_volume.html

+ 1 - 1
examples/files.js
查看文件 

@@ -315,8 +315,8 @@ var files = {
 
 		"webgldeferred_animation"
 
 		"webgldeferred_animation"
 
 	],
 
 	],
 
 	"webgl2": [
 
 	"webgl2": [
 
+		"webgl2_materials_texture2darray",
 
 		"webgl2_materials_texture3d",
 
 		"webgl2_materials_texture3d",
 
-		"webgl2_materials_texture3d_volume",
 
 		"webgl2_multisampled_renderbuffers",
 
 		"webgl2_multisampled_renderbuffers",
 
 		"webgl2_sandbox"
 
 		"webgl2_sandbox"
 
 	],
 
 	],

+ 212 - 0
examples/webgl2_materials_texture2darray.html
查看文件 

@@ -0,0 +1,212 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl - 2D texture array</title>
 
+		<meta charset="UTF-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
+			body {
 
+				background:#000;
 
+				padding:0;
 
+				margin:0;
 
+				overflow:hidden;
 
+			}
 
+
 
+			#info {
 
+				position: absolute;
 
+				top: 0px;
 
+				width: 100%;
 
+				color: #ffffff;
 
+				padding: 5px;
 
+				font-family:Monospace;
 
+				font-size:13px;
 
+				text-align:center;
 
+			}
 
+
 
+			#info a {
 
+				color: #ffffff;
 
+			}
 
+		</style>
 
+	</head>
 
+	<script id="vs" type="x-shader/x-vertex">
 
+	#version 300 es
 
+
 
+	uniform vec2 size;
 
+	out vec2 vUv;
 
+
 
+	void main() {
 
+
 
+		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 
+
 
+		// Convert position.xy to 1.0-0.0
 
+
 
+		vUv.xy = position.xy / size + 0.5;
 
+		vUv.y = 1.0 - vUv.y; // original data is upside down
 
+
 
+	}
 
+	</script>
 
+
 
+	<script id="fs" type="x-shader/x-fragment">
 
+	#version 300 es
 
+
 
+	precision highp float;
 
+	precision highp int;
 
+	precision highp sampler2DArray;
 
+
 
+	uniform sampler2DArray diffuse;
 
+	in vec2 vUv;
 
+	uniform int depth;
 
+	out vec4 out_FragColor;
 
+
 
+	void main() {
 
+
 
+		vec4 color = texture( diffuse, vec3( vUv, depth ) );
 
+
 
+		// lighten a bit
 
+		out_FragColor = vec4( color.rrr * 1.5, 1.0 );
 
+
 
+	}
 
+	</script>
 
+	<body>
 
+		<div id="info">
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - 2D Texture array<br />
 
+			Scanned head data by
 
+			<a href="https://www.codeproject.com/Articles/352270/Getting-started-with-Volume-Rendering" target="_blank" rel="noopener">Divine Augustine</a><br />
 
+			licensed under
 
+			<a href="https://www.codeproject.com/info/cpol10.aspx" target="_blank" rel="noopener">CPOL</a>
 
+		</div>
 
+
 
+		<script src="../build/three.js"></script>
 
+		<!--<script src="js/controls/OrbitControls.js"></script>-->
 
+
 
+		<script src="js/libs/jszip.min.js"></script>
 
+		<script src="js/libs/stats.min.js"></script>
 
+		<script src="js/WebGL.js"></script>
 
+
 
+		<script>
 
+
 
+			if ( WEBGL.isWebGL2Available() === false ) {
 
+
 
+				document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
 
+
 
+			}
 
+
 
+			var camera, scene, mesh, renderer, stats;
 
+
 
+			var planeWidth = 50;
 
+			var planeHeight = 50;
 
+
 
+			var depthStep = 0.5;
 
+
 
+			init();
 
+			animate();
 
+
 
+			function init() {
 
+
 
+				var container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
+
 
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
 
+				camera.position.z = 70;
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				// width 256, height 256, depth 109, 8-bit, zip archived raw data
 
+
 
+				new THREE.FileLoader()
 
+					.setResponseType( 'arraybuffer' )
 
+					.load( 'textures/3d/head256x256x109.zip', function ( data ) {
 
+
 
+						var zip = new JSZip( data );
 
+						var array = zip.files[ 'head256x256x109' ].asUint8Array();
 
+
 
+						var texture = new THREE.DataTexture2DArray( array, 256, 256, 109 );
 
+
 
+						texture.format = THREE.RedFormat;
 
+						texture.type = THREE.UnsignedByteType;
 
+
 
+						texture.needsUpdate = true;
 
+
 
+						var material = new THREE.ShaderMaterial( {
 
+							uniforms: {
 
+								diffuse: { value: texture },
 
+								depth: { value: 0 },
 
+								size: { value: new THREE.Vector2( planeWidth, planeHeight ) }
 
+							},
 
+							vertexShader: document.getElementById( 'vs' ).textContent.trim(),
 
+							fragmentShader: document.getElementById( 'fs' ).textContent.trim()
 
+						} );
 
+
 
+						var geometry = new THREE.PlaneBufferGeometry( planeWidth, planeHeight );
 
+
 
+						mesh = new THREE.Mesh( geometry, material );
 
+
 
+						scene.add( mesh );
 
+
 
+					} );
 
+
 
+				// var controls = new THREE.OrbitControls( camera );
 
+
 
+				// 2D Texture array is available on WebGL 2.0
 
+
 
+				var canvas = document.createElement( 'canvas' );
 
+				var context = canvas.getContext( 'webgl2' );
 
+
 
+				renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas, context: context } );
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				container.appendChild( renderer.domElement );
 
+
 
+				stats = new Stats();
 
+				container.appendChild( stats.dom );
 
+
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
+
 
+			}
 
+
 
+			function onWindowResize() {
 
+
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+
 
+			}
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				if ( mesh ) {
 
+
 
+					var value = mesh.material.uniforms[ "depth" ].value;
 
+
 
+					value += depthStep;
 
+
 
+					if ( value > 109.0 || value < 0.0 ) {
 
+
 
+						if ( value > 1.0 ) value = 109.0 * 2.0 - value;
 
+						if ( value < 0.0 ) value = - value;
 
+
 
+						depthStep = - depthStep;
 
+
 
+					}
 
+
 
+					mesh.material.uniforms[ "depth" ].value = value;
 
+
 
+				}
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				renderer.render( scene, camera );
 
+
 
+			}
 
+
 
+		</script>
 
+	</body>
 
+</html>

+ 188 - 190
examples/webgl2_materials_texture3d.html
查看文件 

@@ -1,214 +1,212 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
-	<head>
 
-		<title>three.js webgl - 3D texture</title>
 
-		<meta charset="UTF-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background:#000;
 
-				padding:0;
 
-				margin:0;
 
-				overflow:hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px;
 
-				width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-			}
 
-
 
-			#info a {
 
-				color: #ffffff;
 
-			}
 
-		</style>
 
-	</head>
 
-	<script id="vs" type="x-shader/x-vertex">
 
-	#version 300 es
 
-
 
-	uniform float depth;
 
-	uniform vec2 size;
 
-	out vec3 vUv;
 
-
 
-	void main() {
 
-
 
-		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 
-
 
-		// Convert position.xy to 1.0-0.0
 
-
 
-		vUv.xy = position.xy / size + 0.5;
 
-		vUv.y = 1.0 - vUv.y; // original data is upside down
 
-
 
-		vUv.z = depth;
 
-
 
-	}
 
-	</script>
 
-
 
-	<script id="fs" type="x-shader/x-fragment">
 
-	#version 300 es
 
-
 
-	precision highp float;
 
-	precision highp int;
 
-	precision highp sampler3D;
 
-
 
-	uniform sampler3D diffuse;
 
-	in vec3 vUv;
 
-	out vec4 out_FragColor;
 
-
 
-	void main() {
 
-
 
-		vec4 color = texture( diffuse, vUv );
 
-
 
-		// lighten a bit
 
-		out_FragColor = vec4( color.rrr * 1.5, 1.0 );
 
-
 
-	}
 
-	</script>
 
-	<body>
 
-		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - 3D Texture<br />
 
-			Scanned head data by
 
-			<a href="https://www.codeproject.com/Articles/352270/Getting-started-with-Volume-Rendering" target="_blank" rel="noopener">Divine Augustine</a><br />
 
-			licensed under
 
-			<a href="https://www.codeproject.com/info/cpol10.aspx" target="_blank" rel="noopener">CPOL</a>
 
-		</div>
 
-
 
-		<script src="../build/three.js"></script>
 
-		<!--<script src="js/controls/OrbitControls.js"></script>-->
 
-
 
-		<script src="js/libs/jszip.min.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/WebGL.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGL2Available() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
 
-
 
-			}
 
-
 
-			var camera, scene, mesh, renderer, stats;
 
-
 
-			var planeWidth = 50;
 
-			var planeHeight = 50;
 
-
 
-			var depthStep = 1 / ( 109 * 3 );
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				var container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
 
-				camera.position.z = 70;
 
+<head>
 
+	<title>three.js webgl - volume rendering example</title>
 
+	<meta charset="utf-8">
 
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+	<style>
 
+		body {
 
+			font-family: Monospace;
 
+			background-color: #000;
 
+			color: #fff;
 
+			margin: 0px;
 
+			overflow: hidden;
 
+		}
 
+		#info {
 
+			color: #fff;
 
+			position: absolute;
 
+			top: 10px;
 
+			width: 100%;
 
+			text-align: center;
 
+			z-index: 5;
 
+			display:block;
 
+		}
 
+		.dg {
 
+			z-index: 10 !important;
 
+		}
 
+		#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
 
+		#inset  {
 
+			width: 150px;
 
+			height: 150px;
 
+			background-color: transparent; /* or transparent; will show through only if renderer alpha: true */
 
+			border: none; /* or none; */
 
+			margin: 0;
 
+			padding: 0px;
 
+			position: absolute;
 
+			left: 20px;
 
+			bottom: 20px;
 
+			z-index: 100;
 
+		}
 
+	</style>
 
+</head>
 
+
 
+<body>
 
+	<div id="info">
 
+		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Float volume render test (mip / isosurface)
 
+	</div>
 
+	<div id="inset"></div>
 
+
 
+	<script src="../build/three.js"></script>
 
+
 
+	<script src="js/controls/OrbitControls.js"></script>
 
+
 
+	<script src="js/Volume.js"></script>
 
+	<script src="js/loaders/NRRDLoader.js"></script>
 
+	<script src="js/shaders/VolumeShader.js"></script>
 
+
 
+	<script src="js/WebGL.js"></script>
 
+	<script src="js/libs/gunzip.min.js"></script>
 
+	<script src="js/libs/dat.gui.min.js"></script>
 
+
 
+	<script>
 
+
 
+		if ( WEBGL.isWebGL2Available() === false ) {
 
+
 
+			document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
 
+
 
+		}
 
+
 
+		var container,
 
+			renderer,
 
+			scene,
 
+			camera,
 
+			controls,
 
+			material,
 
+			volconfig,
 
+			cmtextures;
 
+
 
+		init();
 
+
 
+		function init() {
 
+
 
+			scene = new THREE.Scene();
 
+
 
+			// Create renderer
 
+			var canvas = document.createElement( 'canvas' );
 
+			var context = canvas.getContext( 'webgl2' );
 
+			renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
 
+			renderer.setPixelRatio( window.devicePixelRatio );
 
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
+			document.body.appendChild( renderer.domElement );
 
+
 
+			// Create camera (The volume renderer does not work very well with perspective yet)
 
+			var h = 512; // frustum height
 
+			var aspect = window.innerWidth / window.innerHeight;
 
+			camera = new THREE.OrthographicCamera( - h * aspect / 2, h * aspect / 2, h / 2, - h / 2, 1, 1000 );
 
+			camera.position.set( 0, 0, 128 );
 
+			camera.up.set( 0, 0, 1 ); // In our data, z is up
 
+
 
+			// Create controls
 
+			controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+			controls.addEventListener( 'change', render );
 
+			controls.target.set( 64, 64, 128 );
 
+			controls.minZoom = 0.5;
 
+			controls.maxZoom = 4;
 
+			controls.update();
 
+
 
+			// scene.add( new THREE.AxesHelper( 128 ) );
 
+
 
+			// Lighting is baked into the shader a.t.m.
 
+			// var dirLight = new THREE.DirectionalLight( 0xffffff );
 
+
 
+			// The gui for interaction
 
+			volconfig = { clim1: 0, clim2: 1, renderstyle: 'iso', isothreshold: 0.15, colormap: 'viridis' };
 
+			var gui = new dat.GUI();
 
+			gui.add( volconfig, 'clim1', 0, 1, 0.01 ).onChange( updateUniforms );
 
+			gui.add( volconfig, 'clim2', 0, 1, 0.01 ).onChange( updateUniforms );
 
+			gui.add( volconfig, 'colormap', { gray: 'gray', viridis: 'viridis' } ).onChange( updateUniforms );
 
+			gui.add( volconfig, 'renderstyle', { mip: 'mip', iso: 'iso' } ).onChange( updateUniforms );
 
+			gui.add( volconfig, 'isothreshold', 0, 1, 0.01 ).onChange( updateUniforms );
 
+
 
+			// Load the data ...
 
+			new THREE.NRRDLoader().load( "models/nrrd/stent.nrrd", function ( volume ) {
 
+
 
+				// Texture to hold the volume. We have scalars, so we put our data in the red channel.
 
+				// THREEJS will select R32F (33326) based on the RedFormat and FloatType.
 
+				// Also see https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE
 
+				// TODO: look the dtype up in the volume metadata
 
+				var texture = new THREE.DataTexture3D( volume.data, volume.xLength, volume.yLength, volume.zLength );
 
+				texture.format = THREE.RedFormat;
 
+				texture.type = THREE.FloatType;
 
+				texture.minFilter = texture.magFilter = THREE.LinearFilter;
 
+				texture.unpackAlignment = 1;
 
+				texture.needsUpdate = true;
 
+
 
+				// Colormap textures
 
+				cmtextures = {
 
+					viridis: new THREE.TextureLoader().load( 'textures/cm_viridis.png', render ),
 
+					gray: new THREE.TextureLoader().load( 'textures/cm_gray.png', render )
 
+				};
 
+
 
+				// Material
 
+				var shader = THREE.VolumeRenderShader1;
 
+
 
+				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
+
 
+				uniforms[ "u_data" ].value = texture;
 
+				uniforms[ "u_size" ].value.set( volume.xLength, volume.yLength, volume.zLength );
 
+				uniforms[ "u_clim" ].value.set( volconfig.clim1, volconfig.clim2 );
 
+				uniforms[ "u_renderstyle" ].value = volconfig.renderstyle == 'mip' ? 0 : 1; // 0: MIP, 1: ISO
 
+				uniforms[ "u_renderthreshold" ].value = volconfig.isothreshold; // For ISO renderstyle
 
+				uniforms[ "u_cmdata" ].value = cmtextures[ volconfig.colormap ];
 
+
 
+				material = new THREE.ShaderMaterial( {
 
+					uniforms: uniforms,
 
+					vertexShader: shader.vertexShader,
 
+					fragmentShader: shader.fragmentShader,
 
+					side: THREE.BackSide // The volume shader uses the backface as its "reference point"
 
+				} );
 
+
 
+				// Mesh
 
+				var geometry = new THREE.BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
 
+				geometry.translate( volume.xLength / 2 - 0.5, volume.yLength / 2 - 0.5, volume.zLength / 2 - 0.5 );
 
+
 
+				var mesh = new THREE.Mesh( geometry, material );
 
+				scene.add( mesh );
 
 
 
-				scene = new THREE.Scene();
 
-
 
-				// width 256, height 256, depth 109, 8-bit, zip archived raw data
 
-
 
-				new THREE.FileLoader()
 
-					.setResponseType( 'arraybuffer' )
 
-					.load( 'textures/3d/head256x256x109.zip', function ( data ) {
 
-
 
-						var zip = new JSZip( data );
 
-						var array = zip.files[ 'head256x256x109' ].asUint8Array();
 
-
 
-						var texture = new THREE.DataTexture3D( array, 256, 256, 109 );
 
-
 
-						texture.format = THREE.RedFormat;
 
-						texture.type = THREE.UnsignedByteType;
 
-
 
-						texture.needsUpdate = true;
 
-
 
-						var material = new THREE.ShaderMaterial( {
 
-							uniforms: {
 
-								diffuse: { value: texture },
 
-								depth: { value: 0 },
 
-								size: { value: new THREE.Vector2( planeWidth, planeHeight ) }
 
-							},
 
-							vertexShader: document.getElementById( 'vs' ).textContent.trim(),
 
-							fragmentShader: document.getElementById( 'fs' ).textContent.trim()
 
-						} );
 
-
 
-						var geometry = new THREE.PlaneBufferGeometry( planeWidth, planeHeight );
 
-
 
-						mesh = new THREE.Mesh( geometry, material );
 
-
 
-						scene.add( mesh );
 
-
 
-					} );
 
-
 
-				// var controls = new THREE.OrbitControls( camera );
 
-
 
-				// 3D Texture is available on WebGL 2.0
 
-
 
-				var canvas = document.createElement( 'canvas' );
 
-				var context = canvas.getContext( 'webgl2' );
 
-
 
-				renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas, context: context } );
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
+				render();
 
 
 
-			function onWindowResize() {
 
+			} );
 
 
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
+			window.addEventListener( 'resize', onWindowResize, false );
 
 
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
+		}
 
 
 
-			}
 
+		function updateUniforms() {
 
 
 
-			function animate() {
 
+			material.uniforms[ "u_clim" ].value.set( volconfig.clim1, volconfig.clim2 );
 
+			material.uniforms[ "u_renderstyle" ].value = volconfig.renderstyle == 'mip' ? 0 : 1; // 0: MIP, 1: ISO
 
+			material.uniforms[ "u_renderthreshold" ].value = volconfig.isothreshold; // For ISO renderstyle
 
+			material.uniforms[ "u_cmdata" ].value = cmtextures[ volconfig.colormap ];
 
 
 
-				requestAnimationFrame( animate );
 
+			render();
 
 
 
-				if ( mesh ) {
 
+		}
 
 
 
-					var value = mesh.material.uniforms[ "depth" ].value;
 
+		function onWindowResize() {
 
 
 
-					value += depthStep;
 
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 
-					if ( value > 1.0 || value < 0.0 ) {
 
+			var aspect = window.innerWidth / window.innerHeight;
 
 
 
-						if ( value > 1.0 ) value = 2.0 - value;
 
-						if ( value < 0.0 ) value = - value;
 
+			var frustumHeight = camera.top - camera.bottom;
 
 
 
-						depthStep = - depthStep;
 
+			camera.left = - frustumHeight * aspect / 2;
 
+			camera.right = frustumHeight * aspect / 2;
 
 
 
-					}
 
+			camera.updateProjectionMatrix();
 
 
 
-					mesh.material.uniforms[ "depth" ].value = value;
 
+			render();
 
 
 
-				}
 
+		}
 
 
 
-				render();
 
-				stats.update();
 
+		function render() {
 
 
 
-			}
 
+			renderer.render( scene, camera );
 
 
 
-			function render() {
 
+		}
 
 
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
+	</script>
 
 
 
-		</script>
 
-	</body>
 
+</body>
 
 </html>
 
 </html>

+ 0 - 212
examples/webgl2_materials_texture3d_volume.html
查看文件 

@@ -1,212 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-	<title>three.js webgl - volume rendering example</title>
 
-	<meta charset="utf-8">
 
-	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-	<style>
 
-		body {
 
-			font-family: Monospace;
 
-			background-color: #000;
 
-			color: #fff;
 
-			margin: 0px;
 
-			overflow: hidden;
 
-		}
 
-		#info {
 
-			color: #fff;
 
-			position: absolute;
 
-			top: 10px;
 
-			width: 100%;
 
-			text-align: center;
 
-			z-index: 5;
 
-			display:block;
 
-		}
 
-		.dg {
 
-			z-index: 10 !important;
 
-		}
 
-		#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
 
-		#inset  {
 
-			width: 150px;
 
-			height: 150px;
 
-			background-color: transparent; /* or transparent; will show through only if renderer alpha: true */
 
-			border: none; /* or none; */
 
-			margin: 0;
 
-			padding: 0px;
 
-			position: absolute;
 
-			left: 20px;
 
-			bottom: 20px;
 
-			z-index: 100;
 
-		}
 
-	</style>
 
-</head>
 
-
 
-<body>
 
-	<div id="info">
 
-		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Float volume render test (mip / isosurface)
 
-	</div>
 
-	<div id="inset"></div>
 
-
 
-	<script src="../build/three.js"></script>
 
-
 
-	<script src="js/controls/OrbitControls.js"></script>
 
-
 
-	<script src="js/Volume.js"></script>
 
-	<script src="js/loaders/NRRDLoader.js"></script>
 
-	<script src="js/shaders/VolumeShader.js"></script>
 
-
 
-	<script src="js/WebGL.js"></script>
 
-	<script src="js/libs/gunzip.min.js"></script>
 
-	<script src="js/libs/dat.gui.min.js"></script>
 
-
 
-	<script>
 
-
 
-		if ( WEBGL.isWebGL2Available() === false ) {
 
-
 
-			document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
 
-
 
-		}
 
-
 
-		var container,
 
-			renderer,
 
-			scene,
 
-			camera,
 
-			controls,
 
-			material,
 
-			volconfig,
 
-			cmtextures;
 
-
 
-		init();
 
-
 
-		function init() {
 
-
 
-			scene = new THREE.Scene();
 
-
 
-			// Create renderer
 
-			var canvas = document.createElement( 'canvas' );
 
-			var context = canvas.getContext( 'webgl2' );
 
-			renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
 
-			renderer.setPixelRatio( window.devicePixelRatio );
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
-			document.body.appendChild( renderer.domElement );
 
-
 
-			// Create camera (The volume renderer does not work very well with perspective yet)
 
-			var h = 512; // frustum height
 
-			var aspect = window.innerWidth / window.innerHeight;
 
-			camera = new THREE.OrthographicCamera( - h * aspect / 2, h * aspect / 2, h / 2, - h / 2, 1, 1000 );
 
-			camera.position.set( 0, 0, 128 );
 
-			camera.up.set( 0, 0, 1 ); // In our data, z is up
 
-
 
-			// Create controls
 
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
 
-			controls.addEventListener( 'change', render );
 
-			controls.target.set( 64, 64, 128 );
 
-			controls.minZoom = 0.5;
 
-			controls.maxZoom = 4;
 
-			controls.update();
 
-
 
-			// scene.add( new THREE.AxesHelper( 128 ) );
 
-
 
-			// Lighting is baked into the shader a.t.m.
 
-			// var dirLight = new THREE.DirectionalLight( 0xffffff );
 
-
 
-			// The gui for interaction
 
-			volconfig = { clim1: 0, clim2: 1, renderstyle: 'iso', isothreshold: 0.15, colormap: 'viridis' };
 
-			var gui = new dat.GUI();
 
-			gui.add( volconfig, 'clim1', 0, 1, 0.01 ).onChange( updateUniforms );
 
-			gui.add( volconfig, 'clim2', 0, 1, 0.01 ).onChange( updateUniforms );
 
-			gui.add( volconfig, 'colormap', { gray: 'gray', viridis: 'viridis' } ).onChange( updateUniforms );
 
-			gui.add( volconfig, 'renderstyle', { mip: 'mip', iso: 'iso' } ).onChange( updateUniforms );
 
-			gui.add( volconfig, 'isothreshold', 0, 1, 0.01 ).onChange( updateUniforms );
 
-
 
-			// Load the data ...
 
-			new THREE.NRRDLoader().load( "models/nrrd/stent.nrrd", function ( volume ) {
 
-
 
-				// Texture to hold the volume. We have scalars, so we put our data in the red channel.
 
-				// THREEJS will select R32F (33326) based on the RedFormat and FloatType.
 
-				// Also see https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE
 
-				// TODO: look the dtype up in the volume metadata
 
-				var texture = new THREE.DataTexture3D( volume.data, volume.xLength, volume.yLength, volume.zLength );
 
-				texture.format = THREE.RedFormat;
 
-				texture.type = THREE.FloatType;
 
-				texture.minFilter = texture.magFilter = THREE.LinearFilter;
 
-				texture.unpackAlignment = 1;
 
-				texture.needsUpdate = true;
 
-
 
-				// Colormap textures
 
-				cmtextures = {
 
-					viridis: new THREE.TextureLoader().load( 'textures/cm_viridis.png', render ),
 
-					gray: new THREE.TextureLoader().load( 'textures/cm_gray.png', render )
 
-				};
 
-
 
-				// Material
 
-				var shader = THREE.VolumeRenderShader1;
 
-
 
-				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
-
 
-				uniforms[ "u_data" ].value = texture;
 
-				uniforms[ "u_size" ].value.set( volume.xLength, volume.yLength, volume.zLength );
 
-				uniforms[ "u_clim" ].value.set( volconfig.clim1, volconfig.clim2 );
 
-				uniforms[ "u_renderstyle" ].value = volconfig.renderstyle == 'mip' ? 0 : 1; // 0: MIP, 1: ISO
 
-				uniforms[ "u_renderthreshold" ].value = volconfig.isothreshold; // For ISO renderstyle
 
-				uniforms[ "u_cmdata" ].value = cmtextures[ volconfig.colormap ];
 
-
 
-				material = new THREE.ShaderMaterial( {
 
-					uniforms: uniforms,
 
-					vertexShader: shader.vertexShader,
 
-					fragmentShader: shader.fragmentShader,
 
-					side: THREE.BackSide // The volume shader uses the backface as its "reference point"
 
-				} );
 
-
 
-				// Mesh
 
-				var geometry = new THREE.BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
 
-				geometry.translate( volume.xLength / 2 - 0.5, volume.yLength / 2 - 0.5, volume.zLength / 2 - 0.5 );
 
-
 
-				var mesh = new THREE.Mesh( geometry, material );
 
-				scene.add( mesh );
 
-
 
-				render();
 
-
 
-			} );
 
-
 
-			window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-		}
 
-
 
-		function updateUniforms() {
 
-
 
-			material.uniforms[ "u_clim" ].value.set( volconfig.clim1, volconfig.clim2 );
 
-			material.uniforms[ "u_renderstyle" ].value = volconfig.renderstyle == 'mip' ? 0 : 1; // 0: MIP, 1: ISO
 
-			material.uniforms[ "u_renderthreshold" ].value = volconfig.isothreshold; // For ISO renderstyle
 
-			material.uniforms[ "u_cmdata" ].value = cmtextures[ volconfig.colormap ];
 
-
 
-			render();
 
-
 
-		}
 
-
 
-		function onWindowResize() {
 
-
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			var aspect = window.innerWidth / window.innerHeight;
 
-
 
-			var frustumHeight = camera.top - camera.bottom;
 
-
 
-			camera.left = - frustumHeight * aspect / 2;
 
-			camera.right = frustumHeight * aspect / 2;
 
-
 
-			camera.updateProjectionMatrix();
 
-
 
-			render();
 
-
 
-		}
 
-
 
-		function render() {
 
-
 
-			renderer.render( scene, camera );
 
-
 
-		}
 
-
 
-	</script>
 
-
 
-</body>
 
-</html>