From b3ed0f95eb94a4e7cb5e137bb8196db8c36aa50d Mon Sep 17 00:00:00 2001 From: Adam Harvey Date: Wed, 5 Jun 2019 10:44:12 -0500 Subject: fix? --- site/public/assets/demo/cloud/.gitignore | 1 + site/public/assets/demo/cloud/.npmignore | 4 + site/public/assets/demo/cloud/LICENSE | 21 ++++ site/public/assets/demo/cloud/README.md | 109 +++++++++++++++++ site/public/assets/demo/cloud/THREE.TextSprite.js | 1 + site/public/assets/demo/cloud/demo/script.js | 129 +++++++++++++++++++++ site/public/assets/demo/cloud/index.html | 31 +++++ site/public/assets/demo/cloud/package.json | 40 +++++++ site/public/assets/demo/cloud/rollup.config.js | 25 ++++ .../assets/demo/cloud/src/getOptimalFontSize.js | 18 +++ site/public/assets/demo/cloud/src/index.js | 78 +++++++++++++ site/public/assets/demo/splash/index.html | 58 +++++++++ 12 files changed, 515 insertions(+) create mode 100644 site/public/assets/demo/cloud/.gitignore create mode 100644 site/public/assets/demo/cloud/.npmignore create mode 100644 site/public/assets/demo/cloud/LICENSE create mode 100644 site/public/assets/demo/cloud/README.md create mode 100644 site/public/assets/demo/cloud/THREE.TextSprite.js create mode 100644 site/public/assets/demo/cloud/demo/script.js create mode 100644 site/public/assets/demo/cloud/index.html create mode 100644 site/public/assets/demo/cloud/package.json create mode 100644 site/public/assets/demo/cloud/rollup.config.js create mode 100644 site/public/assets/demo/cloud/src/getOptimalFontSize.js create mode 100644 site/public/assets/demo/cloud/src/index.js create mode 100644 site/public/assets/demo/splash/index.html (limited to 'site/public/assets/demo') 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 + + + +``` + +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 + + + + + Megapixels Datasets + + + + + + + + + + + + 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 ", + "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 @@ + + + + MegaPixels + + + + + + + + + + +
+ + +
MegaPixels
+ +
+ LAUNCHING MAY 2019 + ABOUT +
+
+
+
+
+
+
+
+

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

+

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

+

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

+

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

+

+ MegaPixels was created by Adam Harvey and will launch in May 2019. +

+
+
+
+
+
+
+ MegaPixels ©2017-19 Adam R. Harvey /  + ahprojects.com +
+
+ + + \ No newline at end of file -- cgit v1.2.3-70-g09d2