microsite/views/portrait.html

<html>
	<head>

		<title> {{title}} </title>
		<meta charset="utf-8">

		<meta name="description" content="eMerge Americas is a two-day technology event held in Miami Beach FL where bright and ambitious minds gather to network and share ideas. This site collects dynamic 3D portraits created at the eMerge EXPO installation by Branger_Briz">
		<meta name="author" content="Branger_Briz">
	
		<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic&v1" rel="stylesheet" type="text/css">
		<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:200,300|Lato:100|Source+Code+Pro:300,400,500,600,700' rel='stylesheet' type='text/css'>

		<link rel="stylesheet" type="text/css" href="css/styles.css">

		<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
		<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
		<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
		<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
		<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
		<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
		<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
		<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
		<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
		<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
		<link rel="manifest" href="/manifest.json">
		<meta name="msapplication-TileColor" content="#ffffff">
		<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
		<meta name="theme-color" content="#ffffff">			

		<link rel="image_src" href="http://emerge.brangerbriz.com/{{id}}_1.png" />

		<meta property="og:title" content="eMerge Portraits"/>
		<meta property="og:description" content="eMerge Americas is a two-day technology event held in Miami Beach FL where bright and ambitious minds gather to network and share ideas. This site collects dynamic 3D portraits created at the eMerge EXPO installation by Branger_Briz"/>
		<meta property="og:url" content="http://emerge.brangerbriz.com/{{id}}"/>
		<meta property="og:image" content="http://emerge.brangerbriz.com/{{id}}_1.png"/>
		<meta property="og:site_name" content="Branger_Briz"/>
		<meta name="twitter:card" content="summary_large_image">
		<meta name="twitter:site" content="@branger_briz">
		<meta name="twitter:creator" content="@branger_briz">
		<meta name="twitter:title" content="eMerge Portraits">
		<meta name="twitter:description" content="eMerge Americas is a two-day technology event held in Miami Beach FL where bright and ambitious minds gather to network and share ideas. This site collects dynamic 3D portraits created at the eMerge EXPO installation by Branger_Briz">
		<meta name="twitter:image" content="http://emerge.brangerbriz.com/{{id}}_1.png">

		<meta name="viewport" content="width=device-width, initial-scale=1">

	</head>
	<body>

		<div id="waiting-for-api-data"><canvas id="loading-data"></canvas></div>

		<div id="picSaved">saved</div>

		<div id="modal">
			<div class="frame">
				<div class="closeRow">
					<a href="#" id="closeShare"> close </a>
				</div>

				<div id="modalImgGallery" class="clearfix">
					<!-- images go here -->
				</div>
				<div class="label desktop-only">press spacebar to save the current frame as a screenshot, then share on social media #EA16 </div>
				<div class="label mobile-only">visit this page on your desktop or laptop for more download/embed options </div>
				
				<input type="text" id="shareIframe" class="desktop-only">
				<div class="label desktop-only">embed code</div>

				<div class="shareButtons">
					<a class="twitter btnlink" href="http://twitter.com/share?text=check%20out%20my%20eMerge%20Portrait%20%23EA16%20by%20@branger_briz">Twitter</a>
					<a class="facebook btnlink" href="http://www.facebook.com/share.php?u=http://emerge.brangerbriz.com" target="_blank" > facebook </a>
					<!-- <a href="#" class="btnlink desktop-only" id="downloadObj"> download obj file * </a>					 -->
				</div>
				<br>
				<!-- <div class="label desktop-only">obj download is experimental</div> -->
				
			</div>
		</div>

		<section id="share">
			<div class="galleryTitle">
				<div class="align-left">
					<a href="/" class="homeLnk">eMerge Portraits</a>
					<a href="http://brangerbriz.com"><div class="logo2"> by Branger_Briz</div></a>					
				</div> 
			</div>
			<div class="pressp">
				press spacebar to save a picture
			</div>
			<div>
				<a href="#" class="btnlink" id="shareBtn"> share </a>
			</div>
		</section>

		<script src="libs/three.min.js"></script>
		<script src="libs/stats.min.js"></script>
		<script src="libs/OBJExporter.js"></script>
		<script src="libs/dat.gui.bb.min.js"></script>
		<script src="BB.min.js"></script>
		<script src="WebGLTexture.js"></script>
		<script src="MeshFromDepth.js"></script>
		<script src="DepthFromKinect.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
		<script>
			if( !BB.Detect.hasWebGL ){
				var bummer = document.createElement('div');
					bummer.setAttribute('id','no-webgl');
					bummer.innerHTML = "Bummer! looks like your device/browser either doesn't support WebGL or doesn't have WebGL enabled. try visiting this site with another device or browser ( the newer the better )."
				document.body.appendChild( bummer );
			}


			// GET URL PARAMETER
			// via http://stackoverflow.com/questions/979975/how-to-get-the-value-from-url-parameter 
			var QueryString = function () {
			  var query_string = {};
			  var query = window.location.search.substring(1);
			  var vars = query.split("&");
			  for (var i=0;i<vars.length;i++) {
			    var pair = vars[i].split("=");
			    if (typeof query_string[pair[0]] === "undefined") { query_string[pair[0]] = pair[1]; } 
			    else if (typeof query_string[pair[0]] === "string") {
			      var arr = [ query_string[pair[0]], pair[1] ];
			      query_string[pair[0]] = arr;
			    } else { query_string[pair[0]].push(pair[1]); }
			  } return query_string;
			} ();
			var Q = QueryString; //alias


			if( Q.frame ){
				$('#picSaved').css('display','none');
				$('#modal').css('display','none');
				$('#share').css('display','none');
			} 

			if( Q.embed ){
				$('.pressp').css('display','none');
				$('#shareBtn').css('display','none');
			}


			// loader animation ---------------------- ---------------------- ---------------------- ----------------------
			// loader animation ---------------------- ---------------------- ---------------------- ----------------------
			// loader animation ---------------------- ---------------------- ---------------------- ----------------------
			// loader animation ---------------------- ---------------------- ---------------------- ----------------------
			// loader animation ---------------------- ---------------------- ---------------------- ----------------------
			// loader animation ---------------------- ---------------------- ---------------------- ----------------------


			var canvas = document.getElementById('loading-data');
				canvas.width = innerWidth;
				canvas.height = innerHeight;
			var ctx = canvas.getContext('2d');
				ctx.font = '40px Arial';
				ctx.textAlign = "center";
			var t = 0, d = 1;

			var loaderXpos = canvas.width/2;
			if( Q.frame ) loaderXpos = canvas.width*0.75; 
			if( BB.Detect.isMobile ) loaderXpos = canvas.width/2;
			
			function Box( x, y, len, s ){
				this.s = 3;
				this.x = x;
				this.y = y;
				this.length = len;
				this.fcolor = "#fff";
				this.bcolor = "#282840";
				this.speed = s;
			}
			Box.prototype.easeInOutQuad = function (t, d) {
				var c = this.length+this.speed;
				t /= d/2;
				if (t < 1) return c/2*t*t + 0;
				t--;
				return -c/2 * (t*(t-2) - 1) + 0;
			};
			Box.prototype.draw = function(t,g){
				var ease = this.easeInOutQuad( t, g );
				ctx.fillStyle = this.bcolor;
				ctx.fillRect( this.x, this.y, this.s, -ease);
				ctx.fillStyle = this.fcolor;
				ctx.fillRect( this.x, this.y-ease, this.s, -this.s );
			};

			var bz = [];
			for(var i=0; i<125; i++ ){
				var x = loaderXpos-125+(i*2);
				var y = canvas.height/2+20;
				var h = 70;
				var s = Math.random()*100;
				var b = new Box( x, y, h, s );
				bz.push( b );
			}
			function loaderDraw(){
				requestAnimationFrame(loaderDraw);
				var g = 60;
				t+=d; if(t > g || t < 0 ) d=-d;

				ctx.fillStyle = "#282840";
				ctx.fillRect(0,0,canvas.width,canvas.height);
				ctx.fillStyle = "#fff";
				ctx.fillText('loading data', loaderXpos, canvas.height/2 );
				for(var i=0; i<bz.length; i++ ) bz[i].draw(t,g);
			} loaderDraw();


			//  ---------------------- ---------------------- ---------------------- ----------------------
			//  ---------------------- ---------------------- ---------------------- ----------------------
			//  ---------------------- ---------------------- ---------------------- ----------------------
			//  ---------------------- ---------------------- ---------------------- ----------------------
			//  ---------------------- ---------------------- ---------------------- ----------------------
			//  ---------------------- ---------------------- ---------------------- ----------------------


			var sessionId = "{{id}}";
			var scene, camera, renderer; 
			var wireframe, pointcloud, depth, ripple;
			var stats, axes;
			var clearColor = 0x1E202F;


			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;
			var mouseX = ( windowHalfX - window.innerWidth*0.25 );
			var mouseY = ( window.innerHeight*0.75 - windowHalfY );
			var mouseZ = window.innerWidth*0.25;
			

			var KeyFrames = []; 
			var diffTex, diffCanvas, diffCtx, diffImg;


			function str2Uint8Array( base64 ) {
			    var bstr =  window.atob( base64 );
			    var len = bstr.length;
			    var arr = new Uint8Array( len );
			    for (var i = 0; i < len; i++) arr[i] = bstr.charCodeAt(i);
			    return arr;
			}

			$.getJSON( "http://"+window.location.host+"/api/sessions?id="+sessionId, function( data ) {
				if (!data.error && data.data) {
					
					for (var i = 0; i < data.data.keyFrames.length; i++) {
						var decodedArray = str2Uint8Array( data.data.keyFrames[i].depthData );
						KeyFrames.push({
							depthData: decodedArray,
							diffDataURL: data.data.keyFrames[i].diffDataURL,
							motionValue: data.data.keyFrames[i].motionValue
						});
					};

					setup();
					draw();
					// makegui();

					$('#waiting-for-api-data').fadeOut();

				
				} else {
					console.log(data);
				}
			});


			// share stuff ---------------------- ---------------------- ---------------------- ----------------------
			// share stuff ---------------------- ---------------------- ---------------------- ----------------------
			// share stuff ---------------------- ---------------------- ---------------------- ----------------------
			// share stuff ---------------------- ---------------------- ---------------------- ----------------------
			// share stuff ---------------------- ---------------------- ---------------------- ----------------------
			// share stuff ---------------------- ---------------------- ---------------------- ----------------------

			$('#shareIframe').attr('value','<iframe width="640" height="360" src="'+window.location.href+'?embed=true"></iframe>');

			function addImgToGallery( url, name, src ){
				var item = document.createElement('div');
					item.className = "item";
					item.style.width = "30%";
				var a = document.createElement("a");
					a.href = url;
					a.download = name;							
				var img = document.createElement('img');
					img.src = src;
					img.className = "thumb";
					// img.style.width = "100%"
					item.appendChild( a );
					a.appendChild( img );
				$('#modalImgGallery').append( item );
			}

			$.getJSON( "http://"+window.location.host+"/api/session-frame-count?id={{id}}", function( json ) {
				if (!json.error && json.data) {
					var pix = json.data.keyFrames.length;
					if( pix > 3 ) pix = 3; // cap at 3 screenshots 
					for (var i = 0; i < pix; i++) {
						addImgToGallery(
							window.location.origin+"/"+sessionId+"_"+(i+1)+".png",
							'eMergePortrait'+sessionId+"_"+(i+1)+".png",
							sessionId+"_"+(i+1)+".png"
						);
					};
					
				} else { console.log(json); }
			});

			function savePic(){
				var imgDataURL = renderer.domElement.toDataURL();
				addImgToGallery( imgDataURL, 'eMergePortrait'+ Date.now() + ".png", imgDataURL );

				$('#picSaved').css({
					'left' : $('#shareBtn').offset().left+"px",
					'top' : $('#shareBtn').offset().top+55+"px"
				});
				$('#picSaved').fadeIn(1000,function(){
					$('#picSaved').fadeOut(1000);
				});
			}

			// $('#downloadObj').click(function(){
			// 	var exporter = new THREE.OBJExporter();
			// 	var result = exporter.parse(scene);
			// 	// window.open('data:text/obj;charset=utf-8,'+result);
			// 	var a = document.createElement("a");
			// 	var file = new Blob([result], {type: 'text/plain'});
			// 	a.href = URL.createObjectURL(file);
			// 	a.download = 'eMergePortrait'+sessionId+'.obj';
			// 	a.click();
			// });

			$('.twitter,.facebook').click(function(event) {
				var width  = 575,
					height = 400,
					left   = ($(window).width()  - width)  / 2,
					top    = ($(window).height() - height) / 2,
					url    = this.href,
					opts   = 'status=1' +
							',width='  + width  +
							',height=' + height +
							',top='    + top    +
							',left='   + left;

				window.open(url, 'eMerge Portraits', opts);

				return false;
			});

			var shareLnk = "http://www.facebook.com/share.php?u="+window.location.toString();
			$('.facebook').attr('href', shareLnk );

			$('#closeShare').click(function(){
				$('#modal').fadeOut();
			});
			$('#shareBtn').click(function(){
				$('#modal').fadeIn();
			});

			
			// 3d scene --------------------------
			// 3d scene -------------------------- --------------------------
			// 3d scene -------------------------- -------------------------- --------------------------
			// 3d scene -------------------------- -------------------------- -------------------------- --------------------------

			function setup() {

				renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true });
				renderer.setClearColor( clearColor );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.domElement.style.position = 'absolute';
				renderer.domElement.style.left = '0px';
				renderer.domElement.style.top = '0px';
				document.body.appendChild( renderer.domElement );

				scene = new THREE.Scene();
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth/window.innerHeight, 1, 10000 );
				camera.position.set( 0, 0, 650 );
				
				// framediff texture -------------------------------------
				diffCanvas = document.createElement('canvas');
				diffCanvas.width = 640; diffCanvas.height = 480;
				diffCtx = diffCanvas.getContext('2d');
				diffTex = new THREE.Texture( diffCanvas );
				diffTex.minFilter = THREE.NearestFilter;				
				diffImg = new Image();
				diffImg.src = KeyFrames[0].diffDataURL;
				diffImg.onload = function(){ diffCtx.drawImage( this, 0,0 ); }
				diffTex.needsUpdate = true;


				// webGL reipple -----------------------------------------
				ripple = new WebGLTexture({
					width:640,
					height:480,
					vertexShader: 'shaders/wgltex-vert.glsl',
					fragmentShader: 'shaders/wgltex-frag.glsl'
				});

				// depth data --------------------------------------------
				depth = new DepthFromKinect( 640, 480, KeyFrames[0].depthData );

				// meshes ------------------------------------------------
				wireframe = new MeshFromDepth({
					depthData: depth.canvas,
					scene: scene,
					vertexShader: 'shaders/glazewire-v.glsl',
					fragmentShader: 'shaders/glazewire-f.glsl',
					type: 'mesh',
					wireframe: true,
					polycount: 20,
					uniforms: [
						{ name: "time", type:"f", value: 0.0 },
						{ name: "motionGate", type:"i", value: 0 }
					]
				});

				pointcloud = new MeshFromDepth({
					depthData: depth.canvas,
					scene: scene,
					vertexShader: 'shaders/huepoints-v.glsl',
					fragmentShader: 'shaders/huepoints-f.glsl',				
					type: 'point',
					polycount: 200,
					pointsize: 3.0,
					uniforms: [
						{ name: "time", type:"f", value: 0.0 },
						{ name: "motion", type:"f", value: 0.0 },
						{ name: "motionGate", type:"i", value: 0 },
						{ name: "motionFade", type:"f", value: 1.0 },
						{ name: "smoothMotion", type:"f", value: 1.0 },
						{ name: "diffTex", type: "t", value: diffTex },
						{ name: "webglTex", type:"t", value: ripple.getTexture() },
					]
				});


				// ----------------------- helpers ----------------------- debug ----------------------- 
				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '90px';
				stats.domElement.style.width = "100px";
				stats.domElement.style.display = "none";
				document.body.appendChild( stats.domElement );
				//
				axes = new THREE.AxisHelper(150);
				axes.material.transparent = true;
				axes.material.opacity = 0.0;
				scene.add(axes);
				//
				var canvas = depth.canvas;
				canvas.style.position = "absolute";
				canvas.style.display = "none";
				canvas.style.width = "100px";
				document.body.appendChild(canvas);

				/*
					+	: zoom camera in
					-	: zoom camera out
					C 	: change bg color
					S 	: toggle stats
				 */
				document.onkeypress = function(e){
					var e = window.event || e;
					// console.log(e.keyCode)
					console.log(e.charCode)

					if(!Q.frame && e.keyCode==61) camera.position.z -= 25;	// +
					if(!Q.frame && e.keyCode==45) camera.position.z += 25;	// -

					if(!Q.frame && e.keyCode == 99 ){ // C ( to change background color )
						clearColor = (clearColor==0xffffff) ? 0x000000 : 0xffffff;
						renderer.setClearColor( clearColor );
					}
					// if(!Q.frame && e.keyCode == 115 ){ // S ( to toggle stats )
					// 	if(stats.domElement.style.display=='none'){
					// 		canvas.style.display  = stats.domElement.style.display = 'block';
					// 		axes.material.opacity = 1.0;
					// 	} else { 
					// 		canvas.style.display  = stats.domElement.style.display = 'none';
					// 		axes.material.opacity = 0.0;
					// 	}
					// }

					if(!Q.frame && e.charCode==32) savePic();
					

				}

				document.addEventListener( 'mousemove',function(event){
					if( !BB.Detect.isMobile ){
						mouseX = ( windowHalfX - event.clientX );
						mouseY = ( event.clientY - windowHalfY );
						mouseZ = event.clientX;
					}
				}, false );


				if( BB.Detect.isMobile && typeof window.DeviceMotionEvent !== "undefined" ){
					window.ondevicemotion = function(event) {
						// mouseX = BB.MathUtils.map(event.accelerationIncludingGravity.x, -10, 10, innerWidth/2, -innerWidth/2);
						// mouseY = BB.MathUtils.map(event.accelerationIncludingGravity.y, -10, 10, -innerHeight/2, innerHeight/2);;
						// mouseZ = BB.MathUtils.map(event.accelerationIncludingGravity.x, -10, 10, 0, innerWidth );
						mouseX = event.accelerationIncludingGravity.x;
						mouseY = event.accelerationIncludingGravity.y;
						mouseZ = event.accelerationIncludingGravity.z;	
					}
				}

				// document.addEventListener( 'touchstart', function(event){
				// 	if ( event.touches.length == 1 ) {
				// 		event.preventDefault();
				// 		mouseX = event.touches[ 0 ].pageX - windowHalfX;
				// 		mouseY = event.touches[ 0 ].pageY - windowHalfY;
				// 	}
				// }, false );

				// document.addEventListener( 'touchmove', function(event){
				// 	if ( event.touches.length == 1 ) {
				// 		event.preventDefault();
				// 		mouseX = event.touches[ 0 ].pageX - windowHalfX;
				// 		mouseY = event.touches[ 0 ].pageY - windowHalfY;
				// 	}
				// }, false );


				window.onresize = function() {
					windowHalfX = window.innerWidth / 2;
					windowHalfY = window.innerHeight / 2;
					camera.aspect = window.innerWidth / window.innerHeight;
					camera.updateProjectionMatrix();
					renderer.setSize( window.innerWidth, window.innerHeight );
				}
				window.onresize();

			}


			var frameDuration = 4; // seconds
			var intervalAmt = 60*frameDuration;
			var frame = 0;
			var counter = 0;
			var motion = 0.001;
			var mInc = 0.00001;
			var mScale = 1;
			// var noiseCnt = KeyFrames[0].motionValue - 0.25;

			function draw() {
				requestAnimationFrame(draw);
				
				var time = performance.now();

				ripple.update( time/5000 );

				motion += mInc;
				if( motion > 0.002 || motion < 0.001 ) mInc = -mInc;
				if( KeyFrames[frame].motionValue > 1 ) mScale = 2;
				else mScale = 1;

				if( wireframe.loaded && pointcloud.loaded ){

					// motion += mInc;						
					// noiseCnt += 0.5/intervalAmt; // slowly phase through noise field... varies depending on seed
					// pointcloud.mesh.material.uniforms.motion.value = BB.MathUtils.noise( noiseCnt );			
					//pointcloud.mesh.material.uniforms.motion.value += 0.25/intervalAmt;

					wireframe.mesh.material.uniforms.time.value = time;			
					wireframe.mesh.material.uniforms.motionGate.value = KeyFrames[frame].motionValue;		
					if( KeyFrames[frame].motionValue == 2 ) wireframe.mesh.material.wireframe = false;
					else wireframe.mesh.material.wireframe = true;
					//
					pointcloud.mesh.material.uniforms.time.value = time;
					pointcloud.mesh.material.uniforms.motion.value = motion*4;
					pointcloud.mesh.material.uniforms.motionFade.value = KeyFrames[frame].motionValue;
					pointcloud.mesh.material.uniforms.motionGate.value = KeyFrames[frame].motionValue;		
					pointcloud.mesh.material.uniforms.smoothMotion.value = motion * mScale;

					diffTex.needsUpdate = true;
				}
					
				// switch frames ----------------------------------------------------------
				counter++;
				if( counter % intervalAmt  == 0 ){ // approx every 4 seconds 
					frame++; if(frame>=KeyFrames.length) frame = 0;
					
					depth.crossFadeCanvasData( KeyFrames[frame].depthData, 1000 );
					// depth.wipeFadeCanvasData( KeyFrames[frame].depthData, 1000 );
					
					//pointcloud.mesh.material.uniforms.motion.value = KeyFrames[frame].motionValue;
					// noiseCnt = KeyFrames[frame].motionValue - 0.25;
					
					diffImg.onload = function(){ diffCtx.drawImage( this, 0,0 ); }
					diffImg.src = KeyFrames[frame].diffDataURL;
					diffTex.needsUpdate = true;
				}
				wireframe.update();
				pointcloud.update();


				// control camera ----------------------------------------------------------
				if( BB.Detect.isMobile && typeof window.DeviceMotionEvent !== "undefined" ){
					// mouseXYZ is accelerometerXYZ
					camera.position.x = BB.MathUtils.map(mouseX, -10, 10, 600, -600);
					camera.position.y = BB.MathUtils.map(mouseY, -10, 10, 200,-700);
					camera.position.z = 500;
					
				} else {
					camera.position.x += ( mouseX - camera.position.x ) * 0.05;
					camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
					var z = (mouseZ<=windowHalfX) ? windowHalfX-mouseZ : mouseZ-windowHalfX;
					camera.position.z = BB.MathUtils.map( z, 0, windowHalfX, 200, 650 );
				}	
				camera.lookAt( scene.position );

				renderer.render( scene, camera );
				stats.update();
			}


			function makegui(){
				var gui = new dat.GUI(); 
				// var f1 = gui.addFolder('u');
				// f1.add(box2, 'h', 0, 359).step(1).name('hue').listen().onChange(function(){ change(); }); 
				gui.add( pointcloud.mesh.material.uniforms.pmax, 'value', 0.0, 15.0 ).name('pmin');
				gui.add( pointcloud.mesh.material.uniforms.resthresh, 'value', -25.0, 25.0 ).step(1.0).name('resthresh');

				gui.domElement.style.zIndex = 100;				
			}

			//0.125
			//
			//
			
			
		</script>
		<script>
		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
		ga('create', 'UA-6098550-30', 'auto');
		ga('send', 'pageview');
		</script>			
	</body>
</html>