textme04.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - postprocessing - glyphs</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			html, body {
				font-family: Monospace;
				background-color: #000;
				color: #fff;
				margin: 0px;
				overflow: hidden;
				width: 100%;
				height: 100%;
			}
			canvas {
				width: 100%;
				height: 100%;
			}
			#info {
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display:block;
			}
			#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
			.dg.ac {
				z-index: 1000 !important;
			}
		</style>
	</head>
	<body>

		<div id="info">
		<a href="http://threejs.org" target="_blank">three.js</a> - glyph postprocessing - by <a href="http://games.greggman.com" target="_blank">greggman</a>
		</div>

		<script src="js/three.min.js"></script>
		<script src="js/three/js/utils/GeometryUtils.js"></script>
		<script src="js/three/js/utils/GlyphUtilsV1.js"></script>

		<script src="js/three/js/shaders/CopyShader.js"></script>
		<script src="js/three/js/shaders/GlyphShaderV1.js"></script>

		<script src="js/three/js/postprocessing/EffectComposer.js"></script>
		<script src="js/three/js/postprocessing/MaskPass.js"></script>
		<script src="js/three/js/postprocessing/RenderPass.js"></script>
		<script src="js/three/js/postprocessing/ShaderPass.js"></script>
		<script src="js/three/js/postprocessing/GlyphPassV1.js"></script>

		<script src="js/three/js/Detector.js"></script>
		<script src="js/three/js/libs/stats.min.js"></script>
		<script src="js/three/js/libs/dat.gui.min.js"></script>

		<script>
			"use strict";

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var container, stats, permalink, hex, color;

			var camera, cameraTarget, scene, renderer;

			var composer;
			var renderTarget;

			var group, textMesh1, textMesh2, textGeo, material;
			var scenes = {};

			var text = "three.js",

				height = 20,
				size = 70,
				hover = 30;

			var targetRotation = 0;
			var targetRotationOnMouseDown = 0;

			var mouseX = 0;
			var mouseXOnMouseDown = 0;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			var postprocessing = { enabled : true };
			var glow = 0.9;

			var globalOptions = {
			};
			var fontOptions = {
				font: "monospace",
				fontSize: 20,
			};
			var fontFamilies = {
				"monospace": "monospace",
				"courier": "'Courier New',Courier,monospace",
				"narrow-serif": "'Courier New',Courier,monospace",
				"wide-serif": "Georgia,Utopia,Charter,serif",
				"narrow-sans-serif": "Helvetica,Arial,sans-serif",
				"wide-sans-serif": "Verdana,Geneva,sans-serif",
			};
			var renderModel;
			var glyphExtras = {
				color: [255, 255, 255 ],
			};
			var glyphPass;
			var glyphSets = {};
			var glyphPassOptions = {

				glyphOptions: {

					checker: false,
					shade: false,
					weighNeighbors: false,
					glyphSets: [ "ascii" ],

					fontOptions: {
					}

				}

			};

			init();
			animate();

			function init() {

				container = document.body;

				// CAMERA

				camera = new THREE.PerspectiveCamera( 30, 1, 1, 1500 );
				camera.position.set( 0, 400, 700 );

				cameraTarget = new THREE.Vector3( 0, 150, 0 );

				globalOptions.scene = "spheres";
				scenes.spheres = createSphereScene();
				scenes.cubes = createCubeScene( false );
				scenes[ "wireframe cubes" ] = createCubeScene( true );
				scene = scenes.spheres;

				// RENDERER

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				container.appendChild( renderer.domElement );
				renderer.setPixelRatio( 2 );

				// STATS

				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				//container.appendChild( stats.domElement );

				// POSTPROCESSING

				renderer.autoClear = false;

				renderModel = new THREE.RenderPass( scene, camera );
				glyphPass = new THREE.GlyphPass( glyphPassOptions );

				glyphPass.renderToScreen = true;

				var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
				renderTarget = new THREE.WebGLRenderTarget( 1, 1, parameters );
				setRenderTargetSize();

				composer = new THREE.EffectComposer( renderer, renderTarget );

				composer.addPass( renderModel );
				composer.addPass( glyphPass );

				//

				initGUI();

				// EVENTS

				renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
				renderer.domElement.addEventListener( 'touchstart', onDocumentTouchStart, false );
				renderer.domElement.addEventListener( 'touchmove', onDocumentTouchMove, false );

				window.addEventListener( 'resize', onWindowResize, false );
				onWindowResize();
			}

			function createSphereScene() {
				// SCENE

				var scene = new THREE.Scene();
				scene.fog = new THREE.Fog( 0x000000, 250, 1400 );

				// LIGHTS

				var dirLight = new THREE.DirectionalLight( 0xffffff, 1.725 );
				dirLight.position.set( 200, 100, 100 ).normalize();
				scene.add( dirLight );

				var pointLight = new THREE.PointLight( 0xffffff, 1.5 );
				pointLight.position.set( -120, 0, 50 );
				scene.add( pointLight );

				var group = new THREE.Group();
				group.position.y = 120;


				var radius = 150;
				var geometry = new THREE.IcosahedronGeometry( radius, 1 );
				var mat1 = new THREE.MeshLambertMaterial( { color: 0xff4f8f, shading: THREE.FlatShading } );

				var modelM = new THREE.Mesh( geometry, mat1 );
				group.add( modelM );

				var geometry = new THREE.SphereGeometry( radius, 48, 24 );
				var mat1 = new THREE.MeshLambertMaterial( { color: 0x4f8fff, shading: THREE.SmoothShading } );

				var modelL = new THREE.Mesh( geometry, mat1 );
				modelL.position.x -= radius * 2.5;
				group.add( modelL );

				var geometry = new THREE.SphereGeometry( radius, 4, 2 );
				var mat1 = new THREE.MeshLambertMaterial( { color: 0x8fff4f, shading: THREE.FlatShading } );

				var modelR = new THREE.Mesh( geometry, mat1 );
				modelR.position.x = radius * 2.5;
				group.add( modelR );

				scene.add( group );

				return {

					update: function() {

						modelR.rotation.z -= 0.003;
						modelM.rotation.z += 0.002;
						group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;

					},

					getScene: function() {

						return scene;

					}
				};
			}

			function createCubeScene( wireframe ) {
				// SCENE

				var scene = new THREE.Scene();
				scene.fog = new THREE.Fog( 0x000000, 250, 1400 );

				// LIGHTS

				var dirLight = new THREE.DirectionalLight( 0xffffff, 0.725 );
				dirLight.position.set( 200, 100, 100 ).normalize();
				scene.add( dirLight );

				var pointLight = new THREE.HemisphereLight( 0xddeeff, 0x806040, 0.5 );
				pointLight.position.set( -120, 0, 50 );
				scene.add( pointLight );

				var group = new THREE.Group();
				group.position.y = 120;

				var size = 50;
				var spread = size * 2.5;
				var geometry = new THREE.BoxGeometry( size, size, size );

				var materials = [];
				var num = 4;
				for ( var xx = -num; xx <= num; ++xx ) {
					for ( var yy = -num; yy <= num; ++yy ) {
						for ( var zz = -num; zz <= num; ++zz ) {
							var color = ( (( (xx / num * 0.5 + 0.5 ) * 255 ) | 0 ) <<  0 ) |
										( (( (yy / num * 0.5 + 0.5 ) * 255 ) | 0 ) <<  8 ) |
										( (( (zz / num * 0.5 + 0.5 ) * 255 ) | 0 ) << 16 ) ;
							var mat = new THREE.MeshLambertMaterial( { color: color, shading: THREE.FlatShading, wireframe: wireframe } );
							var model = new THREE.Mesh( geometry, mat );
							materials.push( mat );
							model.position.x = xx * spread;
							model.position.y = yy * spread;
							model.position.z = zz * spread;
							group.add( model );
						}
					}
				}

				scene.add( group );

				return {

					resize: function() {

						var lineWidth = Math.max(1, renderer.domElement.clientHeight / 30);
						materials.forEach( function( mat ) {

							mat.wireframeLinewidth = lineWidth;

						});

					},

					update: function() {

						group.rotation.z += 0.002;
						group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;

					},

					getScene: function() {

						return scene;

					}
				};
			}

			function isMobile() {
				var ua = navigator.userAgent.toLowerCase();
				return ua.indexOf( "iphone" ) >= 0 || ua.indexOf( "mobile" ) >= 0;
			}

			function initGUI() {
				var gui = new dat.GUI();
				gui.add( globalOptions, 'scene', Object.keys( scenes )).onChange( function() {
					scene = scenes[ globalOptions.scene ];
				} );
				gui.add( postprocessing, 'enabled' );
				gui.add( glyphPass, 'textScale', 0.2, 2.0 );
				gui.addColor( glyphExtras, 'color' ).onChange( function() {
					var c = glyphExtras.color;
					glyphPass.color.setRGB( c[ 0 ] / 255, c[ 1 ] / 255, c[ 2 ] / 255 );
				} );

				var glyphsFolder = gui.addFolder( 'glyphs' );
				Object.keys( THREE.GlyphUtils.unicodeRanges ).forEach( function( rangeName ) {
					glyphSets[ rangeName ] = glyphPassOptions.glyphOptions.glyphSets.indexOf( rangeName ) >= 0;
					glyphsFolder.add( glyphSets, rangeName ).onChange( function() {

						updateGlyphSets();

					} );
				} );

				var debugFolder = gui.addFolder( 'debug' );
				debugFolder.add( glyphPassOptions.glyphOptions, 'weighNeighbors' ).onChange( updateGlyphSets );
				debugFolder.add( glyphPassOptions.glyphOptions, 'checker' ).onChange( updateGlyphSets );
				debugFolder.add( glyphPassOptions.glyphOptions, 'shade' ).onChange( updateGlyphSets );
				debugFolder.add( glyphPass, 'dosColors' );
				debugFolder.add( fontOptions, 'font', Object.keys( fontFamilies )).onFinishChange( updateGlyphSets );
				debugFolder.add( fontOptions, 'fontSize', 6, 32 ).step( 1 ).onFinishChange( updateGlyphSets );

				if ( isMobile() ) {
					gui.close();
				}
			}

			function updateGlyphSets() {

				glyphPassOptions.glyphOptions.glyphSets = Object.keys( glyphSets ).filter( function( set ) {
					return glyphSets[ set ];
				} );

				glyphPassOptions.glyphOptions.fontOptions.font =
					fontOptions.fontSize.toString() + "px " + fontFamilies[ fontOptions.font ];

				console.log( glyphPassOptions.glyphOptions.fontOptions.font );

				glyphPass.updateGlyphs( glyphPassOptions );

			}

			function setRenderTargetSize() {

				// Make it twice as many pixels as there are glyphs
				var width  = ( renderer.context.drawingBufferWidth  / ( glyphPass.glyphs.glyphWidth  * glyphPass.textScale ) | 0 ) * 2;
				var height = ( renderer.context.drawingBufferHeight / ( glyphPass.glyphs.glyphHeight * glyphPass.textScale ) | 0 ) * 2;

				if ( renderTarget.width !== width || renderTarget.height !== height ) {

					renderTarget.setSize( width, height );

				}
			}


			function onWindowResize() {

				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				renderer.setSize( renderer.domElement.clientWidth, renderer.domElement.clientHeight, false );

				setRenderTargetSize();

				composer.reset();

				Object.keys( scenes ).forEach( function( sceneName ) {
					var scene = scenes[ sceneName ];
					if ( scene.resize ) {
						scene.resize();
					}
				} );
			}

			//

			function onDocumentMouseDown( event ) {

				event.preventDefault();

				renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
				renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false );
				renderer.domElement.addEventListener( 'mouseout', onDocumentMouseOut, false );

				mouseXOnMouseDown = event.clientX - windowHalfX;
				targetRotationOnMouseDown = targetRotation;

			}

			function onDocumentMouseMove( event ) {

				event.preventDefault();

				mouseX = event.clientX - windowHalfX;

				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;

			}

			function onDocumentMouseUp( event ) {

				event.preventDefault();

				renderer.domElement.removeEventListener( 'mousemove', onDocumentMouseMove, false );
				renderer.domElement.removeEventListener( 'mouseup', onDocumentMouseUp, false );
				renderer.domElement.removeEventListener( 'mouseout', onDocumentMouseOut, false );

			}

			function onDocumentMouseOut( event ) {

				event.preventDefault();

				renderer.domElement.removeEventListener( 'mousemove', onDocumentMouseMove, false );
				renderer.domElement.removeEventListener( 'mouseup', onDocumentMouseUp, false );
				renderer.domElement.removeEventListener( 'mouseout', onDocumentMouseOut, false );

			}

			function onDocumentTouchStart( event ) {

				if ( event.touches.length == 1 ) {

					event.preventDefault();

					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
					targetRotationOnMouseDown = targetRotation;

				}

			}

			function onDocumentTouchMove( event ) {

				if ( event.touches.length == 1 ) {

					event.preventDefault();

					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;

				}

			}

			//

			function animate() {

				requestAnimationFrame( animate );

				render();
				stats.update();

			}

			function render() {

				setRenderTargetSize();

				scene.update();
				var renderScene = scene.getScene();
				renderModel.scene = renderScene;
				renderer.setClearColor( renderScene.fog.color );

				camera.aspect = renderer.domElement.clientWidth / renderer.domElement.clientHeight;
				camera.updateProjectionMatrix();
				camera.lookAt( cameraTarget );

				renderer.clear();

				if ( postprocessing.enabled ) {

					composer.render( 0.05 );

				} else {

					renderer.render( renderScene, camera );

				}

			}

		</script>

	</body>
</html>