fix?

12 files changed, 515 insertions, 0 deletions

diff --git a/site/public/assets/demo/cloud/.gitignore b/site/public/assets/demo/cloud/.gitignore
new file mode 100644
index 00000000..2ccbe465
--- /dev/null
+++ b/site/public/assets/demo/cloud/.gitignore
@@ -0,0 +1 @@
+/node_modules/
diff --git a/site/public/assets/demo/cloud/.npmignore b/site/public/assets/demo/cloud/.npmignore
new file mode 100644
index 00000000..dcaf4a28
--- /dev/null
+++ b/site/public/assets/demo/cloud/.npmignore
@@ -0,0 +1,4 @@
+/demo/
+/index.html
+/rollup.config.js
+/src/
diff --git a/site/public/assets/demo/cloud/LICENSE b/site/public/assets/demo/cloud/LICENSE
new file mode 100644
index 00000000..edeba37c
--- /dev/null
+++ b/site/public/assets/demo/cloud/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017-2018 Sergej Sintschilin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/site/public/assets/demo/cloud/README.md b/site/public/assets/demo/cloud/README.md
new file mode 100644
index 00000000..de6e882e
--- /dev/null
+++ b/site/public/assets/demo/cloud/README.md
@@ -0,0 +1,109 @@
+# THREE.TextSprite
+
+`class THREE.TextSprite extends THREE.Sprite`
+
+An instance of `TextSprite` automatically computes the optimal font size depending on the distance to the camera and the size of the renderer canvas.
+
+## demo
+
+[Try it out!](https://seregpie.github.io/THREE.TextSprite/)
+
+## dependencies
+
+- [THREE.TextTexture](https://github.com/SeregPie/THREE.TextTexture)
+
+## setup
+
+### npm
+
+```shell
+npm install three.textsprite
+```
+
+### ES module
+
+```javascript
+import TextSprite from 'three.textsprite';
+```
+
+### browser
+
+```html
+<script src="https://unpkg.com/three"></script>
+<script src="https://unpkg.com/three.texttexture"></script>
+<script src="https://unpkg.com/three.textsprite"></script>
+```
+
+The class `TextSprite` will be available under the namespace `THREE`.
+
+## members
+
+```
+.constructor({
+  material,
+  maxFontSize,
+  minFontSize,
+  redrawInterval,
+  textSize,
+  texture,
+})
+```
+
+| argument | description |
+| ---: | :--- |
+| `material` | The parameters to pass to the constructor of [`SpriteMaterial`](https://threejs.org/docs/index.html#api/materials/SpriteMaterial). |
+| `texture` | The parameters to pass to the constructor of [`TextTexture`](https://github.com/SeregPie/THREE.TextTexture). |
+
+```javascript
+let sprite = new THREE.TextSprite({
+  material: {
+    color: 0xffbbff,
+    fog: true,
+  },
+  redrawInterval: 250,
+  textSize: 10,
+  texture: {
+    text: 'Carpe Diem',
+    fontFamily: 'Arial, Helvetica, sans-serif',
+  },  
+});
+scene.add(sprite);
+```
+
+---
+
+`.isTextSprite = true`
+
+Used to check whether this is an instance of `TextSprite`.
+
+You should not change this, as it is used internally for optimisation.
+
+---
+
+`.textSize = 1`
+
+The size of the text.
+
+---
+
+`.redrawInterval = 1`
+
+The minimum time that must elapse before the canvas is redrawn. If 0, the canvas is redrawn immediately whenever `TextSprite` is rendered, otherwise the redrawing is deferred.
+
+---
+
+`.minFontSize = 0`
+
+The minimum font size.
+
+---
+
+`.maxFontSize = Infinity`
+
+The maximum font size.
+
+---
+
+`.dispose()`
+
+Disposes the texture and the material.
diff --git a/site/public/assets/demo/cloud/THREE.TextSprite.js b/site/public/assets/demo/cloud/THREE.TextSprite.js
new file mode 100644
index 00000000..525d22cd
--- /dev/null
+++ b/site/public/assets/demo/cloud/THREE.TextSprite.js
@@ -0,0 +1 @@
+(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?module.exports=b(require("three"),require("three.texttexture")):"function"==typeof define&&define.amd?define(["three","three.texttexture"],b):(a.THREE=a.THREE||{},a.THREE.TextSprite=b(a.THREE,a.THREE.TextTexture))})(this,function(a,b){"use strict";function c(a,b,c){var g=Math.round;if(b.domElement.width&&b.domElement.height&&a.material.map.textLines.length){var h=a.getWorldPosition(d).distanceTo(c.getWorldPosition(e));if(h){var i=a.getWorldScale(f).y*b.domElement.height/h;if(i)return g(i/a.material.map.imageHeight)}}return 0}b=b&&b.hasOwnProperty("default")?b["default"]:b;var d=new a.Vector3,e=new a.Vector3,f=new a.Vector3,g=function(d){function e(c){void 0===c&&(c={});var e=c.textSize;void 0===e&&(e=1);var f=c.redrawInterval;void 0===f&&(f=1);var g=c.minFontSize;void 0===g&&(g=0);var h=c.maxFontSize;void 0===h&&(h=1/0);var i=c.material;void 0===i&&(i={});var j=c.texture;void 0===j&&(j={}),d.call(this,new a.SpriteMaterial(Object.assign({},i,{map:new b(j)}))),this.textSize=e,this.redrawInterval=f,this.minFontSize=g,this.maxFontSize=h,this.lastRedraw=0}d&&(e.__proto__=d),e.prototype=Object.create(d&&d.prototype),e.prototype.constructor=e;var f={isTextSprite:{configurable:!0}};return f.isTextSprite.get=function(){return!0},e.prototype.onBeforeRender=function(a,b,c){this.redraw(a,c)},e.prototype.updateScale=function(){this.scale.set(this.material.map.imageAspect,1,1).multiplyScalar(this.textSize*this.material.map.imageHeight)},e.prototype.updateMatrix=function(){for(var a=[],b=arguments.length;b--;)a[b]=arguments[b];return this.updateScale(),d.prototype.updateMatrix.apply(this,a)},e.prototype.redraw=function(a,b){var c=this;this.lastRedraw+this.redrawInterval<Date.now()&&(this.redrawInterval?setTimeout(function(){c.redrawNow(a,b)},1):this.redrawNow(a,b))},e.prototype.redrawNow=function(b,d){this.updateScale(),this.material.map.autoRedraw=!0,this.material.map.fontSize=a.Math.clamp(a.Math.ceilPowerOfTwo(c(this,b,d)),this.minFontSize,this.maxFontSize),this.lastRedraw=Date.now()},e.prototype.dispose=function(){this.material.map.dispose(),this.material.dispose()},Object.defineProperties(e.prototype,f),e}(a.Sprite);return g});
diff --git a/site/public/assets/demo/cloud/demo/script.js b/site/public/assets/demo/cloud/demo/script.js
new file mode 100644
index 00000000..a6fc540a
--- /dev/null
+++ b/site/public/assets/demo/cloud/demo/script.js
@@ -0,0 +1,129 @@
+/* eslint-disable */
+(function() {
+
+	var datasets = ["10K US Adult Faces","3D-RMA","3D Dynamic","3DPeS","4DFAB","50 People One Question","aPascal","Aberdeen","Adience","AFAD","AFEW-VA","AffectNet","AFLW","AFW","AgeDB","ALERT Airport","AM-FED","APiS1.0","AR Face","AWE Ears","B3D(AC)","BBC Pose","BPAD","BFM","BioID Face","BJUT-3D","The Bosphorus","BP4D+","BP4D-Spontanous","Brainwash","BU-3DFE","BUHMAP-DB ","CAFE","Caltech 10K Web Faces","Caltech Faces","Caltech Pedestrians","CAMEL","CAS-PEAL","Casablanca","CASIA Webface","CAVIAR4REID","CelebA","CelebFaces+","CFD","ChaLearn","ChokePoint","Cityscapes","CCP","CMDP","CMU PIE","COCO","COCO-a","COCO QA","COFW","CK","CK+","Columbia Gaze","Ongoing Complex Activities","CUHK01","CUHK02","CUHK03","CVC-01","UFI","D3DFACS","Dartmouth Children","Data61 Pedestrian","DeepFashion","DISFA","Long Distance Heterogeneous Face","Duke MTMC","EmotioNet Database","ETHZ Pedestrian","EuroCity Persons","ExpW","Face Research Lab London","FaceScrub","FaceTracer","SFC","Facebook100","Face Place","Faces94","Faces95","Faces96","FIW","FDDB","FEI","FERET","FER+","CMU FiA","300-W","Florida Inmate","FRAV2D","FRAV3D","GRIMACE","FRGC","Gallagher","Gavab","GeoFaces","Georgia Tech Face","Google Makeup","Google (private)","Graz Pedestrian","H3D","HDA+","Helen","Hi4D-ADSIP","HID","Hipsterwars","HollywoodHeads","HRT Transgender","IFAD","IFDB","IIT Dehli Ear","IJB-A","IJB-B","IJB-C","","iLIDS-VID","Images of Groups","IMDB","IMFDB","IMM Face Dataset","Immediacy","imSitu","INRIA Pedestrian","iQIYI-VID dataset ","JAFFE","Jiku Mobile Video Dataset","JPL-Interaction dataset","Karpathy Instagram","KDEF","UB KinFace","KinectFaceDB","KITTI","LAG","Large Scale Person Search","Leeds Sports Pose","Leeds Sports Pose Extended","LFW","LFW-a","LFWP","m2vts","xm2vtsdb","MAFL","MALF","Mapillary","Market 1501","Market 1203","MARS","McGill Real World","Multiple Encounter Dataset","MegaAge","MegaFace","MIFS","MIKKI dataset","MIT CBCL","CBCL","CBCLSS","MIW","MMI Facial Expression Dataset","Moments in Time","MORPH Commercial","MORPH Non-Commercial","MOT","Large MPI Facial Expression","Small MPI Facial Expression","MPIIGaze","MPII Human Pose","MR2","MRP Drone","MsCeleb","MSMT17","MUCT","MUG Faces","MULTIPIE","MTFL","News Dataset","ND-2006","MID","Novaemötions Dataset","Nude Detection","ORL","Penn Fudan","PETA","PETS 2017","PPB","PIPA","PKU","PKU-Reid","Pornography DB","Precarious","PRID","PRW","PSU","PubFig","pubfig83","Put Face","GRID","QMUL-iLIDS","QMUL-SurvFace","RaFD","RAiD","RAP","ReSEED","SAIVT SoftBio","SAMM","Sarc3D","SCface","SCUT-FBP","SCUT HEAD","SDU-VID","SED Dataset","Sheffield Face","Shinpuhkan 2014","Social Relation","SOTON HiD","SVW","STAIR Action","Stanford Drone","Buffy Stickmen","We Are Family Stickmen","Stickmen PASCAL","Stirling/ESRC 3D Face","SUN","SVS","Texas 3DFRD","TinyFace","Tiny Images","TownCenter","TUD-Brussels","TUD-Campus","TUD-Crossing","TUD-Motionparis","TUD-Multiview","TUD-Pedestrian","TUD-Stadtmitte","TVHI","ND-TWINS-2009-2010","UCCS","UCF101","UCF-CC-50","UCF Selfie","UFDD","UMB","UMD","UNBC-McMaster Pain","Urban Tribes","USED Social Event Dataset","UTKFace","V47","VADANA","CIP","VGG Face","VGG Face2","Violent Flows","VIPeR","Phrasal Recognition","VMU","VOC","VQA","WARD","WGT","WIDER","WIDER FACE","WIDER Attribute","WildTrack","YaleFaces","Yale Face Database B","Extended Yale Face Database B ","YawDD","YFCC100M","UOY 3D Face Database","YouTubeFaces","YMU","YouTube Pose","WLFDB","SAL","Semaine","Belfast naturalistic","Belfast induced","VAM-faces","MAHNOB-HCI","DEAP","AMFED","Recola","AVEC13","AVEC14","Mimicry","Meissner Caucasian and African American","Nottingham Scans","Nottingham Originals","Stirling Pain","Utrecht ECVP","Mooney","Visual Commonsense Reasoning","HUFRD Pilgrims Dataset"]
+	var getRandomText = function() {
+		return chance.pickone(datasets)
+	};
+	var getRandomFontFamily = function() {
+		return 'Helvetica, Arial, sans-serif'
+		// return chance.pickone([
+			// 'Georgia, serif',
+			// '"Palatino Linotype", "Book Antiqua", Palatino, serif',
+			// '"Times New Roman", Times, serif',
+			// 'Helvetica, Arial, sans-serif',
+			// '"Arial Black", Gadget, sans-serif',
+			// '"Comic Sans MS", cursive, sans-serif',
+			// 'Impact, Charcoal, sans-serif',
+			// '"Lucida Sans Unicode", "Lucida Grande", sans-serif',
+			// 'Tahoma, Geneva, sans-serif',
+			// '"Trebuchet MS", Helvetica, sans-serif',
+			// 'Verdana, Geneva, sans-serif',
+			// '"Courier New", Courier, monospace',
+			// '"Lucida Console", Monaco, monospace',
+		// ]);
+	};
+	var getRandomColor = function() {
+		return chance.pickone([ 0xffffff, 0xffffff, 0xffffff, 0xdddde6, 0x888896 ]) // chance.color({format: 'hex'});
+	};
+	var getRandomTextSize = function() {
+		return (1 + Math.random()) * 1/8;
+	};
+	var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
+	renderer.setPixelRatio(devicePixelRatio);
+	renderer.setClearColor(0x000000, 0);
+	document.body.appendChild(renderer.domElement);
+	var scene = new THREE.Scene();
+	var camera = new THREE.PerspectiveCamera(75, 1, 1/128, 128);
+	camera.position.set(4, 0, 10);
+	var redrawInterval = 1;
+	var sprites = Array.from({length: datasets.length}, function(t, i) {
+		// console.log(i)
+		var sprite = new THREE.TextSprite({
+			textSize: getRandomTextSize(),
+			redrawInterval: redrawInterval,
+			material: {
+				color: getRandomColor(),
+			},
+			texture: {
+				text: datasets[i],
+				fontFamily: getRandomFontFamily(),
+			},
+		});
+		sprite.position
+			.setX(Math.random())
+			.setY(Math.random())
+			.setZ(Math.random())
+			.subScalar(1/2)
+			.setLength(1 + Math.random())
+			.multiplyScalar(6);
+		scene.add(sprite);
+		return sprite;
+	});
+	var controls = new THREE.OrbitControls(camera, renderer.domElement);
+	controls.maxDistance = camera.far/2;
+	controls.enableDamping = true;
+	controls.dampingFactor = 1/8;
+	controls.rotateSpeed = 1/4;
+	controls.zoomSpeed = 1;
+	controls.keyPanSpeed = 1/2;
+	var renderScene = function() {
+		renderer.setSize(document.body.offsetWidth, document.body.offsetHeight);
+		camera.aspect = renderer.domElement.width / renderer.domElement.height;
+		camera.updateProjectionMatrix();
+		// controls.update();
+		camera.position.z += -0.0025
+		camera.rotation.y += 0.00001
+		renderer.render(scene, camera);
+	};
+	window.addEventListener('resize', renderScene, false);
+	var startSceneRenderer = function() {
+		requestAnimationFrame(function() {
+			setTimeout(startSceneRenderer, 1000/60);
+		});
+		renderScene();
+	};
+	startSceneRenderer();
+	// var gui = new dat.GUI();
+	// (function() {
+	// 	var guiFolder = gui.addFolder('texture');
+	// 	guiFolder.add({
+	// 		text: function() {
+	// 			sprites.forEach(function(sprite) {
+	// 				sprite.material.map.text = getRandomText();
+	// 			});
+	// 		},
+	// 	}, 'text');
+	// 	guiFolder.add({
+	// 		fontFamily: function() {
+	// 			sprites.forEach(function(sprite) {
+	// 				sprite.material.map.fontFamily = getRandomFontFamily();
+	// 			});
+	// 		},
+	// 	}, 'fontFamily');
+	// 	guiFolder.open();
+	// })();
+	// (function() {
+	// 	var guiFolder = gui.addFolder('sprite');
+	// 	guiFolder.add({
+	// 		textSize: function() {
+	// 			sprites.forEach(function(sprite) {
+	// 				sprite.textSize = getRandomTextSize();
+	// 			});
+	// 		},
+	// 	}, 'textSize');
+	// 	guiFolder.add(Object.defineProperty({}, 'redrawInterval', {
+	// 		get: function() {
+	// 			return redrawInterval;
+	// 		},
+	// 		set: function(value) {
+	// 			redrawInterval = value;
+	// 			sprites.forEach(function(sprite) {
+	// 				sprite.redrawInterval = redrawInterval;
+	// 			});
+	// 		},
+	// 	}), 'redrawInterval', 0, 2000, 1);
+	// 	guiFolder.open();
+	// })();
+
+})();
diff --git a/site/public/assets/demo/cloud/index.html b/site/public/assets/demo/cloud/index.html
new file mode 100644
index 00000000..168a9467
--- /dev/null
+++ b/site/public/assets/demo/cloud/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html style="height: 100%;">
+	<head>
+		<meta charset="utf-8"/>
+		<meta
+			content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+			name="viewport"
+		/>
+		<title>Megapixels Datasets</title>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js"></script>
+		<script src="https://unpkg.com/three.texttexture@18.10.24"></script>
+		<script src="THREE.TextSprite.js"></script>
+		<link
+			href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"
+			rel="stylesheet"
+		/>
+		<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.16/chance.min.js"></script>
+	</head>
+	<body
+		style="
+		background: linear-gradient(#333,#001);
+			font-family: sans-serif;
+			height: 100%;
+			overflow: hidden;
+		"
+	>
+		<script src="demo/script.js"></script>
+	</body>
+</html>
diff --git a/site/public/assets/demo/cloud/package.json b/site/public/assets/demo/cloud/package.json
new file mode 100644
index 00000000..f7556104
--- /dev/null
+++ b/site/public/assets/demo/cloud/package.json
@@ -0,0 +1,40 @@
+{
+	"name": "three.textsprite",
+	"version": "18.10.24",
+	"description": "Automatically computes the optimal font size depending on the distance to the camera and the size of the renderer canvas.",
+	"keywords": [
+		"3d",
+		"canvas",
+		"class",
+		"font",
+		"group",
+		"object",
+		"plugin",
+		"resolution",
+		"scale",
+		"size",
+		"text",
+		"texture",
+		"three"
+	],
+	"license": "MIT",
+	"author": "Sergej Sintschilin <seregpie@gmail.com>",
+	"main": "THREE.TextSprite.js",
+	"repository": "https://github.com/SeregPie/THREE.TextSprite.git",
+	"scripts": {
+		"build": "rollup -c",
+		"dev": "rollup -c -w",
+		"prepublishOnly": "npm run build"
+	},
+	"dependencies": {
+		"three.texttexture": "^18.10.24"
+	},
+	"devDependencies": {
+		"rollup": "^0.66.6",
+		"rollup-plugin-babel-minify": "^6.1.1",
+		"rollup-plugin-buble": "^0.19.4"
+	},
+	"peerDependencies": {
+		"three": "^0.97.0"
+	}
+}
diff --git a/site/public/assets/demo/cloud/rollup.config.js b/site/public/assets/demo/cloud/rollup.config.js
new file mode 100644
index 00000000..57415169
--- /dev/null
+++ b/site/public/assets/demo/cloud/rollup.config.js
@@ -0,0 +1,25 @@
+import buble from 'rollup-plugin-buble';
+import minify from 'rollup-plugin-babel-minify';
+import path from 'path';
+
+import {main} from './package.json';
+
+let globals = {
+	'three': 'THREE',
+	'three.texttexture': 'THREE.TextTexture',
+};
+
+export default {
+	input: 'src/index.js',
+	external: Object.keys(globals),
+	output: {
+		file: main,
+		format: 'umd',
+		name: path.basename(main, path.extname(main)),
+		globals,
+	},
+	plugins: [
+		buble({objectAssign: 'Object.assign'}),
+		minify({comments: false}),
+	],
+};
diff --git a/site/public/assets/demo/cloud/src/getOptimalFontSize.js b/site/public/assets/demo/cloud/src/getOptimalFontSize.js
new file mode 100644
index 00000000..02787516
--- /dev/null
+++ b/site/public/assets/demo/cloud/src/getOptimalFontSize.js
@@ -0,0 +1,18 @@
+import {Vector3} from 'three';
+
+let objectWorldPosition = new Vector3();
+let cameraWorldPosition = new Vector3();
+let objectWorldScale = new Vector3();
+
+export default function(object, renderer, camera) {
+	if (renderer.domElement.width && renderer.domElement.height && object.material.map.textLines.length) {
+		let distance = object.getWorldPosition(objectWorldPosition).distanceTo(camera.getWorldPosition(cameraWorldPosition));
+		if (distance) {
+			let heightInPixels = object.getWorldScale(objectWorldScale).y * renderer.domElement.height / distance;
+			if (heightInPixels) {
+				return Math.round(heightInPixels / object.material.map.imageHeight);
+			}
+		}
+	}
+	return 0;
+}
diff --git a/site/public/assets/demo/cloud/src/index.js b/site/public/assets/demo/cloud/src/index.js
new file mode 100644
index 00000000..270891d5
--- /dev/null
+++ b/site/public/assets/demo/cloud/src/index.js
@@ -0,0 +1,78 @@
+import {
+	Math as THREE_Math,
+	Sprite,
+	SpriteMaterial,
+} from 'three';
+import TextTexture from 'three.texttexture';
+
+import getOptimalFontSize from './getOptimalFontSize';
+
+export default class extends Sprite {
+	constructor({
+		textSize = 1,
+		redrawInterval = 1,
+		minFontSize = 0,
+		maxFontSize = Infinity,
+		material = {},
+		texture = {},
+	} = {}) {
+		super(new SpriteMaterial({
+			...material,
+			map: new TextTexture(texture),
+		}));
+		this.textSize = textSize;
+		this.redrawInterval = redrawInterval;
+		this.minFontSize = minFontSize;
+		this.maxFontSize = maxFontSize;
+		this.lastRedraw = 0;
+	}
+
+	get isTextSprite() {
+		return true;
+	}
+
+	onBeforeRender(renderer, scene, camera) {
+		this.redraw(renderer, camera);
+	}
+
+	updateScale() {
+		this.scale
+			.set(this.material.map.imageAspect, 1, 1)
+			.multiplyScalar(this.textSize * this.material.map.imageHeight);
+	}
+
+	updateMatrix(...args) {
+		this.updateScale();
+		return super.updateMatrix(...args);
+	}
+
+	redraw(renderer, camera) {
+		if (this.lastRedraw + this.redrawInterval < Date.now()) {
+			if (this.redrawInterval) {
+				setTimeout(() => {
+					this.redrawNow(renderer, camera);
+				}, 1);
+			} else {
+				this.redrawNow(renderer, camera);
+			}
+		}
+	}
+
+	redrawNow(renderer, camera) {
+		this.updateScale();
+		this.material.map.autoRedraw = true;
+		this.material.map.fontSize = THREE_Math.clamp(
+			THREE_Math.ceilPowerOfTwo(
+				getOptimalFontSize(this, renderer, camera)
+			),
+			this.minFontSize,
+			this.maxFontSize,
+		);
+		this.lastRedraw = Date.now();
+	}
+
+	dispose() {
+		this.material.map.dispose();
+		this.material.dispose();
+	}
+}
diff --git a/site/public/assets/demo/splash/index.html b/site/public/assets/demo/splash/index.html
new file mode 100644
index 00000000..32517d97
--- /dev/null
+++ b/site/public/assets/demo/splash/index.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html>
+<head>
+  <title>MegaPixels</title>
+  <meta charset="utf-8" />
+  <meta name="author" content="info@megapixels.cc" />
+  <meta name="description" content="The Dark Side of Datasets" />
+  <meta name="referrer" content="no-referrer" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <link rel='stylesheet' href='/assets/css/fonts.css' />
+  <link rel='stylesheet' href='/assets/css/css.css' />
+  <link rel='stylesheet' href='/assets/css/splash.css' />
+</head>
+<body>
+  <header>
+    <a class='slogan' href="/">
+      <div class='logo'></div>
+      <div class='site_name'>MegaPixels</div>
+    </a>
+    <div class='links'>
+      <span>LAUNCHING MAY 2019</span>
+      <a href="#" class='aboutLink activeLink'>ABOUT</a>
+    </div>
+  </header>
+  <div class="splash">
+    <div id="three_container"></div>
+  </div>
+  <div class="about">
+    <div class="close"></div>
+    <div class="inner">
+      <p>
+        <b>MegaPixels</b> is an online art project that explores the history of face recognition from the perspective of datasets. MegaPixels aims to unravel the meanings behind the data and expose the darker corners of the biometric industry that have contributed to its growth.
+      </p>
+      <p>
+        Through a mix of case studies, visualizations, and interactive tools, Megapixels will use face recognition datasets to tell the history of modern biometrics.  Many people have contributed to the development of face recognition technology, both wittingly and unwittingly.  Not only scientists, but also celebrities and regular internet users have played a part.
+      </p>
+      <p>
+        Face recognition is a mess of contradictions.  It works, yet it doesn't actually work. It's cheap and accessible, but also expensive and out of control. Face recognition research has achieved headline grabbing superhuman accuracies over 99.9%, yet in practice it's also dangerously inaccurate.
+      </p>
+      <p>
+        During a trial installation at Sudkreuz station in Berlin in 2018, 20% of the matches were wrong, a number so low that it should not have any connection to law enforcement or justice. And in London, the Metropolitan police had been using face recognition software that mistakenly identified an alarming 98% of people as criminals, which perhaps is a crime itself.
+      </p>
+      <p>
+        MegaPixels was created by <a href="https://ahprojects.com/">Adam Harvey</a> and will launch in May 2019.
+      </p>
+    </div>
+  </div>
+  <footer>
+    <div>
+    </div>
+    <div>
+      MegaPixels &copy;2017-19 Adam R. Harvey /&nbsp;
+      <a href="https://ahprojects.com/megapixels/">ahprojects.com</a>
+    </div>
+  </footer>
+</body>
+<script src="/assets/js/dist/splash.js"></script>
+</html>
\ No newline at end of file