Browse Source

Merge pull request #15901 from takahirox/TextureArray

DataTexture2DArray
Mr.doob 6 years ago
parent
commit
da0d66ddb9

+ 1 - 1
examples/files.js

@@ -310,8 +310,8 @@ var files = {
 		"webgldeferred_animation"
 	],
 	"webgl2": [
+		"webgl2_materials_texture2darray",
 		"webgl2_materials_texture3d",
-		"webgl2_materials_texture3d_volume",
 		"webgl2_multisampled_renderbuffers",
 		"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.4;
+
+			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>
 <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>

+ 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>

+ 1 - 0
rollup.config.js

@@ -117,6 +117,7 @@ function glconstants() {
 		ACTIVE_ATTRIBUTES: 35721,
 		IMPLEMENTATION_COLOR_READ_TYPE: 35738,
 		IMPLEMENTATION_COLOR_READ_FORMAT: 35739,
+		TEXTURE_2D_ARRAY: 35866,
 		DEPTH_COMPONENT32F: 36012,
 		COLOR_ATTACHMENT0: 36064,
 		FRAMEBUFFER_COMPLETE: 36053,

+ 1 - 0
src/Three.js

@@ -24,6 +24,7 @@ export { Points } from './objects/Points.js';
 export { Group } from './objects/Group.js';
 export { VideoTexture } from './textures/VideoTexture.js';
 export { DataTexture } from './textures/DataTexture.js';
+export { DataTexture2DArray } from './textures/DataTexture2DArray.js';
 export { DataTexture3D } from './textures/DataTexture3D.js';
 export { CompressedTexture } from './textures/CompressedTexture.js';
 export { CubeTexture } from './textures/CubeTexture.js';

+ 6 - 0
src/renderers/WebGLRenderer.js

@@ -2466,6 +2466,12 @@ function WebGLRenderer( parameters ) {
 
 	}() );
 
+	this.setTexture2DArray = function ( texture, slot ) {
+
+		textures.setTexture2DArray( texture, slot );
+
+	};
+
 	this.setTexture3D = function ( texture, slot ) {
 
 		textures.setTexture3D( texture, slot );

+ 28 - 3
src/renderers/webgl/WebGLTextures.js

@@ -299,6 +299,22 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
 	}
 
+	function setTexture2DArray( texture, slot ) {
+
+		var textureProperties = properties.get( texture );
+
+		if ( texture.version > 0 && textureProperties.__version !== texture.version ) {
+
+			uploadTexture( textureProperties, texture, slot );
+			return;
+
+		}
+
+		state.activeTexture( _gl.TEXTURE0 + slot );
+		state.bindTexture( _gl.TEXTURE_2D_ARRAY, textureProperties.__webglTexture );
+
+	}
+
 	function setTexture3D( texture, slot ) {
 
 		var textureProperties = properties.get( texture );
@@ -451,7 +467,7 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 			_gl.texParameteri( textureType, _gl.TEXTURE_WRAP_S, utils.convert( texture.wrapS ) );
 			_gl.texParameteri( textureType, _gl.TEXTURE_WRAP_T, utils.convert( texture.wrapT ) );
 
-			if ( textureType === _gl.TEXTURE_3D ) {
+			if ( textureType === _gl.TEXTURE_3D || textureType === _gl.TEXTURE_2D_ARRAY ) {
 
 				_gl.texParameteri( textureType, _gl.TEXTURE_WRAP_R, utils.convert( texture.wrapR ) );
 
@@ -465,7 +481,7 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 			_gl.texParameteri( textureType, _gl.TEXTURE_WRAP_S, _gl.CLAMP_TO_EDGE );
 			_gl.texParameteri( textureType, _gl.TEXTURE_WRAP_T, _gl.CLAMP_TO_EDGE );
 
-			if ( textureType === _gl.TEXTURE_3D ) {
+			if ( textureType === _gl.TEXTURE_3D || textureType === _gl.TEXTURE_2D_ARRAY ) {
 
 				_gl.texParameteri( textureType, _gl.TEXTURE_WRAP_R, _gl.CLAMP_TO_EDGE );
 
@@ -524,7 +540,10 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
 	function uploadTexture( textureProperties, texture, slot ) {
 
-		var textureType = ( texture.isDataTexture3D ) ? _gl.TEXTURE_3D : _gl.TEXTURE_2D;
+		var textureType = _gl.TEXTURE_2D;
+
+		if ( texture.isDataTexture2DArray ) textureType = _gl.TEXTURE_2D_ARRAY;
+		if ( texture.isDataTexture3D ) textureType = _gl.TEXTURE_3D;
 
 		initTexture( textureProperties, texture );
 
@@ -656,6 +675,11 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
 			textureProperties.__maxMipLevel = mipmaps.length - 1;
 
+		} else if ( texture.isDataTexture2DArray ) {
+
+			state.texImage3D( _gl.TEXTURE_2D_ARRAY, 0, glInternalFormat, image.width, image.height, image.depth, 0, glFormat, glType, image.data );
+			textureProperties.__maxMipLevel = 0;
+
 		} else if ( texture.isDataTexture3D ) {
 
 			state.texImage3D( _gl.TEXTURE_3D, 0, glInternalFormat, image.width, image.height, image.depth, 0, glFormat, glType, image.data );
@@ -1054,6 +1078,7 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 	}
 
 	this.setTexture2D = setTexture2D;
+	this.setTexture2DArray = setTexture2DArray;
 	this.setTexture3D = setTexture3D;
 	this.setTextureCube = setTextureCube;
 	this.setTextureCubeDynamic = setTextureCubeDynamic;

+ 19 - 0
src/renderers/webgl/WebGLUniforms.js

@@ -51,9 +51,11 @@
 
 import { CubeTexture } from '../../textures/CubeTexture.js';
 import { Texture } from '../../textures/Texture.js';
+import { DataTexture2DArray } from '../../textures/DataTexture2DArray.js';
 import { DataTexture3D } from '../../textures/DataTexture3D.js';
 
 var emptyTexture = new Texture();
+var emptyTexture2darray = new DataTexture2DArray();
 var emptyTexture3d = new DataTexture3D();
 var emptyCubeTexture = new CubeTexture();
 
@@ -390,6 +392,22 @@ function setValueT1( gl, v, renderer ) {
 
 }
 
+function setValueT2DArray1( gl, v, renderer ) {
+
+	var cache = this.cache;
+	var unit = renderer.allocTextureUnit();
+
+	if ( cache[ 0 ] !== unit ) {
+
+		gl.uniform1i( this.addr, unit );
+		cache[ 0 ] = unit;
+
+	}
+
+	renderer.setTexture2DArray( v || emptyTexture2dArray, unit );
+
+}
+
 function setValueT3D1( gl, v, renderer ) {
 
 	var cache = this.cache;
@@ -478,6 +496,7 @@ function getSingularSetter( type ) {
 		case 0x8b5e: case 0x8d66: return setValueT1; // SAMPLER_2D, SAMPLER_EXTERNAL_OES
 		case 0x8b5f: return setValueT3D1; // SAMPLER_3D
 		case 0x8b60: return setValueT6; // SAMPLER_CUBE
+		case 0x8DC1: return setValueT2DArray1; // SAMPLER_2D_ARRAY
 
 		case 0x1404: case 0x8b56: return setValue1i; // INT, BOOL
 		case 0x8b53: case 0x8b57: return setValue2iv; // _VEC2

+ 12 - 0
src/textures/DataTexture2DArray.d.ts

@@ -0,0 +1,12 @@
+import { Texture } from './Texture';
+import { NearestFilter } from '../constants';
+import { TypedArray } from '../polyfills';
+
+export class DataTexture2DArray extends Texture {
+  constructor(
+    data: ArrayBuffer | TypedArray,
+    width: number,
+    height: number,
+    depth: number
+  );
+}

+ 28 - 0
src/textures/DataTexture2DArray.js

@@ -0,0 +1,28 @@
+/**
+ * @author Takahiro https://github.com/takahirox
+ */
+
+import { Texture } from './Texture.js';
+import { ClampToEdgeWrapping, NearestFilter } from '../constants.js';
+
+function DataTexture2DArray( data, width, height, depth ) {
+
+	Texture.call( this, null );
+
+	this.image = { data: data, width: width, height: height, depth: depth };
+
+	this.magFilter = NearestFilter;
+	this.minFilter = NearestFilter;
+
+	this.wrapR = ClampToEdgeWrapping;
+
+	this.generateMipmaps = false;
+	this.flipY = false;
+
+}
+
+DataTexture2DArray.prototype = Object.create( Texture.prototype );
+DataTexture2DArray.prototype.constructor = DataTexture2DArray;
+DataTexture2DArray.prototype.isDataTexture2DArray = true;
+
+export { DataTexture2DArray };