Merge pull request #16235 from Temdog007/example/lut

webgl_geometry_colors_lookuptable.html revisted

examples/js/math/Lut.js

@@ -5,43 +5,30 @@
 THREE.Lut = function ( colormap, numberofcolors ) {
 
 	this.lut = [];
-	this.map = THREE.ColorMapKeywords[ colormap ];
-	this.n = numberofcolors;
-	this.mapname = colormap;
+	this.setColorMap( colormap, numberofcolors );
+	return this;
 
-	var step = 1.0 / this.n;
-
-	for ( var i = 0; i <= 1; i += step ) {
-
-		for ( var j = 0; j < this.map.length - 1; j ++ ) {
-
-			if ( i >= this.map[ j ][ 0 ] && i < this.map[ j + 1 ][ 0 ] ) {
-
-				var min = this.map[ j ][ 0 ];
-				var max = this.map[ j + 1 ][ 0 ];
-
-				var minColor = new THREE.Color( 0xffffff ).setHex( this.map[ j ][ 1 ] );
-				var maxColor = new THREE.Color( 0xffffff ).setHex( this.map[ j + 1 ][ 1 ] );
-
-				var color = minColor.lerp( maxColor, ( i - min ) / ( max - min ) );
-
-				this.lut.push( color );
-
-			}
-
-		}
-
-	}
-
-	return this.set( this );
+};
 
+var defaultLabelParameters = {
+	fontsize: 24,
+	fontface: 'Arial',
+	title: '',
+	um: '',
+	ticks: 0,
+	decimal: 2,
+	notation: 'standard'
 };
 
+var defaultBackgroundColor = { r: 255, g: 100, b: 100, a: 0.8 };
+var defaultBorderColor = { r: 255, g: 0, b: 0, a: 1.0 };
+var defaultBorderThickness = 4;
+
 THREE.Lut.prototype = {
 
 	constructor: THREE.Lut,
 
-	lut: [], map: [], mapname: 'rainbow', n: 256, minV: 0, maxV: 1, legend: null,
+	lut: [], map: [], n: 256, minV: 0, maxV: 1,
 
 	set: function ( value ) {
 
@@ -71,26 +58,43 @@ THREE.Lut.prototype = {
 
 	},
 
-	changeNumberOfColors: function ( numberofcolors ) {
+	setColorMap: function ( colormap, numberofcolors ) {
 
-		this.n = numberofcolors;
+		this.map = THREE.ColorMapKeywords[ colormap ] || THREE.ColorMapKeywords.rainbow;
+		this.n = numberofcolors || 32;
 
-		return new THREE.Lut( this.mapname, this.n );
+		var step = 1.0 / this.n;
 
-	},
+		this.lut.length = 0;
+		for ( var i = 0; i <= 1; i += step ) {
+
+			for ( var j = 0; j < this.map.length - 1; j ++ ) {
+
+				if ( i >= this.map[ j ][ 0 ] && i < this.map[ j + 1 ][ 0 ] ) {
 
-	changeColorMap: function ( colormap ) {
+					var min = this.map[ j ][ 0 ];
+					var max = this.map[ j + 1 ][ 0 ];
 
-		this.mapname = colormap;
+					var minColor = new THREE.Color( this.map[ j ][ 1 ] );
+					var maxColor = new THREE.Color( this.map[ j + 1 ][ 1 ] );
 
-		return new THREE.Lut( this.mapname, this.n );
+					var color = minColor.lerp( maxColor, ( i - min ) / ( max - min ) );
+
+					this.lut.push( color );
+
+				}
+
+			}
+
+		}
+
+		return this;
 
 	},
 
 	copy: function ( lut ) {
 
 		this.lut = lut.lut;
-		this.mapname = lut.mapname;
 		this.map = lut.map;
 		this.n = lut.n;
 		this.minV = lut.minV;
@@ -127,42 +131,26 @@ THREE.Lut.prototype = {
 
 	},
 
-	setLegendOn: function ( parameters ) {
+	createCanvas: function () {
 
-		if ( parameters === undefined ) {
-
-			parameters = {};
-
-		}
+		var canvas = document.createElement( 'canvas' );
+		canvas.width = 1;
+		canvas.height = this.n;
 
-		this.legend = {};
+		this.updateCanvas( canvas );
 
-		this.legend.layout = parameters.hasOwnProperty( 'layout' ) ? parameters[ 'layout' ] : 'vertical';
+		return canvas;
 
-		this.legend.position = parameters.hasOwnProperty( 'position' ) ? parameters[ 'position' ] : { 'x': 4, 'y': 0, 'z': 0 };
-
-		this.legend.dimensions = parameters.hasOwnProperty( 'dimensions' ) ? parameters[ 'dimensions' ] : { 'width': 0.5, 'height': 3 };
-
-		this.legend.canvas = document.createElement( 'canvas' );
-
-		this.legend.canvas.setAttribute( 'id', 'legend' );
-		this.legend.canvas.setAttribute( 'hidden', true );
-
-		document.body.appendChild( this.legend.canvas );
-
-		this.legend.ctx = this.legend.canvas.getContext( '2d' );
+	},
 
-		this.legend.canvas.setAttribute( 'width', 1 );
-		this.legend.canvas.setAttribute( 'height', this.n );
+	updateCanvas: function ( canvas ) {
 
-		this.legend.texture = new THREE.Texture( this.legend.canvas );
+		var ctx = canvas.getContext( '2d', { alpha: false } );
 
-		var imageData = this.legend.ctx.getImageData( 0, 0, 1, this.n );
+		var imageData = ctx.getImageData( 0, 0, 1, this.n );
 
 		var data = imageData.data;
 
-		this.map = THREE.ColorMapKeywords[ this.mapname ];
-
 		var k = 0;
 
 		var step = 1.0 / this.n;
@@ -176,8 +164,8 @@ THREE.Lut.prototype = {
 					var min = this.map[ j - 1 ][ 0 ];
 					var max = this.map[ j ][ 0 ];
 
-					var minColor = new THREE.Color( 0xffffff ).setHex( this.map[ j - 1 ][ 1 ] );
-					var maxColor = new THREE.Color( 0xffffff ).setHex( this.map[ j ][ 1 ] );
+					var minColor = new THREE.Color( this.map[ j - 1 ][ 1 ] );
+					var maxColor = new THREE.Color( this.map[ j ][ 1 ] );
 
 					var color = minColor.lerp( maxColor, ( i - min ) / ( max - min ) );
 
@@ -194,303 +182,19 @@ THREE.Lut.prototype = {
 
 		}
 
-		this.legend.ctx.putImageData( imageData, 0, 0 );
-		this.legend.texture.needsUpdate = true;
-
-		this.legend.legendGeometry = new THREE.PlaneBufferGeometry( this.legend.dimensions.width, this.legend.dimensions.height );
-		this.legend.legendMaterial = new THREE.MeshBasicMaterial( { map: this.legend.texture, side: THREE.DoubleSide } );
-
-		this.legend.mesh = new THREE.Mesh( this.legend.legendGeometry, this.legend.legendMaterial );
-
-		if ( this.legend.layout == 'horizontal' ) {
-
-			this.legend.mesh.rotation.z = - 90 * ( Math.PI / 180 );
-
-		}
-
-		this.legend.mesh.position.copy( this.legend.position );
-
-		return this.legend.mesh;
-
-	},
-
-	setLegendOff: function () {
-
-		this.legend = null;
-
-		return this.legend;
-
-	},
-
-	setLegendLayout: function ( layout ) {
-
-		if ( ! this.legend ) {
-
-			return false;
-
-		}
-
-		if ( this.legend.layout == layout ) {
-
-			return false;
-
-		}
-
-		if ( layout != 'horizontal' && layout != 'vertical' ) {
-
-			return false;
-
-		}
-
-		this.layout = layout;
-
-		if ( layout == 'horizontal' ) {
-
-			this.legend.mesh.rotation.z = 90 * ( Math.PI / 180 );
-
-		}
-
-		if ( layout == 'vertical' ) {
-
-			this.legend.mesh.rotation.z = - 90 * ( Math.PI / 180 );
-
-		}
-
-		return this.legend.mesh;
-
-	},
-
-	setLegendPosition: function ( position ) {
-
-		this.legend.position = new THREE.Vector3( position.x, position.y, position.z );
-
-		return this.legend;
-
-	},
-
-	setLegendLabels: function ( parameters, callback ) {
-
-		if ( ! this.legend ) {
-
-			return false;
-
-		}
-
-		if ( typeof parameters === 'function' ) {
-
-			callback = parameters;
-
-		}
-
-		if ( parameters === undefined ) {
-
-			parameters = {};
-
-		}
-
-		this.legend.labels = {};
-
-		this.legend.labels.fontsize = parameters.hasOwnProperty( 'fontsize' ) ? parameters[ 'fontsize' ] : 24;
-
-		this.legend.labels.fontface = parameters.hasOwnProperty( 'fontface' ) ? parameters[ 'fontface' ] : 'Arial';
+		ctx.putImageData( imageData, 0, 0 );
 
-		this.legend.labels.title = parameters.hasOwnProperty( 'title' ) ? parameters[ 'title' ] : '';
-
-		this.legend.labels.um = parameters.hasOwnProperty( 'um' ) ? ' [ ' + parameters[ 'um' ] + ' ]' : '';
-
-		this.legend.labels.ticks = parameters.hasOwnProperty( 'ticks' ) ? parameters[ 'ticks' ] : 0;
-
-		this.legend.labels.decimal = parameters.hasOwnProperty( 'decimal' ) ? parameters[ 'decimal' ] : 2;
-
-		this.legend.labels.notation = parameters.hasOwnProperty( 'notation' ) ? parameters[ 'notation' ] : 'standard';
-
-		var backgroundColor = { r: 255, g: 100, b: 100, a: 0.8 };
-		var borderColor = { r: 255, g: 0, b: 0, a: 1.0 };
-		var borderThickness = 4;
-
-		var canvasTitle = document.createElement( 'canvas' );
-		var contextTitle = canvasTitle.getContext( '2d' );
-
-		contextTitle.font = 'Normal ' + this.legend.labels.fontsize * 1.2 + 'px ' + this.legend.labels.fontface;
-
-		contextTitle.fillStyle = 'rgba(' + backgroundColor.r + ',' + backgroundColor.g + ',' + backgroundColor.b + ',' + backgroundColor.a + ')';
-
-		contextTitle.strokeStyle = 'rgba(' + borderColor.r + ',' + borderColor.g + ',' + borderColor.b + ',' + borderColor.a + ')';
-
-		contextTitle.lineWidth = borderThickness;
-
-		contextTitle.fillStyle = 'rgba( 0, 0, 0, 1.0 )';
-
-		contextTitle.fillText( this.legend.labels.title.toString() + this.legend.labels.um.toString(), borderThickness, this.legend.labels.fontsize + borderThickness );
-
-		var txtTitle = new THREE.CanvasTexture( canvasTitle );
-		txtTitle.minFilter = THREE.LinearFilter;
-
-		var spriteMaterialTitle = new THREE.SpriteMaterial( { map: txtTitle } );
-
-		var spriteTitle = new THREE.Sprite( spriteMaterialTitle );
-
-		spriteTitle.scale.set( 2, 1, 1.0 );
-
-		if ( this.legend.layout == 'vertical' ) {
-
-			spriteTitle.position.set( this.legend.position.x + this.legend.dimensions.width, this.legend.position.y + ( this.legend.dimensions.height * 0.45 ), this.legend.position.z );
-
-		}
-
-		if ( this.legend.layout == 'horizontal' ) {
-
-			spriteTitle.position.set( this.legend.position.x * 1.015, this.legend.position.y + ( this.legend.dimensions.height * 0.03 ), this.legend.position.z );
-
-		}
-
-		if ( this.legend.labels.ticks > 0 ) {
-
-			var ticks = {};
-			var lines = {};
-
-			if ( this.legend.layout == 'vertical' ) {
-
-				var topPositionY = this.legend.position.y + ( this.legend.dimensions.height * 0.36 );
-				var bottomPositionY = this.legend.position.y - ( this.legend.dimensions.height * 0.61 );
-
-			}
-
-			if ( this.legend.layout == 'horizontal' ) {
-
-				var topPositionX = this.legend.position.x + ( this.legend.dimensions.height * 0.75 );
-				var bottomPositionX = this.legend.position.x - ( this.legend.dimensions.width * 1.2 );
-
-			}
-
-			for ( var i = 0; i < this.legend.labels.ticks; i ++ ) {
-
-				var value = ( this.maxV - this.minV ) / ( this.legend.labels.ticks - 1 ) * i + this.minV;
-
-				if ( callback ) {
-
-					value = callback( value );
-
-				} else {
-
-					if ( this.legend.labels.notation == 'scientific' ) {
-
-						value = value.toExponential( this.legend.labels.decimal );
-
-					} else {
-
-						value = value.toFixed( this.legend.labels.decimal );
-
-					}
-
-				}
-
-				var canvasTick = document.createElement( 'canvas' );
-				var contextTick = canvasTick.getContext( '2d' );
-
-				contextTick.font = 'Normal ' + this.legend.labels.fontsize + 'px ' + this.legend.labels.fontface;
-
-				contextTick.fillStyle = 'rgba(' + backgroundColor.r + ',' + backgroundColor.g + ',' + backgroundColor.b + ',' + backgroundColor.a + ')';
-
-				contextTick.strokeStyle = 'rgba(' + borderColor.r + ',' + borderColor.g + ',' + borderColor.b + ',' + borderColor.a + ')';
-
-				contextTick.lineWidth = borderThickness;
-
-				contextTick.fillStyle = 'rgba( 0, 0, 0, 1.0 )';
-
-				contextTick.fillText( value.toString(), borderThickness, this.legend.labels.fontsize + borderThickness );
-
-				var txtTick = new THREE.CanvasTexture( canvasTick );
-				txtTick.minFilter = THREE.LinearFilter;
-
-				var spriteMaterialTick = new THREE.SpriteMaterial( { map: txtTick } );
-
-				var spriteTick = new THREE.Sprite( spriteMaterialTick );
-
-				spriteTick.scale.set( 2, 1, 1.0 );
-
-				if ( this.legend.layout == 'vertical' ) {
-
-					var position = bottomPositionY + ( topPositionY - bottomPositionY ) * ( ( value - this.minV ) / ( this.maxV - this.minV ) );
-
-					spriteTick.position.set( this.legend.position.x + ( this.legend.dimensions.width * 2.7 ), position, this.legend.position.z );
-
-				}
-
-				if ( this.legend.layout == 'horizontal' ) {
-
-					var position = bottomPositionX + ( topPositionX - bottomPositionX ) * ( ( value - this.minV ) / ( this.maxV - this.minV ) );
-
-					if ( this.legend.labels.ticks > 5 ) {
-
-						if ( i % 2 === 0 ) {
-
-							var offset = 1.7;
-
-						} else {
-
-							var offset = 2.1;
-
-						}
-
-					} else {
-
-						var offset = 1.7;
-
-					}
-
-					spriteTick.position.set( position, this.legend.position.y - this.legend.dimensions.width * offset, this.legend.position.z );
-
-				}
-
-				var material = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 2 } );
-
-				var points = [];
-
-
-				if ( this.legend.layout == 'vertical' ) {
-
-					var linePosition = ( this.legend.position.y - ( this.legend.dimensions.height * 0.5 ) + 0.01 ) + ( this.legend.dimensions.height ) * ( ( value - this.minV ) / ( this.maxV - this.minV ) * 0.99 );
-
-					points.push( new THREE.Vector3( this.legend.position.x + this.legend.dimensions.width * 0.55, linePosition, this.legend.position.z ) );
-
-					points.push( new THREE.Vector3( this.legend.position.x + this.legend.dimensions.width * 0.7, linePosition, this.legend.position.z ) );
-
-				}
-
-				if ( this.legend.layout == 'horizontal' ) {
-
-					var linePosition = ( this.legend.position.x - ( this.legend.dimensions.height * 0.5 ) + 0.01 ) + ( this.legend.dimensions.height ) * ( ( value - this.minV ) / ( this.maxV - this.minV ) * 0.99 );
-
-					points.push( new THREE.Vector3( linePosition, this.legend.position.y - this.legend.dimensions.width * 0.55, this.legend.position.z ) );
-
-					points.push( new THREE.Vector3( linePosition, this.legend.position.y - this.legend.dimensions.width * 0.7, this.legend.position.z ) );
-
-				}
-
-				var geometry = new THREE.BufferGeometry().setFromPoints( points );
-
-				var line = new THREE.Line( geometry, material );
-
-				lines[ i ] = line;
-				ticks[ i ] = spriteTick;
-
-			}
-
-		}
-
-		return { 'title': spriteTitle, 'ticks': ticks, 'lines': lines };
+		return canvas;
 
 	}
-
 };
 
 
 THREE.ColorMapKeywords = {
 
-	"rainbow": [[ 0.0, '0x0000FF' ], [ 0.2, '0x00FFFF' ], [ 0.5, '0x00FF00' ], [ 0.8, '0xFFFF00' ], [ 1.0, '0xFF0000' ]],
-	"cooltowarm": [[ 0.0, '0x3C4EC2' ], [ 0.2, '0x9BBCFF' ], [ 0.5, '0xDCDCDC' ], [ 0.8, '0xF6A385' ], [ 1.0, '0xB40426' ]],
-	"blackbody": [[ 0.0, '0x000000' ], [ 0.2, '0x780000' ], [ 0.5, '0xE63200' ], [ 0.8, '0xFFFF00' ], [ 1.0, '0xFFFFFF' ]],
-	"grayscale": [[ 0.0, '0x000000' ], [ 0.2, '0x404040' ], [ 0.5, '0x7F7F80' ], [ 0.8, '0xBFBFBF' ], [ 1.0, '0xFFFFFF' ]]
+	"rainbow": [[ 0.0, 0x0000FF ], [ 0.2, 0x00FFFF ], [ 0.5, 0x00FF00 ], [ 0.8, 0xFFFF00 ], [ 1.0, 0xFF0000 ]],
+	"cooltowarm": [[ 0.0, 0x3C4EC2 ], [ 0.2, 0x9BBCFF ], [ 0.5, 0xDCDCDC ], [ 0.8, 0xF6A385 ], [ 1.0, 0xB40426 ]],
+	"blackbody": [[ 0.0, 0x000000 ], [ 0.2, 0x780000 ], [ 0.5, 0xE63200 ], [ 0.8, 0xFFFF00 ], [ 1.0, 0xFFFFFF ]],
+	"grayscale": [[ 0.0, 0x000000 ], [ 0.2, 0x404040 ], [ 0.5, 0x7F7F80 ], [ 0.8, 0xBFBFBF ], [ 1.0, 0xFFFFFF ]]
 
 };

examples/webgl_geometry_colors_lookuptable.html

@@ -34,7 +34,6 @@
 	<body>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - lookuptable - vertex color values from a range of data values.<br />
-		press A: change color map, press S: change numberOfColors, press D: toggle Legend on/off, press F: change Legend layout<br />
 		</div>
 
 		<div id="container"></div>
@@ -42,276 +41,171 @@
 		<script src="../build/three.js"></script>
 		<script src="js/math/Lut.js"></script>
 		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/libs/dat.gui.min.js"></script>
 
 		<script>
-
 			if ( WEBGL.isWebGLAvailable() === false ) {
 
 				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
 			}
 
-			var container, stats;
-
-			var camera, scene, renderer, lut, legendLayout;
+			var container;
 
-			var mesh, material;
+			var perpCamera, orthoCamera, renderer, lut;
 
-			var colorMap;
-			var numberOfColors;
+			var mesh, sprite;
+			var scene, uiScene;
 
-			var loader = new THREE.BufferGeometryLoader();
+			var params;
 
 			init();
-			animate();
 
 			function init() {
 
 				container = document.getElementById( 'container' );
 
-				// SCENE
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xffffff );
 
-				// CAMERA
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100 );
-				camera.position.set( 0, 0, 10 );
+				uiScene = new THREE.Scene();
+
+				lut = new THREE.Lut();
 
-				stats = new Stats();
-				container.appendChild( stats.dom );
+				var width = window.innerWidth;
+				var height = window.innerHeight;
 
-				// LIGHT
-				var ambientLight = new THREE.AmbientLight( 0x444444 );
-				scene.add( ambientLight );
+				perpCamera = new THREE.PerspectiveCamera( 60, width / height, 1, 100 );
+				perpCamera.position.set( 0, 0, 10 );
+				scene.add( perpCamera );
 
-				colorMap = 'rainbow';
-				numberOfColors = 512;
+				orthoCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 1, 2 );
+				orthoCamera.position.set( 0.5, 0, 1 );
 
-				legendLayout = 'vertical';
+				sprite = new THREE.Sprite( new THREE.SpriteMaterial( {
+					map: new THREE.CanvasTexture( lut.createCanvas() )
+				} ) );
+				sprite.scale.x = 0.125;
+				uiScene.add( sprite );
 
-				material = new THREE.MeshLambertMaterial( {
+				mesh = new THREE.Mesh( undefined, new THREE.MeshLambertMaterial( {
 					side: THREE.DoubleSide,
 					color: 0xF5F5F5,
 					vertexColors: THREE.VertexColors
-				} );
+				} ) );
+				scene.add( mesh );
 
-				loadModel( colorMap, numberOfColors, legendLayout );
+				params	= {
+					colorMap: 'rainbow',
+				};
+				loadModel( );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
-				directionalLight.position.set( 17, 9, 30 );
-				scene.add( directionalLight );
+				var pointLight = new THREE.PointLight( 0xffffff, 1 );
+				perpCamera.add( pointLight );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.autoClear = false;
 				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setSize( width, height );
 				container.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize, false );
-				window.addEventListener( 'keydown', onKeyDown, true );
 
-			}
+				var controls = new THREE.OrbitControls( perpCamera, renderer.domElement );
+				controls.addEventListener( 'change', render );
 
-			function onWindowResize() {
+				var gui = new dat.GUI();
 
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
+				gui.add( params, 'colorMap', [ 'rainbow', 'cooltowarm', 'blackbody', 'grayscale' ] ).onChange( function () {
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				render();
+					updateColors();
+					render();
+
+				} );
 
 			}
 
-			function animate() {
+			function onWindowResize() {
+
+				var width = window.innerWidth;
+				var height = window.innerHeight;
 
-				requestAnimationFrame( animate );
+				perpCamera.aspect = width / height;
+				perpCamera.updateProjectionMatrix();
 
+				renderer.setSize( width, height );
 				render();
-				stats.update();
 
 			}
 
 			function render() {
 
-				if ( mesh !== undefined ) mesh.rotation.y += 0.01;
-
-				renderer.render( scene, camera );
+				renderer.clear();
+				renderer.render( scene, perpCamera );
+				renderer.render( uiScene, orthoCamera );
 
 			}
 
-			function loadModel( colorMap, numberOfColors, legendLayout ) {
+			function loadModel( ) {
 
+				var loader = new THREE.BufferGeometryLoader();
 				loader.load( 'models/json/pressure.json', function ( geometry ) {
 
 					geometry.center();
 					geometry.computeVertexNormals();
 
-					var lutColors = [];
-
-					lut = new THREE.Lut( colorMap, numberOfColors );
-
-					lut.setMax( 2000 );
-					lut.setMin( 0 );
-
-					for ( var i = 0; i < geometry.attributes.pressure.array.length; i ++ ) {
-
-						var colorValue = geometry.attributes.pressure.array[ i ];
-
-						var color = lut.getColor( colorValue );
-
-						if ( color === undefined ) {
-
-							console.log( 'Unable to determine color for value:', colorValue );
-
-						} else {
+					// default color attribute
+					var colors = [];
+					for ( var i = 0, n = geometry.attributes.position.count; i < n; ++ i ) {
 
-							lutColors[ 3 * i ] = color.r;
-							lutColors[ 3 * i + 1 ] = color.g;
-							lutColors[ 3 * i + 2 ] = color.b;
-
-						}
+						colors.push( 1, 1, 1 );
 
 					}
+					geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
-					geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( lutColors, 3 ) );
-					geometry.removeAttribute( 'pressure' );
-
-					mesh = new THREE.Mesh( geometry, material );
-
-					scene.add( mesh );
-
-					if ( legendLayout ) {
-
-						var legend;
-
-						if ( legendLayout === 'horizontal' ) {
-
-							legend = lut.setLegendOn( { 'layout': 'horizontal', 'position': { 'x': 4, 'y': 0, 'z': 0 } } );
-
-						} else {
-
-							legend = lut.setLegendOn();
-
-						}
+					mesh.geometry = geometry;
+					updateColors();
 
-						scene.add( legend );
-
-						var labels = lut.setLegendLabels( { 'title': 'Pressure', 'um': 'Pa', 'ticks': 5 } );
-
-						scene.add( labels[ 'title' ] );
-
-						for ( var i = 0; i < Object.keys( labels[ 'ticks' ] ).length; i ++ ) {
-
-							scene.add( labels[ 'ticks' ][ i ] );
-							scene.add( labels[ 'lines' ][ i ] );
-
-						}
-
-					}
+					render();
 
 				} );
 
 			}
 
-			function cleanScene() {
-
-				var elementsInTheScene = scene.children.length;
-
-				for ( var i = elementsInTheScene - 1; i > 0; i -- ) {
-
-					var child = scene.children[ i ];
+			function updateColors() {
 
-					if ( ! child.isLight ) {
+				lut.setColorMap( params.colorMap );
 
-						scene.remove( child );
+				lut.setMax( 2000 );
+				lut.setMin( 0 );
 
-						if ( child.isMesh || child.isLine ) {
+				var geometry = mesh.geometry;
+				var pressures = geometry.attributes.pressure;
+				var colors = geometry.attributes.color;
+				for ( var i = 0; i < pressures.array.length; i ++ ) {
 
-							child.geometry.dispose();
-							child.material.dispose();
-							if ( child.material.map ) child.material.map.dispose();
+					var colorValue = pressures.array[ i ];
 
+					var color = lut.getColor( colorValue );
 
-						} else if ( child.isSprite ) {
+					if ( color === undefined ) {
 
-							child.material.dispose();
-							if ( child.material.map ) child.material.map.dispose();
-
-						}
-
-					}
-
-				}
-
-			}
-
-			function onKeyDown( e ) {
-
-				var maps = [ 'rainbow', 'cooltowarm', 'blackbody', 'grayscale' ];
-
-				var colorNumbers = [ '16', '128', '256', '512' ];
-
-				if ( e.keyCode === 65 ) {
-
-					cleanScene();
-
-					var index = maps.indexOf( colorMap ) >= maps.length - 1 ? 0 : maps.indexOf( colorMap ) + 1;
-
-					colorMap = maps[ index ];
-
-					loadModel( colorMap, numberOfColors, legendLayout );
-
-				} else if ( e.keyCode === 83 ) {
-
-					cleanScene();
-
-					var index = colorNumbers.indexOf( numberOfColors ) >= colorNumbers.length - 1 ? 0 : colorNumbers.indexOf( numberOfColors ) + 1;
-
-					numberOfColors = colorNumbers[ index ];
-
-					loadModel( colorMap, numberOfColors, legendLayout );
-
-				} else if ( e.keyCode === 68 ) {
-
-					if ( ! legendLayout ) {
-
-						cleanScene();
-
-						legendLayout = 'vertical';
-
-						loadModel( colorMap, numberOfColors, legendLayout );
+						console.log( 'Unable to determine color for value:', colorValue );
 
 					} else {
 
-						cleanScene();
-
-						legendLayout = lut.setLegendOff();
-
-						loadModel( colorMap, numberOfColors, legendLayout );
+						colors.setXYZ( i, color.r, color.g, color.b );
 
 					}
 
-				} else if ( e.keyCode === 70 ) {
-
-					cleanScene();
-
-					if ( ! legendLayout ) return false;
-
-					lut.setLegendOff();
-
-					if ( legendLayout === 'horizontal' ) {
-
-						legendLayout = 'vertical';
-
-					} else {
-
-						legendLayout = 'horizontal';
-
-					}
+				}
 
-					loadModel( colorMap, numberOfColors, legendLayout );
+				colors.needsUpdate = true;
 
-				}
+				var map = sprite.material.map;
+				lut.updateCanvas( map.image );
+				map.needsUpdate = true;
 
 			}