├── README.md
├── alien-strands
    └── index.html
├── assets
    ├── Clouds.png
    ├── Multi-Area-Light.jpg
    ├── cloud.png
    ├── clouds.jpg
    ├── gioconda.jpg
    ├── gioconda.png
    ├── gioconda32.jpg
    ├── gradient1.jpg
    ├── map-color.jpg
    ├── map-composite.jpg
    ├── matcap.jpg
    ├── matcap2.jpg
    ├── matcap3.jpg
    ├── milkmaid.jpg
    ├── milkmaid.png
    ├── milkmaid32.jpg
    ├── noise.png
    ├── pearl.jpg
    ├── pearl.png
    ├── pearl32.jpg
    ├── pumice
    │   ├── diffuse.png
    │   ├── height.png
    │   ├── normal.jpg
    │   ├── normal.png
    │   ├── specular.jpg
    │   └── specular.png
    ├── stroke.png
    ├── vincent.jpg
    ├── vincent.png
    └── white-construction-paper-texture.jpg
├── base
    └── index.html
├── bonkey-balls
    └── index.html
├── chromeography
    └── index.html
├── css
    └── styles.css
├── curl-scribbles
    └── index.html
├── digital-analog-color-display
    ├── index copy.html
    ├── index-shadow.html
    └── index.html
├── dotty-earth
    └── index.html
├── gi
    └── index.html
├── glow-worms
    ├── index.html
    └── mrf.html
├── holomap
    └── index.html
├── index.html
├── js
    ├── Backdrop.js
    ├── Bloom.js
    ├── CCapture.all.min.js
    ├── Common.js
    ├── CubemapToEquirectangular.js
    ├── EquirectangularToCubemap.js
    ├── ImprovedNoise.js
    ├── Maf.js
    ├── MeshCustomMaterial.js
    ├── OBJLoader.js
    ├── Odeo.js
    ├── OrbitControls.js
    ├── THREE.FBOHelper.js
    ├── THREE.MeshLine.js
    ├── THREE.PingPongTexture.js
    ├── THREE.ShaderTexture.js
    ├── dat.gui.min.js
    ├── isMobile.min.js
    ├── oimo.js
    ├── oimo.min.js
    ├── perlin.js
    ├── three.js
    └── three.min.js
├── plasma-waves
    ├── index copy.html
    └── index.html
├── rainbow-spikeball
    └── index.html
├── sdf-physics
    └── index.html
├── shredder-redux
    └── index.html
├── sound-waves
    └── index.html
├── sphere-carving
    └── index.html
├── supershape
    ├── index.html
    └── pervertex.html
├── terrain
    └── index.html
├── the-wrung-music
    └── index.html
└── whirly-bonfire
    ├── index copy.html
    └── index.html


/README.md:
--------------------------------------------------------------------------------
 1 | # codevember-2017
 2 | 
 3 | Experiments for Codevember 2017
 4 | 
 5 | See also: [Codevember 2016](https://github.com/spite/codevember-2016)
 6 | 
 7 | # License		
 8 |  		
 9 | [Attribution CC BY](https://creativecommons.org/licenses/by/4.0/)		
10 |  		
11 |  This license lets others distribute, remix, tweak, and build upon your work, even commercially, as long as they credit you for the original creation.
12 | 


--------------------------------------------------------------------------------
/assets/Clouds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/Clouds.png


--------------------------------------------------------------------------------
/assets/Multi-Area-Light.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/Multi-Area-Light.jpg


--------------------------------------------------------------------------------
/assets/cloud.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/cloud.png


--------------------------------------------------------------------------------
/assets/clouds.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/clouds.jpg


--------------------------------------------------------------------------------
/assets/gioconda.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/gioconda.jpg


--------------------------------------------------------------------------------
/assets/gioconda.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/gioconda.png


--------------------------------------------------------------------------------
/assets/gioconda32.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/gioconda32.jpg


--------------------------------------------------------------------------------
/assets/gradient1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/gradient1.jpg


--------------------------------------------------------------------------------
/assets/map-color.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/map-color.jpg


--------------------------------------------------------------------------------
/assets/map-composite.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/map-composite.jpg


--------------------------------------------------------------------------------
/assets/matcap.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/matcap.jpg


--------------------------------------------------------------------------------
/assets/matcap2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/matcap2.jpg


--------------------------------------------------------------------------------
/assets/matcap3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/matcap3.jpg


--------------------------------------------------------------------------------
/assets/milkmaid.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/milkmaid.jpg


--------------------------------------------------------------------------------
/assets/milkmaid.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/milkmaid.png


--------------------------------------------------------------------------------
/assets/milkmaid32.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/milkmaid32.jpg


--------------------------------------------------------------------------------
/assets/noise.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/noise.png


--------------------------------------------------------------------------------
/assets/pearl.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/pearl.jpg


--------------------------------------------------------------------------------
/assets/pearl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/pearl.png


--------------------------------------------------------------------------------
/assets/pearl32.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/pearl32.jpg


--------------------------------------------------------------------------------
/assets/pumice/diffuse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/pumice/diffuse.png


--------------------------------------------------------------------------------
/assets/pumice/height.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/pumice/height.png


--------------------------------------------------------------------------------
/assets/pumice/normal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/pumice/normal.jpg


--------------------------------------------------------------------------------
/assets/pumice/normal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/pumice/normal.png


--------------------------------------------------------------------------------
/assets/pumice/specular.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/pumice/specular.jpg


--------------------------------------------------------------------------------
/assets/pumice/specular.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/pumice/specular.png


--------------------------------------------------------------------------------
/assets/stroke.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/stroke.png


--------------------------------------------------------------------------------
/assets/vincent.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/vincent.jpg


--------------------------------------------------------------------------------
/assets/vincent.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/vincent.png


--------------------------------------------------------------------------------
/assets/white-construction-paper-texture.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spite/codevember-2017/cef2633db672d16e89c0a447607554b4d91afe07/assets/white-construction-paper-texture.jpg


--------------------------------------------------------------------------------
/base/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>TITLE - Codevember 2017</title>
  5 | 		<meta charset="utf-8">
  6 | 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | 
  8 | 		<link rel="stylesheet" type="text/css" href="../css/styles.css" media="screen" />
  9 | 		<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">
 10 | 
 11 | 	</head>
 12 | 	<body>
 13 | 
 14 | 		<div id="container"></div>
 15 | 		<div id="info" >
 16 | 			<p><a href="../n" >Previous</a> | <a href="../n" >Next</a></p>
 17 | 			<h1>#. TITLE</h1>
 18 | 			<p>Lorem ipsum</p>
 19 | 			<p id="moreDetails"><b>More details...</b></p>
 20 | 		</div>
 21 | 		<div id="details" class="hidden">
 22 | 			<div class="content" >
 23 | 				<h1>Details</h1>
 24 | 				<p>Lorem ipsum <a href="#" >dolor sit amet</a>.</p>
 25 | 				<a href="#" id="close-details">Close</a>
 26 | 			</div>
 27 | 		</div>
 28 | 
 29 | 		<script src="../js/Common.js"></script>
 30 | 		<script src="../js/three.min.js"></script>
 31 | 		<script src="../js/OrbitControls.js"></script>
 32 | 
 33 | <script>
 34 | 
 35 | 'use strict';
 36 | 
 37 | var container, renderer, camera, controls, scene;
 38 | var mesh;
 39 | 
 40 | var helper;
 41 | 
 42 | var container = document.getElementById( 'container' );
 43 | 
 44 | function initScene() {
 45 | }
 46 | 
 47 | function init() {
 48 | 
 49 | 	container = document.getElementById( 'container' );
 50 | 
 51 | 	scene = new THREE.Scene();
 52 | 
 53 | 	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, .1, 10000 );
 54 | 	camera.target = new THREE.Vector3( 0, 0, 0 );
 55 | 	camera.position.set( 0, 0, 2 );
 56 | 	camera.lookAt( camera.target );
 57 | 	scene.add( camera );
 58 | 
 59 | 	renderer = new THREE.WebGLRenderer( { antialias: true, preserveDrawingBuffer: true } );
 60 | 	renderer.setPixelRatio( window.devicePixelRatio );
 61 | 	renderer.setClearColor( 0x261b1f, 1 );
 62 | 	container.appendChild( renderer.domElement );
 63 | 
 64 | 	addCommonUI(renderer.domElement);
 65 | 
 66 | 	renderer.shadowMap.enabled = true;
 67 | 	renderer.shadowMap.type = THREE.PCFShadowMap;
 68 | 
 69 | 	controls = new THREE.OrbitControls( camera, renderer.domElement );
 70 | 
 71 | 	initScene();
 72 | 	onWindowResized();
 73 | 
 74 | 	window.addEventListener( 'resize', onWindowResized );
 75 | 
 76 | 	animate();
 77 | 
 78 | }
 79 | 
 80 | function onWindowResized( event ) {
 81 | 
 82 | 	var w = container.clientWidth;
 83 | 	var h = container.clientHeight;
 84 | 
 85 | 	renderer.setSize( w, h );
 86 | 	camera.aspect = w / h;
 87 | 	camera.updateProjectionMatrix();
 88 | 
 89 | }
 90 | 
 91 | function animate() {
 92 | 
 93 | 	requestAnimationFrame( animate );
 94 | 
 95 | 	controls.update();
 96 | 
 97 | 	renderer.render( scene, camera );
 98 | 
 99 | }
100 | 
101 | window.addEventListener( 'load', init );
102 | 
103 | </script>
104 | 
105 | 	</body>
106 | </html>
107 | 


--------------------------------------------------------------------------------
/chromeography/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<title>chromeography - Codevember 2017</title>
  5 | 	<meta charset="utf-8">
  6 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | 
  8 | 	<link rel="stylesheet" type="text/css" href="../css/styles.css" media="screen" />
  9 | 	<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">
 10 | 	<style>
 11 | 	#selector{
 12 | 		position: absolute;
 13 | 		bottom: 60px;
 14 | 		left: 0;
 15 | 		right: 0;
 16 | 		text-align: center;
 17 | 	}
 18 | 	#selector img{
 19 | 		width: 64px;
 20 | 		height: 64px;
 21 | 		border: 4px solid white;
 22 | 		box-shadow: 0 3px 5px rgba(0,0,0,.4);
 23 | 		margin: 4px;
 24 | 		cursor:pointer;
 25 | 	}
 26 | 	#loading{
 27 | 		position: absolute;
 28 | 		left: 0; right: 0;
 29 | 		bottom: 0; top: 0;
 30 | 		width: 100%; height: 100%;
 31 | 		background-color: black;
 32 | 		text-align:center;
 33 | 		line-height: 0;
 34 | 		padding-top: 25%;
 35 | 		z-index:2000;
 36 | 	}
 37 | </style>
 38 | </head>
 39 | <body>
 40 | 
 41 | 	<div id="container">
 42 | 		<div id="selector"></div>
 43 | 		<div id="loading" >Loading</div>
 44 | 	</div>
 45 | 	<div id="info" >
 46 | 		<p><a href="../plasma-waves" >Previous</a> | <a href="../whirly-bonfire" >Next</a></p>
 47 | 		<h1>7. chromeography</h1>
 48 | 		<p>Fading one image into another and making those colors dance!</p>
 49 | 		<p>Select any of the four images at the bottom to fade into it.</p>
 50 | 		<p><b>Click or tap and drag</b> to move the camera, <b>scroll or zoom with two fingers</b> to zoom in and out.</p>
 51 | 		<p id="moreDetails"><b>More details...</b></p>
 52 | 	</div>
 53 | 	<div id="details" class="hidden">
 54 | 		<div class="content" >
 55 | 			<h1>Details</h1>
 56 | 			<p>Fading one image into another and making those colors dance!</p>
 57 | 			<p>Pixels in each image are sorted by saturation, keeping it´s position in the order array, and it´s original position in the image. That way, the first value in each buffer gives us position of the darkest point in each image. The second value, the second darkest, etc. With that is easy to mix source and targt in the vertex shader of the particles.</p>
 58 | 			<p>Inspired by <a href="https://twitter.com/JoeCreates/status/927623110962053123" >this tweet</a> by Joe Williamson.</p>
 59 | 			<p>Built with <a href="threejs.org">three.js</a>.</p>
 60 | 			<p>Code available on <a href="https://github.com/spite/codevember-2017/tree/master/chromeography" >GitHub</a>.</p>
 61 | 			<a href="#" id="close-details">Close</a>
 62 | 		</div>
 63 | 	</div>
 64 | 
 65 | <script src="../js/Common.js"></script>
 66 | <script src="../js/three.min.js"></script>
 67 | <script src="../js/OrbitControls.js"></script>
 68 | 
 69 | <script type="x-shader/x-vertex" id="particle-vs" >
 70 | 	precision highp float;
 71 | 
 72 | 	attribute vec3 position;
 73 | 	attribute vec2 source;
 74 | 	attribute vec2 target;
 75 | 
 76 | 	uniform mat4 modelViewMatrix;
 77 | 	uniform mat4 projectionMatrix;
 78 | 
 79 | 	uniform float size;
 80 | 	uniform float blend;
 81 | 	uniform sampler2D sourceTex;
 82 | 	uniform sampler2D targetTex;
 83 | 	uniform vec2 dimensions;
 84 | 
 85 | 	varying vec3 vColor;
 86 | 
 87 | 	float parabola( float x, float k ) {
 88 | 		return pow( 4. * x * ( 1. - x ), k );
 89 | 	}
 90 | 
 91 | 	const float PI = 3.14159265359;
 92 | 
 93 | 	void main() {
 94 | 
 95 | 		float pBlend = 0.;
 96 | 		float threshold = ( position.y * dimensions.x + position.x ) * .5 / ( dimensions.x * dimensions.y );
 97 | 		if( 1.5 * blend > threshold ) {
 98 | 			pBlend = 1.5 * blend - threshold;
 99 | 		}
100 | 		pBlend = clamp( pBlend, 0., 1. );
101 | 		vec3 origin = vec3(source, 0.);
102 | 		vec3 destination = vec3(target, 0.);
103 | 		vec3 p = mix( origin, destination, pBlend );
104 | 		vec3 d = ( destination - origin );
105 | 		vec3 c = origin + d / 2.;
106 | 		float r = length(d);
107 | 		p.xy = c.xy - .5 * d.xy * cos(pBlend*PI);
108 | 		p.z = .5 * r * sin(pBlend*PI);
109 | 		p.xy -= .5 * dimensions;
110 | 		p *= 1. / dimensions.x;
111 | 		vec2 uvSource = source / dimensions.x;
112 | 		vec2 uvTarget = target / dimensions.x;
113 | 		vColor = mix( texture2D(sourceTex,uvSource).rgb, texture2D(targetTex,uvTarget).rgb, pBlend );
114 | 		float scale = 1.;
115 | 		p.y *= -1.;
116 | 		vec4 mvPosition = modelViewMatrix * vec4( p, 1. );
117 | 		gl_PointSize = size * ( scale / - mvPosition.z );
118 | 		gl_Position = projectionMatrix * mvPosition;
119 | 
120 | 	}
121 | </script>
122 | 
123 | <script type="x-shader/x-fragment" id="particle-fs" >
124 | 	precision highp float;
125 | 
126 | 	varying vec3 vColor;
127 | 
128 | 	void main() {
129 | 		gl_FragColor = vec4(vColor, 1.);
130 | 	}
131 | </script>
132 | 
133 | <script>
134 | 
135 | 	'use strict';
136 | 
137 | 	var container, renderer, camera, controls, scene;
138 | 	var mesh;
139 | 	var startTime;
140 | 
141 | 	var helper;
142 | 
143 | 	var container = document.getElementById( 'container' );
144 | 
145 | 	function loadImage( filename, c ) {
146 | 
147 | 		var img = new Image();
148 | 		img.addEventListener( 'load', function(e) {
149 | 			c(this);
150 | 		});
151 | 		img.src = filename;
152 | 
153 | 	}
154 | 
155 | 	var images = [
156 | 	{ file: '../assets/pearl.png' },
157 | 	{ file: '../assets/milkmaid.png' },
158 | 	{ file: '../assets/gioconda.png'  },
159 | 	{ file: '../assets/vincent.png'  }
160 | 	]
161 | 
162 | 	function sortPixels(img, callback) {
163 | 
164 | 		var canvas = document.createElement('canvas');
165 | 		canvas.width = img.naturalWidth;
166 | 		canvas.height = img.naturalHeight;
167 | 		var ctx = canvas.getContext('2d');
168 | 		ctx.drawImage(img, 0, 0);
169 | 		var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
170 | 		var buffer = data.data;
171 | 
172 | 		var rgb = [];
173 | 		var c = new THREE.Color();
174 | 		for( var j = 0; j < buffer.length; j += 4 ) {
175 | 			c.setRGB( buffer[ j ], buffer[ j + 1 ], buffer[ j + 2 ] );
176 | 			rgb.push( { c: c.clone(), id: j / 4 } );
177 | 		}
178 | 
179 | 		rgb.sort( function( a, b ) {
180 | 			//return a.c.getHSL().h - b.c.getHSL().h
181 | 			return a.c.getHSL().s - b.c.getHSL().s
182 | 			//return b.c.getHSL().l - a.c.getHSL().l
183 | 		})
184 | 
185 | 		var ptr = 0;
186 | 		var res = new Float32Array(img.width*img.height*2);
187 | 		rgb.forEach( function(e) {
188 | 			res[ ptr ] = e.id % img.width;
189 | 			res[ ptr + 1 ] = Math.floor( e.id / img.width );
190 | 			ptr += 2;
191 | 		});
192 | 
193 | 		callback(res);
194 | 
195 | 	}
196 | 
197 | 	var material;
198 | 	var points;
199 | 
200 | 	function initScene() {
201 | 
202 | 		images.forEach( function(i, id) {
203 | 
204 | 			loadImage( i.file, function(img) {
205 | 
206 | 				i.image = img;
207 | 				i.texture = new THREE.Texture(img);
208 | 				i.texture.flipY = false;
209 | 				i.texture.needsUpdate = true;
210 | 
211 | 				var copy = new Image();
212 | 				copy.src = i.file;
213 | 				copy.addEventListener('click',function(e) {
214 | 					selectImage(id);
215 | 				})
216 | 				document.getElementById('selector').appendChild(copy)
217 | 
218 | 				sortPixels(img, function(res){
219 | 					i.buffer = res;
220 | 					i.loaded = true;
221 | 					generateMesh();
222 | 
223 | 				});
224 | 			})
225 | 
226 | 		})
227 | 
228 | 		function generateMesh() {
229 | 
230 | 			if( images.some( function(i) { return i.loaded !== true } ) ) { return }
231 | 
232 | 				var w = images[0].image.width;
233 | 			var h = images[0].image.height;
234 | 			var ptr = 0;
235 | 			var positions = new Float32Array(w*h*3);
236 | 			for( var y = 0; y < w; y++ ) {
237 | 				for( var x = 0; x < h; x++ ) {
238 | 					positions[ ptr * 3 + 0 ] = x;
239 | 					positions[ ptr * 3 + 1 ] = y;
240 | 					positions[ ptr * 3 + 2 ] = 0;
241 | 
242 | 					ptr++;
243 | 				}
244 | 			}
245 | 			var geometry = new THREE.BufferGeometry();
246 | 			geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
247 | 
248 | 			geometry.addAttribute( 'source', new THREE.BufferAttribute( images[0].buffer, 2 ) );
249 | 			geometry.addAttribute( 'target', new THREE.BufferAttribute( images[1].buffer, 2 ) );
250 | 
251 | 			var loader = new THREE.TextureLoader();
252 | 
253 | 			material = new THREE.RawShaderMaterial( {
254 | 				uniforms: {
255 | 					sourceTex: { type: 't', value: images[0].texture },
256 | 					targetTex: { type: 't', value: images[1].texture },
257 | 					blend: { type: 'f', value: 0 },
258 | 					size: { type: 'f', value: 2.1 },//window.devicePixelRatio },
259 | 					dimensions: { type: 'v2', value: new THREE.Vector2(w,h)}
260 | 				},
261 | 				vertexShader: document.getElementById( 'particle-vs' ).textContent,
262 | 				fragmentShader: document.getElementById( 'particle-fs' ).textContent,
263 | 			});
264 | 
265 | 			points = new THREE.Points( geometry, material );
266 | 			scene.add( points );
267 | 
268 | 			renderer.render( scene,camera );
269 | 			startTime = performance.now();
270 | 			document.getElementById('loading').style.display = 'none';
271 | 		}
272 | 
273 | 	}
274 | 
275 | 	function init() {
276 | 
277 | 		container = document.getElementById( 'container' );
278 | 
279 | 		scene = new THREE.Scene();
280 | 
281 | 		camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, .001, 100 );
282 | 		camera.target = new THREE.Vector3( 0, 0, 0 );
283 | 		camera.position.set( 0, 0, 1 );
284 | 		camera.lookAt( camera.target );
285 | 		scene.add( camera );
286 | 
287 | 		renderer = new THREE.WebGLRenderer( { antialias: true, preserveDrawingBuffer: true } );
288 | 		renderer.setPixelRatio( window.devicePixelRatio );
289 | 		renderer.setClearColor( 0x261b1f, 1 );
290 | 		container.appendChild( renderer.domElement );
291 | 
292 | 		addCommonUI(container);
293 | 
294 | 		renderer.shadowMap.enabled = true;
295 | 		renderer.shadowMap.type = THREE.PCFShadowMap;
296 | 
297 | 		controls = new THREE.OrbitControls( camera, renderer.domElement );
298 | 
299 | 		initScene();
300 | 		onWindowResized();
301 | 
302 | 		window.addEventListener( 'resize', onWindowResized );
303 | 
304 | 		animate();
305 | 
306 | 	}
307 | 
308 | 	function onWindowResized( event ) {
309 | 
310 | 		var w = container.clientWidth;
311 | 		var h = container.clientHeight;
312 | 
313 | 		renderer.setSize( w, h );
314 | 		camera.aspect = w / h;
315 | 		camera.updateProjectionMatrix();
316 | 
317 | 	}
318 | 
319 | 	function changeSource( id ) {
320 | 		material.uniforms.sourceTex.value = images[ id ].texture;
321 | 		points.geometry.attributes.source.array = images[ id ].buffer;
322 | 		points.geometry.attributes.source.needsUpdate = true;
323 | 	}
324 | 
325 | 	function changeTarget( id ) {
326 | 		material.uniforms.targetTex.value = images[ id ].texture;
327 | 		points.geometry.attributes.target.array = images[ id ].buffer;
328 | 		points.geometry.attributes.target.needsUpdate = true;
329 | 	}
330 | 
331 | 	function selectImage(id){
332 | 		if (currentId===id) return;
333 | 		currentId = id;
334 | 		if( current === 1 ) changeSource(id);
335 | 		else changeTarget(id);
336 | 		current = 1 - current;
337 | 	}
338 | 
339 | 	var currentId = 0;
340 | 	var current = 0;
341 | 	var target = 0;
342 | 	var blendValue = 0;
343 | 	var step = .05;
344 | 
345 | 	// https://gist.github.com/gre/1650294
346 | 	//function ease (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t };
347 | 	//function ease (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t }
348 | 	function ease (t) {  return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }
349 | 
350 | 	function animate() {
351 | 
352 | 		requestAnimationFrame( animate );
353 | 
354 | 		controls.update();
355 | 
356 | 		//var t = .001 * ( performance.now() - startTime );
357 | 		//if (material) material.uniforms.blend.value = .5 + .5 * Math.cos(t);
358 | 		if (material) {
359 | 			var dir = current - blendValue;
360 | 			blendValue += dir / 100;
361 | 			material.uniforms.blend.value = ease(blendValue);
362 | 		}
363 | 
364 | 		renderer.render( scene, camera );
365 | 
366 | 	}
367 | 
368 | 	window.addEventListener( 'load', init );
369 | 
370 | </script>
371 | 
372 | </body>
373 | </html>
374 | 


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
  1 | *{
  2 | 	box-sizing: border-box;
  3 | 	margin :0;
  4 | 	padding: 0;
  5 | }
  6 | html {
  7 | 	height: 100%;
  8 | 	-moz-user-select: none;
  9 | 	-khtml-user-select: none;
 10 | 	-webkit-user-select: none;
 11 | 	-ms-user-select: none;
 12 | 	user-select: none;
 13 | }
 14 | body {
 15 | 	margin: 0;
 16 | 	padding: 0;
 17 | 	background-color: #202020;
 18 | 	color: #ffffff;
 19 | 	line-height: 1.4em;
 20 | 	height: 100%;
 21 | 	overflow: hidden;
 22 | 	font-family: 'Lato', sans-serif;
 23 | 	font-size: 13px;
 24 | 	font-weight: 100;
 25 | 	text-shadow: 0 1px 0 rgba(0,0,0,1);
 26 | }
 27 | #container {
 28 | 	position: absolute;
 29 | 	left: 0;
 30 | 	top: 0;
 31 | 	right: 0;
 32 | 	bottom: 0;
 33 | 	width: 100%;
 34 | 	height: 100%;
 35 | }
 36 | #info{
 37 | 	position: absolute;
 38 | 	left: 20px;
 39 | 	top: 20px;
 40 | 	max-width: 400px;
 41 | 	overflow: auto;
 42 | 	pointer-events: none;
 43 | }
 44 | #info h1, #details h1{
 45 | 	font-family: 'Playfair Display', sans-serif;
 46 | 	font-weight: 700;
 47 | 	font-size: 16px;
 48 | 	margin-bottom: 1em;
 49 | 	text-transform: uppercase;
 50 | }
 51 | #info p, #details p{
 52 | 	margin-bottom: 1em;
 53 | 	hyphens: auto;
 54 | }
 55 | #info a, .action, #details a{
 56 | 	color: inherit;
 57 | 	cursor: pointer;
 58 | 	text-decoration: none;
 59 | 	opacity: .7;
 60 | 	transition: opacity 100ms ease-out;
 61 | 	font-weight: 700;
 62 | 	border-bottom: 1px solid rgba(255,255,255,.2);
 63 | 	pointer-events: auto;
 64 | }
 65 | #moreDetails{
 66 | 	pointer-events: auto
 67 | }
 68 | #info a:hover, .action:hover, #details a:hover{
 69 | 	opacity: 1
 70 | 	border-bottom: 1px solid rgba(255,255,255,.5);
 71 | }
 72 | b{
 73 | 	font-weight: 700;
 74 | }
 75 | #details{
 76 | 	position: absolute;
 77 | 	right: 0;
 78 | 	width: 400px;
 79 | 	max-width: 100%;
 80 | 	height: 100%;
 81 | 	background-color: black;
 82 | 	transition: transform 150ms ease-out;
 83 |     z-index: 100;
 84 | }
 85 | #details.hidden{
 86 | 	transform: translate3d( 100%,0,0);
 87 | }
 88 | #details.hidden *{
 89 | 	pointer-events: none;
 90 | }
 91 | #details ul{
 92 | 	margin-left: 20px; margin-bottom: 1em;
 93 | }
 94 | #details .content{
 95 | 	padding: 20px;
 96 | 	position: absolute;
 97 | 	left: 0; top: 0; right: 0; bottom: 60px;
 98 | 	overflow: auto;
 99 | }
100 | 
101 | .hub{
102 | 	position: absolute; bottom: 20px; right: 85px; color: white;
103 | 	text-align: right; line-height: 24px;
104 | 	height: 28px;
105 | 	z-index: 1000;
106 | }
107 | .hub a{
108 | 	color: inherit;
109 | }
110 | 
111 | body > .button{
112 | 	position: absolute; border: 1px solid white; z-index: 1000; width: 28px; height: 28px; cursor: pointer; text-align: center; line-height: 24px; cursor:pointer;
113 | }
114 | 
115 | .fullscreen-button{
116 | 	right: 20px; bottom: 20px;
117 | }
118 | .info-button{
119 | 	right: 50px; bottom: 20px;
120 | }
121 | .code{
122 | 	font-family: "courier new", courier; color: green; padding: 5px;
123 | }
124 | 


--------------------------------------------------------------------------------
/digital-analog-color-display/index copy.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>TITLE - Codevember 2017</title>
  5 | 		<meta charset="utf-8">
  6 | 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | 
  8 | 		<link rel="stylesheet" type="text/css" href="../css/styles.css" media="screen" />
  9 | 		<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">
 10 | 
 11 | 	</head>
 12 | 	<body>
 13 | 
 14 | 		<div id="container"></div>
 15 | 		<div id="info" >
 16 | 			<p><a href="../n" >Previous</a> | <a href="../n" >Next</a></p>
 17 | 			<h1>#. TITLE</h1>
 18 | 			<p>Lorem ipsum</p>
 19 | 			<p id="moreDetails"><b>More details...</b></p>
 20 | 		</div>
 21 | 		<div id="details" class="hidden">
 22 | 			<div class="content" >
 23 | 				<h1>Details</h1>
 24 | 				<p>Lorem ipsum <a href="#" >dolor sit amet</a>.</p>
 25 | 				<a href="#" id="close-details">Close</a>
 26 | 			</div>
 27 | 		</div>
 28 | 
 29 | 		<script src="../js/Common.js"></script>
 30 | 		<script src="../js/three.min.js"></script>
 31 | 		<script src="../js/OrbitControls.js"></script>
 32 | 
 33 | <script id="display-vs" type="x-shader/x-vertex">
 34 | precision highp float;
 35 | 
 36 | uniform mat4 modelViewMatrix;
 37 | uniform mat4 projectionMatrix;
 38 | uniform mat3 normalMatrix;
 39 | 
 40 | uniform sampler2D map;
 41 | uniform vec2 dimensions;
 42 | 
 43 | attribute vec3 position;
 44 | attribute vec3 offset;
 45 | attribute vec2 uv;
 46 | attribute vec3 normal;
 47 | 
 48 | varying float vDiffuse;
 49 | 
 50 | vec3 rotateX(vec3 p, float radian) {
 51 |   mat3 m = mat3(
 52 |     1.0, 0.0, 0.0,
 53 |     0.0, cos(radian), -sin(radian),
 54 |     0.0, sin(radian), cos(radian)
 55 |   );
 56 |   return m * p;
 57 | }
 58 | 
 59 | #define PI 3.1415926535897932384626433832795
 60 | 
 61 | float luma(vec3 color) {
 62 |   return dot(color, vec3(0.299, 0.587, 0.114));
 63 | }
 64 | 
 65 | float luma(vec4 color) {
 66 |   return dot(color.rgb, vec3(0.299, 0.587, 0.114));
 67 | }
 68 | 
 69 | void main() {
 70 | 
 71 | 	vec2 uv = offset.xy / dimensions + .5;
 72 | 	vec4 c = texture2D( map, uv );
 73 | 	float a = luma(c) * PI / 2. - PI / 4.;
 74 | 	vec3 vPosition = rotateX( position, a );
 75 | 	vec3 n = normalize( rotateX( normal, a ));
 76 | 	vDiffuse = dot( n, vec3(0.,1.,1.) );
 77 | 
 78 | 	gl_Position = projectionMatrix * modelViewMatrix * vec4( offset + vPosition, 1.0 );
 79 | 
 80 | }
 81 | </script>
 82 | 
 83 | <script id="display-fs" type="x-shader/x-fragment">
 84 | precision highp float;
 85 | 
 86 | varying float vDiffuse;
 87 | 
 88 | void main() {
 89 | 
 90 | 	gl_FragColor = vec4(vec3(vDiffuse),1.);
 91 | 
 92 | }
 93 | </script>
 94 | 
 95 | <script>
 96 | 
 97 | 'use strict';
 98 | 
 99 | var container, renderer, camera, controls, scene;
100 | var mesh;
101 | 
102 | var helper;
103 | 
104 | var container = document.getElementById( 'container' );
105 | var video = document.createElement('video');
106 | 
107 | var width = 32;
108 | var height = 24;
109 | 
110 | function getVideo() {
111 | 
112 | 	navigator.getUserMedia = navigator.getUserMedia ||
113 | 	navigator.webkitGetUserMedia ||
114 | 	navigator.mozGetUserMedia;
115 | 
116 | 	if (navigator.getUserMedia) {
117 | 		navigator.getUserMedia({ audio: false, video: { width: width, height: height } },
118 |            function(stream) {
119 |            	video.srcObject = stream;
120 |            	video.onloadedmetadata = function(e) {
121 | 	       		video.play();
122 | 	       		document.body.appendChild(video);
123 |            	};
124 |            },
125 |            function(err) {
126 |            	console.log("The following error occurred: " + err.name);
127 |            }
128 |          );
129 | 	} else {
130 | 		console.log("getUserMedia not supported");
131 | 	}
132 | 
133 | 
134 | }
135 | 
136 | function initScene() {
137 | 
138 | 	getVideo();
139 | 
140 | 	var videoTexture = new THREE.VideoTexture(video);
141 | 
142 | 	var instances = width * height;
143 | 
144 | 	var bufferGeometry = new THREE.BoxBufferGeometry( 1,1,.1);
145 | 
146 | 	var geometry = new THREE.InstancedBufferGeometry();
147 | 	geometry.index = bufferGeometry.index;
148 | 	geometry.attributes.position = bufferGeometry.attributes.position;
149 | 	geometry.attributes.normal = bufferGeometry.attributes.normal;
150 | 	geometry.attributes.uv = bufferGeometry.attributes.uv;
151 | 
152 | 	var offsets = [];
153 | 	var orientations = [];
154 | 
155 | 	var vector = new THREE.Vector4();
156 | 	var x, y, z, w;
157 | 
158 | 	for( var y = 0; y < height; y++ ) {
159 | 		for( var x = 0; x < width; x++ ) {
160 | 			offsets.push( x - .5 * width, y - .5 * height, 0 );
161 | 		}
162 | 	}
163 | 
164 | 	var offsetAttribute = new THREE.InstancedBufferAttribute( new Float32Array( offsets ), 3 );
165 | 
166 | 	geometry.addAttribute( 'offset', offsetAttribute );
167 | 
168 | 	var material = new THREE.RawShaderMaterial( {
169 | 
170 | 		uniforms: {
171 | 			map: { value: videoTexture },
172 | 			dimensions: { value: new THREE.Vector2( width, height ) }
173 | 		},
174 | 		vertexShader: document.getElementById( 'display-vs' ).textContent,
175 | 		fragmentShader: document.getElementById( 'display-fs' ).textContent
176 | 
177 | 	} );
178 | 
179 | 	mesh = new THREE.Mesh( geometry, material );
180 | 	scene.add( mesh );
181 | }
182 | 
183 | function init() {
184 | 
185 | 	container = document.getElementById( 'container' );
186 | 
187 | 	scene = new THREE.Scene();
188 | 
189 | 	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, .1, 10000 );
190 | 	camera.target = new THREE.Vector3( 0, 0, 0 );
191 | 	camera.position.set( 0, 0, 20 );
192 | 	camera.lookAt( camera.target );
193 | 	scene.add( camera );
194 | 
195 | 	renderer = new THREE.WebGLRenderer( { antialias: true, preserveDrawingBuffer: true } );
196 | 	renderer.setPixelRatio( window.devicePixelRatio );
197 | 	renderer.setClearColor( 0x261b1f, 1 );
198 | 	container.appendChild( renderer.domElement );
199 | 
200 | 	addCommonUI(renderer.domElement);
201 | 
202 | 	renderer.shadowMap.enabled = true;
203 | 	renderer.shadowMap.type = THREE.PCFShadowMap;
204 | 
205 | 	controls = new THREE.OrbitControls( camera, renderer.domElement );
206 | 
207 | 	initScene();
208 | 	onWindowResized();
209 | 
210 | 	window.addEventListener( 'resize', onWindowResized );
211 | 
212 | 	animate();
213 | 
214 | }
215 | 
216 | function onWindowResized( event ) {
217 | 
218 | 	var w = container.clientWidth;
219 | 	var h = container.clientHeight;
220 | 
221 | 	renderer.setSize( w, h );
222 | 	camera.aspect = w / h;
223 | 	camera.updateProjectionMatrix();
224 | 
225 | }
226 | 
227 | function animate() {
228 | 
229 | 	requestAnimationFrame( animate );
230 | 
231 | 	controls.update();
232 | 
233 | 	renderer.render( scene, camera );
234 | 
235 | }
236 | 
237 | window.addEventListener( 'load', init );
238 | 
239 | </script>
240 | 
241 | 	</body>
242 | </html>
243 | 


--------------------------------------------------------------------------------
/digital-analog-color-display/index-shadow.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>TITLE - Codevember 2017</title>
  5 | 		<meta charset="utf-8">
  6 | 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | 
  8 | 		<link rel="stylesheet" type="text/css" href="../css/styles.css" media="screen" />
  9 | 		<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">
 10 | 
 11 | 	</head>
 12 | 	<body>
 13 | 
 14 | 		<div id="container"></div>
 15 | 		<div id="info" >
 16 | 			<p><a href="../n" >Previous</a> | <a href="../n" >Next</a></p>
 17 | 			<h1>#. TITLE</h1>
 18 | 			<p>Lorem ipsum</p>
 19 | 			<p id="moreDetails"><b>More details...</b></p>
 20 | 		</div>
 21 | 		<div id="details" class="hidden">
 22 | 			<div class="content" >
 23 | 				<h1>Details</h1>
 24 | 				<p>Lorem ipsum <a href="#" >dolor sit amet</a>.</p>
 25 | 				<a href="#" id="close-details">Close</a>
 26 | 			</div>
 27 | 		</div>
 28 | 
 29 | 		<script src="../js/Common.js"></script>
 30 | 		<script src="../js/three.min.js"></script>
 31 | 		<script src="../js/OrbitControls.js"></script>
 32 | 		<script src="../js/THREE.FBOHelper.js"></script>
 33 | 		<script src="../js/isMobile.min.js"></script>
 34 | 
 35 | <script id="display-vs" type="x-shader/x-vertex">
 36 | precision highp float;
 37 | 
 38 | uniform mat4 modelMatrix;
 39 | uniform mat4 modelViewMatrix;
 40 | uniform mat4 projectionMatrix;
 41 | uniform mat3 normalMatrix;
 42 | 
 43 | uniform sampler2D map;
 44 | uniform vec2 dimensions;
 45 | 
 46 | uniform mat4 shadowMVP;
 47 | uniform mat4 shadowV;
 48 | uniform mat4 shadowP;
 49 | 
 50 | const mat4 biasMatrix = mat4(
 51 | 	0.5, 0.0, 0.0, 0.0,
 52 | 	0.0, 0.5, 0.0, 0.0,
 53 | 	0.0, 0.0, 0.5, 0.0,
 54 | 	0.5, 0.5, 0.5, 1.0
 55 | );
 56 | 
 57 | attribute vec3 position;
 58 | attribute vec3 offset;
 59 | attribute vec2 uv;
 60 | attribute vec3 normal;
 61 | 
 62 | varying float vDiffuse;
 63 | varying vec3 vColor;
 64 | varying vec4 vShadowCoord;
 65 | 
 66 | vec3 rotateX(vec3 p, float radian) {
 67 |   mat3 m = mat3(
 68 |     1.0, 0.0, 0.0,
 69 |     0.0, cos(radian), -sin(radian),
 70 |     0.0, sin(radian), cos(radian)
 71 |   );
 72 |   return m * p;
 73 | }
 74 | 
 75 | #define PI 3.1415926535897932384626433832795
 76 | 
 77 | float luma(vec3 color) {
 78 |   return dot(color, vec3(0.299, 0.587, 0.114));
 79 | }
 80 | 
 81 | float luma(vec4 color) {
 82 |   return dot(color.rgb, vec3(0.299, 0.587, 0.114));
 83 | }
 84 | 
 85 | void main() {
 86 | 
 87 | 	vec2 uv = offset.xy / dimensions + .5;
 88 | 	vec4 c = texture2D( map, uv );
 89 | 	float cc = 0.;
 90 | 	vec3 color = vec3(0.);
 91 | 	if( offset.z == 0. ) { cc = c.r; color = vec3(1.,0.,0.); }
 92 | 	else if( offset.z == 1. ) { cc = c.g;color = vec3(0.,1.,0.); }
 93 | 	else { cc = c.b;color = vec3(0.,0.,1.); }
 94 | 	float a = mix( -1.*PI/4., 0.*PI/4., cc);
 95 | 	vec3 vPosition = rotateX( position, a );
 96 | 	vec3 n = normalize( rotateX( normal, a ));
 97 | 	vDiffuse = dot( n, vec3(0.,-1.,0.) );
 98 | 	vColor = color;
 99 | 
100 | 	vec3 p = vec3(offset.xy,0.) + vPosition;
101 | 	vShadowCoord = biasMatrix * shadowP * modelMatrix * shadowV * vec4(p,1.);
102 | 
103 | 	gl_Position = projectionMatrix * modelViewMatrix * vec4( p, 1.0 );
104 | 
105 | }
106 | </script>
107 | 
108 | <script id="display-fs" type="x-shader/x-fragment">
109 | precision highp float;
110 | 
111 | uniform float shadow;
112 | uniform sampler2D depthTexture;
113 | 
114 | varying float vDiffuse;
115 | varying vec3 vColor;
116 | varying vec4 vShadowCoord;
117 | 
118 | float random(vec3 seed, int i){
119 | 	vec4 seed4 = vec4(seed,i);
120 | 	float dot_product = dot(seed4, vec4(12.9898,78.233,45.164,94.673));
121 | 	return fract(sin(dot_product) * 43758.5453);
122 | }
123 | 
124 | float sampleVisibility( vec3 coord, float bias ) {
125 | 	float depth = texture2D( depthTexture, coord.xy ).r;
126 | 	float visibility  = ( coord.z - depth > bias ) ? 0. : 1.;
127 | 	return visibility;
128 | }
129 | 
130 | void main() {
131 | 
132 | 	if( shadow == 1. ) {
133 | 		gl_FragColor = vec4( vec3( gl_FragCoord.z ), 1. );
134 | 		return;
135 | 	}
136 | 
137 | 	const int NUM_TAPS = 12;
138 | 
139 | 	vec2 poissonDisk[12];
140 | 	poissonDisk[0 ] = vec2( -0.94201624, -0.39906216 );
141 | 	poissonDisk[1 ] = vec2( 0.94558609, -0.76890725 );
142 | 	poissonDisk[2 ] = vec2( -0.094184101, -0.92938870 );
143 | 	poissonDisk[3 ] = vec2( 0.34495938, 0.29387760 );
144 | 	poissonDisk[4 ] = vec2( -0.91588581, 0.45771432 );
145 | 	poissonDisk[5 ] = vec2( -0.81544232, -0.87912464 );
146 | 	poissonDisk[6 ] = vec2( -0.38277543, 0.27676845 );
147 | 	poissonDisk[7 ] = vec2( 0.97484398, 0.75648379 );
148 | 	poissonDisk[8 ] = vec2( 0.44323325, -0.97511554 );
149 | 	poissonDisk[9 ] = vec2( 0.53742981, -0.47373420 );
150 | 	poissonDisk[10] = vec2( -0.26496911, -0.41893023 );
151 | 	poissonDisk[11] = vec2( 0.79197514, 0.19090188 );
152 | 
153 | 	float occlusion = 0.;
154 | 	vec3 shadowCoord = vShadowCoord.xyz / vShadowCoord.w;
155 | 	float bias = .1;
156 | 
157 | 	for (int i=0; i < NUM_TAPS; i++) {
158 | 		vec2 r = .0005 * vec2(random(gl_FragCoord.xyz,1), random(gl_FragCoord.zxy,1));
159 | 		occlusion += sampleVisibility( shadowCoord + vec3(poissonDisk[i] / 100. + 1.*r, 0. ), bias );
160 | 		//occlusion += .5 * random(gl_FragCoord.xyz,1);
161 | 	}
162 | 	occlusion /= float( NUM_TAPS );
163 | 
164 | 	gl_FragColor = vec4(vColor*vDiffuse *vec3( occlusion),1.);
165 | 
166 | }
167 | </script>
168 | 
169 | <script>
170 | 
171 | 'use strict';
172 | 
173 | var container, renderer, camera, controls, scene;
174 | var mesh;
175 | 
176 | var helper;
177 | 
178 | var container = document.getElementById( 'container' );
179 | var video = document.createElement('video');
180 | 
181 | var width = 320;
182 | var height = 240;
183 | var componentWidth = .1;
184 | var componentHeight = 1;
185 | height = height / 3;
186 | 
187 | var shadowCamera, shadowBuffer;
188 | var size = 1024;
189 | 
190 | function getVideo() {
191 | 
192 | 	navigator.getUserMedia = navigator.getUserMedia ||
193 | 	navigator.webkitGetUserMedia ||
194 | 	navigator.mozGetUserMedia;
195 | 
196 | 	if (navigator.getUserMedia) {
197 | 		navigator.getUserMedia({ audio: false, video: { width: width / 3, height: height } },
198 |            function(stream) {
199 |            	video.srcObject = stream;
200 |            	video.onloadedmetadata = function(e) {
201 | 	       		video.play();
202 | 	       		document.body.appendChild(video);
203 |            	};
204 |            },
205 |            function(err) {
206 |            	console.log("The following error occurred: " + err.name);
207 |            }
208 |          );
209 | 	} else {
210 | 		console.log("getUserMedia not supported");
211 | 	}
212 | 
213 | 
214 | }
215 | 
216 | var floatType = isMobile.any?THREE.HalfFloatType:THREE.FloatType;
217 | 
218 | function initScene() {
219 | 
220 | 	getVideo();
221 | 
222 | 	var s = 60;
223 | 	shadowCamera = new THREE.OrthographicCamera( -s, s, .5*s, -.5*s, 5, 90 );
224 | 	shadowCamera.position.set( 0, 40, 40 );
225 | 	shadowCamera.lookAt( scene.position );
226 | 
227 | 	shadowBuffer = new THREE.WebGLRenderTarget( size, .5 * size, {
228 | 		wrapS: THREE.ClampToEdgeWrapping,
229 | 		wrapT: THREE.ClampToEdgeWrapping,
230 | 		format: THREE.RGBAFormat,
231 | 		type: floatType,
232 | 		stencilBuffer: false,
233 | 		depthBuffer: true
234 | 	});
235 | 
236 | 	helper.attach( shadowBuffer, 'shadow' );
237 | 
238 | 	var videoTexture = new THREE.VideoTexture(video);
239 | 
240 | 	var instances = width * height;
241 | 
242 | 	var bufferGeometry = new THREE.BoxBufferGeometry( componentWidth,componentHeight,.1);
243 | 
244 | 	var geometry = new THREE.InstancedBufferGeometry();
245 | 	geometry.index = bufferGeometry.index;
246 | 	geometry.attributes.position = bufferGeometry.attributes.position;
247 | 	geometry.attributes.normal = bufferGeometry.attributes.normal;
248 | 	geometry.attributes.uv = bufferGeometry.attributes.uv;
249 | 
250 | 	var offsets = [];
251 | 	var orientations = [];
252 | 
253 | 	var vector = new THREE.Vector4();
254 | 	var x, y, z, w;
255 | 
256 | 	for( var y = 0; y < height; y++ ) {
257 | 		for( var x = 0; x < width * 3; x++ ) {
258 | 			offsets.push( componentWidth * ( x - .5 * width * 3 ), componentHeight * ( y - .5 * height ), x % 3 );
259 | 		}
260 | 	}
261 | 
262 | 	var offsetAttribute = new THREE.InstancedBufferAttribute( new Float32Array( offsets ), 3 );
263 | 
264 | 	geometry.addAttribute( 'offset', offsetAttribute );
265 | 
266 | 	var material = new THREE.RawShaderMaterial( {
267 | 
268 | 		uniforms: {
269 | 			map: { value: videoTexture },
270 | 			depthTexture: { value: shadowBuffer.texture },
271 | 			shadow: { value : 0 },
272 | 			lightPosition: { value: shadowCamera.position },
273 |     		shadowMVP: { value: new THREE.Matrix4() },
274 | 			shadowV: { value: new THREE.Matrix4() },
275 | 			shadowP: { value: new THREE.Matrix4() },
276 | 			dimensions: { value: new THREE.Vector2( width / 3, height * componentHeight ) }
277 | 		},
278 | 		vertexShader: document.getElementById( 'display-vs' ).textContent,
279 | 		fragmentShader: document.getElementById( 'display-fs' ).textContent
280 | 
281 | 	} );
282 | 
283 | 	mesh = new THREE.Mesh( geometry, material );
284 | 	scene.add( mesh );
285 | }
286 | 
287 | function init() {
288 | 
289 | 	container = document.getElementById( 'container' );
290 | 
291 | 	scene = new THREE.Scene();
292 | 
293 | 	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, .1, 10000 );
294 | 	camera.target = new THREE.Vector3( 0, 0, 0 );
295 | 	camera.position.set( 0, 0, 90 );
296 | 	camera.lookAt( camera.target );
297 | 	scene.add( camera );
298 | 
299 | 	renderer = new THREE.WebGLRenderer( { antialias: true, preserveDrawingBuffer: true } );
300 | 	renderer.setPixelRatio( window.devicePixelRatio );
301 | 	renderer.setClearColor( 0x261b1f, 1 );
302 | 	container.appendChild( renderer.domElement );
303 | 
304 | 	helper = new FBOHelper(renderer);
305 | 
306 | 	addCommonUI(renderer.domElement);
307 | 
308 | 	controls = new THREE.OrbitControls( camera, renderer.domElement );
309 | 
310 | 	initScene();
311 | 	onWindowResized();
312 | 
313 | 	window.addEventListener( 'resize', onWindowResized );
314 | 
315 | 	animate();
316 | 
317 | }
318 | 
319 | function onWindowResized( event ) {
320 | 
321 | 	var w = container.clientWidth;
322 | 	var h = container.clientHeight;
323 | 
324 | 	renderer.setSize( w, h );
325 | 	camera.aspect = w / h;
326 | 	camera.updateProjectionMatrix();
327 | 
328 | 	helper.setSize( w, h);
329 | }
330 | 
331 | var tmpVector = new THREE.Vector3();
332 | var tmpMatrix = new THREE.Matrix4();
333 | 
334 | function animate() {
335 | 
336 | 	requestAnimationFrame( animate );
337 | 
338 | 	controls.update();
339 | 
340 | 	mesh.material.uniforms.depthTexture.value = null;
341 | 	mesh.material.uniforms.shadow.value = true;
342 | 	renderer.render( scene, shadowCamera, shadowBuffer );
343 | 	mesh.material.uniforms.depthTexture.value = shadowBuffer.texture;
344 | 	mesh.material.uniforms.shadow.value = false;
345 | 
346 | 	tmpVector.copy( scene.position );
347 | 	tmpVector.sub( shadowCamera.position );
348 | 	tmpVector.normalize();
349 | 	tmpMatrix.copy( shadowCamera.projectionMatrix );
350 | 	tmpMatrix.multiply( mesh.matrixWorld );
351 | 	tmpMatrix.multiply( shadowCamera.matrixWorldInverse);
352 | 	mesh.material.uniforms.shadowMVP.value.copy( tmpMatrix );
353 | 	mesh.material.uniforms.shadowP.value.copy( shadowCamera.projectionMatrix );
354 | 	mesh.material.uniforms.shadowV.value.copy( shadowCamera.matrixWorldInverse );
355 | 
356 | 	renderer.render( scene, camera );
357 | 	helper.update();
358 | 
359 | }
360 | 
361 | window.addEventListener( 'load', init );
362 | 
363 | </script>
364 | 
365 | 	</body>
366 | </html>
367 | 


--------------------------------------------------------------------------------
/digital-analog-color-display/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>Digital Analog Color Display - Codevember 2017</title>
  5 | 		<meta charset="utf-8">
  6 | 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | 
  8 | 		<link rel="stylesheet" type="text/css" href="../css/styles.css" media="screen" />
  9 | 		<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">
 10 | 
 11 | 	</head>
 12 | 	<body>
 13 | 
 14 | 		<div id="container"></div>
 15 | 		<div id="info" >
 16 | 			<p><a href="../bonkey-balls" >Previous</a> | <a href="../the-wrung-music" >Next</a></p>
 17 | 			<h1>14. Digital Analog Color Display</h1>
 18 | 			<p>A display that renders colors by orienting Red, Green and Blue blocks towards a light source.</p>
 19 | 			<p><b>Click or tap and drag</b> to move the camera, <b>scroll or zoom with two fingers</b> to zoom in and out.</p>
 20 | 			<p><b>Zoom in</b> to see the individual pixels and sublocks. It´s like getting really close to an old TV!</p>
 21 | 			<p id="moreDetails"><b>More details...</b></p>
 22 | 		</div>
 23 | 		<div id="details" class="hidden">
 24 | 			<div class="content" >
 25 | 				<h1>Details</h1>
 26 | 				<p>A display that renders colors by orienting Red, Green and Blue blocks towards a light source.</p>
 27 | 				<p>A color version of <a href="https://vimeo.com/11418959" >Wooden mirror by Daniel Rozin</a>.</p>
 28 | 				<p>Built with <a href="threejs.org">three.js</a>.</p>
 29 | 				<p>Code available on <a href="https://github.com/spite/codevember-2017/tree/master/digital-analog-color-display" >GitHub</a>.</p>
 30 | 				<a href="#" id="close-details">Close</a>
 31 | 			</div>
 32 | 		</div>
 33 | 
 34 | 		<script src="../js/Common.js"></script>
 35 | 		<script src="../js/three.min.js"></script>
 36 | 		<script src="../js/OrbitControls.js"></script>
 37 | 		<script src="../js/isMobile.min.js"></script>
 38 | 
 39 | <script id="display-vs" type="x-shader/x-vertex">
 40 | precision highp float;
 41 | 
 42 | uniform mat4 modelViewMatrix;
 43 | uniform mat4 projectionMatrix;
 44 | uniform mat3 normalMatrix;
 45 | 
 46 | uniform sampler2D map;
 47 | uniform vec2 dimensions;
 48 | 
 49 | attribute vec3 position;
 50 | attribute vec3 offset;
 51 | attribute vec2 uv;
 52 | attribute vec3 normal;
 53 | 
 54 | varying float vDiffuse;
 55 | varying vec3 vColor;
 56 | 
 57 | vec3 rotateX(vec3 p, float radian) {
 58 |   mat3 m = mat3(
 59 |     1.0, 0.0, 0.0,
 60 |     0.0, cos(radian), -sin(radian),
 61 |     0.0, sin(radian), cos(radian)
 62 |   );
 63 |   return m * p;
 64 | }
 65 | 
 66 | #define PI 3.1415926535897932384626433832795
 67 | 
 68 | float luma(vec3 color) {
 69 |   return dot(color, vec3(0.299, 0.587, 0.114));
 70 | }
 71 | 
 72 | float luma(vec4 color) {
 73 |   return dot(color.rgb, vec3(0.299, 0.587, 0.114));
 74 | }
 75 | 
 76 | void main() {
 77 | 
 78 | 	vec2 uv = offset.xy / dimensions + .5;
 79 | 	vec4 c = texture2D( map, uv );
 80 | 	float cc = 0.;
 81 | 	vec3 color = vec3(0.);
 82 | 	if( offset.z == 0. ) { cc = c.r; color = vec3(1.,0.,0.); }
 83 | 	else if( offset.z == 1. ) { cc = c.g;color = vec3(0.,1.,0.); }
 84 | 	else { cc = c.b;color = vec3(0.,0.,1.); }
 85 | 	float a = mix( -1.*PI/4., 0.*PI/4., cc);
 86 | 	vec3 vPosition = rotateX( position, a );
 87 | 	vec3 n = normalize( rotateX( normal, a ));
 88 | 	vDiffuse = dot( n, vec3(0.,1.,1.) );
 89 | 	vColor = color;
 90 | 
 91 | 	vec4 mvP = modelViewMatrix * vec4( vec3(offset.xy,0.) + vPosition, 1.0 );
 92 | 	gl_Position = projectionMatrix * mvP;
 93 | 
 94 | }
 95 | </script>
 96 | 
 97 | <script id="display-fs" type="x-shader/x-fragment">
 98 | precision highp float;
 99 | 
100 | varying float vDiffuse;
101 | varying vec3 vColor;
102 | 
103 | void main() {
104 | 	gl_FragColor = vec4(vColor * vDiffuse,1.);
105 | }
106 | </script>
107 | 
108 | <script>
109 | 
110 | 'use strict';
111 | 
112 | var container, renderer, camera, controls, scene;
113 | var mesh;
114 | 
115 | var helper;
116 | 
117 | var container = document.getElementById( 'container' );
118 | var video = document.createElement('video');
119 | 
120 | var width = 320;
121 | var height = 240;
122 | if( isMobile.any ) {
123 | 	width = 160;
124 | 	height = 120;
125 | }
126 | var componentWidth = .1;
127 | var componentHeight = 1;
128 | height = height / 3;
129 | 
130 | function getVideo() {
131 | 
132 | 	navigator.getUserMedia = navigator.getUserMedia ||
133 | 	navigator.webkitGetUserMedia ||
134 | 	navigator.mozGetUserMedia;
135 | 
136 | 	if (navigator.getUserMedia) {
137 | 		navigator.getUserMedia({ audio: false, video: { width: width / 3, height: height } },
138 |            function(stream) {
139 |            	video.srcObject = stream;
140 |            	video.onloadedmetadata = function(e) {
141 | 	       		video.play();
142 | 	       		//document.body.appendChild(video);
143 |            	};
144 |            },
145 |            function(err) {
146 |            	console.log("The following error occurred: " + err.name);
147 |            }
148 |          );
149 | 	} else {
150 | 		console.log("getUserMedia not supported");
151 | 	}
152 | 
153 | 
154 | }
155 | 
156 | function initScene() {
157 | 
158 | 	getVideo();
159 | 
160 | 	var videoTexture = new THREE.VideoTexture(video);
161 | 	videoTexture.minFilter = video.magFilter = THREE.NearestFilter;
162 | 
163 | 	var instances = width * height;
164 | 
165 | 	//var bufferGeometry = new THREE.CylinderBufferGeometry( componentWidth,componentWidth,componentHeight);
166 | 	var bufferGeometry = new THREE.BoxBufferGeometry( componentWidth,componentHeight,.1);
167 | 	if( isMobile.any ) bufferGeometry = new THREE.PlaneBufferGeometry( componentWidth,componentHeight);
168 | 
169 | 	var geometry = new THREE.InstancedBufferGeometry();
170 | 	geometry.index = bufferGeometry.index;
171 | 	geometry.attributes.position = bufferGeometry.attributes.position;
172 | 	geometry.attributes.normal = bufferGeometry.attributes.normal;
173 | 	geometry.attributes.uv = bufferGeometry.attributes.uv;
174 | 
175 | 	var offsets = [];
176 | 	var orientations = [];
177 | 
178 | 	var vector = new THREE.Vector4();
179 | 	var x, y, z, w;
180 | 
181 | 	for( var y = 0; y < height; y++ ) {
182 | 		for( var x = 0; x < width * 3; x++ ) {
183 | 			offsets.push( componentWidth * ( x - .5 * width * 3 ), componentHeight * ( y - .5 * height ), x % 3 );
184 | 		}
185 | 	}
186 | 
187 | 	var offsetAttribute = new THREE.InstancedBufferAttribute( new Float32Array( offsets ), 3 );
188 | 
189 | 	geometry.addAttribute( 'offset', offsetAttribute );
190 | 
191 | 	var material = new THREE.RawShaderMaterial( {
192 | 
193 | 		uniforms: {
194 | 			map: { value: videoTexture },
195 | 			dimensions: { value: new THREE.Vector2( width / 3, height * componentHeight ) }
196 | 		},
197 | 		vertexShader: document.getElementById( 'display-vs' ).textContent,
198 | 		fragmentShader: document.getElementById( 'display-fs' ).textContent
199 | 
200 | 	} );
201 | 
202 | 	mesh = new THREE.Mesh( geometry, material );
203 | 	scene.add( mesh );
204 | }
205 | 
206 | function init() {
207 | 
208 | 	container = document.getElementById( 'container' );
209 | 
210 | 	scene = new THREE.Scene();
211 | 
212 | 	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, .1, 10000 );
213 | 	camera.target = new THREE.Vector3( 0, 0, 0 );
214 | 	camera.position.set( 0, 0, 90 );
215 | 	camera.lookAt( camera.target );
216 | 	scene.add( camera );
217 | 
218 | 	renderer = new THREE.WebGLRenderer( { antialias: true } );
219 | 	renderer.setPixelRatio( window.devicePixelRatio );
220 | 	renderer.setClearColor( 0, 1 );
221 | 	container.appendChild( renderer.domElement );
222 | 
223 | 	addCommonUI(renderer.domElement);
224 | 
225 | 	controls = new THREE.OrbitControls( camera, renderer.domElement );
226 | 
227 | 	initScene();
228 | 	onWindowResized();
229 | 
230 | 	window.addEventListener( 'resize', onWindowResized );
231 | 
232 | 	animate();
233 | 
234 | }
235 | 
236 | function onWindowResized( event ) {
237 | 
238 | 	var w = container.clientWidth;
239 | 	var h = container.clientHeight;
240 | 
241 | 	renderer.setSize( w, h );
242 | 	camera.aspect = w / h;
243 | 	camera.updateProjectionMatrix();
244 | 
245 | }
246 | 
247 | function animate() {
248 | 
249 | 	requestAnimationFrame( animate );
250 | 
251 | 	controls.update();
252 | 
253 | 	renderer.render( scene, camera );
254 | 
255 | }
256 | 
257 | window.addEventListener( 'load', init );
258 | 
259 | </script>
260 | 
261 | 	</body>
262 | </html>
263 | 


--------------------------------------------------------------------------------
/gi/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>TITLE</title>
  5 | 		<meta charset="utf-8">
  6 | 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | 
  8 | 		<link rel="stylesheet" type="text/css" href="../css/styles.css" media="screen" />
  9 | 		<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">
 10 | 
 11 | 	</head>
 12 | 	<body>
 13 | 
 14 | 		<div id="container"></div>
 15 | 		<div id="info" >
 16 | 			<p><a href="../n" >Previous</a> | <a href="../n" >Next</a></p>
 17 | 			<h1>#. TITLE</h1>
 18 | 			<p>Lorem ipsum</p>
 19 | 			<p id="moreDetails"><b>More details...</b></p>
 20 | 		</div>
 21 | 		<div id="details" class="hidden">
 22 | 			<div class="content" >
 23 | 				<h1>Details</h1>
 24 | 				<p>Lorem ipsum <a href="#" >dolor sit amet</a>.</p>
 25 | 				<a href="#" id="close-details">Close</a>
 26 | 			</div>
 27 | 		</div>
 28 | 
 29 | 		<script src="../js/Common.js"></script>
 30 | 		<script src="../js/three.min.js"></script>
 31 | 		<script src="../js/OrbitControls.js"></script>
 32 | 		<script src="../js/CubemapToEquirectangular.js"></script>
 33 | 		<script src="../js/THREE.FBOHelper.js"></script>
 34 | 
 35 | <script type="x-shader/x-vertex" id="ortho-vs" >
 36 | precision highp float;
 37 | 
 38 | attribute vec3 position;
 39 | attribute vec2 uv;
 40 | 
 41 | uniform mat4 modelViewMatrix;
 42 | uniform mat4 projectionMatrix;
 43 | 
 44 | varying vec2 vUv;
 45 | 
 46 | void main() {
 47 | 
 48 | 	vUv = uv;
 49 | 	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1. );
 50 | 
 51 | }
 52 | </script>
 53 | 
 54 | <script id="light-fs" type="x-shader/x-vertex">
 55 | precision highp float;
 56 | 
 57 | uniform sampler2D inputTexture;
 58 | uniform vec3 color;
 59 | 
 60 | varying vec2 vUv;
 61 | 
 62 | void main() {
 63 | 	//gl_FragColor = vec4( color, 1.);
 64 | 	gl_FragColor = texture2D( inputTexture, vUv );
 65 | }
 66 | </script>
 67 | 
 68 | <script type="x-shader/x-vertex" id="gi-vs" >
 69 | precision highp float;
 70 | 
 71 | attribute vec3 position;
 72 | attribute vec2 uv;
 73 | attribute vec3 normal;
 74 | 
 75 | uniform mat4 modelMatrix;
 76 | uniform mat4 modelViewMatrix;
 77 | uniform mat3 normalMatrix;
 78 | uniform mat4 projectionMatrix;
 79 | 
 80 | varying vec2 vUv;
 81 | varying vec3 vPosition;
 82 | varying vec3 vNormal;
 83 | 
 84 | void main() {
 85 | 
 86 | 	vUv = uv;
 87 | 	vNormal = normal;
 88 | 	vec4 p = modelViewMatrix * vec4( position, 1. );
 89 | 	vPosition = ( modelMatrix * vec4( position, 1. ) ).xyz;
 90 | 	gl_Position = projectionMatrix * p;
 91 | 
 92 | }
 93 | </script>
 94 | 
 95 | <script id="gi-fs" type="x-shader/x-vertex">
 96 | precision highp float;
 97 | 
 98 | uniform sampler2D lightMap;
 99 | uniform vec3 color;
100 | uniform float probeSide;
101 | 
102 | varying vec2 vUv;
103 | varying vec3 vPosition;
104 | varying vec3 vNormal;
105 | 
106 | float round( float v ) {
107 | 	float t = fract( v );
108 | 	if( t > .5 ) return ceil( v );
109 | 	else return floor( v );
110 | }
111 | 
112 | void main() {
113 | 
114 | 	float PI = 3.14159265358979323846264;
115 | 	vec3 normPos = .5 + .5 * ( vPosition / 1.5 );
116 | 	float x = round( normPos.x * ( probeSide - 1. ) ) / ( probeSide - 1. );
117 | 	float y = round( normPos.y * ( probeSide - 1. ) ) / ( probeSide - 1. );
118 | 	float z = round( normPos.z * ( probeSide - 1. ) ) / ( probeSide - 1. );
119 | 	//z = 1. - z;
120 | 	//y = 1. - y;
121 | 	vec2 uv = vec2( x, ( z * probeSide + y ) / ( probeSide * probeSide ) );
122 | 	uv.y = 1. - uv.y;
123 | 
124 | 	vec3 n = normalize( vNormal );
125 | 	float yaw = .5 - atan( n.z, - n.x ) / ( 2.0 * PI );
126 | 	float pitch = .5 - asin( n.y ) / PI;
127 | 	vec2 luv = uv + vec2( yaw, 1. - pitch ) / vec2( 4., 16. );
128 | 	vec4 color = texture2D( lightMap, luv );
129 | 	gl_FragColor = color;
130 | 
131 | 	//gl_FragColor = texture2D( lightMap, uv ) ;
132 | 	//gl_FragColor = vec4( uv, 0., 1. );
133 | 	//gl_FragColor = vec4( x,y,z,1.);
134 | }
135 | </script>
136 | 
137 | <script id="probe-vs" type="x-shader/x-vertex">
138 | attribute vec3 position;
139 | attribute vec2 uv;
140 | attribute vec3 normal;
141 | 
142 | uniform mat4 modelViewMatrix;
143 | uniform mat4 projectionMatrix;
144 | 
145 | varying vec3 vPosition;
146 | 
147 | void main() {
148 | 
149 | 	vPosition = position;
150 | 	vec4 p = modelViewMatrix * vec4( position, 1. );
151 | 	gl_Position = projectionMatrix * p;
152 | 
153 | }
154 | </script>
155 | 
156 | <script id="probe-fs" type="x-shader/x-vertex">
157 | precision highp float;
158 | 
159 | uniform samplerCube map;
160 | 
161 | varying vec3 vPosition;
162 | 
163 | void main() {
164 | 	gl_FragColor = textureCube( map, normalize( vPosition ) );
165 | }
166 | </script>
167 | 
168 | <script>
169 | 
170 | 'use strict';
171 | 
172 | var container, renderer, camera, controls, scene;
173 | var mesh;
174 | 
175 | var helper;
176 | 
177 | var container = document.getElementById( 'container' );
178 | 
179 | var convert;
180 | 
181 | var probeSide = 4;
182 | var probeMapWidth = 64
183 | var probeMapHeight = 32;
184 | 
185 | function createRenderTarget() {
186 | 
187 | 	return new THREE.WebGLRenderTarget( 1, 1, {
188 | 		wrapS: THREE.ClampToEdgeWrapping,
189 | 		wrapT: THREE.ClampToEdgeWrapping,
190 | 		format: THREE.RGBFormat,
191 | 		stencilBuffer: false,
192 | 		depthBuffer: false
193 | 	});
194 | 
195 | }
196 | 
197 | var lightMap = createRenderTarget();
198 | lightMap.setSize( probeSide * probeMapWidth, probeSide * probeSide * probeMapHeight );
199 | 
200 | var orthoQuad, orthoCamera, orthoScene;
201 | 
202 | /*orthoScene = new THREE.Scene();
203 | orthoCamera = new THREE.OrthographicCamera( 1 / - 2, 1 / 2, 1 / 2, 1 / - 2, .00001, 1000 );
204 | orthoQuad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1, 1 ), finalShader );
205 | orthoScene.add( orthoQuad );*/
206 | 
207 | var mapQuad, mapCamera, mapScene;
208 | 
209 | var lightShader = new THREE.RawShaderMaterial( {
210 | 	uniforms: {
211 | 		inputTexture: { type: 't', value: null },
212 | 		color: { type: 'c', value: new THREE.Color() }
213 | 		//resolution: { type: 'v2', value: resolution },
214 | 	},
215 | 	vertexShader: document.getElementById('ortho-vs').textContent,
216 | 	fragmentShader: document.getElementById('light-fs').textContent,
217 | } );
218 | mapScene = new THREE.Scene();
219 | mapCamera = new THREE.OrthographicCamera( 1 / - 2, 1 / 2, 1 / 2, 1 / - 2, .00001, 1000 );
220 | mapQuad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1, 1 ), lightShader );
221 | mapScene.add( mapQuad );
222 | 
223 | function LightProbe( p, index ) {
224 | 
225 | 	this.index = index;
226 | 
227 | 	this.probe = new THREE.CubeCamera( .00001, 10, 4 );
228 | 	this.probe.position.copy( p );
229 | 
230 | 	this.dummy = new THREE.Mesh(
231 | 		new THREE.IcosahedronGeometry( .1, 2 ),
232 | 		new THREE.RawShaderMaterial({
233 | 			uniforms:{
234 | 				map: { type: 't', value: this.probe.renderTarget.texture }
235 | 			},
236 | 			vertexShader: document.getElementById( 'probe-vs' ).textContent,
237 | 			fragmentShader: document.getElementById( 'probe-fs' ).textContent,
238 | 		})
239 | 	);
240 | 	this.dummy.position.copy( p );
241 | 	scene.add( this.dummy );
242 | 
243 | }
244 | 
245 | LightProbe.prototype.update = function() {
246 | 
247 | 	this.probe.update( renderer, scene );
248 | 	convert.convert( this.probe, false );
249 | 
250 | 	var w = lightMap.width;
251 | 	var h = lightMap.height;
252 | 
253 | 	var x = -.5 * w + .5 * probeMapWidth + this.index.x * probeMapWidth;//( this.index.x * probeMapWidth + this.index.y * probeMapWidth ) - .5 * w;
254 | 	var y = -.5 * h + .5 * probeMapHeight + this.index.y * probeMapHeight + ( this.index.z * probeSide ) * probeMapHeight;
255 | 	mapQuad.scale.set( probeMapWidth, probeMapHeight, 1 );
256 | 	mapQuad.position.set( x, y, 0 );
257 | 
258 | 	mapCamera.left   = - w / 2;
259 | 	mapCamera.right  =   w / 2;
260 | 	mapCamera.top    =   h / 2;
261 | 	mapCamera.bottom = - h / 2;
262 | 	mapCamera.updateProjectionMatrix();
263 | 
264 | 	lightShader.uniforms.color.value.setRGB( Math.random(), Math.random(), Math.random() );
265 | 	lightShader.uniforms.inputTexture.value = convert.output.texture;
266 | 	renderer.render( mapScene, mapCamera, lightMap );
267 | 
268 | }
269 | 
270 | LightProbe.prototype.display = function( display ) {
271 | 
272 | 	this.dummy.visible = display;
273 | 
274 | }
275 | 
276 | var probes = [];
277 | var cube, room;
278 | 
279 | function initScene() {
280 | 
281 | 	helper.attach( lightMap, 'lightmap' );
282 | 
283 | 	room = new THREE.Mesh(
284 | 	    //new THREE.BoxBufferGeometry( 3, 3, 3 ),
285 | 	    new THREE.PlaneBufferGeometry( 3, 3 ),
286 | 	    new THREE.MeshBasicMaterial({
287 | 	    	color: 0xff00ff,
288 | 	    	emissive: 0xffffff,
289 | 	    	side: THREE.DoubleSide
290 | 	    })
291 | 	);
292 | 	room.rotation.x = Math.PI / 2;
293 | 	room.position.y = -1.5;
294 | 	scene.add( room );
295 | 	room.receiveShadow = true;
296 | 
297 | 	cube = new THREE.Mesh(
298 | 	    new THREE.IcosahedronGeometry( 1, 3),
299 | 	    new THREE.MeshBasicMaterial({
300 | 	    	color: 0xffff00,
301 | 	    	side: THREE.FrontSide
302 | 	    })
303 | 	);
304 | 	cube.position.set( 0,0,0);
305 | 	//cube.rotation.set( Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI );
306 | 	scene.add( cube );
307 | 	cube.castShadow = true;
308 | 	cube.receiveShadow = true;
309 | 
310 | 	var cube2 = new THREE.Mesh(
311 | 	    new THREE.BoxBufferGeometry( 1.4,1.4,1.4),
312 | 	    new THREE.MeshPhongMaterial({
313 | 	    	color: 0xffffff,
314 | 	    	side: THREE.FrontSide
315 | 	    })
316 | 	);
317 | 	cube2.position.set( -1, 1, -1 );
318 | 	//cube2.rotation.set( Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI );
319 | 	//scene.add( cube2 );
320 | 	cube2.castShadow = true;
321 | 	cube2.receiveShadow = true;
322 | 
323 | 	var light = new THREE.PointLight( 0xffffff, 2, 100 );
324 | 	light.position.set( 0, 1.4, 0 );
325 | //	scene.add( light );
326 | 	light.castShadow = true;
327 | 
328 | 	var r = 1.5;
329 | 	var step = 3 / ( probeSide - 1 );
330 | 
331 | 	var px = 0, py = 0, pz = 0;
332 | 	for( var z = -r; z <= r; z += step ){
333 | 		for( var y = -r; y <= r; y += step ){
334 | 			for( var x = -r; x <= r; x += step ){
335 | 				var probe = new LightProbe( new THREE.Vector3( x, y, z ), new THREE.Vector3( px, py, pz ))
336 | 				probes.push( probe );
337 | 				px += 1;
338 | 			}
339 | 			py += 1;
340 | 			px = 0;
341 | 		}
342 | 		pz += 1;
343 | 		px = 0;
344 | 		py = 0;
345 | 	}
346 | 
347 | 	updateProbes();
348 | 
349 | 	var giMaterial = new THREE.RawShaderMaterial( {
350 | 		uniforms: {
351 | 			lightMap: { type: 't', value: lightMap },
352 | 			probeSide: { type: 'f', value: probeSide }
353 | 		},
354 | 		side: THREE.DoubleSide,
355 | 		vertexShader: document.getElementById('gi-vs').textContent,
356 | 		fragmentShader: document.getElementById('gi-fs').textContent,
357 | 	} );
358 | 
359 | 	room.material = giMaterial;
360 | 
361 | 	var giMaterial = new THREE.RawShaderMaterial( {
362 | 		uniforms: {
363 | 			lightMap: { type: 't', value: lightMap },
364 | 			probeSide: { type: 'f', value: probeSide }
365 | 		},
366 | 		vertexShader: document.getElementById('gi-vs').textContent,
367 | 		fragmentShader: document.getElementById('gi-fs').textContent,
368 | 	} );
369 | 
370 | 	cube.material = giMaterial;
371 | 
372 | 	var giMaterial = new THREE.RawShaderMaterial( {
373 | 		uniforms: {
374 | 			lightMap: { type: 't', value: lightMap },
375 | 			probeSide: { type: 'f', value: probeSide }
376 | 		},
377 | 		vertexShader: document.getElementById('gi-vs').textContent,
378 | 		fragmentShader: document.getElementById('gi-fs').textContent,
379 | 	} );
380 | 
381 | 	cube2.material = giMaterial;
382 | }
383 | 
384 | function updateProbes() {
385 | 
386 | 	renderer.autoClear = false;
387 | 
388 | 	probes.forEach( p => p.display( false ))
389 | 	probes.forEach( p => p.update( true ))
390 | 	probes.forEach( p => p.display( true ))
391 | 
392 | 	renderer.autoClear = true;
393 | 
394 | }
395 | 
396 | function init() {
397 | 
398 | 	addCommonUI();
399 | 
400 | 	container = document.getElementById( 'container' );
401 | 
402 | 	scene = new THREE.Scene();
403 | 
404 | 	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, .1, 10000 );
405 | 	camera.target = new THREE.Vector3( 0, 0, 0 );
406 | 	camera.position.set( 0, 0, 2 );
407 | 	camera.lookAt( camera.target );
408 | 	scene.add( camera );
409 | 
410 | 	renderer = new THREE.WebGLRenderer( { antialias: true, preserveDrawingBuffer: true } );
411 | 	renderer.setPixelRatio( window.devicePixelRatio );
412 | 	renderer.setClearColor( 0x261b1f, 1 );
413 | 	container.appendChild( renderer.domElement );
414 | 
415 | 	renderer.shadowMap.enabled = true;
416 | 	renderer.shadowMap.type = THREE.PCFShadowMap;
417 | 
418 | 	helper = new FBOHelper( renderer );
419 | 
420 | 	convert = new CubemapToEquirectangular( renderer, false );
421 | 	convert.setSize( probeMapWidth, probeMapHeight );
422 | 
423 | 	controls = new THREE.OrbitControls( camera, renderer.domElement );
424 | 
425 | 	initScene();
426 | 	onWindowResized();
427 | 
428 | 	window.addEventListener( 'resize', onWindowResized );
429 | 
430 | 	animate();
431 | 
432 | }
433 | 
434 | function onWindowResized( event ) {
435 | 
436 | 	var w = container.clientWidth;
437 | 	var h = container.clientHeight;
438 | 
439 | 	renderer.setSize( w, h );
440 | 	camera.aspect = w / h;
441 | 	camera.updateProjectionMatrix();
442 | 
443 | 	helper.setSize( w, h );
444 | }
445 | 
446 | function animate() {
447 | 
448 | 	requestAnimationFrame( animate );
449 | 
450 | 	controls.update();
451 | 	//cube.rotation.x += .01;
452 | 	//updateProbes();
453 | 
454 | 	renderer.render( scene, camera );
455 | 	helper.update();
456 | 
457 | }
458 | 
459 | window.addEventListener( 'load', init );
460 | 
461 | </script>
462 | 
463 | 	</body>
464 | </html>
465 | 


--------------------------------------------------------------------------------
/glow-worms/mrf.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>TITLE - Codevember 2017</title>
  5 | 		<meta charset="utf-8">
  6 | 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | 
  8 | 		<link rel="stylesheet" type="text/css" href="../css/styles.css" media="screen" />
  9 | 		<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">
 10 | 
 11 | 	</head>
 12 | 	<body>
 13 | 
 14 | 		<div id="container"></div>
 15 | 		<div id="info" >
 16 | 			<p><a href="../n" >Previous</a> | <a href="../n" >Next</a></p>
 17 | 			<h1>#. TITLE</h1>
 18 | 			<p>Lorem ipsum</p>
 19 | 			<p id="moreDetails"><b>More details...</b></p>
 20 | 		</div>
 21 | 		<div id="details" class="hidden">
 22 | 			<div class="content" >
 23 | 				<h1>Details</h1>
 24 | 				<p>Lorem ipsum <a href="#" >dolor sit amet</a>.</p>
 25 | 				<a href="#" id="close-details">Close</a>
 26 | 			</div>
 27 | 		</div>
 28 | 
 29 | 		<script src="../js/Common.js"></script>
 30 | 		<script src="../js/three.min.js"></script>
 31 | 		<script src="../js/OrbitControls.js"></script>
 32 | 
 33 | <script>
 34 | 
 35 | 'use strict';
 36 | // Minimally Rotating Frames ( refresh early and often :) )
 37 | // WestLangley
 38 | 
 39 | // based on THREE.TorusKnotGeometry
 40 | THREE.TubeGeometry = function ( radius, segmentsR, segmentsT, callback ) {
 41 | 
 42 |     THREE.Geometry.call( this );
 43 | 
 44 |     var scope = this;
 45 | 
 46 |     this.radius = radius;
 47 |     this.segmentsR = segmentsR;
 48 |     this.segmentsT = segmentsT;
 49 |     this.callback = callback;
 50 | 
 51 |     this.grid = new Array( this.segmentsR );
 52 | 
 53 |     var tang = new THREE.Vector3();
 54 |     var n = new THREE.Vector3();
 55 |     var binormal = new THREE.Vector3();
 56 | 
 57 |     for ( var i = 0; i < this.segmentsR; ++ i ) {    // rings
 58 | 
 59 |         this.grid[ i ] = new Array( this.segmentsT );
 60 | 
 61 |         var u = i / this.segmentsR;
 62 | 
 63 |         var p1 = callback( u );
 64 |         var p2 = callback( u + 0.01 );
 65 | 
 66 |         tang.sub( p2, p1 );
 67 | 
 68 |         // ----------------------------------------------------------------------------
 69 |         if (i == 0) n = p1.clone().normalize(); // HACK -- needs some work
 70 |         // ----------------------------------------------------------------------------
 71 | 
 72 |         // bad things can happen if the tangent points up
 73 |         // probably should be looked at in TorusKnotGeometry, too.
 74 | 
 75 |         binormal.cross( tang, n );
 76 |         n.cross( binormal, tang );
 77 |         binormal.normalize();
 78 |         n.normalize();
 79 |         addArrow( scene, p1, n, 2, 0xffff00 );
 80 | 
 81 |         for ( var j = 0; j < this.segmentsT; ++ j ) {    // theta
 82 | 
 83 |             var v = j / this.segmentsT * 2 * Math.PI;
 84 | 
 85 |             var cx = - this.radius * Math.cos( v ); // TODO: Hack: Negating it so it faces outside.
 86 |             var cy = this.radius * Math.sin( v );
 87 | 
 88 |             this.grid[ i ][ j ] = vert( p1.x + cx * n.x + cy * binormal.x,
 89 |                                         p1.y + cx * n.y + cy * binormal.y,
 90 |                                         p1.z + cx * n.z + cy * binormal.z
 91 |                                       );
 92 | 
 93 |         }
 94 | 
 95 |     }
 96 | 
 97 |     for ( var i = 0; i < this.segmentsR - 1; ++ i ) {
 98 | 
 99 |         for ( var j = 0; j < this.segmentsT; ++ j ) {
100 | 
101 |             var ip = ( i + 1 ) % this.segmentsR;
102 |             var jp = ( j + 1 ) % this.segmentsT;
103 | 
104 |             var a = this.grid[ i ][ j ];
105 |             var b = this.grid[ ip ][ j ];
106 |             var c = this.grid[ ip ][ jp ];
107 |             var d = this.grid[ i ][ jp ];
108 | 
109 |             var uva = new THREE.Vector2( i / this.segmentsR, j / this.segmentsT );
110 |             var uvb = new THREE.Vector2( ( i + 1 ) / this.segmentsR, j / this.segmentsT );
111 |             var uvc = new THREE.Vector2( ( i + 1 ) / this.segmentsR, ( j + 1 ) / this.segmentsT );
112 |             var uvd = new THREE.Vector2( i / this.segmentsR, ( j + 1 ) / this.segmentsT );
113 | 
114 |             this.faces.push( new THREE.Face4( a, b, c, d ) );
115 |             this.faceVertexUvs[ 0 ].push( [ uva, uvb, uvc, uvd ] );
116 | 
117 |         }
118 |     }
119 | 
120 |     //this.computeCentroids();
121 |     this.computeFaceNormals();
122 |     this.computeVertexNormals();
123 | 
124 |     function vert( x, y, z ) {
125 | 
126 |         return scope.vertices.push( new THREE.Vertex( new THREE.Vector3( x, y, z ) ) ) - 1;
127 |         // what on earth is this -1 ???
128 | 
129 |     }
130 | 
131 | };
132 | 
133 | THREE.TubeGeometry.prototype = new THREE.Geometry();
134 | THREE.TubeGeometry.prototype.constructor = THREE.TubeGeometry;
135 | 
136 | // -----------------------------------------------------------------------------
137 | // Setup Scene
138 | // -----------------------------------------------------------------------------
139 | 
140 | // dom
141 | var container = document.createElement( 'div' );
142 | document.body.appendChild( container );
143 | 
144 | // renderer
145 | var renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1 } );
146 | renderer.setSize( window.innerWidth, window.innerHeight );
147 | container.appendChild( renderer.domElement );
148 | 
149 | // scene
150 | var scene = new THREE.Scene();
151 | 
152 | // camera
153 | var camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 1000 );
154 | camera.position.set(40, 15, 40);
155 | camera.lookAt( scene.position );
156 | scene.add( camera );
157 | 
158 | // ambient light
159 | var ambient = new THREE.AmbientLight( 0x555555 );
160 | scene.add( ambient );
161 | 
162 | // directional light
163 | var directionalLight = new THREE.DirectionalLight( 0xaaaaaa, 1.0 );
164 | directionalLight.position.set(1, 1, 1).normalize();
165 | scene.add( directionalLight );
166 | 
167 | // directional light
168 | var directionalLight = new THREE.DirectionalLight( 0xaaaaaa, 1.0 );
169 | directionalLight.position.set(-1, -1, -1).normalize();
170 | scene.add( directionalLight );
171 | 
172 | // axes
173 | var axes = new THREE.AxisHelper()
174 | scene.add( axes );
175 | 
176 | // material params
177 | var params = {
178 |     color: 0xff0000,
179 |     ambient: 0xff0000,
180 |     specular: 0x555555,
181 |     shininess: 50,
182 |     shading: THREE.FlatShading,
183 |     wireframe: false
184 | };
185 | 
186 | // material
187 | //var material = new THREE.MeshBasicMaterial( params );
188 | //var material = new THREE.MeshLambertMaterial( params );
189 | var material = new THREE.MeshPhongMaterial( params );
190 | 
191 | // path
192 | var points = [];
193 | for( var i = 0; i < 4; i++ ) {
194 |     points.push( new THREE.Vector3( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).multiplyScalar( 20 ) );
195 | }
196 | var path = new THREE.CubicBezierCurve3( points[0], points[1], points[2], points[3] );
197 | 
198 | // callback
199 | function func( t ) {
200 |     //return new THREE.Vector3( Math.cos(10*t), 2*Math.sin(10*t), (t+ Math.sin(20*t)) ).multiplyScalar(5);
201 |     return path.getPoint( t );
202 | }
203 | 
204 | // geometry
205 | var geometry = new THREE.TubeGeometry( 1, 32, 8, func ); // radius, segR, segT, callback( t )
206 | 
207 | // object
208 | var mesh = new THREE.Mesh( geometry, material );
209 | mesh.position.set(0, 0, 0);
210 | //mesh.flipSided = true;
211 | mesh.doubleSided = true;
212 | scene.add( mesh );
213 | 
214 | // render
215 | renderer.render( scene, camera );
216 | 
217 | // listener
218 | document.addEventListener( 'mousemove', onDocumentMouseMove, false );
219 | 
220 | // event handlers
221 | function onDocumentMouseMove( event ) {
222 | 
223 |     var mouse = { x: 0, y: 0 };
224 |     mouse.x = 2 * event.clientX / window.innerWidth  - 1;
225 |     mouse.y = 2 * event.clientY / window.innerHeight - 1;
226 | 
227 |     // rotate camera
228 |     camera.position.set( 40 * Math.cos( 10 * mouse.x ), 15, 40 * Math.sin( 10 * mouse.x ) );
229 |     camera.lookAt( scene.position );
230 | 
231 |     renderer.render( scene, camera );
232 | 
233 | }
234 | 
235 | function addArrow( obj, origin, dir, scale, color ) {
236 | 
237 |     // parent
238 |     var arrow = new THREE.Object3D();
239 | 
240 |     // line
241 |     var lineGeometry = new THREE.Geometry();
242 |     lineGeometry.vertices.push( new THREE.Vertex() );
243 |     lineGeometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 0, 1, 0 ) ) );
244 |     var line = new THREE.Line( lineGeometry, new THREE.LineBasicMaterial( { color : color } ) );
245 |     arrow.add( line );
246 | 
247 |     // tip
248 |     var coneGeometry = new THREE.CylinderGeometry( 0, .05, .25, 5, 1 );
249 |     var cone = new THREE.Mesh( coneGeometry, new THREE.MeshBasicMaterial( { color : color } ) );
250 |     cone.position.set( 0, 1, 0 );
251 |     arrow.add( cone );
252 | 
253 |     // position
254 |     arrow.position.copy( origin );
255 | 
256 |     // orientation - object matrix
257 |     var axis = new THREE.Vector3( 0, 1, 0 ).cross( dir );
258 |     var radians = Math.acos( new THREE.Vector3( 0, 1, 0 ).dot( dir.normalize() ) );
259 |     var rotationMatrix = new THREE.Matrix4();
260 |     rotationMatrix.makeRotationAxis( axis.normalize(), radians );
261 |     arrow.matrix.multiply( rotationMatrix );
262 | 
263 |     // orientation - euler rotation vector
264 | 
265 |     var p = new THREE.Vector3();
266 |     var q = new THREE.Quaternion();
267 |     var s = new THREE.Vector3();
268 |     arrow.matrix.decompose(p,q,s);
269 |     arrow.rotation.copy(q);
270 | 
271 |     // scale
272 |     arrow.scale.set( scale, scale, scale );
273 | 
274 |     // add child
275 |     obj.add( arrow );
276 | 
277 | }
278 | 
279 | 
280 | 
281 | </script>
282 | 
283 | 	</body>
284 | </html>
285 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<title>Codevember 2017</title>
 5 | 		<meta charset="utf-8">
 6 | 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 7 | 
 8 | 		<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" />
 9 | 		<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">
10 | 
11 | 	</head>
12 | 	<body>
13 | 
14 | 	<div id="container"></div>
15 | 		<div id="info" >
16 | 			<h1>Codevember 2017</h1>
17 | 			<ul>
18 | 				<li><a href="./curl-scribbles">1. Curl Scribbles</a></li>
19 | 				<li><a href="./alien-strands">2. Alien Strands</a></li>
20 | 				<li><a href="./rainbow-spikeball">3. Rainbow Spikeball</a></li>
21 | 				<li><a href="./sound-waves">4. Sound Waves</a></li>
22 | 				<li><a href="./sphere-carving">5. Sphere Carving</a></li>
23 | 				<li><a href="./plasma-waves">6. Plasma Waves</a></li>
24 | 				<li><a href="./chromeography">7. Chromeography</a></li>
25 | 				<li><a href="./whirly-bonfire">8. Whirly Bonfire</a></li>
26 | 				<li><a href="./holomap">9. Holomap</a></li>
27 | 				<li><a href="./glow-worms">10. Glow Worms</a></li>
28 | 				<li><a href="./supershape">11. SuperShape</a></li>
29 | 				<li><a href="./shredder-redux">12. Shredder Redux</a></li>
30 | 				<li><a href="./bonkey-balls">13. Bonkey Balls</a></li>
31 | 				<li><a href="./digital-analog-color-display">14. Digital Analog Color Display</a></li>
32 | 				<li><a href="./the-wrung-music">15. The Wrung Music</a></li>
33 | 			</ul>
34 | 		</div>
35 | 
36 | 	</div>
37 | 
38 | 	</body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/js/Backdrop.js:
--------------------------------------------------------------------------------
 1 | function Backdrop( lightPosition, top, bottom ) {
 2 | 
 3 | 	this.backGeometry = new THREE.IcosahedronBufferGeometry(1,4);
 4 | 	this.backMaterial = new THREE.RawShaderMaterial({
 5 | 		uniforms: {
 6 | 			top: { type: 'c', value: new THREE.Color(top) },
 7 | 			bottom: { type: 'c', value: new THREE.Color(bottom) },
 8 | 			lightPosition: { type: 'v3', value: lightPosition }
 9 | 		},
10 | 		vertexShader: document.getElementById( 'backdrop-vs' ).textContent,
11 | 		fragmentShader: document.getElementById( 'backdrop-fs' ).textContent,
12 | 		side: THREE.BackSide,
13 | 		depthWrite: false
14 | 	});
15 | 	return new THREE.Mesh( this.backGeometry, this.backMaterial );
16 | 
17 | }
18 | 


--------------------------------------------------------------------------------
/js/Bloom.js:
--------------------------------------------------------------------------------
  1 | function Bloom( levels ) {
  2 | 
  3 | 	this.levels = levels !== undefined ? levels : 5;
  4 | 	this.fbos = [];
  5 | 
  6 | 	this.fbos.push( this.createFBO() );
  7 | 	helper.attach( this.fbos[0], 'highlight' );
  8 | 
  9 | 	for( var j = 0; j < this.levels; j++ ) {
 10 | 		var fbo = this.createFBO();
 11 | 		this.fbos.push( fbo );
 12 | 		helper.attach( fbo, 'blur.' + j + '.h' );
 13 | 		var fbo = this.createFBO();
 14 | 		this.fbos.push( fbo );
 15 | 		helper.attach( fbo, 'blur.' + j + '.v' );
 16 | 	}
 17 | 	this.fbos.push( this.createFBO() );
 18 | 
 19 | 	this.highlightShader = new THREE.RawShaderMaterial({
 20 | 		uniforms: {
 21 | 			source: { type: 't', value: null },
 22 | 			threshold: { type: 'f', value: 1. }
 23 | 		},
 24 | 		vertexShader: document.getElementById('ortho-vs').textContent,
 25 | 		fragmentShader: document.getElementById('highlight-fs').textContent,
 26 | 	});
 27 | 
 28 | 	this.blurShader = new THREE.RawShaderMaterial({
 29 | 		uniforms: {
 30 | 			source: { type: 't', value: null },
 31 | 			resolution: { type: 'v2', value: new THREE.Vector2(1,1) },
 32 | 			delta: { type: 'v2', value: new THREE.Vector2( 0, 1 )}
 33 | 		},
 34 | 		vertexShader: document.getElementById('ortho-vs').textContent,
 35 | 		fragmentShader: document.getElementById('blur-fs').textContent,
 36 | 	});
 37 | 
 38 | 	this.bloomShader = new THREE.RawShaderMaterial({
 39 | 		uniforms: {
 40 | 			levels: { type: 'f', value: this.levels },
 41 | 			base: { type: 't', value: baseFBO.texture },
 42 | 			level0: { type: 't', value: this.levels>0?this.fbos[2].texture:null },
 43 | 			level1: { type: 't', value: this.levels>1?this.fbos[4].texture:null },
 44 | 			level2: { type: 't', value: this.levels>2?this.fbos[6].texture:null },
 45 | 			level3: { type: 't', value: this.levels>3?this.fbos[8].texture:null },
 46 | 			level4: { type: 't', value: this.levels>4?this.fbos[10].texture:null },
 47 | 			resolution: { type: 'v2', value: new THREE.Vector2(1,1) },
 48 | 			boost: { type: 'f', value: 1.1 },
 49 | 			reduction: { type: 'f', value: 1.1 },
 50 | 			amount: { type: 'f', value: 0 },
 51 | 			time: { type: 'f', value: 0 }
 52 | 		},
 53 | 		vertexShader: document.getElementById('ortho-vs').textContent,
 54 | 		fragmentShader: document.getElementById('bloom-fs').textContent,
 55 | 	});
 56 | 
 57 | 	this.orthoScene = new THREE.Scene();
 58 | 	this.orthoCamera = new THREE.OrthographicCamera( 1 / - 2, 1 / 2, 1 / 2, 1 / - 2, .00001, 1000 );
 59 | 	this.orthoQuad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1, 1 ), this.highlightShader );
 60 | 	this.orthoScene.add( this.orthoQuad );
 61 | 
 62 | }
 63 | 
 64 | Bloom.prototype.createFBO = function() {
 65 | 
 66 | 	var fbo = new THREE.WebGLRenderTarget( 1, 1, {
 67 | 		wrapS: THREE.ClampToEdgeWrapping,
 68 | 		wrapT: THREE.ClampToEdgeWrapping,
 69 | 		format: THREE.RGBAFormat,
 70 | 		type: THREE.UnsignedByteType,
 71 | 		minFilter: THREE.LinearFilter,
 72 | 		magFilter: THREE.LinearFilter,
 73 | 		stencilBuffer: false,
 74 | 		depthBuffer: false
 75 | 	});
 76 | 
 77 | 	fbo.texture.generateMipMaps = false;
 78 | 
 79 | 	return fbo;
 80 | }
 81 | 
 82 | Bloom.prototype.setSize = function(w, h) {
 83 | 
 84 | 	this.width = w;
 85 | 	this.height = h;
 86 | 
 87 | 	var tw = w;
 88 | 	var th = h;
 89 | 
 90 | 	this.fbos[ 0 ].setSize( tw, th );
 91 | 	helper.refreshFBO( this.fbos[0] );
 92 | 
 93 | 	tw /= 2; th /= 2;
 94 | 	tw = Math.round( tw );
 95 | 	th = Math.round( th );
 96 | 
 97 | 	for( var j = 1; j < this.levels * 2; j+= 2) {
 98 | 		this.fbos[ j ].setSize( tw, th );
 99 | 		helper.refreshFBO( this.fbos[j] );
100 | 		this.fbos[ j + 1 ].setSize( tw, th );
101 | 		helper.refreshFBO( this.fbos[j+1] );
102 | 		tw /= 2; th /= 2;
103 | 		tw = Math.round( tw );
104 | 		th = Math.round( th );
105 | 	}
106 | 
107 | }
108 | 
109 | Bloom.prototype.setRenderSize = function(width, height) {
110 | 
111 | 	this.orthoQuad.scale.set( width, height, 1. );
112 | 
113 | 	this.orthoCamera.left   = - width / 2;
114 | 	this.orthoCamera.right  =   width / 2;
115 | 	this.orthoCamera.top    =   height / 2;
116 | 	this.orthoCamera.bottom = - height / 2;
117 | 	this.orthoCamera.updateProjectionMatrix();
118 | 
119 | }
120 | 
121 | Bloom.prototype.render = function() {
122 | 
123 | 	this.highlightShader.uniforms.source.value = baseFBO.texture;
124 | 	var w = this.fbos[ 0 ].width;
125 | 	var h = this.fbos[ 0 ].height;
126 | 	this.orthoQuad.material = this.highlightShader;
127 | 	this.setRenderSize(w, h);
128 | 	renderer.render(this.orthoScene,this.orthoCamera, this.fbos[ 0 ] );
129 | 
130 | 	var v = 1;
131 | 
132 | 	for( var j = 1; j < this.levels * 2; j+= 2 ){
133 | 
134 | 		this.orthoQuad.material = this.blurShader;
135 | 		this.orthoQuad.material.uniforms.delta.value.set( v,0 );
136 | 		this.orthoQuad.material.uniforms.source.value = this.fbos[ j - 1 ].texture;
137 | 		this.orthoQuad.material.uniforms.resolution.value.set( this.fbos[j].width, this.fbos[j].height );
138 | 		this.setRenderSize( this.fbos[ j ].width, this.fbos[ j ].height );
139 | 		renderer.render(this.orthoScene,this.orthoCamera, this.fbos[ j ] );
140 | 
141 | 		this.orthoQuad.material = this.blurShader;
142 | 		this.orthoQuad.material.uniforms.delta.value.set( 0,v );
143 | 		this.orthoQuad.material.uniforms.source.value = this.fbos[ j ].texture;
144 | 		this.orthoQuad.material.uniforms.resolution.value.set( this.fbos[j+1].width, this.fbos[j+1].height );
145 | 		this.setRenderSize( this.fbos[ j + 1 ].width, this.fbos[ j + 1 ].height );
146 | 		renderer.render(this.orthoScene,this.orthoCamera, this.fbos[ j + 1 ] );
147 | 
148 | 	}
149 | 
150 | 	this.orthoQuad.material = this.bloomShader;
151 | 	this.orthoQuad.material.uniforms.amount.value = .01;
152 | 	this.orthoQuad.material.uniforms.time.value = .001 * performance.now();
153 | 	this.orthoQuad.material.uniforms.resolution.value.set( this.width, this.height );
154 | 	this.setRenderSize( this.width, this.height );
155 | 	renderer.render(this.orthoScene,this.orthoCamera );
156 | 
157 | }
158 | 


--------------------------------------------------------------------------------
/js/Common.js:
--------------------------------------------------------------------------------
 1 | function addCommonUI( element, callback ) {
 2 | 
 3 | 	element = element || document.body;
 4 | 	callback = callback || function() {}
 5 | 
 6 | 	function goFS() {
 7 | 
 8 | 		if(element.requestFullscreen) {
 9 | 			element.requestFullscreen();
10 | 		} else if(element.mozRequestFullScreen) {
11 | 			element.mozRequestFullScreen();
12 | 		} else if(element.webkitRequestFullscreen) {
13 | 			element.webkitRequestFullscreen();
14 | 		} else if(element.msRequestFullscreen) {
15 | 			element.msRequestFullscreen();
16 | 		}
17 | 		callback();
18 | 
19 | 	}
20 | 
21 | 	function toggleDetails() {
22 | 		document.getElementById('details').classList.toggle('hidden');
23 | 	}
24 | 
25 | 	window.addEventListener( 'keydown', function( e ) {
26 | 		if( e.keyCode === 70 ) {
27 | 			goFS();
28 | 		}
29 | 	} )
30 | 
31 | 	var btn = document.createElement( 'div' );
32 | 	btn.textContent = '↗';
33 | 	btn.className = 'fullscreen-button button'
34 | 	document.body.appendChild( btn );
35 | 	btn.addEventListener( 'click', goFS );
36 | 
37 | 	var info = document.createElement( 'div' );
38 | 	info.textContent = 'i';
39 | 	info.className = 'info-button button'
40 | 	document.body.appendChild( info );
41 | 	info.addEventListener( 'click', toggleDetails );
42 | 
43 | 	document.body.querySelector( '#moreDetails' ).addEventListener( 'click', toggleDetails );
44 | 	document.body.querySelector( '#close-details' ).addEventListener( 'click', toggleDetails );
45 | 
46 | 	var hub = document.createElement( 'p' );
47 | 	hub.className = 'hub';
48 | 	hub.innerHTML = '<a href="https://clicktorelease.com/code/codevember-2017/" >See other experiments for Codevember 2017</a>';
49 | 	document.body.appendChild( hub );
50 | 
51 | }
52 | 


--------------------------------------------------------------------------------
/js/CubemapToEquirectangular.js:
--------------------------------------------------------------------------------
  1 | var vertexShader = `
  2 | attribute vec3 position;
  3 | attribute vec2 uv;
  4 | 
  5 | uniform mat4 projectionMatrix;
  6 | uniform mat4 modelViewMatrix;
  7 | 
  8 | varying vec2 vUv;
  9 | 
 10 | void main()  {
 11 | 
 12 | 	vUv = vec2( 1.- uv.x, uv.y );
 13 | 	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 14 | 
 15 | }
 16 | `;
 17 | 
 18 | var fragmentShader = `
 19 | precision mediump float;
 20 | 
 21 | uniform samplerCube map;
 22 | 
 23 | varying vec2 vUv;
 24 | 
 25 | #define M_PI 3.1415926535897932384626433832795
 26 | 
 27 | void main()  {
 28 | 
 29 | 	vec2 uv = vUv;
 30 | 
 31 | 	float longitude = uv.x * 2. * M_PI - M_PI + M_PI / 2.;
 32 | 	float latitude = uv.y * M_PI;
 33 | 
 34 | 	vec3 dir = vec3(
 35 | 		- sin( longitude ) * sin( latitude ),
 36 | 		cos( latitude ),
 37 | 		- cos( longitude ) * sin( latitude )
 38 | 	);
 39 | 	normalize( dir );
 40 | 
 41 | 	gl_FragColor = textureCube( map, dir );
 42 | 
 43 | }
 44 | `;
 45 | 
 46 | function CubemapToEquirectangular( renderer, provideCubeCamera ) {
 47 | 
 48 | 	this.width = 1;
 49 | 	this.height = 1;
 50 | 
 51 | 	this.renderer = renderer;
 52 | 
 53 | 	this.material = new THREE.RawShaderMaterial( {
 54 | 		uniforms: {
 55 | 			map: { type: 't', value: null }
 56 | 		},
 57 | 		vertexShader: vertexShader,
 58 | 		fragmentShader: fragmentShader,
 59 | 		side: THREE.DoubleSide,
 60 | 		transparent: true
 61 | 	} );
 62 | 
 63 | 	this.scene = new THREE.Scene();
 64 | 	this.quad = new THREE.Mesh(
 65 | 		new THREE.PlaneBufferGeometry( 1, 1 ),
 66 | 		this.material
 67 | 	);
 68 | 	this.scene.add( this.quad );
 69 | 	this.camera = new THREE.OrthographicCamera( 1 / - 2, 1 / 2, 1 / 2, 1 / - 2, -10000, 10000 );
 70 | 
 71 | 	this.canvas = document.createElement( 'canvas' );
 72 | 	this.ctx = this.canvas.getContext( '2d' );
 73 | 
 74 | 	this.cubeCamera = null;
 75 | 	this.attachedCamera = null;
 76 | 
 77 | 	this.setSize( 4096, 2048 );
 78 | 
 79 | 	var gl = this.renderer.getContext();
 80 | 	this.cubeMapSize = gl.getParameter( gl.MAX_CUBE_MAP_TEXTURE_SIZE )
 81 | 
 82 | 	if( provideCubeCamera ) {
 83 | 		this.getCubeCamera( 2048 )
 84 | 	}
 85 | 
 86 | }
 87 | 
 88 | CubemapToEquirectangular.prototype.setSize = function( width, height ) {
 89 | 
 90 | 	this.width = width;
 91 | 	this.height = height;
 92 | 
 93 | 	this.quad.scale.set( this.width, this.height, 1 );
 94 | 
 95 | 	this.camera.left = this.width / - 2;
 96 | 	this.camera.right = this.width / 2;
 97 | 	this.camera.top = this.height / 2;
 98 | 	this.camera.bottom = this.height / - 2;
 99 | 
100 | 	this.camera.updateProjectionMatrix();
101 | 
102 | 	this.output = new THREE.WebGLRenderTarget( this.width, this.height, {
103 | 		minFilter: THREE.LinearFilter,
104 | 		magFilter: THREE.LinearFilter,
105 | 		wrapS: THREE.ClampToEdgeWrapping,
106 | 		wrapT: THREE.ClampToEdgeWrapping,
107 | 		format: THREE.RGBAFormat,
108 | 		type: THREE.UnsignedByteType
109 | 	});
110 | 
111 | 	this.canvas.width = this.width;
112 | 	this.canvas.height = this.height;
113 | 
114 | }
115 | 
116 | CubemapToEquirectangular.prototype.getCubeCamera = function( size ) {
117 | 
118 | 	var cubeMapSize = Math.min( this.cubeMapSize, size );
119 | 	this.cubeCamera = new THREE.CubeCamera( .1, 1000, cubeMapSize );
120 | 
121 | 	var options = { format: THREE.RGBAFormat, magFilter: THREE.LinearFilter, minFilter: THREE.LinearFilter };
122 | 	this.cubeCamera.renderTarget = new THREE.WebGLRenderTargetCube( cubeMapSize, cubeMapSize, options );
123 | 
124 | 	return this.cubeCamera;
125 | 
126 | }
127 | 
128 | CubemapToEquirectangular.prototype.attachCubeCamera = function( camera ) {
129 | 
130 | 	this.getCubeCamera();
131 | 	this.attachedCamera = camera;
132 | 
133 | }
134 | 
135 | CubemapToEquirectangular.prototype.convert = function( cubeCamera, download ) {
136 | 
137 | 	this.quad.material.uniforms.map.value = cubeCamera.renderTarget.texture;
138 | 	this.renderer.render( this.scene, this.camera, this.output, true );
139 | 
140 | 	/*var pixels = new Uint8Array( 4 * this.width * this.height );
141 | 	this.renderer.readRenderTargetPixels( this.output, 0, 0, this.width, this.height, pixels );
142 | 
143 | 	var imageData = new ImageData( new Uint8ClampedArray( pixels ), this.width, this.height );
144 | 
145 | 	if( download !== false ) {
146 | 		this.download( imageData );
147 | 	}
148 | 
149 | 	return imageData*/
150 | 
151 | };
152 | 
153 | CubemapToEquirectangular.prototype.download = function( imageData ) {
154 | 
155 | 	this.ctx.putImageData( imageData, 0, 0 );
156 | 
157 | 	this.canvas.toBlob( function( blob ) {
158 | 
159 | 		var url = URL.createObjectURL(blob);
160 | 		var fileName = 'pano-' + document.title + '-' + Date.now() + '.png';
161 | 		var anchor = document.createElement( 'a' );
162 | 		anchor.href = url;
163 | 		anchor.setAttribute("download", fileName);
164 | 		anchor.className = "download-js-link";
165 | 		anchor.innerHTML = "downloading...";
166 | 		anchor.style.display = "none";
167 | 		document.body.appendChild(anchor);
168 | 		setTimeout(function() {
169 | 			anchor.click();
170 | 			document.body.removeChild(anchor);
171 | 		}, 1 );
172 | 
173 | 	}, 'image/png' );
174 | 
175 | };
176 | 
177 | CubemapToEquirectangular.prototype.update = function( camera, scene ) {
178 | 
179 | 	var autoClear = this.renderer.autoClear;
180 | 	this.renderer.autoClear = true;
181 | 	this.cubeCamera.position.copy( camera.position );
182 | 	this.cubeCamera.updateCubeMap( this.renderer, scene );
183 | 	this.renderer.autoClear = autoClear;
184 | 
185 | 	this.convert( this.cubeCamera );
186 | 
187 | }
188 | 


--------------------------------------------------------------------------------
/js/EquirectangularToCubemap.js:
--------------------------------------------------------------------------------
 1 | ;(function() {
 2 | 
 3 | 	"use strict";
 4 | 
 5 | 	var root = this
 6 | 
 7 | 	var has_require = typeof require !== 'undefined'
 8 | 
 9 | 	var THREE = root.THREE || has_require && require('three')
10 | 	if( !THREE )
11 | 		throw new Error( 'EquirectangularToCubemap requires three.js' )
12 | 
13 | function EquirectangularToCubemap( renderer ) {
14 | 
15 | 	this.renderer = renderer;
16 | 	this.scene = new THREE.Scene();
17 | 
18 | 	var gl = this.renderer.getContext();
19 | 	this.maxSize = gl.getParameter( gl.MAX_CUBE_MAP_TEXTURE_SIZE )
20 | 
21 | 	this.camera = new THREE.CubeCamera( 1, 100000, 1 );
22 | 
23 | 	this.material = new THREE.MeshBasicMaterial( {
24 | 		map: null,
25 | 		side: THREE.BackSide
26 | 	} );
27 | 
28 | 	this.mesh = new THREE.Mesh(
29 | 		new THREE.IcosahedronGeometry( 100, 4 ),
30 | 		this.material
31 | 	);
32 | 	this.scene.add( this.mesh );
33 | 
34 | }
35 | 
36 | EquirectangularToCubemap.prototype.convert = function( source, size ) {
37 | 
38 | 	var mapSize = Math.min( size, this.maxSize );
39 | 	this.camera = new THREE.CubeCamera( 1, 100000, mapSize );
40 | 	this.material.map = source;
41 | 
42 | 	this.camera.update( this.renderer, this.scene );
43 | 
44 | 	return this.camera.renderTarget.texture;
45 | 
46 | }
47 | 
48 | if( typeof exports !== 'undefined' ) {
49 | 	if( typeof module !== 'undefined' && module.exports ) {
50 | 		exports = module.exports = EquirectangularToCubemap
51 | 	}
52 | 	exports.EquirectangularToCubemap = EquirectangularToCubemap
53 | }
54 | else {
55 | 	root.EquirectangularToCubemap = EquirectangularToCubemap
56 | }
57 | 
58 | }).call(this);
59 | 


--------------------------------------------------------------------------------
/js/ImprovedNoise.js:
--------------------------------------------------------------------------------
 1 | // http://mrl.nyu.edu/~perlin/noise/
 2 | 
 3 | var ImprovedNoise = function () {
 4 | 
 5 | 	var p = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,
 6 | 		 23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,
 7 | 		 174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,
 8 | 		 133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,
 9 | 		 89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,
10 | 		 202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,
11 | 		 248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,
12 | 		 178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,
13 | 		 14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,
14 | 		 93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
15 | 
16 | 	for (var i=0; i < 256 ; i++) {
17 | 
18 | 		p[256+i] = p[i];
19 | 
20 | 	}
21 | 
22 | 	function fade(t) {
23 | 
24 | 		return t * t * t * (t * (t * 6 - 15) + 10);
25 | 
26 | 	}
27 | 
28 | 	function lerp(t, a, b) {
29 | 
30 | 		return a + t * (b - a);
31 | 
32 | 	}
33 | 
34 | 	function grad(hash, x, y, z) {
35 | 
36 | 		var h = hash & 15;
37 | 		var u = h < 8 ? x : y, v = h < 4 ? y : h == 12 || h == 14 ? x : z;
38 | 		return ((h&1) == 0 ? u : -u) + ((h&2) == 0 ? v : -v);
39 | 
40 | 	}
41 | 
42 | 	return {
43 | 
44 | 		noise: function (x, y, z) {
45 | 
46 | 			var floorX = Math.floor(x), floorY = Math.floor(y), floorZ = Math.floor(z);
47 | 
48 | 			var X = floorX & 255, Y = floorY & 255, Z = floorZ & 255;
49 | 
50 | 			x -= floorX;
51 | 			y -= floorY;
52 | 			z -= floorZ;
53 | 
54 | 			var xMinus1 = x -1, yMinus1 = y - 1, zMinus1 = z - 1;
55 | 
56 | 			var u = fade(x), v = fade(y), w = fade(z);
57 | 
58 | 			var A = p[X]+Y, AA = p[A]+Z, AB = p[A+1]+Z, B = p[X+1]+Y, BA = p[B]+Z, BB = p[B+1]+Z;
59 | 
60 | 			return lerp(w, lerp(v, lerp(u, grad(p[AA], x, y, z), 
61 | 							grad(p[BA], xMinus1, y, z)),
62 | 						lerp(u, grad(p[AB], x, yMinus1, z),
63 | 							grad(p[BB], xMinus1, yMinus1, z))),
64 | 					lerp(v, lerp(u, grad(p[AA+1], x, y, zMinus1),
65 | 							grad(p[BA+1], xMinus1, y, z-1)),
66 | 						lerp(u, grad(p[AB+1], x, yMinus1, zMinus1),
67 | 							grad(p[BB+1], xMinus1, yMinus1, zMinus1))));
68 | 
69 | 		}
70 | 	}
71 | }


--------------------------------------------------------------------------------
/js/Maf.js:
--------------------------------------------------------------------------------
  1 | (function() {
  2 | 
  3 |     // Module code from underscore.js
  4 | 
  5 |     // Establish the root object, `window` (`self`) in the browser, `global`
  6 |     // on the server, or `this` in some virtual machines. We use `self`
  7 |     // instead of `window` for `WebWorker` support.
  8 |     var root = typeof self == 'object' && self.self === self && self ||
  9 |             typeof global == 'object' && global.global === global && global ||
 10 |             this;
 11 | 
 12 |     var Maf = function(obj) {
 13 |         if (obj instanceof Maf ) return obj;
 14 |         if (!(this instanceof Maf )) return new Maf(obj);
 15 |         this._wrapped = obj;
 16 |     };
 17 | 
 18 |     // Export the Underscore object for **Node.js**, with
 19 |     // backwards-compatibility for their old module API. If we're in
 20 |     // the browser, add `Maf` as a global object.
 21 |     // (`nodeType` is checked to ensure that `module`
 22 |     // and `exports` are not HTML elements.)
 23 |     if (typeof exports != 'undefined' && !exports.nodeType) {
 24 |         if (typeof module != 'undefined' && !module.nodeType && module.exports) {
 25 |         exports = module.exports = Maf;
 26 |         }
 27 |         exports.Maf = Maf;
 28 |     } else {
 29 |         root.Maf = Maf;
 30 |     }
 31 | 
 32 |     // Current version.
 33 |     Maf.VERSION = '1.0.0';
 34 | 
 35 |     Maf.PI = Math.PI;
 36 | 
 37 |     // https://www.opengl.org/sdk/docs/man/html/clamp.xhtml
 38 | 
 39 |     Maf.clamp = function( v, minVal, maxVal ) {
 40 |         return Math.min( maxVal, Math.max( minVal, v ) );
 41 |     };
 42 | 
 43 |     // https://www.opengl.org/sdk/docs/man/html/step.xhtml
 44 | 
 45 |     Maf.step = function( edge, v ) {
 46 |         return ( v < edge ) ? 0 : 1;
 47 |     }
 48 | 
 49 |     // https://www.opengl.org/sdk/docs/man/html/smoothstep.xhtml
 50 | 
 51 |     Maf.smoothStep = function ( edge0, edge1, v ) {
 52 |         var t = Maf.clamp( ( v - edge0 ) / ( edge1 - edge0 ), 0.0, 1.0 );
 53 |         return t * t * ( 3.0 - 2.0 * t );
 54 |     };
 55 | 
 56 |     // http://docs.unity3d.com/ScriptReference/Mathf.html
 57 |     // http://www.shaderific.com/glsl-functions/
 58 |     // https://www.opengl.org/sdk/docs/man4/html/
 59 |     // https://msdn.microsoft.com/en-us/library/windows/desktop/ff471376(v=vs.85).aspx
 60 |     // http://moutjs.com/docs/v0.11/math.html#map
 61 |     // https://code.google.com/p/kuda/source/browse/public/js/hemi/utils/mathUtils.js?r=8d581c02651077c4ac3f5fc4725323210b6b13cc
 62 | 
 63 |     // Converts from degrees to radians.
 64 |     Maf.deg2Rad = function( degrees ) {
 65 |       return degrees * Math.PI / 180;
 66 |     };
 67 |     
 68 |     Maf.toRadians = Maf.deg2Rad;
 69 | 
 70 |     // Converts from radians to degrees.
 71 |     Maf.rad2Deg = function(radians) {
 72 |       return radians * 180 / Math.PI;
 73 |     };
 74 | 
 75 |     Maf.toDegrees = Maf.rad2Deg;
 76 | 
 77 |     Maf.clamp01 = function( v ) {
 78 |         return Maf.clamp( v, 0, 1 );
 79 |     };
 80 | 
 81 |     // https://www.opengl.org/sdk/docs/man/html/mix.xhtml
 82 | 
 83 |     Maf.mix = function( x, y, a ) {
 84 |         if( a <= 0 ) return x;
 85 |         if( a >= 1 ) return y;
 86 |         return x + a * (y - x)
 87 |     };
 88 | 
 89 |     Maf.lerp = Maf.mix;
 90 | 
 91 |     Maf.inverseMix = function( a, b, v ) {
 92 |         return ( v - a ) / ( b - a );
 93 |     };
 94 | 
 95 |     Maf.inverseLerp = Maf.inverseMix;
 96 | 
 97 |     Maf.mixUnclamped = function( x, y, a ) {
 98 |         if( a <= 0 ) return x;
 99 |         if( a >= 1 ) return y;
100 |         return x + a * (y - x)
101 |     };
102 | 
103 |     Maf.lerpUnclamped = Maf.mixUnclamped;
104 | 
105 |     // https://www.opengl.org/sdk/docs/man/html/fract.xhtml
106 | 
107 |     Maf.fract = function( v ) {
108 |         return v - Math.floor( v );
109 |     };
110 | 
111 |     Maf.frac = Maf.fract;
112 | 
113 |     // http://stackoverflow.com/questions/4965301/finding-if-a-number-is-a-power-of-2
114 | 
115 |     Maf.isPowerOfTwo = function( v ) {
116 |         return ( ( ( v - 1) & v ) == 0 );
117 |     };
118 | 
119 |     // https://bocoup.com/weblog/find-the-closest-power-of-2-with-javascript
120 | 
121 |     Maf.closestPowerOfTwo = function( v ) {
122 |         return Math.pow( 2, Math.round( Math.log( v ) / Math.log( 2 ) ) ); 
123 |     };
124 | 
125 |     Maf.nextPowerOfTwo = function( v ) {
126 |         return Math.pow( 2, Math.ceil( Math.log( v ) / Math.log( 2 ) ) );    
127 |     }
128 | 
129 |     // http://stackoverflow.com/questions/1878907/the-smallest-difference-between-2-angles
130 | 
131 |     //function mod(a, n) { return a - Math.floor(a/n) * n; }
132 |     Maf.mod = function(a, n) { return (a % n + n) % n; }
133 | 
134 |     Maf.deltaAngle = function( a, b ) {
135 |         var d = Maf.mod( b - a, 360 );
136 |         if( d > 180 ) d = Math.abs( d - 360 );
137 |         return d;
138 |     };
139 | 
140 |     Maf.deltaAngleDeg = Maf.deltaAngle;
141 | 
142 |     Maf.deltaAngleRad = function( a, b ) {
143 |         return Maf.toRadians( Maf.deltaAngle( Maf.toDegrees( a ), Maf.toDegrees( b ) ) );
144 |     };
145 | 
146 |     Maf.lerpAngle = function( a, b, t ) {
147 |         var angle = Maf.deltaAngle( a, b );
148 |         return Maf.mod( a + Maf.lerp( 0, angle, t ), 360 );
149 |     };
150 | 
151 |     Maf.lerpAngleDeg = Maf.lerpAngle;
152 | 
153 |     Maf.lerpAngleRad = function( a, b, t ) {
154 |         return Maf.toRadians( Maf.lerpAngleDeg( Maf.toDegrees( a ), Maf.toDegrees( b ), t ) );
155 |     };
156 | 
157 |     // http://gamedev.stackexchange.com/questions/74324/gamma-space-and-linear-space-with-shader
158 | 
159 |     Maf.gammaToLinearSpace = function( v ) {
160 |         return Math.pow( v, 2.2 );
161 |     };
162 | 
163 |     Maf.linearToGammaSpace = function( v ) {
164 |         return Math.pow( v, 1 / 2.2 );
165 |     };
166 | 
167 |     Maf.map = function( from1, to1, from2, to2, v ) {
168 |         return from2 + ( v - from1 ) * ( to2 - from2 ) / ( to1 - from1 );
169 |     }
170 | 
171 |     Maf.scale = Maf.map;
172 | 
173 |     // http://www.iquilezles.org/www/articles/functions/functions.htm
174 | 
175 |     Maf.almostIdentity = function( x, m, n ) {
176 |         
177 |         if( x > m ) return x;
178 | 
179 |         var a = 2 * n - m;
180 |         var b = 2 * m - 3 * n;
181 |         var t = x / m;
182 | 
183 |         return ( a * t + b) * t * t + n;
184 |     }
185 | 
186 |     Maf.impulse = function( k, x ) {
187 |         var h = k * x;
188 |         return h * Math.exp( 1 - h );
189 |     };
190 | 
191 |     Maf.cubicPulse = function( c, w, x ) {
192 |         x = Math.abs( x - c );
193 |         if( x > w ) return 0;
194 |         x /= w;
195 |         return 1 - x * x * ( 3 - 2 * x );
196 |     }
197 | 
198 |     Maf.expStep = function( x, k, n ) {
199 |         return Math.exp( -k * Math.pow( x, n ) );
200 |     }
201 | 
202 |     Maf.parabola = function( x, k ) {
203 |         return Math.pow( 4 * x * ( 1 - x ), k );
204 |     }
205 | 
206 |     Maf.powerCurve = function( x, a, b ) {
207 |         var k = Math.pow( a + b, a + b ) / ( Math.pow( a, a ) * Math.pow( b, b ) );
208 |         return k * Math.pow( x, a ) * Math.pow( 1 - x, b );
209 |     }
210 | 
211 |     // http://iquilezles.org/www/articles/smin/smin.htm ?
212 | 
213 |     Maf.latLonToCartesian = function( lat, lon ) {
214 | 
215 |         lon += 180;
216 |         lat = Maf.clamp( lat, -85, 85 );
217 |         var phi = Maf.toRadians( 90 - lat );
218 |         var theta = Maf.toRadians( 180 - lon );
219 |         var x = Math.sin( phi ) * Math.cos( theta );
220 |         var y = Math.cos( phi );
221 |         var z = Math.sin( phi ) * Math.sin( theta );
222 | 
223 |         return { x: x, y: y, z: z }
224 | 
225 |     }
226 | 
227 |     Maf.cartesianToLatLon = function( x, y, z ) {
228 |         var n = Math.sqrt( x * x + y * y + z * z );
229 |         return{ lat: Math.asin( z / n ), lon: Math.atan2( y, x ) };
230 |     }
231 | 
232 |     Maf.randomInRange = function( min, max ) {
233 |         return min + Math.random() * ( max - min );
234 |     }
235 | 
236 |     Maf.norm = function( v, minVal, maxVal ) {
237 |         return ( v - minVal ) / ( maxVal - minVal );
238 |     }
239 | 
240 |     Maf.hash = function( n ) {
241 |         return Maf.fract( (1.0 + Math.cos(n)) * 415.92653);
242 |     }
243 | 
244 |     Maf.noise2d = function( x, y ) {
245 |         var xhash = Maf.hash( x * 37.0 );
246 |         var yhash = Maf.hash( y * 57.0 );
247 |         return Maf.fract( xhash + yhash );
248 |     }
249 | 
250 |     // http://iquilezles.org/www/articles/smin/smin.htm
251 | 
252 |     Maf.smoothMin = function( a, b, k ) {
253 |         var res = Math.exp( -k*a ) + Math.exp( -k*b );
254 |         return - Math.log( res )/k;
255 |     }
256 | 
257 |     Maf.smoothMax = function( a, b, k ){
258 |         return Math.log( Math.exp(a) + Math.exp(b) )/k;
259 |     }
260 | 
261 |     Maf.almost = function( a, b ) {
262 |         return ( Math.abs( a - b ) < .0001 );
263 |     }
264 | 
265 | }());


--------------------------------------------------------------------------------
/js/MeshCustomMaterial.js:
--------------------------------------------------------------------------------
 1 | function MeshCustomMaterial (parameters) {
 2 | 	THREE.MeshStandardMaterial.call( this );
 3 | 	this.uniforms = THREE.UniformsUtils.merge([
 4 | 		THREE.UniformsLib.common,
 5 | 		THREE.UniformsLib.aomap,
 6 | 		THREE.UniformsLib.lightmap,
 7 | 		THREE.UniformsLib.emissivemap,
 8 | 		THREE.UniformsLib.bumpmap,
 9 | 		THREE.UniformsLib.normalmap,
10 | 		THREE.UniformsLib.displacementmap,
11 | 		THREE.UniformsLib.roughnessmap,
12 | 		THREE.UniformsLib.metalnessmap,
13 | 		THREE.UniformsLib.fog,
14 | 		THREE.UniformsLib.lights,
15 | 		parameters.u
16 | 		]);
17 | 
18 | 	this.vertexShader = parameters.vertexShader;
19 | 	this.fragmentShader = parameters.fragmentShader;
20 | 	this.type = 'MeshCustomMaterial';
21 | 
22 | 	this.setValues(parameters);
23 | }
24 | 
25 | MeshCustomMaterial.prototype = Object.create( THREE.MeshStandardMaterial.prototype );
26 | MeshCustomMaterial.prototype.constructor = MeshCustomMaterial;
27 | MeshCustomMaterial.prototype.isMeshStandardMaterial = true;
28 | 
29 | MeshCustomMaterial.prototype.copy = function ( source ) {
30 | 	THREE.MeshStandardMaterial.prototype.copy.call( this, source );
31 | 	this.uniforms = THREE.UniformsUtils.clone(source.uniforms);
32 | 	setFlags(this);
33 | 	return this;
34 | };
35 | 


--------------------------------------------------------------------------------
/js/Odeo.js:
--------------------------------------------------------------------------------
  1 | // /ˈôdēˌō/
  2 | 
  3 | ( function() {
  4 | 
  5 | var AudioContext = window.AudioContext || window.webkitAudioContext;
  6 | 
  7 | function OdeoSoundCloudPlayer( id, odeo ) {
  8 | 
  9 | 	this.id = id;
 10 | 	this.odeo = odeo;
 11 | 
 12 | 	SC.initialize({
 13 | 		client_id: this.id
 14 | 	});
 15 | 
 16 | 	this.audio = document.createElement( 'audio' );
 17 | 	this.audio.loop = true;
 18 | 	this.audio.autoplay = true;
 19 | 	this.audio.crossOrigin = '';
 20 | 
 21 | 	this.songSource = this.odeo.context.createMediaElementSource( this.audio );
 22 | 	this.songSource.connect( this.odeo.analyser );
 23 | 	this.songSource.connect( this.odeo.context.destination );
 24 | 
 25 | }
 26 | 
 27 | OdeoSoundCloudPlayer.prototype.getSong = function( songURL ) {
 28 | 
 29 | 	this.audio.play();
 30 | 
 31 | 	SC.resolve( songURL ).then( function( song ){
 32 | 
 33 | 		console.log( song );
 34 | 		//songInfo.innerHTML = '<p><b><a href="' + song.permalink_url + '" >' + song.title + '</a> <a href="#" id="pauseBtn" >PAUSE</a></b><br/><a href="' + song.user.permalink_url + '">' + song.user.username + '</a></p>'
 35 | 
 36 | 		this.audio.src = song.stream_url + "?client_id=" + this.id;
 37 | 
 38 | 		this.songSource.connect( this.odeo.analyser );
 39 | 		this.songSource.connect( this.odeo.context.destination );
 40 | 
 41 | 	}.bind( this ) );
 42 | 
 43 | }
 44 | 
 45 | OdeoSoundCloudPlayer.prototype.stop = function() {
 46 | 
 47 | 	this.audio.pause();
 48 | 
 49 | }
 50 | 
 51 | function OdeoMediaPlayer() {
 52 | 
 53 | 	thia.audioElement = document.createElement( 'audio' );
 54 | 
 55 | }
 56 | 
 57 | OdeoMediaPlayer.prototype.play = function( src ) {
 58 | 
 59 | 	this.audioElement.src = src;
 60 | 	this.audioElement.play();
 61 | 
 62 | 	this.audioSource = this.context.createMediaElementSource( this.audioElement );
 63 | 	this.audioSource.connect( this.odeo.analyser );
 64 | 	this.audioSource.connect( this.odeo.context.destination );
 65 | 
 66 | }
 67 | 
 68 | function OdeoMicrophone( odeo ) {
 69 | 
 70 | 	this.microphone = null;
 71 | 	this.odeo = odeo;
 72 | 
 73 | }
 74 | 
 75 | OdeoMicrophone.prototype.play = function() {
 76 | 
 77 | 	if( navigator.getUserMedia ) {
 78 | 
 79 | 		navigator.getUserMedia( { audio: true }, function( stream ) {
 80 | 
 81 | 			this.microphone = this.odeo.context.createMediaStreamSource( stream );
 82 | 			this.microphone.connect( this.odeo.analyser );
 83 | 
 84 | 		}.bind( this ),
 85 | 		function() {
 86 | 
 87 | 		} );
 88 | 
 89 | 	} else if( navigator.mediaDevices ) {
 90 | 
 91 | 		navigator.mediaDevices.getUserMedia( { audio: true } ).then(function( stream ) {
 92 | 
 93 | 			this.microphone = this.odeo.context.createMediaStreamSource( stream );
 94 | 			this.microphone.connect( this.odeo.analyser );
 95 | 
 96 | 		}.bind( this ) ).catch(function(err) {
 97 | 		});
 98 | 	}
 99 | 
100 | }
101 | 
102 | OdeoMicrophone.prototype.stop = function() {
103 | 
104 | 	if( this.microphone ) {
105 | 		this.microphone.disconnect( this.odeo.analyser );
106 | 	}
107 | 	this.microphone = null;
108 | 
109 | }
110 | 
111 | function Odeo( opts ){
112 | 
113 | 	this.options = opts || {};
114 | 
115 | 	this.context = new AudioContext();
116 | 	this.analyser = this.context.createAnalyser();
117 | 	this.analyser.fftSize = this.options.fftSize || 256;
118 | 	this.frequencyData = new Uint8Array( this.analyser.frequencyBinCount );
119 | 	this.timeData = new Uint8Array( this.analyser.frequencyBinCount );
120 | 	this.waveData = [];
121 | 	this.levelsData = [];
122 | 	this.levelsCount = 16
123 | 	this.beatCutOff = 0;
124 | 	this.beatTime = 0;
125 | 	this.bpmStart = 0;
126 | 	this.volume = 0;
127 | 
128 | 	this.spectrumTexture = null;
129 | 
130 | 	this.soundCloudPlayer = null;
131 | 	this.microphone = null;
132 | 
133 | }
134 | 
135 | Odeo.prototype.playMedia = function() {
136 | 
137 | }
138 | 
139 | Odeo.prototype.useMicrophone = function() {
140 | 
141 | 	if( !this.microphone ) this.microphone = new OdeoMicrophone( this );
142 | 	this.microphone.play();
143 | 
144 | }
145 | 
146 | Odeo.prototype.stopUsingMicrophone = function() {
147 | 
148 | 	if( !this.microphone ) return;
149 | 	this.microphone.stop();
150 | 
151 | }
152 | 
153 | Odeo.prototype.playSoundCloud = function( url ) {
154 | 
155 | 	if( !this.soundCloudPlayer ) this.soundCloudPlayer = new OdeoSoundCloudPlayer( this.options.soundCloudId, this );
156 | 	this.soundCloudPlayer.getSong( url );
157 | 
158 | }
159 | 
160 | Odeo.prototype.stopSoundCloud = function( url ) {
161 | 
162 | 	if( !this.soundCloudPlayer ) return;
163 | 	this.soundCloudPlayer.stop();
164 | 
165 | }
166 | 
167 | Odeo.prototype.getSpectrumTexture = function() {
168 | 
169 | 	this.spectrumTexture = new THREE.DataTexture( this.frequencyData, 1 * this.frequencyData.length, 1, THREE.LuminanceFormat );
170 | 	//this.spectrumTexture = new THREE.DataTexture( this.timeData, 1 * this.timeData.length, 1, THREE.LuminanceFormat );
171 | 	this.spectrumTexture.minFilter = THREE.NearestFilter;
172 | 	this.spectrumTexture.magFilter = THREE.NearestFilter;
173 | 	this.spectrumTexture.needsUpdate = true;
174 | 
175 | 	return this.spectrumTexture;
176 | 
177 | }
178 | 
179 | Odeo.prototype.update = function() {
180 | 
181 | 	var volSens = 1;
182 | 
183 | 	this.analyser.getByteFrequencyData( this.frequencyData );
184 | 	if( this.spectrumTexture ) this.spectrumTexture.needsUpdate = true;
185 | 	//kick.onUpdate();
186 | 
187 | 
188 | 	this.analyser.getByteTimeDomainData(this.timeData); // <-- waveform
189 | 
190 | 	for(var i = 0; i < this.analyser.frequencyBinCount; i++) {
191 | 		this.waveData[i] = ((this.timeData[i] - 128) /128 ) * volSens;
192 | 	}
193 | 
194 | 	var levelBins = Math.floor(this.analyser.frequencyBinCount / this.levelsCount);
195 | 
196 | 	for(var i = 0; i < this.levelsCount; i++) {
197 | 		var sum = 0;
198 | 		for(var j = 0; j < levelBins; j++) {
199 | 			sum += this.frequencyData[(i * levelBins) + j];
200 | 		}
201 | 		this.levelsData[i] = sum / levelBins/256 * volSens;
202 | 	}
203 | 
204 | 	var sum = 0;
205 | 	for(var j = 0; j < this.levelsCount; j++) {
206 | 		sum += this.levelsData[j];
207 | 	}
208 | 
209 | 	this.volume = sum / this.levelsCount;
210 | 
211 | 	var BEAT_HOLD_TIME = 40;
212 | 	var BEAT_DECAY_RATE = 0.98;
213 | 	var BEAT_MIN = 0.15;
214 | 
215 | 	if (this.volume  > this.beatCutOff && this.volume > BEAT_MIN){
216 | 		if( this.onBeat ) this.onBeat();
217 | 		this.bpmStart = performance.now();
218 | 
219 | 		this.beatCutOff = this.volume *1.1;
220 | 		this.beatTime = 0;
221 | 	}else{
222 | 		if (this.beatTime <= BEAT_HOLD_TIME){
223 | 			this.beatTime ++;
224 | 		}else{
225 | 			this.beatCutOff *= BEAT_DECAY_RATE;
226 | 			this.beatCutOff = Math.max(this.beatCutOff,BEAT_MIN);
227 | 		}
228 | 	}
229 | 
230 | 	this.bpmTime = (performance.now() - this.bpmStart)/633;
231 | 
232 | }
233 | 
234 | // [ mic ] [ url ] [ play / pause ]
235 | 
236 | Odeo.prototype.getUI = function() {
237 | 
238 | 	this.div = document.createElement('div');
239 | 	var code = '<style>.odeo-player{position:absolute;left:10px; bottom:10px; z-index:1000;}.odeo-player *{all:unset;font-size: 12px}</style>';
240 | 	code += '<style>.odeo-button, .odeo-input{border: 1px solid white; display: inline-block; padding: .5em; opacity: .5; cursor: pointer}</style>';
241 | 	code += '<style>.odeo-button:hover, .odeo-input:hover{opacity:1}</style>';
242 | 	code += '<style>.odeo-input:focus{width: 200px}</style>';
243 | 	code += '<style>.odeo-active{opacity:1}</style>';
244 | 	code += '<div class="odeo-player"><div class="odeo-button odeo-mic">Mic</div><div class="odeo-button odeo-url">URL</div><input placeholder="soundcloud url" type="text" class="odeo-input"></div>';
245 | 	this.div.innerHTML = code;
246 | 
247 | 	var odeo = this;
248 | 	var div = this.div;
249 | 	var useMic = this.div.querySelector('.odeo-mic');
250 | 	var useURL = this.div.querySelector('.odeo-url');
251 | 
252 | 	useMic.addEventListener('click', function(){
253 | 		useURL.classList.remove('odeo-active');
254 | 		useMic.classList.add('odeo-active');
255 | 		odeo.stopSoundCloud();
256 | 		odeo.useMicrophone();
257 | 	});
258 | 
259 | 	useURL.addEventListener('click', function(){
260 | 		useMic.classList.remove('odeo-active');
261 | 		useURL.classList.add('odeo-active');
262 | 		var url = div.querySelector('.odeo-input').value;
263 | 		odeo.stopUsingMicrophone();
264 | 		odeo.playSoundCloud(url);
265 | 	});
266 | 
267 | 	return this.div;
268 | }
269 | 
270 | window.Odeo = Odeo;
271 | 
272 | } )();
273 | 


--------------------------------------------------------------------------------
/js/THREE.FBOHelper.js:
--------------------------------------------------------------------------------
  1 | ;(function() {
  2 | 
  3 | 	"use strict";
  4 | 
  5 | 	var root = this
  6 | 
  7 | 	var has_require = typeof require !== 'undefined'
  8 | 
  9 | 	var THREE = root.THREE || has_require && require('three')
 10 | 	if( !THREE )
 11 | 		throw new Error( 'FBOHelper requires three.js' )
 12 | 
 13 | "use strict";
 14 | 
 15 | var layerCSS = `
 16 | #fboh-fbos-list{
 17 | 	all: unset;
 18 | 	position: fixed;
 19 | 	left: 0;
 20 | 	top: 0;
 21 | 	z-index: 1000000;
 22 | 	width: 150px;
 23 | }
 24 | #fboh-fbos-list, #fboh-fbos-list *, #fboh-hotspot, #fboh-label, #fboh-info{
 25 | 	box-sizing: border-box;
 26 | 	font-family: 'Roboto Mono', 'courier new', courier, monospace;
 27 | 	font-size: 11px;
 28 | 	line-height: 1.4em;
 29 | }
 30 | #fboh-fbos-list li{
 31 | 	cursor: pointer;
 32 | 	color: white;
 33 | 	width: 100%;
 34 | 	padding: 4px 0;
 35 | 	border-top: 1px solid #888;
 36 | 	border-bottom: 1px solid black;
 37 | 	background-color: #444;
 38 | 	text-align: center;
 39 | 	text-shadow: 0 -1px black;
 40 | }
 41 | #fboh-fbos-list li:hover{
 42 | 	background-color: rgba( 158, 253, 56, .5 );
 43 | }
 44 | #fboh-fbos-list li.active{
 45 | 	background-color: rgba( 158, 253, 56, .5 );
 46 | 	color: white;
 47 | 	text-shadow: 0 1px black;
 48 | }
 49 | #fboh-hotspot{
 50 | 	position: absolute;
 51 | 	left: 0;
 52 | 	top: 0;
 53 | 	background-color: rgba( 158, 253, 56,.5);
 54 | 	pointer-events: none;
 55 | }
 56 | #fboh-label{
 57 | 	position: absolute;
 58 | 	left: 0;
 59 | 	bottom: 0;
 60 | 	transform-origin: bottom left;
 61 | 	pointer-events: none;
 62 | }
 63 | #fboh-info{
 64 | 	display: none;
 65 | 	position: absolute;
 66 | 	left: 160px;
 67 | 	top: 10px;
 68 | 	pointer-events: none;
 69 | }
 70 | .fboh-card{
 71 | 	display: block;
 72 | 	white-space: nowrap;
 73 | 	color: black;
 74 | 	padding: 10px;
 75 | 	background-color: white;
 76 | 	border: 1px solid black;
 77 | }
 78 | `;
 79 | 
 80 | let formats = {}
 81 | formats[ THREE.AlphaFormat ] = 'THREE.AlphaFormat';
 82 | formats[ THREE.RGBFormat ] = 'THREE.RGBFormat';
 83 | formats[ THREE.RGBAFormat ] = 'THREE.RGBAFormat';
 84 | formats[ THREE.LuminanceFormat ] = 'THREE.LuminanceFormat';
 85 | formats[ THREE.LuminanceAlphaFormat ] = 'THREE.LuminanceAlphaFormat';
 86 | //formats[ THREE.RGBEFormat ] = 'THREE.RGBEFormat';
 87 | 
 88 | let types = {}
 89 | types[ THREE.UnsignedByteType ] = 'THREE.UnsignedByteType';
 90 | types[ THREE.ByteType ] = 'THREE.ByteType';
 91 | types[ THREE.ShortType ] = 'THREE.ShortType';
 92 | types[ THREE.UnsignedShortType ] = 'THREE.UnsignedShortType';
 93 | types[ THREE.IntType ] = 'THREE.IntType';
 94 | types[ THREE.UnsignedIntType ] = 'THREE.UnsignedIntType';
 95 | types[ THREE.FloatType ] = 'THREE.FloatType';
 96 | types[ THREE.HalfFloatType ] = 'THREE.HalfFloatType';
 97 | types[ THREE.UnsignedShort4444Type ] = 'THREE.UnsignedShort4444Type';
 98 | types[ THREE.UnsignedShort5551Type ] = 'THREE.UnsignedShort5551Type';
 99 | types[ THREE.UnsignedShort565Type ] = 'THREE.UnsignedShort565Type';
100 | 
101 | class FBOHelper {
102 | 
103 | 	constructor( renderer ) {
104 | 
105 | 		this.renderer = renderer;
106 | 		this.autoUpdate = false;
107 | 		this.fbos = []
108 | 		this.list = document.createElement( 'ul' );
109 | 		this.list.setAttribute( 'id', 'fboh-fbos-list' );
110 | 		document.body.appendChild( this.list );
111 | 
112 | 		this.scene = new THREE.Scene();
113 | 		this.camera = new THREE.OrthographicCamera( -1, 1, 1, -1, .000001, 1000 );
114 | 
115 | 		this.raycaster = new THREE.Raycaster();
116 | 		this.mouse = new THREE.Vector2();
117 | 
118 | 		this.grid = document.createElement( 'div' );
119 | 		this.grid.setAttribute( 'style', 'position: fixed; left: 50%; top: 50%; border: 1px solid #000000; transform: translate3d(-50%, -50%, 0 ); box-shadow: 0 0 50px black; display: none' );
120 | 		this.grid.setAttribute( 'id', 'bfoh-grid' );
121 | 		document.body.appendChild( this.grid );
122 | 
123 | 		this.hotspot = document.createElement( 'div' );
124 | 		this.hotspot.setAttribute( 'id', 'fboh-hotspot' );
125 | 		this.grid.appendChild( this.hotspot );
126 | 
127 | 		this.label = document.createElement( 'div' );
128 | 		this.label.setAttribute( 'id', 'fboh-label' );
129 | 		this.label.className = 'fboh-card';
130 | 		this.hotspot.appendChild( this.label );
131 | 
132 | 		this.info = document.createElement( 'div' );
133 | 		this.info.setAttribute( 'id', 'fboh-info' );
134 | 		this.info.className = 'fboh-card';
135 | 		document.body.appendChild( this.info );
136 | 
137 | 		this.currentObj = null;
138 | 		this.currentU = 0;
139 | 		this.currentV = 0;
140 | 
141 | 		this.fboMap = new Map();
142 | 
143 | 		this.offsetX = 0;
144 | 		this.offsetY = 0;
145 | 
146 | 		this.grid.appendChild( this.hotspot );
147 | 
148 | 		const head = window.document.head || window.document.getElementsByTagName('head')[0];
149 | 		const style = window.document.createElement('style');
150 | 
151 | 		style.type = 'text/css';
152 | 		if (style.styleSheet){
153 | 			style.styleSheet.cssText = layerCSS;
154 | 		} else {
155 | 			style.appendChild(document.createTextNode(layerCSS));
156 | 		}
157 | 
158 | 		head.appendChild(style);
159 | 
160 | 		const ss = document.createElement( 'link' );
161 | 		ss.type = 'text/css';
162 | 		ss.rel = 'stylesheet';
163 | 		ss.href = 'https://fonts.googleapis.com/css?family=Roboto+Mono';
164 | 
165 | 		head.appendChild( ss );
166 | 
167 | 		this.grid.addEventListener( 'wheel', e => {
168 | 
169 | 			var direction = ( e.deltaY < 0 ) ? 1 : -1;
170 | 
171 | 			this.camera.zoom += direction / 50;
172 | 			this.camera.updateProjectionMatrix();
173 | 			this.grid.style.transform = `translate3d(-50%, -50%, 0 ) scale(${this.camera.zoom},${this.camera.zoom}) translate3d(${this.offsetX}px,${this.offsetY}px,0) `;
174 | 			this.label.style.transform = `scale(${1/this.camera.zoom},${1/this.camera.zoom})`;
175 | 			this.hotspot.style.transform = `scale(${1/this.camera.zoom},${1/this.camera.zoom})`;
176 | 			this.hotspot.style.borderWidth = `${1/this.camera.zoom}px`;
177 | 			this.readPixel( this.currentObj, this.currentU, this.currentV );
178 | 
179 | 		} );
180 | 
181 | 		let dragging = false;
182 | 		let mouseStart = { x: 0, y: 0 };
183 | 		let offsetStart = { x: 0, y: 0 };
184 | 
185 | 		this.grid.addEventListener( 'mousedown', e => {
186 | 
187 | 			dragging = true;
188 | 			mouseStart.x = e.clientX;
189 | 			mouseStart.y = e.clientY;
190 | 			offsetStart.x = this.offsetX;
191 | 			offsetStart.y = this.offsetY;
192 | 
193 | 		} );
194 | 
195 | 		this.grid.addEventListener( 'mouseup', e => {
196 | 
197 | 			dragging = false;
198 | 
199 | 		} );
200 | 
201 | 		this.grid.addEventListener( 'mouseout', e => {
202 | 
203 | 			this.label.style.display = 'none';
204 | 			dragging = false;
205 | 
206 | 		} );
207 | 
208 | 		this.grid.addEventListener( 'mouseover', e => {
209 | 
210 | 			this.label.style.display = 'block';
211 | 
212 | 		} );
213 | 
214 | 		this.grid.addEventListener( 'mousemove', e => {
215 | 
216 | 			if( dragging ) {
217 | 
218 | 				this.offsetX = offsetStart.x + ( e.clientX - mouseStart.x ) / this.camera.zoom;
219 | 				this.offsetY = offsetStart.y + ( e.clientY - mouseStart.y ) / this.camera.zoom;
220 | 				this.camera.position.x = -this.offsetX;
221 | 				this.camera.position.y = this.offsetY;
222 | 
223 | 				this.grid.style.transform = `translate3d(-50%, -50%, 0 ) scale(${this.camera.zoom},${this.camera.zoom}) translate3d(${this.offsetX}px,${this.offsetY}px,0)`;
224 | 
225 | 			} else {
226 | 
227 | 				this.mouse.x = ( e.clientX / renderer.domElement.clientWidth ) * 2 - 1;
228 | 				this.mouse.y = - ( e.clientY / renderer.domElement.clientHeight ) * 2 + 1;
229 | 				this.raycaster.setFromCamera( this.mouse, this.camera );
230 | 
231 | 				const intersects = this.raycaster.intersectObject( this.currentObj.quad, true );
232 | 
233 | 				if ( intersects.length > 0 ) {
234 | 
235 | 					this.readPixel( this.fboMap.get( intersects[ 0 ].object ), intersects[ 0 ].uv.x, intersects[ 0 ].uv.y );
236 | 					this.label.style.display = 'block';
237 | 
238 | 				} else {
239 | 
240 | 					this.label.style.display = 'none';
241 | 
242 | 				}
243 | 
244 | 			}
245 | 
246 | 		} );
247 | 
248 | 		window.addEventListener( 'keydown', e => {
249 | 			if( e.keyCode === 27 ) {
250 | 				this.hide();
251 | 			}
252 | 		} );
253 | 
254 | 		this.grid.addEventListener( 'keydown', e => {
255 | 			if( e.keyCode === 27 ) {
256 | 				this.hide();
257 | 			}
258 | 		} );
259 | 
260 | 	}
261 | 
262 | 	hide() {
263 | 
264 | 		this.hideAll();
265 | 		this.info.style.display = 'none';
266 | 		this.grid.style.display = 'none';
267 | 		this.currentObj = null;
268 | 
269 | 	}
270 | 
271 | 	attach( fbo, name, formatter ) {
272 | 
273 | 		var li = document.createElement( 'li' );
274 | 
275 | 		li.textContent = name;
276 | 
277 | 		if( fbo.image ) {
278 | 			fbo.width = fbo.image.width;
279 | 			fbo.height = fbo.image.height;
280 | 		}
281 | 
282 | 		const width = 600;
283 | 		const height = fbo.height * width / fbo.width;
284 | 
285 | 		const material = new THREE.MeshBasicMaterial( { map: fbo, side: THREE.DoubleSide } );
286 | 		const quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1, 1 ), material );
287 | 		if( !fbo.flipY ) quad.rotation.x = Math.PI;
288 | 		quad.visible = false;
289 | 		quad.width = width;
290 | 		quad.height = height;
291 | 		quad.scale.set( width, height, 1. );
292 | 		this.scene.add( quad );
293 | 
294 | 		var fboData = {
295 | 			width: width,
296 | 			height: height,
297 | 			name: name,
298 | 			fbo: fbo,
299 | 			flipY: fbo.flipY,
300 | 			li: li,
301 | 			visible: false,
302 | 			quad: quad,
303 | 			material: material,
304 | 			formatter: formatter
305 | 		};
306 | 		this.fbos.push( fboData );
307 | 		this.fboMap.set( quad, fboData );
308 | 
309 | 		li.addEventListener( 'click', e => {
310 | 			quad.visible = !quad.visible;
311 | 			if( quad.visible ) {
312 | 				this.hideAll();
313 | 				quad.visible = true;
314 | 				li.classList.add( 'active' );
315 | 				this.info.style.display = 'block';
316 | 				this.grid.style.display = 'block';
317 | 				this.grid.style.width = ( fboData.width + 2 ) + 'px';
318 | 				this.grid.style.height = ( fboData.height + 2 ) + 'px';
319 | 				this.currentObj = fboData;
320 | 				this.info.innerHTML = `Width: ${fbo.width} Height: ${fbo.height}<br/>Format: ${formats[fbo.texture?fbo.texture.format:fbo.format]} Type: ${types[fbo.texture?fbo.texture.type:fbo.type]}`;
321 | 			} else {
322 | 				this.info.style.display = 'none';
323 | 				li.classList.remove( 'active' );
324 | 				this.grid.style.display = 'none';
325 | 				this.currentObj = null;
326 | 			}
327 | 		} );
328 | 
329 | 		this.buildList();
330 | 
331 | 	}
332 | 
333 | 	detach( f ) {
334 | 
335 | 		var p = 0;
336 | 		for( var fbo of this.fbos ) {
337 | 			if( fbo.fbo === f ) {
338 | 				this.fbos.splice( p, 1 )
339 | 			}
340 | 			p++;
341 | 		}
342 | 
343 | 		this.buildList();
344 | 
345 | 	}
346 | 
347 | 	refreshFBO( f ) {
348 | 
349 | 		for( var fbo of this.fbos ) {
350 | 			if( fbo.fbo === f ) {
351 | 				const width = 600;
352 | 				const height = f.height * width / f.width;
353 | 				fbo.width = width;
354 | 				fbo.height = height;
355 | 				fbo.quad.width = width;
356 | 				fbo.quad.height = height;
357 | 				fbo.quad.scale.set( width, height, 1. );
358 | 			}
359 | 		}
360 | 
361 | 	}
362 | 
363 | 	hideAll() {
364 | 
365 | 		this.fbos.forEach( fbo => {
366 | 			fbo.quad.visible = false;
367 | 			fbo.li.classList.remove( 'active' );
368 | 		} );
369 | 
370 | 	}
371 | 
372 | 	buildList() {
373 | 
374 | 		while( this.list.firstChild ) this.list.removeChild( this.list.firstChild );
375 | 
376 | 		for( var fbo of this.fbos ) {
377 | 			this.list.appendChild( fbo.li );
378 | 		}
379 | 
380 | 	}
381 | 
382 | 	setSize( w, h ) {
383 | 
384 | 		this.camera.left = w / - 2;
385 | 		this.camera.right = w / 2;
386 | 		this.camera.top = h / 2;
387 | 		this.camera.bottom = h / - 2;
388 | 
389 | 		this.camera.updateProjectionMatrix();
390 | 
391 | 	}
392 | 
393 | 	readPixel( obj, u, v ) {
394 | 
395 | 		this.currentU = u;
396 | 		this.currentV = v;
397 | 
398 | 		if( this.currentObj === null ) return;
399 | 
400 | 		const fbo = obj.fbo;
401 | 
402 | 		const x = ~~( fbo.width * u );
403 | 		const y = ~~( fbo.height * v );
404 | 
405 | 		let types = {}
406 | 		types[ THREE.UnsignedByteType ] = Uint8Array;
407 | 		types[ THREE.ByteType ] = Int8Array;
408 | 		types[ THREE.ShortType ] = Int16Array;
409 | 		types[ THREE.UnsignedShortType ] = Uint16Array;
410 | 		types[ THREE.IntType ] = Int32Array;
411 | 		types[ THREE.UnsignedIntType ] = Uint32Array;
412 | 		types[ THREE.FloatType ] = Float32Array;
413 | 		types[ THREE.HalfFloatType ] = null;
414 | 		types[ THREE.UnsignedShort4444Type ] = Uint16Array;
415 | 		types[ THREE.UnsignedShort5551Type ] = Uint16Array;
416 | 		types[ THREE.UnsignedShort565Type ] = Uint16Array;
417 | 
418 | 		var type = types[ fbo.texture ? fbo.texture.type : fbo.type ];
419 | 		if( type === null ) {
420 | 			console.warning( fbo.texture ? fbo.texture.type : fbo.type + ' not supported' );
421 | 			return;
422 | 		}
423 | 
424 | 		const pixelBuffer = new ( type )( 4 );
425 | 
426 | 		this.renderer.readRenderTargetPixels( fbo, x, y, 1, 1, pixelBuffer );
427 | 		const posTxt = `X : ${x} Y: ${y} u: ${u} v: ${v}`;
428 | 		const dataTxt = obj.formatter ?
429 | 			obj.formatter( {
430 | 				x: x,
431 | 				y: y,
432 | 				u: u,
433 | 				v: v,
434 | 				r: pixelBuffer[ 0 ],
435 | 				g: pixelBuffer[ 1 ],
436 | 				b: pixelBuffer[ 2 ],
437 | 				a: pixelBuffer[ 3 ]
438 | 			} )
439 | 			:
440 | 			`R: ${pixelBuffer[ 0 ]} G: ${pixelBuffer[ 1 ]} B: ${pixelBuffer[ 2 ]} A: ${pixelBuffer[ 3 ]}`;
441 | 		this.label.innerHTML = `${posTxt}<br/>${dataTxt}`;
442 | 
443 | 		const ox = ~~( u * fbo.width ) * obj.quad.width / fbo.width;
444 | 		const oy = ~~( obj.flipY ? ( 1 - v ) * fbo.height : v * fbo.height ) * obj.quad.height / fbo.height;
445 | 		this.hotspot.style.width = `${obj.quad.width / fbo.width}px`;
446 | 		this.hotspot.style.height = `${obj.quad.height / fbo.height}px`;
447 | 		this.hotspot.style.transform = `translate3d(${ox}px,${oy}px,0)`;
448 | 		this.label.style.bottom = ( obj.quad.height / fbo.height ) + 'px';
449 | 
450 | 	}
451 | 
452 | 
453 | 	show( state ) {
454 | 
455 | 		this.list.style.display = state ? 'block' : 'none';
456 | 
457 | 	}
458 | 
459 | 	update() {
460 | 
461 | 		this.renderer.autoClear = false;
462 | 		this.renderer.render( this.scene, this.camera );
463 | 		this.renderer.autoClear = true;
464 | 		if( this.autoUpdate ) this.readPixel( this.currentObj, this.currentU, this.currentV );
465 | 
466 | 	}
467 | 
468 | }
469 | 
470 | if( typeof exports !== 'undefined' ) {
471 | 	if( typeof module !== 'undefined' && module.exports ) {
472 | 		exports = module.exports = FBOHelper
473 | 	}
474 | 	exports.FBOHelper = FBOHelper
475 | }
476 | else {
477 | 	root.FBOHelper = FBOHelper
478 | }
479 | 
480 | }).call(this);
481 | 
482 | 


--------------------------------------------------------------------------------
/js/THREE.MeshLine.js:
--------------------------------------------------------------------------------
  1 | ;(function() {
  2 | 
  3 | "use strict";
  4 | 
  5 | var root = this
  6 | 
  7 | var has_require = typeof require !== 'undefined'
  8 | 
  9 | var THREE = root.THREE || has_require && require('three')
 10 | if( !THREE )
 11 | 	throw new Error( 'MeshLine requires three.js' )
 12 | 
 13 | function MeshLine() {
 14 | 
 15 | 	this.positions = [];
 16 | 
 17 | 	this.previous = [];
 18 | 	this.next = [];
 19 | 	this.side = [];
 20 | 	this.width = [];
 21 | 	this.indices_array = [];
 22 | 	this.uvs = [];
 23 | 	this.counters = [];
 24 | 	this.geometry = new THREE.BufferGeometry();
 25 | 
 26 | 	this.widthCallback = null;
 27 | 
 28 | }
 29 | 
 30 | MeshLine.prototype.setGeometry = function( g, c ) {
 31 | 
 32 | 	this.widthCallback = c;
 33 | 
 34 | 	this.positions = [];
 35 | 	this.counters = [];
 36 | 
 37 | 	if( g instanceof THREE.Geometry ) {
 38 | 		for( var j = 0; j < g.vertices.length; j++ ) {
 39 | 			var v = g.vertices[ j ];
 40 | 			var c = j/g.vertices.length;
 41 | 			this.positions.push( v.x, v.y, v.z );
 42 | 			this.positions.push( v.x, v.y, v.z );
 43 | 			this.counters.push(c);
 44 | 			this.counters.push(c);
 45 | 		}
 46 | 	}
 47 | 
 48 | 	if( g instanceof THREE.BufferGeometry ) {
 49 | 		// read attribute positions ?
 50 | 	}
 51 | 
 52 | 	if( g instanceof Float32Array || g instanceof Array ) {
 53 | 		for( var j = 0; j < g.length; j += 3 ) {
 54 | 			var c = j/g.length;
 55 | 			this.positions.push( g[ j ], g[ j + 1 ], g[ j + 2 ] );
 56 | 			this.positions.push( g[ j ], g[ j + 1 ], g[ j + 2 ] );
 57 | 			this.counters.push(c);
 58 | 			this.counters.push(c);
 59 | 		}
 60 | 	}
 61 | 
 62 | 	this.process();
 63 | 
 64 | }
 65 | 
 66 | MeshLine.prototype.compareV3 = function( a, b ) {
 67 | 
 68 | 	var aa = a * 6;
 69 | 	var ab = b * 6;
 70 | 	return ( this.positions[ aa ] === this.positions[ ab ] ) && ( this.positions[ aa + 1 ] === this.positions[ ab + 1 ] ) && ( this.positions[ aa + 2 ] === this.positions[ ab + 2 ] );
 71 | 
 72 | }
 73 | 
 74 | MeshLine.prototype.copyV3 = function( a ) {
 75 | 
 76 | 	var aa = a * 6;
 77 | 	return [ this.positions[ aa ], this.positions[ aa + 1 ], this.positions[ aa + 2 ] ];
 78 | 
 79 | }
 80 | 
 81 | MeshLine.prototype.process = function() {
 82 | 
 83 | 	var l = this.positions.length / 6;
 84 | 
 85 | 	this.previous = [];
 86 | 	this.next = [];
 87 | 	this.side = [];
 88 | 	this.width = [];
 89 | 	this.indices_array = [];
 90 | 	this.uvs = [];
 91 | 
 92 | 	for( var j = 0; j < l; j++ ) {
 93 | 		this.side.push( 1 );
 94 | 		this.side.push( -1 );
 95 | 	}
 96 | 
 97 | 	var w;
 98 | 	for( var j = 0; j < l; j++ ) {
 99 | 		if( this.widthCallback ) w = this.widthCallback( j / ( l -1 ) );
100 | 		else w = 1;
101 | 		this.width.push( w );
102 | 		this.width.push( w );
103 | 	}
104 | 
105 | 	for( var j = 0; j < l; j++ ) {
106 | 		this.uvs.push( j / ( l - 1 ), 0 );
107 | 		this.uvs.push( j / ( l - 1 ), 1 );
108 | 	}
109 | 
110 | 	var v;
111 | 
112 | 	if( this.compareV3( 0, l - 1 ) ){
113 | 		v = this.copyV3( l - 2 );
114 | 	} else {
115 | 		v = this.copyV3( 0 );
116 | 	}
117 | 	this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
118 | 	this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
119 | 	for( var j = 0; j < l - 1; j++ ) {
120 | 		v = this.copyV3( j );
121 | 		this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
122 | 		this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
123 | 	}
124 | 
125 | 	for( var j = 1; j < l; j++ ) {
126 | 		v = this.copyV3( j );
127 | 		this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
128 | 		this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
129 | 	}
130 | 
131 | 	if( this.compareV3( l - 1, 0 ) ){
132 | 		v = this.copyV3( 1 );
133 | 	} else {
134 | 		v = this.copyV3( l - 1 );
135 | 	}
136 | 	this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
137 | 	this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
138 | 
139 | 	for( var j = 0; j < l - 1; j++ ) {
140 | 		var n = j * 2;
141 | 		this.indices_array.push( n, n + 1, n + 2 );
142 | 		this.indices_array.push( n + 2, n + 1, n + 3 );
143 | 	}
144 | 
145 | 	if (!this.attributes) {
146 | 		this.attributes = {
147 | 			position: new THREE.BufferAttribute( new Float32Array( this.positions ), 3 ),
148 | 			previous: new THREE.BufferAttribute( new Float32Array( this.previous ), 3 ),
149 | 			next: new THREE.BufferAttribute( new Float32Array( this.next ), 3 ),
150 | 			side: new THREE.BufferAttribute( new Float32Array( this.side ), 1 ),
151 | 			width: new THREE.BufferAttribute( new Float32Array( this.width ), 1 ),
152 | 			uv: new THREE.BufferAttribute( new Float32Array( this.uvs ), 2 ),
153 | 			index: new THREE.BufferAttribute( new Uint16Array( this.indices_array ), 1 ),
154 | 			counters: new THREE.BufferAttribute( new Float32Array( this.counters ), 1 )
155 | 		}
156 | 	} else {
157 | 		this.attributes.position.copyArray(new Float32Array(this.positions));
158 | 		this.attributes.position.needsUpdate = true;
159 | 		this.attributes.previous.copyArray(new Float32Array(this.previous));
160 | 		this.attributes.previous.needsUpdate = true;
161 | 		this.attributes.next.copyArray(new Float32Array(this.next));
162 | 		this.attributes.next.needsUpdate = true;
163 | 		this.attributes.side.copyArray(new Float32Array(this.side));
164 | 		this.attributes.side.needsUpdate = true;
165 | 		this.attributes.width.copyArray(new Float32Array(this.width));
166 | 		this.attributes.width.needsUpdate = true;
167 | 		this.attributes.uv.copyArray(new Float32Array(this.uvs));
168 | 		this.attributes.uv.needsUpdate = true;
169 | 		this.attributes.index.copyArray(new Uint16Array(this.indices_array));
170 | 		this.attributes.index.needsUpdate = true;
171 |     }
172 | 
173 | 	this.geometry.addAttribute( 'position', this.attributes.position );
174 | 	this.geometry.addAttribute( 'previous', this.attributes.previous );
175 | 	this.geometry.addAttribute( 'next', this.attributes.next );
176 | 	this.geometry.addAttribute( 'side', this.attributes.side );
177 | 	this.geometry.addAttribute( 'width', this.attributes.width );
178 | 	this.geometry.addAttribute( 'uv', this.attributes.uv );
179 | 	this.geometry.addAttribute( 'counters', this.attributes.counters );
180 | 
181 | 	this.geometry.setIndex( this.attributes.index );
182 | 
183 | }
184 | 
185 | function memcpy (src, srcOffset, dst, dstOffset, length) {
186 | 	var i
187 | 
188 | 	src = src.subarray || src.slice ? src : src.buffer
189 | 	dst = dst.subarray || dst.slice ? dst : dst.buffer
190 | 
191 | 	src = srcOffset ? src.subarray ?
192 | 	src.subarray(srcOffset, length && srcOffset + length) :
193 | 	src.slice(srcOffset, length && srcOffset + length) : src
194 | 
195 | 	if (dst.set) {
196 | 		dst.set(src, dstOffset)
197 | 	} else {
198 | 		for (i=0; i<src.length; i++) {
199 | 			dst[i + dstOffset] = src[i]
200 | 		}
201 | 	}
202 | 
203 | 	return dst
204 | }
205 | 
206 | /**
207 |  * Fast method to advance the line by one position.  The oldest position is removed.
208 |  * @param position
209 |  */
210 | MeshLine.prototype.advance = function(position) {
211 | 
212 | 	var positions = this.attributes.position.array;
213 | 	var previous = this.attributes.previous.array;
214 | 	var next = this.attributes.next.array;
215 | 	var l = positions.length;
216 | 
217 | 	// PREVIOUS
218 | 	memcpy( positions, 0, previous, 0, l );
219 | 
220 | 	// POSITIONS
221 | 	memcpy( positions, 6, positions, 0, l - 6 );
222 | 
223 | 	positions[l - 6] = position.x;
224 | 	positions[l - 5] = position.y;
225 | 	positions[l - 4] = position.z;
226 | 	positions[l - 3] = position.x;
227 | 	positions[l - 2] = position.y;
228 | 	positions[l - 1] = position.z;
229 | 
230 |     // NEXT
231 | 	memcpy( positions, 6, next, 0, l - 6 );
232 | 
233 | 	next[l - 6]  = position.x;
234 | 	next[l - 5]  = position.y;
235 | 	next[l - 4]  = position.z;
236 | 	next[l - 3]  = position.x;
237 | 	next[l - 2]  = position.y;
238 | 	next[l - 1]  = position.z;
239 | 
240 | 	this.attributes.position.needsUpdate = true;
241 | 	this.attributes.previous.needsUpdate = true;
242 | 	this.attributes.next.needsUpdate = true;
243 | 
244 | };
245 | 
246 | function MeshLineMaterial( parameters ) {
247 | 
248 | 	var vertexShaderSource = [
249 | 'precision highp float;',
250 | '',
251 | 'attribute vec3 position;',
252 | 'attribute vec3 previous;',
253 | 'attribute vec3 next;',
254 | 'attribute float side;',
255 | 'attribute float width;',
256 | 'attribute vec2 uv;',
257 | 'attribute float counters;',
258 | '',
259 | 'uniform mat4 projectionMatrix;',
260 | 'uniform mat4 modelViewMatrix;',
261 | 'uniform vec2 resolution;',
262 | 'uniform float lineWidth;',
263 | 'uniform vec3 color;',
264 | 'uniform float opacity;',
265 | 'uniform float near;',
266 | 'uniform float far;',
267 | 'uniform float sizeAttenuation;',
268 | '',
269 | 'varying vec2 vUV;',
270 | 'varying vec4 vColor;',
271 | 'varying float vCounters;',
272 | '',
273 | 'vec2 fix( vec4 i, float aspect ) {',
274 | '',
275 | '    vec2 res = i.xy / i.w;',
276 | '    res.x *= aspect;',
277 | '	 vCounters = counters;',
278 | '    return res;',
279 | '',
280 | '}',
281 | '',
282 | 'void main() {',
283 | '',
284 | '    float aspect = resolution.x / resolution.y;',
285 | '	 float pixelWidthRatio = 1. / (resolution.x * projectionMatrix[0][0]);',
286 | '',
287 | '    vColor = vec4( color, opacity );',
288 | '    vUV = uv;',
289 | '',
290 | '    mat4 m = projectionMatrix * modelViewMatrix;',
291 | '    vec4 finalPosition = m * vec4( position, 1.0 );',
292 | '    vec4 prevPos = m * vec4( previous, 1.0 );',
293 | '    vec4 nextPos = m * vec4( next, 1.0 );',
294 | '',
295 | '    vec2 currentP = fix( finalPosition, aspect );',
296 | '    vec2 prevP = fix( prevPos, aspect );',
297 | '    vec2 nextP = fix( nextPos, aspect );',
298 | '',
299 | '	 float pixelWidth = finalPosition.w * pixelWidthRatio;',
300 | '    float w = 1.8 * pixelWidth * lineWidth * width;',
301 | '',
302 | '    if( sizeAttenuation == 1. ) {',
303 | '        w = 1.8 * lineWidth * width;',
304 | '    }',
305 | '',
306 | '    vec2 dir;',
307 | '    if( nextP == currentP ) dir = normalize( currentP - prevP );',
308 | '    else if( prevP == currentP ) dir = normalize( nextP - currentP );',
309 | '    else {',
310 | '        vec2 dir1 = normalize( currentP - prevP );',
311 | '        vec2 dir2 = normalize( nextP - currentP );',
312 | '        dir = normalize( dir1 + dir2 );',
313 | '',
314 | '        vec2 perp = vec2( -dir1.y, dir1.x );',
315 | '        vec2 miter = vec2( -dir.y, dir.x );',
316 | '        //w = clamp( w / dot( miter, perp ), 0., 4. * lineWidth * width );',
317 | '',
318 | '    }',
319 | '',
320 | '    //vec2 normal = ( cross( vec3( dir, 0. ), vec3( 0., 0., 1. ) ) ).xy;',
321 | '    vec2 normal = vec2( -dir.y, dir.x );',
322 | '    normal.x /= aspect;',
323 | '    normal *= .5 * w;',
324 | '',
325 | '    vec4 offset = vec4( normal * side, 0.0, 1.0 );',
326 | '    finalPosition.xy += offset.xy;',
327 | '',
328 | '    gl_Position = finalPosition;',
329 | '',
330 | '}' ];
331 | 
332 | 	var fragmentShaderSource = [
333 | 		'#extension GL_OES_standard_derivatives : enable',
334 | 'precision mediump float;',
335 | '',
336 | 'uniform sampler2D map;',
337 | 'uniform sampler2D alphaMap;',
338 | 'uniform float useMap;',
339 | 'uniform float useAlphaMap;',
340 | 'uniform float useDash;',
341 | 'uniform vec2 dashArray;',
342 | 'uniform float visibility;',
343 | 'uniform float alphaTest;',
344 | 'uniform vec2 repeat;',
345 | '',
346 | 'varying vec2 vUV;',
347 | 'varying vec4 vColor;',
348 | 'varying float vCounters;',
349 | '',
350 | 'void main() {',
351 | '',
352 | '    vec4 c = vColor;',
353 | '    if( useMap == 1. ) c *= texture2D( map, vUV * repeat );',
354 | '    if( useAlphaMap == 1. ) c.a *= texture2D( alphaMap, vUV * repeat ).a;',
355 | '	 if( c.a < alphaTest ) discard;',
356 | '	 if( useDash == 1. ){',
357 | '	 	 ',
358 | '	 }',
359 | '    gl_FragColor = c;',
360 | '	 gl_FragColor.a *= step(vCounters,visibility);',
361 | '}' ];
362 | 
363 | 	function check( v, d ) {
364 | 		if( v === undefined ) return d;
365 | 		return v;
366 | 	}
367 | 
368 | 	THREE.Material.call( this );
369 | 
370 | 	parameters = parameters || {};
371 | 
372 | 	this.lineWidth = check( parameters.lineWidth, 1 );
373 | 	this.map = check( parameters.map, null );
374 | 	this.useMap = check( parameters.useMap, 0 );
375 | 	this.alphaMap = check( parameters.alphaMap, null );
376 | 	this.useAlphaMap = check( parameters.useAlphaMap, 0 );
377 | 	this.color = check( parameters.color, new THREE.Color( 0xffffff ) );
378 | 	this.opacity = check( parameters.opacity, 1 );
379 | 	this.resolution = check( parameters.resolution, new THREE.Vector2( 1, 1 ) );
380 | 	this.sizeAttenuation = check( parameters.sizeAttenuation, 1 );
381 | 	this.near = check( parameters.near, 1 );
382 | 	this.far = check( parameters.far, 1 );
383 | 	this.dashArray = check( parameters.dashArray, [] );
384 | 	this.useDash = ( this.dashArray !== [] ) ? 1 : 0;
385 | 	this.visibility = check( parameters.visibility, 1 );
386 | 	this.alphaTest = check( parameters.alphaTest, 0 );
387 | 	this.repeat = check( parameters.repeat, new THREE.Vector2( 1, 1 ) );
388 | 
389 | 	var material = new THREE.RawShaderMaterial( {
390 | 		uniforms:{
391 | 			lineWidth: { type: 'f', value: this.lineWidth },
392 | 			map: { type: 't', value: this.map },
393 | 			useMap: { type: 'f', value: this.useMap },
394 | 			alphaMap: { type: 't', value: this.alphaMap },
395 | 			useAlphaMap: { type: 'f', value: this.useAlphaMap },
396 | 			color: { type: 'c', value: this.color },
397 | 			opacity: { type: 'f', value: this.opacity },
398 | 			resolution: { type: 'v2', value: this.resolution },
399 | 			sizeAttenuation: { type: 'f', value: this.sizeAttenuation },
400 | 			near: { type: 'f', value: this.near },
401 | 			far: { type: 'f', value: this.far },
402 | 			dashArray: { type: 'v2', value: new THREE.Vector2( this.dashArray[ 0 ], this.dashArray[ 1 ] ) },
403 | 			useDash: { type: 'f', value: this.useDash },
404 | 			visibility: {type: 'f', value: this.visibility},
405 | 			alphaTest: {type: 'f', value: this.alphaTest},
406 | 			repeat: { type: 'v2', value: this.repeat }
407 | 		},
408 | 		vertexShader: vertexShaderSource.join( '\r\n' ),
409 | 		fragmentShader: fragmentShaderSource.join( '\r\n' )
410 | 	});
411 | 
412 | 	delete parameters.lineWidth;
413 | 	delete parameters.map;
414 | 	delete parameters.useMap;
415 | 	delete parameters.alphaMap;
416 | 	delete parameters.useAlphaMap;
417 | 	delete parameters.color;
418 | 	delete parameters.opacity;
419 | 	delete parameters.resolution;
420 | 	delete parameters.sizeAttenuation;
421 | 	delete parameters.near;
422 | 	delete parameters.far;
423 | 	delete parameters.dashArray;
424 | 	delete parameters.visibility;
425 | 	delete parameters.alphaTest;
426 | 	delete parameters.repeat;
427 | 
428 | 	material.type = 'MeshLineMaterial';
429 | 
430 | 	material.setValues( parameters );
431 | 
432 | 	return material;
433 | 
434 | };
435 | 
436 | MeshLineMaterial.prototype = Object.create( THREE.Material.prototype );
437 | MeshLineMaterial.prototype.constructor = MeshLineMaterial;
438 | 
439 | MeshLineMaterial.prototype.copy = function ( source ) {
440 | 
441 | 	THREE.Material.prototype.copy.call( this, source );
442 | 
443 | 	this.lineWidth = source.lineWidth;
444 | 	this.map = source.map;
445 | 	this.useMap = source.useMap;
446 | 	this.alphaMap = source.alphaMap;
447 | 	this.useAlphaMap = source.useAlphaMap;
448 | 	this.color.copy( source.color );
449 | 	this.opacity = source.opacity;
450 | 	this.resolution.copy( source.resolution );
451 | 	this.sizeAttenuation = source.sizeAttenuation;
452 | 	this.near = source.near;
453 | 	this.far = source.far;
454 | 	this.dashArray.copy( source.dashArray );
455 | 	this.useDash = source.useDash;
456 | 	this.visibility = source.visibility;
457 | 	this.alphaTest = source.alphaTest;
458 | 	this.repeat.copy( source.repeat );
459 | 
460 | 	return this;
461 | 
462 | };
463 | 
464 | if( typeof exports !== 'undefined' ) {
465 | 	if( typeof module !== 'undefined' && module.exports ) {
466 | 		exports = module.exports = { MeshLine: MeshLine, MeshLineMaterial: MeshLineMaterial };
467 | 	}
468 | 	exports.MeshLine = MeshLine;
469 | 	exports.MeshLineMaterial = MeshLineMaterial;
470 | }
471 | else {
472 | 	root.MeshLine = MeshLine;
473 | 	root.MeshLineMaterial = MeshLineMaterial;
474 | }
475 | 
476 | }).call(this);
477 | 
478 | 


--------------------------------------------------------------------------------
/js/THREE.PingPongTexture.js:
--------------------------------------------------------------------------------
 1 | function PingPongTexture( renderer, shader, width, height, format, type, buffersCount ) {
 2 | 
 3 | 	this.renderer = renderer;
 4 | 	this.shader = shader;
 5 | 	this.orthoScene = new THREE.Scene();
 6 | 	var fbo = new THREE.WebGLRenderTarget( width, height, {
 7 | 		wrapS: THREE.RepeatWrapping,
 8 | 		wrapT: THREE.RepeatWrapping,
 9 | 		minFilter: THREE.NearestFilter,
10 | 		magFilter: THREE.NearestFilter,
11 | 		format: format || THREE.RGBAFormat,
12 | 		type: type || THREE.UnsignedByte
13 | 	} );
14 | 	this.target = 0;
15 | 	this.buffersCount = buffersCount || 2;
16 | 	this.targets = [];
17 | 	this.targets.push( fbo );
18 | 	for( var j = 1; j < this.buffersCount; j++ ){
19 | 		this.targets.push( fbo.clone() );
20 | 	}
21 | 	this.orthoCamera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, .00001, 1000 );
22 | 	this.orthoQuad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1, 1 ), this.shader );
23 | 	this.orthoQuad.scale.set( width, height, 1 );
24 | 	this.orthoScene.add( this.orthoQuad );
25 | 	this.front = this.targets[ 0 ];
26 | 	this.back = this.targets[ 1 ];
27 | 
28 | }
29 | 
30 | PingPongTexture.prototype.render = function() {
31 | 
32 | 	this.shader.uniforms.source.value = this.front.texture;
33 | 
34 | 	this.target++;
35 | 	this.target %= this.buffersCount;
36 | 	this.front = this.targets[ this.target ];
37 | 	var prev = this.target - 1;
38 | 	if( prev < 0 ) prev += this.buffersCount;
39 | 	this.back = this.targets[ prev ];
40 | 
41 | 	this.renderer.render( this.orthoScene, this.orthoCamera, this.front );
42 | 
43 | }
44 | 
45 | PingPongTexture.prototype.setSize = function( width, height ) {
46 | 
47 | 	this.orthoQuad.scale.set( width, height, 1. );
48 | 
49 | 	this.targets[ 0 ].setSize( width, height );
50 | 	this.targets[ 1 ].setSize( width, height );
51 | 
52 | 	this.orthoQuad.scale.set( width, height, 1 );
53 | 
54 | 	this.orthoCamera.left   = - width / 2;
55 | 	this.orthoCamera.right  =   width / 2;
56 | 	this.orthoCamera.top    =   height / 2;
57 | 	this.orthoCamera.bottom = - height / 2;
58 | 	this.orthoCamera.updateProjectionMatrix();
59 | 
60 | }
61 | 


--------------------------------------------------------------------------------
/js/THREE.ShaderTexture.js:
--------------------------------------------------------------------------------
 1 | function ShaderTexture( renderer, shader, width, height, format, type, minFilter, magFilter, wrapS, wrapT ) {
 2 | 
 3 | 	this.renderer = renderer;
 4 | 	this.shader = shader;
 5 | 	this.orthoScene = new THREE.Scene();
 6 | 	this.fbo = new THREE.WebGLRenderTarget( width, height, {
 7 | 		wrapS: wrapS || THREE.RepeatWrapping,
 8 | 		wrapT: wrapT || THREE.RepeatWrapping,
 9 | 		minFilter: minFilter || THREE.LinearMipMapLinearFilter,
10 | 		magFilter: magFilter || THREE.LinearFilter,
11 | 		format: format || THREE.RGBAFormat,
12 | 		type: type || THREE.UnsignedByteType
13 | 	} );
14 | 	this.orthoCamera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, .00001, 1000 );
15 | 	this.orthoQuad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1, 1 ), this.shader );
16 | 	this.orthoQuad.scale.set( width, height, 1. );
17 | 	this.orthoScene.add( this.orthoQuad );
18 | 	this.texture = this.fbo.texture;
19 | 
20 | }
21 | 
22 | ShaderTexture.prototype.render = function( final ) {
23 | 
24 | 	this.renderer.render( this.orthoScene, this.orthoCamera, final?null:this.fbo );
25 | 
26 | }
27 | 
28 | ShaderTexture.prototype.setSize = function( width, height ) {
29 | 
30 | 	this.orthoQuad.scale.set( width, height, 1. );
31 | 
32 | 	this.fbo.setSize( width, height );
33 | 
34 | 	this.orthoQuad.scale.set( width, height, 1 );
35 | 
36 | 	this.orthoCamera.left   = - width / 2;
37 | 	this.orthoCamera.right  =   width / 2;
38 | 	this.orthoCamera.top    =   height / 2;
39 | 	this.orthoCamera.bottom = - height / 2;
40 | 	this.orthoCamera.updateProjectionMatrix();
41 | 
42 | }
43 | 


--------------------------------------------------------------------------------
/js/isMobile.min.js:
--------------------------------------------------------------------------------
1 | !function(a){var b=/iPhone/i,c=/iPod/i,d=/iPad/i,e=/(?=.*\bAndroid\b)(?=.*\bMobile\b)/i,f=/Android/i,g=/(?=.*\bAndroid\b)(?=.*\bSD4930UR\b)/i,h=/(?=.*\bAndroid\b)(?=.*\b(?:KFOT|KFTT|KFJWI|KFJWA|KFSOWI|KFTHWI|KFTHWA|KFAPWI|KFAPWA|KFARWI|KFASWI|KFSAWI|KFSAWA)\b)/i,i=/Windows Phone/i,j=/(?=.*\bWindows\b)(?=.*\bARM\b)/i,k=/BlackBerry/i,l=/BB10/i,m=/Opera Mini/i,n=/(CriOS|Chrome)(?=.*\bMobile\b)/i,o=/(?=.*\bFirefox\b)(?=.*\bMobile\b)/i,p=new RegExp("(?:Nexus 7|BNTV250|Kindle Fire|Silk|GT-P1000)","i"),q=function(a,b){return a.test(b)},r=function(a){var r=a||navigator.userAgent,s=r.split("[FBAN");if("undefined"!=typeof s[1]&&(r=s[0]),s=r.split("Twitter"),"undefined"!=typeof s[1]&&(r=s[0]),this.apple={phone:q(b,r),ipod:q(c,r),tablet:!q(b,r)&&q(d,r),device:q(b,r)||q(c,r)||q(d,r)},this.amazon={phone:q(g,r),tablet:!q(g,r)&&q(h,r),device:q(g,r)||q(h,r)},this.android={phone:q(g,r)||q(e,r),tablet:!q(g,r)&&!q(e,r)&&(q(h,r)||q(f,r)),device:q(g,r)||q(h,r)||q(e,r)||q(f,r)},this.windows={phone:q(i,r),tablet:q(j,r),device:q(i,r)||q(j,r)},this.other={blackberry:q(k,r),blackberry10:q(l,r),opera:q(m,r),firefox:q(o,r),chrome:q(n,r),device:q(k,r)||q(l,r)||q(m,r)||q(o,r)||q(n,r)},this.seven_inch=q(p,r),this.any=this.apple.device||this.android.device||this.windows.device||this.other.device||this.seven_inch,this.phone=this.apple.phone||this.android.phone||this.windows.phone,this.tablet=this.apple.tablet||this.android.tablet||this.windows.tablet,"undefined"==typeof window)return this},s=function(){var a=new r;return a.Class=r,a};"undefined"!=typeof module&&module.exports&&"undefined"==typeof window?module.exports=r:"undefined"!=typeof module&&module.exports&&"undefined"!=typeof window?module.exports=s():"function"==typeof define&&define.amd?define("isMobile",[],a.isMobile=s()):a.isMobile=s()}(this);


--------------------------------------------------------------------------------
/js/perlin.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * A speed-improved perlin and simplex noise algorithms for 2D.
  3 |  *
  4 |  * Based on example code by Stefan Gustavson (stegu@itn.liu.se).
  5 |  * Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
  6 |  * Better rank ordering method by Stefan Gustavson in 2012.
  7 |  * Converted to Javascript by Joseph Gentle.
  8 |  *
  9 |  * Version 2012-03-09
 10 |  *
 11 |  * This code was placed in the public domain by its original author,
 12 |  * Stefan Gustavson. You may use it as you see fit, but
 13 |  * attribution is appreciated.
 14 |  *
 15 |  */
 16 | 
 17 | (function(global){
 18 |   var module = global.noise = {};
 19 | 
 20 |   function Grad(x, y, z) {
 21 |     this.x = x; this.y = y; this.z = z;
 22 |   }
 23 | 
 24 |   Grad.prototype.dot2 = function(x, y) {
 25 |     return this.x*x + this.y*y;
 26 |   };
 27 | 
 28 |   Grad.prototype.dot3 = function(x, y, z) {
 29 |     return this.x*x + this.y*y + this.z*z;
 30 |   };
 31 | 
 32 |   var grad3 = [new Grad(1,1,0),new Grad(-1,1,0),new Grad(1,-1,0),new Grad(-1,-1,0),
 33 |                new Grad(1,0,1),new Grad(-1,0,1),new Grad(1,0,-1),new Grad(-1,0,-1),
 34 |                new Grad(0,1,1),new Grad(0,-1,1),new Grad(0,1,-1),new Grad(0,-1,-1)];
 35 | 
 36 |   var p = [151,160,137,91,90,15,
 37 |   131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,
 38 |   190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,
 39 |   88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166,
 40 |   77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,
 41 |   102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196,
 42 |   135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123,
 43 |   5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,
 44 |   223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9,
 45 |   129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228,
 46 |   251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107,
 47 |   49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254,
 48 |   138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
 49 |   // To remove the need for index wrapping, double the permutation table length
 50 |   var perm = new Array(512);
 51 |   var gradP = new Array(512);
 52 | 
 53 |   // This isn't a very good seeding function, but it works ok. It supports 2^16
 54 |   // different seed values. Write something better if you need more seeds.
 55 |   module.seed = function(seed) {
 56 |     if(seed > 0 && seed < 1) {
 57 |       // Scale the seed out
 58 |       seed *= 65536;
 59 |     }
 60 | 
 61 |     seed = Math.floor(seed);
 62 |     if(seed < 256) {
 63 |       seed |= seed << 8;
 64 |     }
 65 | 
 66 |     for(var i = 0; i < 256; i++) {
 67 |       var v;
 68 |       if (i & 1) {
 69 |         v = p[i] ^ (seed & 255);
 70 |       } else {
 71 |         v = p[i] ^ ((seed>>8) & 255);
 72 |       }
 73 | 
 74 |       perm[i] = perm[i + 256] = v;
 75 |       gradP[i] = gradP[i + 256] = grad3[v % 12];
 76 |     }
 77 |   };
 78 | 
 79 |   module.seed(0);
 80 | 
 81 |   /*
 82 |   for(var i=0; i<256; i++) {
 83 |     perm[i] = perm[i + 256] = p[i];
 84 |     gradP[i] = gradP[i + 256] = grad3[perm[i] % 12];
 85 |   }*/
 86 | 
 87 |   // Skewing and unskewing factors for 2, 3, and 4 dimensions
 88 |   var F2 = 0.5*(Math.sqrt(3)-1);
 89 |   var G2 = (3-Math.sqrt(3))/6;
 90 | 
 91 |   var F3 = 1/3;
 92 |   var G3 = 1/6;
 93 | 
 94 |   // 2D simplex noise
 95 |   module.simplex2 = function(xin, yin) {
 96 |     var n0, n1, n2; // Noise contributions from the three corners
 97 |     // Skew the input space to determine which simplex cell we're in
 98 |     var s = (xin+yin)*F2; // Hairy factor for 2D
 99 |     var i = Math.floor(xin+s);
100 |     var j = Math.floor(yin+s);
101 |     var t = (i+j)*G2;
102 |     var x0 = xin-i+t; // The x,y distances from the cell origin, unskewed.
103 |     var y0 = yin-j+t;
104 |     // For the 2D case, the simplex shape is an equilateral triangle.
105 |     // Determine which simplex we are in.
106 |     var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
107 |     if(x0>y0) { // lower triangle, XY order: (0,0)->(1,0)->(1,1)
108 |       i1=1; j1=0;
109 |     } else {    // upper triangle, YX order: (0,0)->(0,1)->(1,1)
110 |       i1=0; j1=1;
111 |     }
112 |     // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
113 |     // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
114 |     // c = (3-sqrt(3))/6
115 |     var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
116 |     var y1 = y0 - j1 + G2;
117 |     var x2 = x0 - 1 + 2 * G2; // Offsets for last corner in (x,y) unskewed coords
118 |     var y2 = y0 - 1 + 2 * G2;
119 |     // Work out the hashed gradient indices of the three simplex corners
120 |     i &= 255;
121 |     j &= 255;
122 |     var gi0 = gradP[i+perm[j]];
123 |     var gi1 = gradP[i+i1+perm[j+j1]];
124 |     var gi2 = gradP[i+1+perm[j+1]];
125 |     // Calculate the contribution from the three corners
126 |     var t0 = 0.5 - x0*x0-y0*y0;
127 |     if(t0<0) {
128 |       n0 = 0;
129 |     } else {
130 |       t0 *= t0;
131 |       n0 = t0 * t0 * gi0.dot2(x0, y0);  // (x,y) of grad3 used for 2D gradient
132 |     }
133 |     var t1 = 0.5 - x1*x1-y1*y1;
134 |     if(t1<0) {
135 |       n1 = 0;
136 |     } else {
137 |       t1 *= t1;
138 |       n1 = t1 * t1 * gi1.dot2(x1, y1);
139 |     }
140 |     var t2 = 0.5 - x2*x2-y2*y2;
141 |     if(t2<0) {
142 |       n2 = 0;
143 |     } else {
144 |       t2 *= t2;
145 |       n2 = t2 * t2 * gi2.dot2(x2, y2);
146 |     }
147 |     // Add contributions from each corner to get the final noise value.
148 |     // The result is scaled to return values in the interval [-1,1].
149 |     return 70 * (n0 + n1 + n2);
150 |   };
151 | 
152 |   // 3D simplex noise
153 |   module.simplex3 = function(xin, yin, zin) {
154 |     var n0, n1, n2, n3; // Noise contributions from the four corners
155 | 
156 |     // Skew the input space to determine which simplex cell we're in
157 |     var s = (xin+yin+zin)*F3; // Hairy factor for 2D
158 |     var i = Math.floor(xin+s);
159 |     var j = Math.floor(yin+s);
160 |     var k = Math.floor(zin+s);
161 | 
162 |     var t = (i+j+k)*G3;
163 |     var x0 = xin-i+t; // The x,y distances from the cell origin, unskewed.
164 |     var y0 = yin-j+t;
165 |     var z0 = zin-k+t;
166 | 
167 |     // For the 3D case, the simplex shape is a slightly irregular tetrahedron.
168 |     // Determine which simplex we are in.
169 |     var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
170 |     var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
171 |     if(x0 >= y0) {
172 |       if(y0 >= z0)      { i1=1; j1=0; k1=0; i2=1; j2=1; k2=0; }
173 |       else if(x0 >= z0) { i1=1; j1=0; k1=0; i2=1; j2=0; k2=1; }
174 |       else              { i1=0; j1=0; k1=1; i2=1; j2=0; k2=1; }
175 |     } else {
176 |       if(y0 < z0)      { i1=0; j1=0; k1=1; i2=0; j2=1; k2=1; }
177 |       else if(x0 < z0) { i1=0; j1=1; k1=0; i2=0; j2=1; k2=1; }
178 |       else             { i1=0; j1=1; k1=0; i2=1; j2=1; k2=0; }
179 |     }
180 |     // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
181 |     // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
182 |     // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
183 |     // c = 1/6.
184 |     var x1 = x0 - i1 + G3; // Offsets for second corner
185 |     var y1 = y0 - j1 + G3;
186 |     var z1 = z0 - k1 + G3;
187 | 
188 |     var x2 = x0 - i2 + 2 * G3; // Offsets for third corner
189 |     var y2 = y0 - j2 + 2 * G3;
190 |     var z2 = z0 - k2 + 2 * G3;
191 | 
192 |     var x3 = x0 - 1 + 3 * G3; // Offsets for fourth corner
193 |     var y3 = y0 - 1 + 3 * G3;
194 |     var z3 = z0 - 1 + 3 * G3;
195 | 
196 |     // Work out the hashed gradient indices of the four simplex corners
197 |     i &= 255;
198 |     j &= 255;
199 |     k &= 255;
200 |     var gi0 = gradP[i+   perm[j+   perm[k   ]]];
201 |     var gi1 = gradP[i+i1+perm[j+j1+perm[k+k1]]];
202 |     var gi2 = gradP[i+i2+perm[j+j2+perm[k+k2]]];
203 |     var gi3 = gradP[i+ 1+perm[j+ 1+perm[k+ 1]]];
204 | 
205 |     // Calculate the contribution from the four corners
206 |     var t0 = 0.6 - x0*x0 - y0*y0 - z0*z0;
207 |     if(t0<0) {
208 |       n0 = 0;
209 |     } else {
210 |       t0 *= t0;
211 |       n0 = t0 * t0 * gi0.dot3(x0, y0, z0);  // (x,y) of grad3 used for 2D gradient
212 |     }
213 |     var t1 = 0.6 - x1*x1 - y1*y1 - z1*z1;
214 |     if(t1<0) {
215 |       n1 = 0;
216 |     } else {
217 |       t1 *= t1;
218 |       n1 = t1 * t1 * gi1.dot3(x1, y1, z1);
219 |     }
220 |     var t2 = 0.6 - x2*x2 - y2*y2 - z2*z2;
221 |     if(t2<0) {
222 |       n2 = 0;
223 |     } else {
224 |       t2 *= t2;
225 |       n2 = t2 * t2 * gi2.dot3(x2, y2, z2);
226 |     }
227 |     var t3 = 0.6 - x3*x3 - y3*y3 - z3*z3;
228 |     if(t3<0) {
229 |       n3 = 0;
230 |     } else {
231 |       t3 *= t3;
232 |       n3 = t3 * t3 * gi3.dot3(x3, y3, z3);
233 |     }
234 |     // Add contributions from each corner to get the final noise value.
235 |     // The result is scaled to return values in the interval [-1,1].
236 |     return 32 * (n0 + n1 + n2 + n3);
237 | 
238 |   };
239 | 
240 |   // ##### Perlin noise stuff
241 | 
242 |   function fade(t) {
243 |     return t*t*t*(t*(t*6-15)+10);
244 |   }
245 | 
246 |   function lerp(a, b, t) {
247 |     return (1-t)*a + t*b;
248 |   }
249 | 
250 |   // 2D Perlin Noise
251 |   module.perlin2 = function(x, y) {
252 |     // Find unit grid cell containing point
253 |     var X = Math.floor(x), Y = Math.floor(y);
254 |     // Get relative xy coordinates of point within that cell
255 |     x = x - X; y = y - Y;
256 |     // Wrap the integer cells at 255 (smaller integer period can be introduced here)
257 |     X = X & 255; Y = Y & 255;
258 | 
259 |     // Calculate noise contributions from each of the four corners
260 |     var n00 = gradP[X+perm[Y]].dot2(x, y);
261 |     var n01 = gradP[X+perm[Y+1]].dot2(x, y-1);
262 |     var n10 = gradP[X+1+perm[Y]].dot2(x-1, y);
263 |     var n11 = gradP[X+1+perm[Y+1]].dot2(x-1, y-1);
264 | 
265 |     // Compute the fade curve value for x
266 |     var u = fade(x);
267 | 
268 |     // Interpolate the four results
269 |     return lerp(
270 |         lerp(n00, n10, u),
271 |         lerp(n01, n11, u),
272 |        fade(y));
273 |   };
274 | 
275 |   // 3D Perlin Noise
276 |   module.perlin3 = function(x, y, z) {
277 |     // Find unit grid cell containing point
278 |     var X = Math.floor(x), Y = Math.floor(y), Z = Math.floor(z);
279 |     // Get relative xyz coordinates of point within that cell
280 |     x = x - X; y = y - Y; z = z - Z;
281 |     // Wrap the integer cells at 255 (smaller integer period can be introduced here)
282 |     X = X & 255; Y = Y & 255; Z = Z & 255;
283 | 
284 |     // Calculate noise contributions from each of the eight corners
285 |     var n000 = gradP[X+  perm[Y+  perm[Z  ]]].dot3(x,   y,     z);
286 |     var n001 = gradP[X+  perm[Y+  perm[Z+1]]].dot3(x,   y,   z-1);
287 |     var n010 = gradP[X+  perm[Y+1+perm[Z  ]]].dot3(x,   y-1,   z);
288 |     var n011 = gradP[X+  perm[Y+1+perm[Z+1]]].dot3(x,   y-1, z-1);
289 |     var n100 = gradP[X+1+perm[Y+  perm[Z  ]]].dot3(x-1,   y,   z);
290 |     var n101 = gradP[X+1+perm[Y+  perm[Z+1]]].dot3(x-1,   y, z-1);
291 |     var n110 = gradP[X+1+perm[Y+1+perm[Z  ]]].dot3(x-1, y-1,   z);
292 |     var n111 = gradP[X+1+perm[Y+1+perm[Z+1]]].dot3(x-1, y-1, z-1);
293 | 
294 |     // Compute the fade curve value for x, y, z
295 |     var u = fade(x);
296 |     var v = fade(y);
297 |     var w = fade(z);
298 | 
299 |     // Interpolate
300 |     return lerp(
301 |         lerp(
302 |           lerp(n000, n100, u),
303 |           lerp(n001, n101, u), w),
304 |         lerp(
305 |           lerp(n010, n110, u),
306 |           lerp(n011, n111, u), w),
307 |        v);
308 |   };
309 | 
310 | })(this);
311 | 


--------------------------------------------------------------------------------
/plasma-waves/index copy.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>TITLE - Codevember 2017</title>
  5 | 		<meta charset="utf-8">
  6 | 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | 
  8 | 		<link rel="stylesheet" type="text/css" href="../css/styles.css" media="screen" />
  9 | 		<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">
 10 | 
 11 | 	</head>
 12 | 	<body>
 13 | 
 14 | 		<div id="container"></div>
 15 | 		<div id="info" >
 16 | 			<p><a href="../n" >Previous</a> | <a href="../n" >Next</a></p>
 17 | 			<h1>#. TITLE</h1>
 18 | 			<p>Lorem ipsum</p>
 19 | 			<p id="moreDetails"><b>More details...</b></p>
 20 | 		</div>
 21 | 		<div id="details" class="hidden">
 22 | 			<div class="content" >
 23 | 				<h1>Details</h1>
 24 | 				<p>Lorem ipsum <a href="#" >dolor sit amet</a>.</p>
 25 | 				<a href="#" id="close-details">Close</a>
 26 | 			</div>
 27 | 		</div>
 28 | 
 29 | 		<script src="../js/Common.js"></script>
 30 | 		<script src="../js/three.min.js"></script>
 31 | 		<script src="../js/OrbitControls.js"></script>
 32 | 		<script src="../js/Perlin.js"></script>
 33 | 		<script src="../js/Maf.js"></script>
 34 | 
 35 | <script id="particle-vs" type="x-shader/x-vertex">
 36 | precision highp float;
 37 | 
 38 | attribute vec3 position;
 39 | attribute float vertexId;
 40 | attribute float size;
 41 | 
 42 | uniform mat4 modelMatrix;
 43 | uniform mat4 modelViewMatrix;
 44 | uniform mat4 projectionMatrix;
 45 | uniform vec3 vertices[ 3 ];
 46 | uniform vec2 uvs[ 3 ];
 47 | uniform vec3 lightPosition;
 48 | 
 49 | uniform vec2 dimensions;
 50 | uniform float scale;
 51 | uniform vec3 color;
 52 | 
 53 | varying vec2 vUv;
 54 | varying vec3 vColor;
 55 | varying float vSize;
 56 | 
 57 | const float PI = 3.14159265359;
 58 | 
 59 | vec3 hsv2rgb(vec3 c) {
 60 |   vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
 61 |   vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
 62 |   return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
 63 | }
 64 | 
 65 | void main() {
 66 | 
 67 | 	int id = int( vertexId );
 68 | 	vec3 v = vertices[ id ];
 69 | 	vec4 p = modelViewMatrix * vec4( position, 1. );
 70 | 	p.xyz += scale * v * size;
 71 | 
 72 | 	vSize = size;
 73 | 	vUv = uvs[ id ];
 74 | 	float l = 1. - ( length( lightPosition - position.xyz ) -.8 ) / 1.;
 75 | 	vColor = hsv2rgb( vec3( size, 1., 1. ) );//vec3( 2. * l );
 76 | 
 77 | 	gl_Position = projectionMatrix * p;
 78 | 
 79 | }
 80 | 
 81 | </script>
 82 | 
 83 | <script id="particle-fs" type="x-shader/x-vertex">
 84 | precision highp float;
 85 | 
 86 | varying vec2 vUv;
 87 | varying vec3 vColor;
 88 | varying float vSize;
 89 | 
 90 | uniform float opacity;
 91 | 
 92 | void main() {
 93 | 
 94 | 	vec2 barycenter = vec2( .5, .6666 );
 95 | 	gl_FragColor.rgb = vColor;
 96 | 	gl_FragColor.a = opacity * ( 1. - 3.5 * length( vUv - barycenter ) );
 97 | 
 98 | }
 99 | 
100 | </script>
101 | 
102 | <script>
103 | 
104 | 'use strict';
105 | 
106 | var container, renderer, camera, controls, scene;
107 | var mesh;
108 | 
109 | var helper;
110 | 
111 | var container = document.getElementById( 'container' );
112 | 
113 | var particles = [];
114 | var lightPosition = new THREE.Vector3( 1,1,1);
115 | var NUM_POINTS = 25000;
116 | 
117 | var halfAngle = new THREE.Vector3();
118 | var tmpCamPos = new THREE.Vector3();
119 | var tmpLightPos = new THREE.Vector3();
120 | var tmpVector = new THREE.Vector3();
121 | var numSlices = 1;
122 | var meshes = [];
123 | var batchSize = NUM_POINTS / numSlices;
124 | 
125 | function initScene() {
126 | 
127 | 	var t = new THREE.Vector4();
128 | 	/*for( var j = 0; j < NUM_POINTS; j++ ) {
129 | 		t.set( .5 - Math.random(), .5 - Math.random(), .5 - Math.random(), .5 + 2 * Math.random() );
130 | 		t.set( .5 - Math.random(), .5 - Math.random(), .5 - Math.random(), .5 + 2 * Math.random() );
131 | 		particles.push( t.clone() );
132 | 	}*/
133 | 	var l = 20;
134 | 	var r = 1;
135 | 	var t = 0;
136 | 	for( var j = 0; j < NUM_POINTS; j += l ) {
137 | 		var p = new THREE.Vector4( r * ( .5 - Math.random() ), r* ( .5 - Math.random() ), r* ( .5 - Math.random() ), 1 );
138 | 		for( var k = 0; k < l; k++ ) {
139 | 			tmpVector.copy( p ).multiplyScalar(.5);
140 | 			var inc = noiseFunc( tmpVector, t ).multiplyScalar( .5 );
141 | 			if( inc.length() > 1 ) inc.normalize();
142 | 			p.add( inc );
143 | 			p.w = 1 + k / l;
144 | 			particles.push( p.clone() );
145 | 		}
146 | 	}
147 | 
148 | 	var particleMaterial = new THREE.RawShaderMaterial( {
149 | 		uniforms:{
150 | 			lightPosition: { type: 'v3', value: lightPosition },
151 | 			scale: { type: 'f', value: .05 },
152 | 			opacity: { type: 'f', value: .05 },
153 | 			color: { type: 'c', value: new THREE.Color( 0x0 ) },
154 | 			vertices: { type: 'v3v', value: [
155 | 				new THREE.Vector3( -1, -1, 0 ),
156 | 				new THREE.Vector3(  1, -1, 0 ),
157 | 				new THREE.Vector3(  0,  1, 0 )
158 | 			]},
159 | 			uvs: { type: 'v2v', value: [
160 | 				new THREE.Vector3( 0, 1 ),
161 | 				new THREE.Vector3( 1, 1 ),
162 | 				new THREE.Vector3( .5, 0 )
163 | 			]}
164 | 		},
165 | 		vertexShader: document.getElementById( 'particle-vs' ).textContent,
166 | 		fragmentShader: document.getElementById( 'particle-fs' ).textContent,
167 | 		depthTest: false,
168 | 		depthWrite: false,
169 | 		transparent: true,
170 | 	} );
171 | 
172 | 
173 | 	for( var j = 0; j < numSlices; j++ ){
174 | 
175 | 		var geometry = new THREE.BufferGeometry();
176 | 		geometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( batchSize * 9 ), 3 ) );
177 | 		geometry.addAttribute( 'vertexId', new THREE.BufferAttribute( new Float32Array( batchSize * 3 ), 1 ) );
178 | 		geometry.addAttribute( 'size', new THREE.BufferAttribute( new Float32Array( batchSize * 3 ), 1 ) );
179 | 
180 | 		geometry.getAttribute( 'position' ).dynamic = true;
181 | 		geometry.getAttribute( 'size' ).dynamic = true;
182 | 
183 | 		for( var k = 0; k < batchSize; k++ ) {
184 | 			var v = particles[ j * batchSize + k ]
185 | 			geometry.attributes.position.array[ k * 9 + 0 ] = v.x;
186 | 			geometry.attributes.position.array[ k * 9 + 1 ] = v.y;
187 | 			geometry.attributes.position.array[ k * 9 + 2 ] = v.z;
188 | 
189 | 			geometry.attributes.position.array[ k * 9 + 3 ] = v.x;
190 | 			geometry.attributes.position.array[ k * 9 + 4 ] = v.y;
191 | 			geometry.attributes.position.array[ k * 9 + 5 ] = v.z;
192 | 
193 | 			geometry.attributes.position.array[ k * 9 + 6 ] = v.x;
194 | 			geometry.attributes.position.array[ k * 9 + 7 ] = v.y;
195 | 			geometry.attributes.position.array[ k * 9 + 8 ] = v.z;
196 | 
197 | 			geometry.attributes.vertexId.array[ k * 3 + 0 ] = 0;
198 | 			geometry.attributes.vertexId.array[ k * 3 + 1 ] = 1;
199 | 			geometry.attributes.vertexId.array[ k * 3 + 2 ] = 2;
200 | 
201 | 			geometry.attributes.size.array[ k * 3 + 0 ] = 1;
202 | 			geometry.attributes.size.array[ k * 3 + 1 ] = 1;
203 | 			geometry.attributes.size.array[ k * 3 + 2 ] = 1;
204 | 		}
205 | 		var points = new THREE.Mesh( geometry, particleMaterial );
206 | 		scene.add( points );
207 | 		meshes.push( points );
208 | 	}
209 | 
210 | 	var light = new THREE.Mesh(
211 | 	    new THREE.BoxBufferGeometry(.1,.1,.1),
212 | 	    new THREE.MeshBasicMaterial()
213 | 	);
214 | 	light.position.copy( lightPosition );
215 | 	//scene.add( light );
216 | 
217 | }
218 | 
219 | function noiseFunc0( v ){
220 | 
221 | 	var s  = noise.simplex3( v.x, v.y, v.z );
222 | 	var s1 = noise.simplex3( v.y - 19.1, v.z + 33.4, v.x + 47.2 );
223 | 	var s2 = noise.simplex3( v.z + 74.2, v.x - 124.5, v.y + 99.4 );
224 | 	return new THREE.Vector3( s , s1 , s2 );
225 | 
226 | }
227 | 
228 | function generateNoiseFunction() {
229 | 
230 | 	var a = Maf.randomInRange( -100, 100 );
231 | 	var b = Maf.randomInRange( -100, 100 );
232 | 	var c = Maf.randomInRange( -100, 100 );
233 | 
234 | 	var d = Maf.randomInRange( -100, 100 );
235 | 	var e = Maf.randomInRange( -100, 100 );
236 | 	var f = Maf.randomInRange( -100, 100 );
237 | 
238 | 	return function( v, t ) {
239 | 
240 | 		var s  = noise.simplex3( v.x + t, v.y, v.z );
241 | 		var s1 = noise.simplex3( v.y + a, v.z + b + t, v.x + c );
242 | 		var s2 = noise.simplex3( v.z + c, v.x + d + t, v.y + f );
243 | 		return new THREE.Vector3( s , s1 , s2 );
244 | 
245 | 	}
246 | 
247 | }
248 | 
249 | var noiseFunc = generateNoiseFunction();
250 | 
251 | function init() {
252 | 
253 | 	container = document.getElementById( 'container' );
254 | 
255 | 	scene = new THREE.Scene();
256 | 
257 | 	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, .1, 10000 );
258 | 	camera.target = new THREE.Vector3( 0, 0, 0 );
259 | 	camera.position.set( 0, 0, 4.3 );
260 | 	camera.lookAt( camera.target );
261 | 	scene.add( camera );
262 | 
263 | 	renderer = new THREE.WebGLRenderer( { antialias: true, preserveDrawingBuffer: true } );
264 | 	renderer.setPixelRatio( window.devicePixelRatio );
265 | 	renderer.setClearColor( 0,1);//0x261b1f, 1 );
266 | 	container.appendChild( renderer.domElement );
267 | 
268 | 	addCommonUI(renderer.domElement);
269 | 
270 | 	renderer.shadowMap.enabled = true;
271 | 	renderer.shadowMap.type = THREE.PCFShadowMap;
272 | 	renderer.sortObjects = false;
273 | 
274 | 	controls = new THREE.OrbitControls( camera, renderer.domElement );
275 | 
276 | 	initScene();
277 | 	onWindowResized();
278 | 
279 | 	window.addEventListener( 'resize', onWindowResized );
280 | 
281 | 	animate();
282 | 
283 | }
284 | 
285 | function onWindowResized( event ) {
286 | 
287 | 	var w = container.clientWidth;
288 | 	var h = container.clientHeight;
289 | 
290 | 	renderer.setSize( w, h );
291 | 	camera.aspect = w / h;
292 | 	camera.updateProjectionMatrix();
293 | 
294 | }
295 | 
296 | var dot = function() {
297 | 
298 | 	var tmpVector = new THREE.Vector3();
299 | 
300 | 	return function( a, b ) {
301 | 		tmpVector.copy( a );
302 | 		return tmpVector.dot( b );
303 | 	}
304 | 
305 | }();
306 | 
307 | function sortParticles() {
308 | 
309 | 	tmpCamPos.copy( camera.position ).normalize();
310 | 	tmpLightPos.copy( lightPosition ).normalize();
311 | 
312 | 	var renderOrder = 0;
313 | 	if( dot( tmpCamPos, tmpLightPos ) > 0 ) {
314 | 		renderOrder = 0;
315 | 		halfAngle.copy( tmpCamPos ).add( tmpLightPos ).normalize();
316 | 	} else {
317 | 		renderOrder = 1;
318 | 		halfAngle.copy( tmpCamPos ).multiplyScalar( -1 ).add( tmpLightPos ).normalize();
319 | 	}
320 | 
321 | 
322 | 	var sorted = [];
323 | 	particles.forEach( function( p, id ) {
324 | 		tmpVector.copy( p );
325 | 		var d = dot( tmpVector, halfAngle );
326 | 		sorted.push( { id: id, dot: d } );
327 | 	})
328 | 
329 | 	sorted.sort( function( a,b ) {
330 | 		return a.dot - b.dot;
331 | 	})
332 | 
333 | 	var geometry;
334 | 	var v;
335 | 	var ptr;
336 | 	var ptr2;
337 | 	for( var j = 0; j < numSlices; j++ ) {
338 | 		geometry = meshes[ j ].geometry;
339 | 		for( var k = 0; k < batchSize; k++ ) {
340 | 			ptr = j * batchSize + k;
341 | 			if( renderOrder === 0 ) ptr2 = sorted[ ptr ].id;
342 | 			else ptr2 = sorted[ sorted.length - 1 - ptr ].id;
343 | 			v = particles[ ptr2 ];
344 | 			geometry.attributes.position.array[ k * 9 + 0 ] = v.x;
345 | 			geometry.attributes.position.array[ k * 9 + 1 ] = v.y;
346 | 			geometry.attributes.position.array[ k * 9 + 2 ] = v.z;
347 | 
348 | 			geometry.attributes.position.array[ k * 9 + 3 ] = v.x;
349 | 			geometry.attributes.position.array[ k * 9 + 4 ] = v.y;
350 | 			geometry.attributes.position.array[ k * 9 + 5 ] = v.z;
351 | 
352 | 			geometry.attributes.position.array[ k * 9 + 6 ] = v.x;
353 | 			geometry.attributes.position.array[ k * 9 + 7 ] = v.y;
354 | 			geometry.attributes.position.array[ k * 9 + 8 ] = v.z;
355 | 
356 | 			geometry.attributes.size.array[ k * 3 + 0 ] = v.w;
357 | 			geometry.attributes.size.array[ k * 3 + 1 ] = v.w;
358 | 			geometry.attributes.size.array[ k * 3 + 2 ] = v.w;
359 | 		}
360 | 		geometry.attributes.position.needsUpdate = true;
361 | 		geometry.attributes.size.needsUpdate = true;
362 | 	}
363 | 
364 | }
365 | 
366 | function animate() {
367 | 
368 | 	requestAnimationFrame( animate );
369 | 
370 | 	controls.update();
371 | 
372 | 	/*var l = 20;
373 | 	var r = 1;
374 | 	var t = .000025 * performance.now();
375 | 	var tmpVector = new THREE.Vector3();
376 | 	for( var j = 0; j < NUM_POINTS; j += l ) {
377 | 		//var p = new THREE.Vector3( r * ( .5 - Math.random() ), r* ( .5 - Math.random() ), r* ( .5 - Math.random() ) );
378 | 		var p = particles[ j ].clone();
379 | 		for( var k = 1; k < l; k++ ) {
380 | 			tmpVector.copy( p ).multiplyScalar(.5);
381 | 			var inc = noiseFunc( tmpVector, t ).multiplyScalar( .5 );
382 | 			if( inc.length() > 1 ) inc.normalize();
383 | 			p.add( inc );
384 | 			p.w = 1 + k / l;
385 | 			particles[ j + k ].copy( p );
386 | 		}
387 | 	}*/
388 | 
389 | 	sortParticles();
390 | 
391 | 	renderer.render( scene, camera );
392 | 
393 | }
394 | 
395 | window.addEventListener( 'load', init );
396 | 
397 | </script>
398 | 
399 | 	</body>
400 | </html>
401 | 


--------------------------------------------------------------------------------
/plasma-waves/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>Plasma Waves - Codevember 2017</title>
  5 | 		<meta charset="utf-8">
  6 | 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | 
  8 | 		<link rel="stylesheet" type="text/css" href="../css/styles.css" media="screen" />
  9 | 		<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">
 10 | 
 11 | 	</head>
 12 | 	<body>
 13 | 
 14 | 		<div id="container"></div>
 15 | 		<div id="info" >
 16 | 			<p><a href="../sphere-carving" >Previous</a> | <a href="../chromeography" >Next</a></p>
 17 | 			<h1>6. Plasma Waves</h1>
 18 | 			<p>Experiment with sorting particles, set up with curl noise, and disturbed with another curl noise.</p>
 19 | 			<p><a href="#" id="generate" >Click here to generate a new one</a></p>
 20 | 			<p><b>Click or tap and drag</b> to move the camera, <b>scroll or zoom with two fingers</b> to zoom in and out.</p>			<p id="moreDetails"><b>More details...</b></p>
 21 | 		</div>
 22 | 		<div id="details" class="hidden">
 23 | 			<div class="content" >
 24 | 				<h1>Details</h1>
 25 | 				<p>Experiment with sorting particles, set up with curl noise, and disturbed with another curl noise.</p>
 26 | 				<p>Originally was going to be smoke particles, from <a href="http://developer.download.nvidia.com/assets/cuda/files/smokeParticles.pdf" >Volumetric Particle
 27 | Shadows</a>, but it ended up being this.</p>
 28 | 				<p>Built with <a href="threejs.org">three.js</a> and Perlin noise from <a href="https://github.com/josephg/noisejs" rel="external" >noisejs</a>.</p>
 29 | 				<p>Code available on <a href="https://github.com/spite/codevember-2017/tree/master/plasma-waves" >GitHub</a>.</p>
 30 | 				<a href="#" id="close-details">Close</a>
 31 | 			</div>
 32 | 		</div>
 33 | 
 34 | 		<script src="../js/Common.js"></script>
 35 | 		<script src="../js/three.min.js"></script>
 36 | 		<script src="../js/OrbitControls.js"></script>
 37 | 		<script src="../js/perlin.js"></script>
 38 | 		<script src="../js/Maf.js"></script>
 39 | 		<script src="../js/isMobile.min.js"></script>
 40 | 
 41 | <script type="x-shader/x-vertex" id="ortho-vs" >
 42 | precision highp float;
 43 | attribute vec3 position;
 44 | attribute vec2 uv;
 45 | uniform mat4 modelViewMatrix;
 46 | uniform mat4 projectionMatrix;
 47 | varying vec2 vUv;
 48 | void main() {
 49 | 	vUv = uv;
 50 | 	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1. );
 51 | }
 52 | </script>
 53 | 
 54 | 
 55 | <script id="backdrop-fs" type="x-shader/x-fragment">
 56 | precision highp float;
 57 | 
 58 | varying vec2 vUv;
 59 | 
 60 | uniform vec3 top;
 61 | uniform vec3 bottom;
 62 | 
 63 | float random(vec2 n, float offset ){
 64 | 	return .5 - fract(sin(dot(n.xy + vec2( offset, 0. ), vec2(12.9898, 78.233)))* 43758.5453);
 65 | }
 66 | 
 67 | void main() {
 68 | 	gl_FragColor = vec4( mix( vec3(40.)/255., vec3(20.)/255., vUv.y ), 1.);
 69 |  	gl_FragColor += vec4( vec3( .01 * random( vUv, 0. ) ), 1. );
 70 | }
 71 | </script>
 72 | 
 73 | <script id="particle-vs" type="x-shader/x-vertex">
 74 | precision highp float;
 75 | 
 76 | attribute vec3 position;
 77 | attribute float vertexId;
 78 | attribute float size;
 79 | 
 80 | uniform mat4 modelMatrix;
 81 | uniform mat4 modelViewMatrix;
 82 | uniform mat4 projectionMatrix;
 83 | uniform vec3 vertices[ 3 ];
 84 | uniform vec2 uvs[ 3 ];
 85 | uniform vec3 lightPosition;
 86 | 
 87 | uniform vec2 dimensions;
 88 | uniform float scale;
 89 | uniform vec3 color;
 90 | 
 91 | varying vec2 vUv;
 92 | varying vec3 vColor;
 93 | varying float vSize;
 94 | 
 95 | const float PI = 3.14159265359;
 96 | 
 97 | vec3 hsv2rgb(vec3 c) {
 98 |   vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
 99 |   vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
100 |   return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
101 | }
102 | 
103 | void main() {
104 | 
105 | 	int id = int( vertexId );
106 | 	vec3 v = vertices[ id ];
107 | 	vec4 p = modelViewMatrix * vec4( position, 1. );
108 | 	p.xyz += scale * v * size;
109 | 
110 | 	vSize = size;
111 | 	vUv = uvs[ id ];
112 | 	float l = 1. - ( length( lightPosition - position.xyz ) -.8 ) / 1.;
113 | 	vColor = hsv2rgb( vec3( .5 * size, 1., 1. ) );//vec3( 2. * l );
114 | 
115 | 	gl_Position = projectionMatrix * p;
116 | 
117 | }
118 | 
119 | </script>
120 | 
121 | <script id="particle-fs" type="x-shader/x-vertex">
122 | precision highp float;
123 | 
124 | varying vec2 vUv;
125 | varying vec3 vColor;
126 | varying float vSize;
127 | 
128 | uniform float opacity;
129 | 
130 | void main() {
131 | 
132 | 	vec2 barycenter = vec2( .5, .6666 );
133 | 	float d = smoothstep( .5, .55, 1. - 2. * length( vUv - barycenter ) );
134 | 	float a = 1. - smoothstep( .9, 1., 5. * length( vUv - barycenter ) );
135 | 	//if( d <= 0. || a * opacity <= 0. ) discard;
136 | 	gl_FragColor = vec4( vColor, .5 * d * opacity );
137 | 	gl_FragColor.a = opacity * ( 1. - 3.5 * length( vUv - barycenter ) );
138 | 
139 | }
140 | 
141 | </script>
142 | 
143 | <script>
144 | 
145 | 'use strict';
146 | 
147 | var container, renderer, camera, controls, scene;
148 | var mesh;
149 | 
150 | var helper;
151 | 
152 | var container = document.getElementById( 'container' );
153 | 
154 | var particles = [];
155 | var base = [];
156 | var lightPosition = new THREE.Vector3( 1,1,1);
157 | var NUM_POINTS = isMobile.any?10000:25000;
158 | 
159 | var halfAngle = new THREE.Vector3();
160 | var tmpCamPos = new THREE.Vector3();
161 | var tmpLightPos = new THREE.Vector3();
162 | var tmpVector = new THREE.Vector3();
163 | var numSlices = 10;
164 | var meshes = [];
165 | var batchSize = NUM_POINTS / numSlices;
166 | var backdrop;
167 | 
168 | var funcs = [
169 | 	[74.51214174553195, 76.46362999277221, 70.36038981251878, -67.14031243600527, -17.613196891616084, -39.83080533905654],
170 | 	[-67.25713379627214,-30.990234719283237,50.387967864983665,-42.52547938083211,94.51583454649355,-65.69789717406226],
171 | 	[-53.380410001610954,84.45779391157623,74.83172310252226,-99.67348110585826,-75.63953402188895,-51.75312432560659]
172 | ];
173 | 
174 | function createObject() {
175 | 
176 | 	var t = new THREE.Vector4();
177 | 	/*for( var j = 0; j < NUM_POINTS; j++ ) {
178 | 		t.set( .5 - Math.random(), .5 - Math.random(), .5 - Math.random(), .5 + 2 * Math.random() );
179 | 		t.set( .5 - Math.random(), .5 - Math.random(), .5 - Math.random(), .5 + 2 * Math.random() );
180 | 		particles.push( t.clone() );
181 | 	}*/
182 | 	var l = 20;
183 | 	var r = .5;
184 | 	var ptr = 0;
185 | 	for( var j = 0; j < NUM_POINTS; j+= l ) {
186 | 		var p = new THREE.Vector3( r * ( .5 - Math.random() ), r* ( .5 - Math.random() ), r* ( .5 - Math.random() ) );
187 | 		for( var k = 0; k < l; k++ ) {
188 | 			var inc = noiseFunc( p.clone().multiplyScalar( .5 ) ).normalize().multiplyScalar( .5 );
189 | 			p.add( inc );
190 | 			var s = 2 * ( 1. - ( k / l ) );
191 | 			var s = .1 * ( 2 * l - k );
192 | 			t.set( p.x, p.y, p.z, s );
193 | 			particles[ ptr ].copy( t );
194 | 			base[ptr].copy(t);
195 | 			ptr++;
196 | 		}
197 | 	}
198 | 
199 | }
200 | 
201 | function initScene() {
202 | 
203 | 	var t = new THREE.Vector4();
204 | 	/*for( var j = 0; j < NUM_POINTS; j++ ) {
205 | 		t.set( .5 - Math.random(), .5 - Math.random(), .5 - Math.random(), .5 + 2 * Math.random() );
206 | 		t.set( .5 - Math.random(), .5 - Math.random(), .5 - Math.random(), .5 + 2 * Math.random() );
207 | 		particles.push( t.clone() );
208 | 	}*/
209 | 	var l = 20;
210 | 	var r= .5;
211 | 	for( var j = 0; j < NUM_POINTS; j+= l ) {
212 | 		var p = new THREE.Vector3( r * ( .5 - Math.random() ), r* ( .5 - Math.random() ), r* ( .5 - Math.random() ) );
213 | 		for( var k = 0; k < l; k++ ) {
214 | 			particles.push( t.clone() );
215 | 			base.push( t.clone() );
216 | 		}
217 | 	}
218 | 
219 | 	createObject();
220 | 
221 | 	var particleMaterial = new THREE.RawShaderMaterial( {
222 | 		uniforms:{
223 | 			lightPosition: { type: 'v3', value: lightPosition },
224 | 			scale: { type: 'f', value: .05 },
225 | 			opacity: { type: 'f', value: .1 },
226 | 			color: { type: 'c', value: new THREE.Color( 0x0 ) },
227 | 			vertices: { type: 'v3v', value: [
228 | 				new THREE.Vector3( -1, -1, 0 ),
229 | 				new THREE.Vector3(  1, -1, 0 ),
230 | 				new THREE.Vector3(  0,  1, 0 )
231 | 			]},
232 | 			uvs: { type: 'v2v', value: [
233 | 				new THREE.Vector3( 0, 1 ),
234 | 				new THREE.Vector3( 1, 1 ),
235 | 				new THREE.Vector3( .5, 0 )
236 | 			]}
237 | 		},
238 | 		vertexShader: document.getElementById( 'particle-vs' ).textContent,
239 | 		fragmentShader: document.getElementById( 'particle-fs' ).textContent,
240 | 		depthTest: false,
241 | 		depthWrite: false,
242 | 		transparent: true,
243 | 	} );
244 | 
245 | 
246 | 	for( var j = 0; j < numSlices; j++ ){
247 | 
248 | 		var geometry = new THREE.BufferGeometry();
249 | 		geometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( batchSize * 9 ), 3 ) );
250 | 		geometry.addAttribute( 'vertexId', new THREE.BufferAttribute( new Float32Array( batchSize * 3 ), 1 ) );
251 | 		geometry.addAttribute( 'size', new THREE.BufferAttribute( new Float32Array( batchSize * 3 ), 1 ) );
252 | 
253 | 		geometry.getAttribute( 'position' ).dynamic = true;
254 | 		geometry.getAttribute( 'size' ).dynamic = true;
255 | 
256 | 		for( var k = 0; k < batchSize; k++ ) {
257 | 			var v = particles[ j * batchSize + k ]
258 | 			geometry.attributes.position.array[ k * 9 + 0 ] = v.x;
259 | 			geometry.attributes.position.array[ k * 9 + 1 ] = v.y;
260 | 			geometry.attributes.position.array[ k * 9 + 2 ] = v.z;
261 | 
262 | 			geometry.attributes.position.array[ k * 9 + 3 ] = v.x;
263 | 			geometry.attributes.position.array[ k * 9 + 4 ] = v.y;
264 | 			geometry.attributes.position.array[ k * 9 + 5 ] = v.z;
265 | 
266 | 			geometry.attributes.position.array[ k * 9 + 6 ] = v.x;
267 | 			geometry.attributes.position.array[ k * 9 + 7 ] = v.y;
268 | 			geometry.attributes.position.array[ k * 9 + 8 ] = v.z;
269 | 
270 | 			geometry.attributes.vertexId.array[ k * 3 + 0 ] = 0;
271 | 			geometry.attributes.vertexId.array[ k * 3 + 1 ] = 1;
272 | 			geometry.attributes.vertexId.array[ k * 3 + 2 ] = 2;
273 | 
274 | 			geometry.attributes.size.array[ k * 3 + 0 ] = 1;
275 | 			geometry.attributes.size.array[ k * 3 + 1 ] = 1;
276 | 			geometry.attributes.size.array[ k * 3 + 2 ] = 1;
277 | 		}
278 | 		var points = new THREE.Mesh( geometry, particleMaterial );
279 | 		scene.add( points );
280 | 		meshes.push( points );
281 | 	}
282 | 
283 | 	var light = new THREE.Mesh(
284 | 	    new THREE.BoxBufferGeometry(.1,.1,.1),
285 | 	    new THREE.MeshBasicMaterial()
286 | 	);
287 | 	light.position.copy( lightPosition );
288 | 	//scene.add( light );
289 | 
290 | 	backdrop = new THREE.Mesh(
291 | 		new THREE.IcosahedronGeometry(3,4),
292 | 		new THREE.RawShaderMaterial( {
293 | 		uniforms: {
294 | 				top: { type: 'c', value: new THREE.Color().setHex(0xe28929),
295 | 				bottom: { type: 'c', value: new THREE.Color().setHex(0xff00ff)}}
296 | 			},
297 | 			vertexShader: document.getElementById('ortho-vs').textContent,
298 | 			fragmentShader: document.getElementById('backdrop-fs').textContent,
299 | 			depthWrite: false,
300 | 			side: THREE.BackSide
301 | 		} ),
302 | 	)
303 | 	scene.add( backdrop );
304 | 
305 | }
306 | 
307 | function noiseFunc0( v ){
308 | 
309 | 	var s  = noise.simplex3( v.x, v.y, v.z );
310 | 	var s1 = noise.simplex3( v.y - 19.1, v.z + 33.4, v.x + 47.2 );
311 | 	var s2 = noise.simplex3( v.z + 74.2, v.x - 124.5, v.y + 99.4 );
312 | 	return new THREE.Vector3( s , s1 , s2 );
313 | 
314 | }
315 | 
316 | function generateNoiseFunction(preset) {
317 | 
318 | 	var a = Maf.randomInRange( -100, 100 );
319 | 	var b = Maf.randomInRange( -100, 100 );
320 | 	var c = Maf.randomInRange( -100, 100 );
321 | 
322 | 	var d = Maf.randomInRange( -100, 100 );
323 | 	var e = Maf.randomInRange( -100, 100 );
324 | 	var f = Maf.randomInRange( -100, 100 );
325 | 
326 | 	if( preset ) {
327 | 		a = preset[ 0 ]; b = preset[ 1 ]; c = preset[ 2 ];
328 | 		d = preset[ 3 ]; e = preset[ 4 ]; f = preset[ 5 ];
329 | 	}
330 | 
331 | 	console.log(a,b,c,d,e,f);
332 | 
333 | 	return function( v, t ) {
334 | 
335 | 		t = t || 0;
336 | 		var s  = noise.simplex3( v.x + t, v.y, v.z );
337 | 		var s1 = noise.simplex3( v.y + a, v.z + b + t, v.x + c );
338 | 		var s2 = noise.simplex3( v.z + c, v.x + d, v.y + f + t );
339 | 		return new THREE.Vector3( s , s1 , s2 );
340 | 
341 | 	}
342 | 
343 | }
344 | 
345 | var noiseFunc = generateNoiseFunction( funcs[ Math.floor( Math.random() * funcs.length ) ] );
346 | 
347 | function init() {
348 | 
349 | 	container = document.getElementById( 'container' );
350 | 
351 | 	scene = new THREE.Scene();
352 | 
353 | 	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, .1, 10000 );
354 | 	camera.target = new THREE.Vector3( 0, 0, 0 );
355 | 	camera.position.set( 0, 0, 4.3 );
356 | 	camera.lookAt( camera.target );
357 | 	scene.add( camera );
358 | 
359 | 	renderer = new THREE.WebGLRenderer( { antialias: true, preserveDrawingBuffer: true } );
360 | 	renderer.setPixelRatio( window.devicePixelRatio );
361 | 	renderer.setClearColor( 0, 1 );
362 | 	container.appendChild( renderer.domElement );
363 | 
364 | 	addCommonUI(renderer.domElement);
365 | 
366 | 	renderer.shadowMap.enabled = true;
367 | 	renderer.shadowMap.type = THREE.PCFShadowMap;
368 | 	renderer.sortObjects = false;
369 | 
370 | 	controls = new THREE.OrbitControls( camera, renderer.domElement );
371 | 
372 | 	initScene();
373 | 	onWindowResized();
374 | 
375 | 	document.getElementById( 'generate' ).addEventListener( 'click', function() {
376 | 		noiseFunc = generateNoiseFunction();
377 | 		createObject();
378 | 	});
379 | 
380 | 	window.addEventListener( 'resize', onWindowResized );
381 | 
382 | 	animate();
383 | 
384 | }
385 | 
386 | function onWindowResized( event ) {
387 | 
388 | 	var w = container.clientWidth;
389 | 	var h = container.clientHeight;
390 | 
391 | 	renderer.setSize( w, h );
392 | 	camera.aspect = w / h;
393 | 	camera.updateProjectionMatrix();
394 | 
395 | }
396 | 
397 | var dot = function() {
398 | 
399 | 	var tmpVector = new THREE.Vector3();
400 | 
401 | 	return function( a, b ) {
402 | 		tmpVector.copy( a );
403 | 		return tmpVector.dot( b );
404 | 	}
405 | 
406 | }();
407 | 
408 | function sortParticles() {
409 | 
410 | 	tmpCamPos.copy( camera.position ).normalize();
411 | 	tmpLightPos.copy( lightPosition ).normalize();
412 | 
413 | 	var renderOrder = 0;
414 | 	if( dot( tmpCamPos, tmpLightPos ) > 0 ) {
415 | 		renderOrder = 0;
416 | 		halfAngle.copy( tmpCamPos ).add( tmpLightPos ).normalize();
417 | 	} else {
418 | 		renderOrder = 1;
419 | 		halfAngle.copy( tmpCamPos ).multiplyScalar( -1 ).add( tmpLightPos ).normalize();
420 | 	}
421 | 
422 | 	var t = .0001 * performance.now();
423 | 	particles.forEach( function( p, id ) {
424 | 		var b = base[ id ];
425 | 		particles[ id ].copy( b );
426 | 		var s = .25;
427 | 		var inc = noiseFunc( new THREE.Vector3( s * b.x, s * b.y, s * b.z ), t );
428 | 		particles[ id ].add( new THREE.Vector4( inc.x, inc.y, inc.z, 0 ) );
429 | 	});
430 | 
431 | 	var sorted = [];
432 | 	particles.forEach( function( p, id ) {
433 | 		tmpVector.copy( p );
434 | 		var d = dot( tmpVector, halfAngle );
435 | 		sorted.push( { id: id, dot: d } );
436 | 	})
437 | 
438 | 	sorted.sort( function( a,b ) {
439 | 		return a.dot - b.dot;
440 | 	})
441 | 
442 | 	var geometry;
443 | 	var v;
444 | 	var ptr;
445 | 	var ptr2;
446 | 	for( var j = 0; j < numSlices; j++ ) {
447 | 		geometry = meshes[ j ].geometry;
448 | 		for( var k = 0; k < batchSize; k++ ) {
449 | 			ptr = j * batchSize + k;
450 | 			if( renderOrder === 0 ) ptr2 = sorted[ ptr ].id;
451 | 			else ptr2 = sorted[ sorted.length - 1 - ptr ].id;
452 | 			v = particles[ ptr2 ];
453 | 			geometry.attributes.position.array[ k * 9 + 0 ] = v.x;
454 | 			geometry.attributes.position.array[ k * 9 + 1 ] = v.y;
455 | 			geometry.attributes.position.array[ k * 9 + 2 ] = v.z;
456 | 
457 | 			geometry.attributes.position.array[ k * 9 + 3 ] = v.x;
458 | 			geometry.attributes.position.array[ k * 9 + 4 ] = v.y;
459 | 			geometry.attributes.position.array[ k * 9 + 5 ] = v.z;
460 | 
461 | 			geometry.attributes.position.array[ k * 9 + 6 ] = v.x;
462 | 			geometry.attributes.position.array[ k * 9 + 7 ] = v.y;
463 | 			geometry.attributes.position.array[ k * 9 + 8 ] = v.z;
464 | 
465 | 			geometry.attributes.size.array[ k * 3 + 0 ] = v.w;
466 | 			geometry.attributes.size.array[ k * 3 + 1 ] = v.w;
467 | 			geometry.attributes.size.array[ k * 3 + 2 ] = v.w;
468 | 		}
469 | 		geometry.attributes.position.needsUpdate = true;
470 | 		geometry.attributes.size.needsUpdate = true;
471 | 	}
472 | 
473 | }
474 | 
475 | function animate() {
476 | 
477 | 	requestAnimationFrame( animate );
478 | 
479 | 	controls.update();
480 | 
481 | 	backdrop.position.copy( camera.position );
482 | 	sortParticles();
483 | 
484 | 	renderer.render( scene, camera );
485 | 
486 | }
487 | 
488 | window.addEventListener( 'load', init );
489 | 
490 | </script>
491 | 
492 | 	</body>
493 | </html>
494 | 


--------------------------------------------------------------------------------
/sdf-physics/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>TITLE - Codevember 2017</title>
  5 | 		<meta charset="utf-8">
  6 | 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | 
  8 | 		<link rel="stylesheet" type="text/css" href="../css/styles.css" media="screen" />
  9 | 		<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">
 10 | 
 11 | 	</head>
 12 | 	<body>
 13 | 
 14 | 		<div id="container"></div>
 15 | 		<div id="info" >
 16 | 			<p><a href="../n" >Previous</a> | <a href="../n" >Next</a></p>
 17 | 			<h1>#. TITLE</h1>
 18 | 			<p>Lorem ipsum</p>
 19 | 			<p id="moreDetails"><b>More details...</b></p>
 20 | 		</div>
 21 | 		<div id="details" class="hidden">
 22 | 			<div class="content" >
 23 | 				<h1>Details</h1>
 24 | 				<p>Lorem ipsum <a href="#" >dolor sit amet</a>.</p>
 25 | 				<a href="#" id="close-details">Close</a>
 26 | 			</div>
 27 | 		</div>
 28 | 
 29 | 		<script src="../js/Common.js"></script>
 30 | 		<script src="../js/three.min.js"></script>
 31 | 		<script src="../js/OrbitControls.js"></script>
 32 | 		<script src="../js/Maf.js"></script>
 33 | 		<script src="../js/THREE.PingPongTexture.js"></script>
 34 | 		<script src="../js/THREE.FBOHelper.js"></script>
 35 | 
 36 | <script type="x-shader/x-vertex" id="ortho-vs" >
 37 | precision highp float;
 38 | 
 39 | attribute vec3 position;
 40 | attribute vec2 uv;
 41 | 
 42 | uniform mat4 modelViewMatrix;
 43 | uniform mat4 projectionMatrix;
 44 | 
 45 | varying vec2 vUv;
 46 | 
 47 | void main() {
 48 | 	vUv = uv;
 49 | 	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1. );
 50 | }
 51 | </script>
 52 | 
 53 | <script type="x-shader/x-vertex" id="position-fs" >
 54 | precision highp float;
 55 | 
 56 | uniform sampler2D source;
 57 | uniform sampler2D velocities;
 58 | uniform sampler2D particles;
 59 | 
 60 | varying vec2 vUv;
 61 | 
 62 | void main() {
 63 | 
 64 | 	vec4 i = texture2D( particles, vUv );
 65 | 	vec4 v = texture2D( velocities, vUv );
 66 | 	vec4 p = texture2D( source, vUv );
 67 | 	if( v.a == 100. ) {
 68 | 		p.xyz = vec3((vUv.x-.5) * 100., 100., (vUv.y-.5)*100.);
 69 | 	}
 70 | 	gl_FragColor = p;
 71 | 	gl_FragColor.xyz += v.xyz;
 72 | 	//gl_FragColor.xyz = i.xyz;
 73 | 
 74 | }
 75 | </script>
 76 | 
 77 | <script type="x-shader/x-vertex" id="velocity-fs" >
 78 | precision highp float;
 79 | 
 80 | uniform sampler2D source;
 81 | uniform sampler2D positions;
 82 | uniform sampler2D particles;
 83 | 
 84 | uniform vec4 spherePositions[10];
 85 | uniform vec4 cubePositions[10];
 86 | uniform vec4 cubeQuaternions[10];
 87 | uniform vec4 torusQuaternions[10];
 88 | uniform vec4 torusPositions[10];
 89 | 
 90 | varying vec2 vUv;
 91 | 
 92 | const float PI = 3.14159265359;
 93 | 
 94 | float hash( float n ) { // 0 - 1
 95 |     return fract(sin(n)*3538.5453);
 96 | }
 97 | 
 98 | vec3 randomSphereDir(vec2 rnd) {
 99 | 	float s = rnd.x*PI*2.;
100 | 	float t = rnd.y*2.-1.;
101 | 	return vec3(sin(s), cos(s), t) / sqrt(1.0 + t * t);
102 | }
103 | 
104 | vec3 randomHemisphereDir(vec3 dir, float i) {
105 | 	vec3 v = randomSphereDir( vec2(hash(i+1.), hash(i+2.)) );
106 | 	return v * sign(dot(v, dir));
107 | }
108 | 
109 | float sdSphere( vec3 p, float s ){
110 | 	return length(p)-s;
111 | }
112 | 
113 | float sdBox( vec3 p, vec3 b ) {
114 |   vec3 d = abs(p) - b;
115 |   return min(max(d.x,max(d.y,d.z)),0.0) + length(max(d,0.0));
116 | }
117 | 
118 | float sdTorus( vec3 p, vec2 t ) {
119 |   vec2 q = vec2(length(p.xz)-t.x,p.y);
120 |   return length(q)-t.y;
121 | }
122 | 
123 | vec3 rotateVector( vec4 quat, vec3 vec ){
124 | 	return vec + 2.0 * cross( cross( vec, quat.xyz ) + quat.w * vec, quat.xyz );
125 | }
126 | 
127 | vec3 calcBoxNormal(vec3 p, vec4 q, vec3 b, float e) {
128 |   const vec3 v1 = vec3( 1.0,-1.0,-1.0);
129 |   const vec3 v2 = vec3(-1.0,-1.0, 1.0);
130 |   const vec3 v3 = vec3(-1.0, 1.0,-1.0);
131 |   const vec3 v4 = vec3( 1.0, 1.0, 1.0);
132 | 
133 |   return normalize( v1 * sdBox( rotateVector( q, p + v1 * e ), b ) +
134 |                     v2 * sdBox( rotateVector( q, p + v2 * e ), b ) +
135 |                     v3 * sdBox( rotateVector( q, p + v3 * e ), b ) +
136 |                     v4 * sdBox( rotateVector( q, p + v4 * e ), b ) );
137 | }
138 | 
139 | vec3 calcTorusNormal(vec3 p, vec4 q, vec2 b, float e) {
140 |   const vec3 v1 = vec3( 1.0,-1.0,-1.0);
141 |   const vec3 v2 = vec3(-1.0,-1.0, 1.0);
142 |   const vec3 v3 = vec3(-1.0, 1.0,-1.0);
143 |   const vec3 v4 = vec3( 1.0, 1.0, 1.0);
144 | 
145 |   return normalize( v1 * sdTorus( rotateVector( q, p + v1 * e ), b ) +
146 |                     v2 * sdTorus( rotateVector( q, p + v2 * e ), b ) +
147 |                     v3 * sdTorus( rotateVector( q, p + v3 * e ), b ) +
148 |                     v4 * sdTorus( rotateVector( q, p + v4 * e ), b ) );
149 | }
150 | 
151 | float rand(vec2 co){
152 |     return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
153 | }
154 | 
155 | const float EPSILON = .001;
156 | 
157 | vec3 bounce( vec3 v, vec3 n ) {
158 | 	float scatter = 1.;
159 | 	float friction = .8;
160 | 	vec3 r = reflect(v,n);
161 | 	n = r;
162 | 	n += scatter * vec3( .5 - rand( vUv + v.xz ), .5 - rand( vUv + v.yz ),.5 - rand( vUv + v.zy ) );
163 | 	n = normalize(n);
164 | 	float l = length(v.xyz) * ( 1. - friction );
165 | 	return n * l;
166 | }
167 | 
168 | void main() {
169 | 
170 | 	vec4 i = texture2D( particles, vUv );
171 | 	vec4 v = texture2D( source, vUv );
172 | 	vec4 p = texture2D( positions, vUv );
173 | 	v.a -= .1;
174 | 	if( v.a <= 0. ) {
175 | 		v.xyz = vec3(0.);
176 | 		v.a = 100.;
177 | 	} else {
178 | 		v.y -= .0098 * (1.+length(vUv));//i.w;
179 | 	}
180 | 
181 | 	if( p.y + v.y < -100. ) {
182 | 		v.xyz = bounce( v.xyz, vec3(0.,1.,0.) );
183 | 	}
184 | 
185 | 	vec4 q;
186 | 
187 | 	/*for( int i = 0; i < 10; i++ ) {
188 | 		vec3 pp = spherePositions[i].xyz - ( p.xyz + v.xyz );
189 | 		float d = sdSphere( pp.xyz, spherePositions[i].w );
190 | 		if( d < EPSILON ) {
191 | 			float l = length(v.xyz);
192 | 			vec3 n = normalize(-pp.xyz);
193 | 			n += rand( vUv + pp.xz );
194 | 			n = normalize(n);
195 | 			v.xyz = n * l;
196 | 			//v.xyz = normalize(randomHemisphereDir(v.xyz, length(vUv)+length(p.xyz))) * l;
197 | 			continue;
198 | 		}
199 | 	}
200 | 
201 | 	for( int i = 0; i < 10; i++ ) {
202 | 		q = cubeQuaternions[i];
203 | 		vec3 b = vec3(.5 * cubePositions[i].w);
204 | 		vec3 pp = cubePositions[i].xyz - ( p.xyz + v.xyz );
205 | 		float d = sdBox( rotateVector( q, pp ), b);
206 | 		if( d < EPSILON ) {
207 | 			vec3 n = -calcBoxNormal( pp, q, b, EPSILON );
208 | 			n += rand( vUv + pp.xz );
209 | 			n = normalize(n);
210 | 			float l = length(v.xyz);
211 | 			v.xyz = n * l;
212 | 			continue;
213 | 		}
214 | 	}*/
215 | 
216 | 	for( int i = 0; i < 10; i++ ) {
217 | 		q = torusQuaternions[i];
218 | 		vec3 pp = torusPositions[i].xyz - ( p.xyz + v.xyz );
219 | 		vec2 b = vec2(10.,2.)*torusPositions[i].w;
220 | 		float d = sdTorus( rotateVector( q, pp ), b);
221 | 		if( d > 0. && d < EPSILON ) {
222 | 			vec3 n = -calcTorusNormal( pp, q, b, EPSILON );
223 | 			v.xyz = bounce( v.xyz, n );
224 | 			continue;
225 | 		}
226 | 		if( d < EPSILON ) {
227 | 			vec3 n = -calcTorusNormal( pp, q, b, EPSILON );
228 | 			v.xyz = 2. * bounce( v.xyz, n );
229 | 			continue;
230 | 		}
231 | 	}
232 | 
233 | 	gl_FragColor = v;
234 | 
235 | }
236 | </script>
237 | 
238 | <script id="particle-vs" type="x-shader/x-vertex">
239 | precision highp float;
240 | 
241 | attribute vec3 position;
242 | attribute vec3 offset;
243 | 
244 | uniform mat4 modelViewMatrix;
245 | uniform mat4 projectionMatrix;
246 | 
247 | uniform sampler2D positions;
248 | uniform sampler2D velocities;
249 | 
250 | vec2 rotate(vec2 v, float a) {
251 | 	float s = sin(a);
252 | 	float c = cos(a);
253 | 	mat2 m = mat2(c, -s, s, c);
254 | 	return m * v;
255 | }
256 | 
257 | const float PI = 3.14159265359;
258 | 
259 | void main(){
260 | 
261 | 	vec4 pp = texture2D( positions, offset.xy );
262 | 	vec4 v = texture2D( velocities, offset.xy );
263 | 	vec4 ppp = pp - v;
264 | 	pp = mix( ppp, pp, .5 );
265 | 
266 | 	vec4 mVP = modelViewMatrix * vec4( pp.xyz, 1.0 );
267 | 	/*vec4 d = modelViewMatrix * vec4( v.xyz, 0.0 );
268 | 	vec2 td = d.xy;//d.xy/d.w;
269 | 	float l = 4.;//length(td);
270 | 	td = normalize(td);
271 | 	float a = atan(td.y,td.x);
272 | 
273 | 	mVP.xy += rotate( position.xy * vec2(l,1.), a );*/
274 | 	mVP.xy += position.xy;
275 | 
276 | 	gl_Position = projectionMatrix * mVP;
277 | 
278 | }
279 | 
280 | </script>
281 | 
282 | <script id="particle-fs" type="x-shader/x-fragment">
283 | precision highp float;
284 | 
285 | void main() {
286 | 
287 | 	gl_FragColor = vec4(1.,1.,1.,.5);
288 | 
289 | }
290 | 
291 | </script>
292 | 
293 | <script>
294 | 
295 | 'use strict';
296 | 
297 | var container, renderer, camera, controls, scene;
298 | var mesh;
299 | 
300 | var helper;
301 | 
302 | var container = document.getElementById( 'container' );
303 | 
304 | var positionSim, velocitySim;
305 | var objects = { spheres: [], cubes: [], tori: [] };
306 | 
307 | function initScene() {
308 | 
309 | 	var width = 256;
310 | 	var height = 256;
311 | 
312 | 	var instances = width * height;
313 | 
314 | 	var positions = [];
315 | 	var offsets = [];
316 | 
317 | 	var r = 100;
318 | 	for ( var y = 0; y < height; y++ ) {
319 | 		for ( var x = 0; x < width; x++ ) {
320 | 			offsets.push( x/width,y/height,0 );
321 | 		}
322 | 	}
323 | 
324 | 	var geometry = new THREE.InstancedBufferGeometry();
325 | 	geometry.maxInstancedCount = instances;
326 | 
327 | 	var planeGeometry = new THREE.BufferGeometry().fromGeometry( new THREE.PlaneGeometry(.5,.5) );
328 | 
329 | 	geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( planeGeometry.attributes.position.array, 3 ) );
330 | 	geometry.addAttribute( 'offset', new THREE.InstancedBufferAttribute( new Float32Array( offsets ), 3 ) );
331 | 
332 | 	var material = new THREE.RawShaderMaterial( {
333 | 		uniforms: {
334 | 			positions: { value: null },
335 | 			velocities: { value: null },
336 | 		},
337 | 		vertexShader: document.getElementById( 'particle-vs' ).textContent,
338 | 		fragmentShader: document.getElementById( 'particle-fs' ).textContent,
339 | 		side: THREE.DoubleSide,
340 | 		transparent: true,
341 | 		wireframe: !true,
342 | 		//depthTest: false
343 | 		depthWrite: false
344 | 	} );
345 | 
346 | 	mesh = new THREE.Mesh( geometry, material );
347 | 	scene.add( mesh );
348 | 
349 | 	var r = 1000;
350 | 	var info = new Float32Array(width*height*4);
351 | 	for( var j = 0; j < info.length; j+=4 ) {
352 | 		info[ j + 0 ] = Maf.randomInRange(-r,r);
353 | 		info[ j + 1 ] = Maf.randomInRange(-r,r);
354 | 		info[ j + 2 ] = Maf.randomInRange(-r,r);
355 | 		info[ j + 3 ] = Maf.randomInRange(1,1);
356 | 	}
357 | 	var particleInfo = new THREE.DataTexture(info,width,height,THREE.RGBAFormat,THREE.FloatType);
358 | 
359 | 	var positionShader = new THREE.RawShaderMaterial( {
360 | 		uniforms:{
361 | 			source: { value: null },
362 | 			velocities: { value: null },
363 | 			particles: { value: particleInfo }
364 | 		},
365 | 		vertexShader: document.getElementById( 'ortho-vs' ).textContent,
366 | 		fragmentShader: document.getElementById( 'position-fs' ).textContent
367 | 	} );
368 | 
369 | 	positionSim = new PingPongTexture(renderer,positionShader,width,height,THREE.RGBAFormat,THREE.FloatType);
370 | 
371 | 	var spherePositions = [];
372 | 	var r = 50;
373 | 	for( var j = 0; j < 10; j++ ) {
374 | 		spherePositions.push(
375 | 		    new THREE.Vector4(
376 | 		    	Maf.randomInRange(-r,r),
377 | 		    	Maf.randomInRange(-r,r),
378 | 		    	Maf.randomInRange(-r,r),
379 | 		    	Maf.randomInRange(10,20)
380 | 		    )
381 | 		);
382 | 	}
383 | 
384 | 	var cubeQuaternions = [];
385 | 	var cubePositions = [];
386 | 	var r = 50;
387 | 	for( var j = 0; j < 10; j++ ) {
388 | 		cubeQuaternions.push(
389 | 		    new THREE.Vector4(
390 | 		    	Maf.randomInRange(-1,1),
391 | 		    	Maf.randomInRange(-1,1),
392 | 		    	Maf.randomInRange(-1,1),
393 | 		    	Maf.randomInRange(-1,1)
394 | 		    ).normalize()
395 | 		);
396 | 		cubePositions.push(
397 | 		    new THREE.Vector4(
398 | 		    	Maf.randomInRange(-r,r),
399 | 		    	Maf.randomInRange(-r,r),
400 | 		    	Maf.randomInRange(-r,r),
401 | 		    	Maf.randomInRange(20,30)
402 | 		    )
403 | 		);
404 | 	}
405 | 
406 | 	var torusQuaternions = [];
407 | 	var torusPositions = [];
408 | 	var r = 50;
409 | 	for( var j = 0; j < 10; j++ ) {
410 | 		torusQuaternions.push(
411 | 		    new THREE.Vector4(
412 | 		    	Maf.randomInRange(-1,1),
413 | 		    	Maf.randomInRange(-1,1),
414 | 		    	Maf.randomInRange(-1,1),
415 | 		    	Maf.randomInRange(-1,1)
416 | 		    ).normalize()
417 | 		);
418 | 		torusPositions.push(
419 | 		    new THREE.Vector4(
420 | 		    	Maf.randomInRange(-r,r),
421 | 		    	Maf.randomInRange(-r,r),
422 | 		    	Maf.randomInRange(-r,r),
423 | 		    	Maf.randomInRange(1,3)
424 | 		    )
425 | 		);
426 | 	}
427 | 
428 | 	var velocityShader = new THREE.RawShaderMaterial( {
429 | 		uniforms:{
430 | 			source: { value: null },
431 | 			positions: { value: null },
432 | 			spherePositions: { value: spherePositions },
433 | 			cubePositions: { value: cubePositions },
434 | 			cubeQuaternions: { value: cubeQuaternions },
435 | 			torusPositions: { value: torusPositions },
436 | 			torusQuaternions: { value: torusQuaternions },
437 | 			particles: { value: particleInfo }
438 | 		},
439 | 		vertexShader: document.getElementById( 'ortho-vs' ).textContent,
440 | 		fragmentShader: document.getElementById( 'velocity-fs' ).textContent
441 | 	} );
442 | 
443 | 	velocitySim = new PingPongTexture(renderer,velocityShader,width,height,THREE.RGBAFormat,THREE.FloatType);
444 | 
445 | 	helper.attach( positionSim.front, 'pos front');
446 | 	helper.attach( positionSim.back, 'pos back');
447 | 	helper.attach( velocitySim.front, 'vel front');
448 | 	helper.attach( velocitySim.back, 'vel back');
449 | 
450 | 	/*var sphere = new THREE.Mesh(
451 | 		new THREE.IcosahedronBufferGeometry(10,3),
452 | 		new THREE.MeshNormalMaterial()
453 | 	);
454 | 	scene.add(sphere);*/
455 | 
456 | 	var objMaterial = new THREE.MeshNormalMaterial({wireframe:!true});
457 | 
458 | 	for( var j = 0; j < cubePositions.length; j++ ) {
459 | 		var cube = new THREE.Mesh(
460 | 		    new THREE.BoxBufferGeometry(1,1,1),
461 | 			objMaterial
462 | 		)
463 | 		cube.scale.set(cubePositions[j].w, cubePositions[j].w, cubePositions[j].w)
464 | 		cube.quaternion.copy( cubeQuaternions[j] );
465 | 		cube.position.set( cubePositions[j].x, cubePositions[j].y, cubePositions[j].z );
466 | 		//scene.add(cube);
467 | 	}
468 | 
469 | 	for( var j = 0; j < spherePositions.length; j++ ) {
470 | 		var sphere = new THREE.Mesh(
471 | 		    new THREE.IcosahedronBufferGeometry(1,3),
472 | 		    objMaterial
473 | 		)
474 | 		sphere.scale.set(spherePositions[j].w, spherePositions[j].w, spherePositions[j].w)
475 | 		sphere.position.set( spherePositions[j].x, spherePositions[j].y, spherePositions[j].z );
476 | 		//scene.add(sphere);
477 | 	}
478 | 
479 | 	var rot = new THREE.Matrix4();
480 | 	rot.makeRotationX(Math.PI/2);
481 | 	for( var j = 0; j < torusPositions.length; j++ ) {
482 | 		var torus = new THREE.Mesh(
483 | 		    new THREE.TorusBufferGeometry(10,2,16,100),
484 | 		    objMaterial
485 | 		)
486 | 		torus.geometry.applyMatrix(rot);
487 | 		torus.scale.set(torusPositions[j].w, torusPositions[j].w, torusPositions[j].w)
488 | 		torus.position.set( torusPositions[j].x, torusPositions[j].y, torusPositions[j].z );
489 | 		torus.quaternion.copy( torusQuaternions[j] );
490 | 		scene.add(torus);
491 | 		objects.tori.push(torus);
492 | 	}
493 | 
494 | }
495 | 
496 | var params = {
497 | 	animate: true
498 | }
499 | 
500 | function init() {
501 | 
502 | 	container = document.getElementById( 'container' );
503 | 
504 | 	scene = new THREE.Scene();
505 | 
506 | 	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, .1, 10000 );
507 | 	camera.target = new THREE.Vector3( 0, 0, 0 );
508 | 	camera.position.set( 100, 100, 100 );
509 | 	camera.lookAt( camera.target );
510 | 	scene.add( camera );
511 | 
512 | 	renderer = new THREE.WebGLRenderer( { antialias: true, preserveDrawingBuffer: true } );
513 | 	renderer.setPixelRatio( window.devicePixelRatio );
514 | 	renderer.setClearColor( 0x261b1f, 1 );
515 | 	container.appendChild( renderer.domElement );
516 | 
517 | 	helper = new FBOHelper(renderer);
518 | 
519 | 	addCommonUI(renderer.domElement);
520 | 
521 | 	renderer.shadowMap.enabled = true;
522 | 	renderer.shadowMap.type = THREE.PCFShadowMap;
523 | 
524 | 	controls = new THREE.OrbitControls( camera, renderer.domElement );
525 | 
526 | 	initScene();
527 | 	onWindowResized();
528 | 
529 | 	window.addEventListener( 'resize', onWindowResized );
530 | 
531 | 	window.addEventListener( 'keydown', function(e) {
532 | 		if (e.keyCode === 32) {
533 | 			params.animate = !params.animate;
534 | 		}
535 | 	})
536 | 	animate();
537 | 
538 | }
539 | 
540 | function onWindowResized( event ) {
541 | 
542 | 	var w = container.clientWidth;
543 | 	var h = container.clientHeight;
544 | 
545 | 	renderer.setSize( w, h );
546 | 	camera.aspect = w / h;
547 | 	camera.updateProjectionMatrix();
548 | 
549 | 	helper.setSize(w,h);
550 | }
551 | 
552 | function animate() {
553 | 
554 | 	requestAnimationFrame( animate );
555 | 
556 | 	if( params.animate ) {
557 | 
558 | 		var t = .001 * performance.now();
559 | 		for( var j = 0; j < objects.tori.length; j++ ) {
560 | 			var q = velocitySim.shader.uniforms.torusQuaternions.value[j];
561 | 			q.x = Math.sin(t);
562 | 			q.normalize();
563 | 			objects.tori[j].quaternion.copy( q );
564 | 		}
565 | 
566 | 		velocitySim.shader.uniforms.positions.value = positionSim.front;
567 | 		velocitySim.render();
568 | 		positionSim.shader.uniforms.velocities.value = velocitySim.front;
569 | 		positionSim.render();
570 | 		mesh.material.uniforms.positions.value = positionSim.front;
571 | 		mesh.material.uniforms.velocities.value = velocitySim.front;
572 | 	}
573 | 
574 | 	controls.update();
575 | 
576 | 	renderer.render( scene, camera );
577 | 	helper.update();
578 | 
579 | }
580 | 
581 | window.addEventListener( 'load', init );
582 | 
583 | </script>
584 | 
585 | 	</body>
586 | </html>
587 | 


--------------------------------------------------------------------------------
/terrain/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>TITLE - Codevember 2017</title>
  5 | 		<meta charset="utf-8">
  6 | 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | 
  8 | 		<link rel="stylesheet" type="text/css" href="../css/styles.css" media="screen" />
  9 | 		<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">
 10 | 
 11 | 	</head>
 12 | 	<body>
 13 | 
 14 | 		<div id="container"></div>
 15 | 		<div id="info" >
 16 | 			<p><a href="../n" >Previous</a> | <a href="../n" >Next</a></p>
 17 | 			<h1>#. TITLE</h1>
 18 | 			<p>Lorem ipsum</p>
 19 | 			<p id="moreDetails"><b>More details...</b></p>
 20 | 		</div>
 21 | 		<div id="details" class="hidden">
 22 | 			<div class="content" >
 23 | 				<h1>Details</h1>
 24 | 				<p>Lorem ipsum <a href="#" >dolor sit amet</a>.</p>
 25 | 				<a href="#" id="close-details">Close</a>
 26 | 			</div>
 27 | 		</div>
 28 | 
 29 | 		<script src="../js/Common.js"></script>
 30 | 		<script src="../js/three.min.js"></script>
 31 | 		<script src="../js/OrbitControls.js"></script>
 32 | 		<script src="../js/perlin.js"></script>
 33 | 
 34 | <script>
 35 | 
 36 | 'use strict';
 37 | 
 38 | var container, renderer, camera, controls, scene;
 39 | var mesh;
 40 | 
 41 | var helper;
 42 | 
 43 | var container = document.getElementById( 'container' );
 44 | 
 45 | function initScene() {
 46 | 
 47 | 	var mesh = new THREE.Mesh(
 48 | 		new THREE.PlaneBufferGeometry( 1, 1, 100, 100 ),
 49 | 		new THREE.MeshBasicMaterial( { wireframe: true })
 50 | 	);
 51 | 	mesh.rotation.x = Math.PI / 2;
 52 | 	scene.add( mesh);
 53 | 
 54 | }
 55 | 
 56 | function init() {
 57 | 
 58 | 	container = document.getElementById( 'container' );
 59 | 
 60 | 	scene = new THREE.Scene();
 61 | 
 62 | 	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, .1, 10000 );
 63 | 	camera.target = new THREE.Vector3( 0, 0, 0 );
 64 | 	camera.position.set( 0, 0, 2 );
 65 | 	camera.lookAt( camera.target );
 66 | 	scene.add( camera );
 67 | 
 68 | 	renderer = new THREE.WebGLRenderer( { antialias: true, preserveDrawingBuffer: true } );
 69 | 	renderer.setPixelRatio( window.devicePixelRatio );
 70 | 	renderer.setClearColor( 0x261b1f, 1 );
 71 | 	container.appendChild( renderer.domElement );
 72 | 
 73 | 	addCommonUI(renderer.domElement);
 74 | 
 75 | 	renderer.shadowMap.enabled = true;
 76 | 	renderer.shadowMap.type = THREE.PCFShadowMap;
 77 | 
 78 | 	controls = new THREE.OrbitControls( camera, renderer.domElement );
 79 | 
 80 | 	initScene();
 81 | 	onWindowResized();
 82 | 
 83 | 	window.addEventListener( 'resize', onWindowResized );
 84 | 
 85 | 	animate();
 86 | 
 87 | }
 88 | 
 89 | function onWindowResized( event ) {
 90 | 
 91 | 	var w = container.clientWidth;
 92 | 	var h = container.clientHeight;
 93 | 
 94 | 	renderer.setSize( w, h );
 95 | 	camera.aspect = w / h;
 96 | 	camera.updateProjectionMatrix();
 97 | 
 98 | }
 99 | 
100 | function animate() {
101 | 
102 | 	requestAnimationFrame( animate );
103 | 
104 | 	controls.update();
105 | 
106 | 	renderer.render( scene, camera );
107 | 
108 | }
109 | 
110 | window.addEventListener( 'load', init );
111 | 
112 | </script>
113 | 
114 | 	</body>
115 | </html>
116 | 


--------------------------------------------------------------------------------
/whirly-bonfire/index copy.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<title>TITLE - Codevember 2017</title>
  5 | 		<meta charset="utf-8">
  6 | 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | 
  8 | 		<link rel="stylesheet" type="text/css" href="../css/styles.css" media="screen" />
  9 | 		<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">
 10 | 
 11 | 	</head>
 12 | 	<body>
 13 | 
 14 | 		<div id="container"></div>
 15 | 		<div id="info" >
 16 | 			<p><a href="../n" >Previous</a> | <a href="../n" >Next</a></p>
 17 | 			<h1>#. TITLE</h1>
 18 | 			<p>Lorem ipsum</p>
 19 | 			<p id="moreDetails"><b>More details...</b></p>
 20 | 		</div>
 21 | 		<div id="details" class="hidden">
 22 | 			<div class="content" >
 23 | 				<h1>Details</h1>
 24 | 				<p>Lorem ipsum <a href="#" >dolor sit amet</a>.</p>
 25 | 				<a href="#" id="close-details">Close</a>
 26 | 			</div>
 27 | 		</div>
 28 | 
 29 | 		<script src="../js/Common.js"></script>
 30 | 		<script src="../js/three.min.js"></script>
 31 | 		<script src="../js/OrbitControls.js"></script>
 32 | 		<script src="../js/Maf.js"></script>
 33 | 		<script src="../js/THREE.FBOHelper.js"></script>
 34 | 		<script src="../js/THREE.PingPongTexture.js"></script>
 35 | 
 36 | <script id="particle-vs" type="x-shader/x-vertex">
 37 | precision highp float;
 38 | 
 39 | attribute vec3 position;
 40 | attribute float vertexId;
 41 | //attribute float size;
 42 | 
 43 | uniform mat4 modelMatrix;
 44 | uniform mat4 modelViewMatrix;
 45 | uniform mat4 projectionMatrix;
 46 | uniform vec3 vertices[ 12 ];
 47 | uniform vec2 uvs[ 12 ];
 48 | 
 49 | uniform vec2 dimensions;
 50 | uniform vec2 resolution;
 51 | uniform float scale;
 52 | uniform vec3 color;
 53 | 
 54 | uniform sampler2D curPos;
 55 | uniform sampler2D prevPos;
 56 | 
 57 | varying vec2 vUv;
 58 | varying vec3 vColor;
 59 | 
 60 | const float PI = 3.14159265359;
 61 | 
 62 | void main() {
 63 | 
 64 | 	int id = int( vertexId );
 65 | 	vec3 v = vertices[ id ];
 66 | 	vec2 luv = vec2( mod( position.x, dimensions.x ) / dimensions.x, floor( position.x / dimensions.y ) / dimensions.y );
 67 | 	vec4 lp = texture2D( curPos, luv );
 68 | 	vec4 lpp = texture2D( prevPos, luv );
 69 | 	vec4 fp = vec4(0.);
 70 | 
 71 | 	vec4 tlp = projectionMatrix * modelViewMatrix * vec4( lp.xyz, 1. );
 72 | 	vec4 tlpp = projectionMatrix * modelViewMatrix * vec4( lpp.xyz, 1. );
 73 | 	vec4 d = projectionMatrix * modelViewMatrix * ( tlp - tlpp );
 74 | 	vec2 tlp2 = tlp.xy/tlp.w;
 75 | 	vec2 tlpp2 = tlpp.xy/tlpp.w;
 76 | 	vec2 dir = normalize(tlp2 - tlpp2);
 77 | 	float aspect = resolution.x / resolution.y;
 78 | 	dir.x *= aspect;
 79 | 	vec2 sd = dir;
 80 | 	vec2 perp = normalize(vec2(-dir.y,dir.x));
 81 | 	vec2 offset = vec2(0.);
 82 | 
 83 | 	float s = .17;
 84 | 
 85 | 	if(id==0){ fp = lpp; offset = -sd; vUv = vec2(0.,.5);}
 86 | 	else if(id==1){ fp = lpp; offset = -perp; vUv = vec2(s,0.);}
 87 | 	else if(id==2){ fp = lpp; offset = perp; vUv = vec2(s,1.);}
 88 | 
 89 | 	else if(id==3){ fp = lpp; offset = -perp; vUv = vec2(s,0.);}
 90 | 	else if(id==4){ fp = lp; offset = -perp; vUv = vec2(1.-s,0.);}
 91 | 	else if(id==5){ fp = lpp; offset = perp; vUv = vec2(s,1.);}
 92 | 
 93 | 	else if(id==6){ fp = lpp; offset = perp; vUv = vec2(s,1.);}
 94 | 	else if(id==7){ fp = lp; offset = -perp; vUv = vec2(1.-s,0.);}
 95 | 	else if(id==8){ fp = lp; offset = perp; vUv = vec2(1.-s,1.);}
 96 | 
 97 | 	else if(id==9){ fp = lp; offset = perp; vUv = vec2(1.-s,1.);}
 98 | 	else if(id==10){ fp = lp; offset = -perp; vUv = vec2(1.-s,0.);}
 99 | 	else if(id==11){ fp = lp; offset = sd; vUv = vec2(1.,.5);}
100 | 
101 | 	vec4 p = modelViewMatrix * vec4( fp.xyz, 1. );
102 | 	p.xy += .01 * offset;
103 | 
104 | 	vColor = vec3(1.);
105 | 
106 | 	gl_Position = projectionMatrix * p;
107 | 
108 | }
109 | 
110 | </script>
111 | 
112 | <script id="particle-fs" type="x-shader/x-vertex">
113 | precision highp float;
114 | 
115 | varying vec2 vUv;
116 | varying vec3 vColor;
117 | 
118 | uniform float opacity;
119 | 
120 | void main() {
121 | 
122 | 	vec2 barycenter = vec2( .5, .5 );
123 | 	float d = smoothstep(.45,.51,length( vUv - barycenter ));//smoothstep( .5, .55, 1. - 2. * length( vUv - barycenter ) );
124 | //	if( d <= 0. || a * opacity <= 0. ) discard;
125 | 	gl_FragColor = vec4( vColor*d, 1. );
126 | }
127 | 
128 | </script>
129 | 
130 | <script>
131 | 
132 | 'use strict';
133 | 
134 | var container, renderer, camera, controls, scene;
135 | var mesh;
136 | 
137 | var helper;
138 | 
139 | var container = document.getElementById( 'container' );
140 | 
141 | var NUM_POINTS = 10;
142 | var particleSystem;
143 | 
144 | function createRenderTarget() {
145 | 
146 | 	return new THREE.WebGLRenderTarget( 1, 1, {
147 | 		wrapS: THREE.ClampToEdgeWrapping,
148 | 		wrapT: THREE.ClampToEdgeWrapping,
149 | 		format: THREE.RGBAFormat,
150 | 		type: THREE.FloatType,
151 | 		stencilBuffer: false,
152 | 		depthBuffer: false
153 | 	});
154 | 
155 | }
156 | 
157 | var particleMaterial;
158 | 
159 | function initParticles() {
160 | 
161 | 	var width = 4;
162 | 	var height = 4;
163 | 
164 | 	NUM_POINTS = width * height;
165 | 
166 | 	var positions = createRenderTarget();
167 | 	positions.setSize(width,height);
168 | 
169 | 	var cur = new Float32Array(width*height*4);
170 | 	var prev = new Float32Array(width*height*4);
171 | 
172 | 	var ptr = 0;
173 | 	var r = .5;
174 | 	var r2 = .1;
175 | 	for( var y = 0; y < height; y++ ){
176 | 		for( var x = 0; x < width; x++ ) {
177 | 			var px = Maf.randomInRange(-r,r);
178 | 			var py = Maf.randomInRange(-r,r);
179 | 			var pz = Maf.randomInRange(-r,r);
180 | 			cur[ ptr + 0 ] = px;
181 | 			cur[ ptr + 1 ] = py;
182 | 			cur[ ptr + 2 ] = pz;
183 | 			cur[ ptr + 3 ] = 0;
184 | 			prev[ ptr + 0 ] = px + Maf.randomInRange( -r2, r2 );
185 | 			prev[ ptr + 1 ] = py + Maf.randomInRange( -r2, r2 );
186 | 			prev[ ptr + 2 ] = pz + Maf.randomInRange( -r2, r2 );
187 | 			prev[ ptr + 3 ] = 0
188 | 			ptr += 4;
189 | 		}
190 | 	}
191 | 
192 | 	var curPos = new THREE.DataTexture( cur, width, height, THREE.RGBAFormat, THREE.FloatType );
193 | 	var prevPos = new THREE.DataTexture( prev, width, height, THREE.RGBAFormat, THREE.FloatType );
194 | 	curPos.needsUpdate = true;
195 | 	prevPos.needsUpdate = true;
196 | 	helper.attach( curPos, 'cur' );
197 | 	helper.attach( prevPos, 'prev' );
198 | 
199 | 	var pData = [];
200 | 	var idData = [];
201 | 	var sizeData = [];
202 | 	for( var j = 0; j < NUM_POINTS; j++ ) {
203 | 
204 | 		for( var k = 0; k < 12; k++ ) {
205 | 			pData.push( j );
206 | 			pData.push( 0 );
207 | 			pData.push( 0 );
208 | 			idData.push( k );
209 | 		}
210 | 
211 | 	}
212 | 
213 | 	var particleGeometry = new THREE.BufferGeometry();
214 | 	var positions = new Float32Array( pData );
215 | 	var indices = new Float32Array( idData );
216 | 	//var sizes = new Float32Array( sizeData );
217 | 
218 | 	particleGeometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
219 | 	particleGeometry.addAttribute( 'vertexId', new THREE.BufferAttribute( indices, 1 ) );
220 | 	//particleGeometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
221 | 
222 | 	particleMaterial = new THREE.RawShaderMaterial( {
223 | 		uniforms:{
224 | 			scale: { type: 'f', value: .1 },
225 | 			dimensions: { type: 'v2', value: new THREE.Vector2(width,height)},
226 | 			resolution: { type: 'v2', value: new THREE.Vector2(0,0)},
227 | 			opacity: { type: 'f', value: 1. },
228 | 			color: { type: 'c', value: new THREE.Color( 0xffffff ) },
229 | 			curPos: { type: 't', value: curPos },
230 | 			prevPos: { type: 't', value: prevPos },
231 | 			vertices: { type: 'v3v', value: [
232 | 				new THREE.Vector3( -1, -1, 0 ),
233 | 				new THREE.Vector3(  1, -1, 0 ),
234 | 				new THREE.Vector3(  0,  1, 0 ),
235 | 				new THREE.Vector3( -1.25, -1.25, 0 ),
236 | 				new THREE.Vector3(  1.25, -1.25, 0 ),
237 | 				new THREE.Vector3(  0,  1.25, 0 ),
238 | 				new THREE.Vector3( -1.5, -1.5, 0 ),
239 | 				new THREE.Vector3(  1.5, -1.5, 0 ),
240 | 				new THREE.Vector3(  0,  1.5, 0 ),
241 | 				new THREE.Vector3( -2, -2, 0 ),
242 | 				new THREE.Vector3(  2, -2, 0 ),
243 | 				new THREE.Vector3(  0,  2, 0 )
244 | 			]},
245 | 			uvs: { type: 'v2v', value: [
246 | 				new THREE.Vector3( 0, 1 ),
247 | 				new THREE.Vector3( 1, 1 ),
248 | 				new THREE.Vector3( .5, 0 ),
249 | 				new THREE.Vector3( 0, 1 ),
250 | 				new THREE.Vector3( 1, 1 ),
251 | 				new THREE.Vector3( .5, 0 ),
252 | 				new THREE.Vector3( 0, 1 ),
253 | 				new THREE.Vector3( 1, 1 ),
254 | 				new THREE.Vector3( .5, 0 ),
255 | 				new THREE.Vector3( 0, 1 ),
256 | 				new THREE.Vector3( 1, 1 ),
257 | 				new THREE.Vector3( .5, 0 )
258 | 			]}
259 | 		},
260 | 		vertexShader: document.getElementById( 'particle-vs' ).textContent,
261 | 		fragmentShader: document.getElementById( 'particle-fs' ).textContent,
262 | 		depthTest: false,
263 | 		depthWrite: false,
264 | 		transparent: true,
265 | 		wireframe: !true
266 | 	} );
267 | 
268 | 	particleSystem = new THREE.Mesh( particleGeometry, particleMaterial );
269 | 	scene.add( particleSystem );
270 | 
271 | }
272 | 
273 | 
274 | function initScene() {
275 | 
276 | 	initParticles();
277 | 
278 | }
279 | 
280 | function init() {
281 | 
282 | 	container = document.getElementById( 'container' );
283 | 
284 | 	scene = new THREE.Scene();
285 | 
286 | 	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, .001, 1000 );
287 | 	camera.target = new THREE.Vector3( 0, 0, 0 );
288 | 	camera.position.set( 0, 0, 2 );
289 | 	camera.lookAt( camera.target );
290 | 	scene.add( camera );
291 | 
292 | 	renderer = new THREE.WebGLRenderer( { antialias: true, preserveDrawingBuffer: true } );
293 | 	renderer.setPixelRatio( window.devicePixelRatio );
294 | 	renderer.setClearColor( 0x261b1f, 1 );
295 | 	container.appendChild( renderer.domElement );
296 | 
297 | 	helper = new FBOHelper(renderer);
298 | 
299 | 	addCommonUI(renderer.domElement);
300 | 
301 | 	renderer.shadowMap.enabled = true;
302 | 	renderer.shadowMap.type = THREE.PCFShadowMap;
303 | 
304 | 	controls = new THREE.OrbitControls( camera, renderer.domElement );
305 | 
306 | 	initScene();
307 | 	onWindowResized();
308 | 
309 | 	window.addEventListener( 'resize', onWindowResized );
310 | 
311 | 	animate();
312 | 
313 | }
314 | 
315 | function onWindowResized( event ) {
316 | 
317 | 	var w = container.clientWidth;
318 | 	var h = container.clientHeight;
319 | 
320 | 	renderer.setSize( w, h );
321 | 	camera.aspect = w / h;
322 | 	camera.updateProjectionMatrix();
323 | 
324 | 	particleMaterial.uniforms.resolution.value.set(w,h);
325 | 
326 | 	helper.setSize( w,h );
327 | 
328 | }
329 | 
330 | function animate() {
331 | 
332 | 	requestAnimationFrame( animate );
333 | 
334 | 	controls.update();
335 | 
336 | 	renderer.render( scene, camera );
337 | 	helper.update();
338 | 
339 | }
340 | 
341 | window.addEventListener( 'load', init );
342 | 
343 | </script>
344 | 
345 | 	</body>
346 | </html>
347 | 


--------------------------------------------------------------------------------