corrade-http-templates – Diff between revs 2 and 13

Subversion Repositories:
Rev:
Only display areas with differences – Ignore whitespace
Rev 2 Rev 13
1   -  
2 <!DOCTYPE html> 1 <!DOCTYPE html>
3 <html lang="en"> 2 <html lang="en">
4 <head> 3 <head>
5 <title>Wizardry and Steamworks - Real Time Avatar Tracking using Corrade in SecondLife.</title> 4 <title>Wizardry and Steamworks - Real Time Avatar Tracking using Corrade in SecondLife.</title>
6 <meta charset="utf-8"> 5 <meta charset="utf-8">
7 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 6 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
8 <link rel="stylesheet" href="css/fonts.css?v=1.0"> -  
9 <link rel="stylesheet" href="css/style.css?v=1.0"> 7 <link rel="stylesheet" href="css/style.css?v=1.0">
10 </head> 8 </head>
11   9  
12 <body> 10 <body>
13 <div id="container"></div> 11 <div id="container"></div>
14 <div id="info"> 12 <div id="info">
15 Wizardry and Steamworks - Real Time Avatar Tracking using Corrade in SecondLife.<br/> 13 Wizardry and Steamworks - Real Time Avatar Tracking using Corrade in SecondLife.<br/>
16 All the graphical elements and data are generated dynamically!<br/> 14 All the graphical elements and data are generated dynamically!<br/>
17 MOVE mouse &amp; press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan<br/> 15 MOVE mouse &amp; press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan<br/>
18 <a href="#" target="_blank">Click to Open in new Window</a><br/> 16 <a href="#" target="_blank">Click to Open in new Window</a><br/>
19 </div> 17 </div>
20 18
21 <!-- Terrain Vertex and Fragment Shaders --> 19 <!-- Terrain Vertex and Fragment Shaders -->
22 <!-- Vertex Shader --> 20 <!-- Vertex Shader -->
23 <script id="terrainVertex" type="x-shader/x-vertex"> 21 <script id="terrainVertex" type="x-shader/x-vertex">
24 uniform sampler2D bumpTexture; 22 uniform sampler2D bumpTexture;
25 uniform float bumpScale; 23 uniform float bumpScale;
26   24  
27 varying vec2 vUV; 25 varying vec2 vUV;
28   26  
29 void main() { 27 void main() {
30 vUV = uv; 28 vUV = uv;
31 vec4 bumpData = texture2D(bumpTexture, uv); 29 vec4 bumpData = texture2D(bumpTexture, uv);
32 30
33 // move the position along the normal 31 // move the position along the normal
34 vec3 newPosition = 32 vec3 newPosition =
35 position + 33 position +
36 normal * 34 normal *
37 bumpScale * 35 bumpScale *
38 bumpData.r; // use red channel (all equal in greyscale) 36 bumpData.r; // use red channel (all equal in greyscale)
39   37  
40 gl_Position = 38 gl_Position =
41 projectionMatrix * 39 projectionMatrix *
42 modelViewMatrix * 40 modelViewMatrix *
43 vec4(newPosition, 1.0); 41 vec4(newPosition, 1.0);
44 } 42 }
45 </script> 43 </script>
46 <!-- Fragment Shader / Pixel Shader --> 44 <!-- Fragment Shader / Pixel Shader -->
47 <script id="terrainFragment" type="x-shader/x-vertex"> 45 <script id="terrainFragment" type="x-shader/x-vertex">
48 uniform sampler2D mapTexture; 46 uniform sampler2D mapTexture;
49 varying vec2 vUV; 47 varying vec2 vUV;
50   48  
51 void main() { 49 void main() {
52 vec4 map = texture2D(mapTexture, vUV); 50 vec4 map = texture2D(mapTexture, vUV);
53 gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0) + map; //, 1.0); 51 gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0) + map; //, 1.0);
54 } 52 }
55 </script> 53 </script>
56 <!-- --> 54 <!-- -->
57   55  
58 <script src="js/jquery.min.js"></script> 56 <script src="js/jquery.min.js"></script>
59 <script src="js/three.min.js"></script> 57 <script src="js/three.min.js"></script>
60 <script src="js/OrbitControls.min.js"></script> 58 <script src="js/OrbitControls.min.js"></script>
61 <script src="js/CMUTypewriter_Regular.min.js"></script> 59 <script src="js/CMUTypewriter_Regular.min.js"></script>
62   60  
63 <script> 61 <script>
64 62
65 /* The bounds of the plot. */ 63 /* The bounds of the plot. */
66 var plotBounds = { 64 var plotBounds = {
67 'maxx' : 256, 65 'maxx' : 256,
68 'minx' : -256, 66 'minx' : -256,
69 'maxy' : 256, 67 'maxy' : 256,
70 'miny' : -256, 68 'miny' : -256,
71 'maxz' : 256, 69 'maxz' : 256,
72 'minz' : -256 70 'minz' : -256
73 }; 71 };
74 72
75 /* This represents the bounds of the data to plot. 73 /* This represents the bounds of the data to plot.
76 * These values will be linearly mapped onto the 74 * These values will be linearly mapped onto the
77 * bounds for the plot. 75 * bounds for the plot.
78 */ 76 */
79 var dataBounds = { 77 var dataBounds = {
80 'maxx' : 256, 78 'maxx' : 256,
81 'minx' : 0, 79 'minx' : 0,
82 'maxy' : 256, 80 'maxy' : 256,
83 'miny' : 0, 81 'miny' : 0,
84 'maxz' : 256, // Second Life maximum rez altitude 82 'maxz' : 256, // Second Life maximum rez altitude
85 'minz' : 0 83 'minz' : 0
86 } 84 }
87 85
88 /* Structure to be filled by the backend scripts. */ 86 /* Structure to be filled by the backend scripts. */
89 var csv = 87 var csv =
90 { 88 {
91 'header' : [ "x", "y", "z" ], 89 'header' : [ "x", "y", "z" ],
92 'positions' : [], 90 'positions' : [],
93 'names' : [], 91 'names' : [],
94 'colors' : [] 92 'colors' : []
95 }; 93 };
96 94
97 /* The size of the cursor for each avatar. */ 95 /* The size of the cursor for each avatar. */
98 var dotSize = 8; 96 var dotSize = 8;
99 /* The interval in milliseconds for updating the terrain. */ 97 /* The interval in milliseconds for updating the terrain. */
100 var mapFetchInterval = 60000; 98 var mapFetchInterval = 60000;
101 /* The interval in milliseconds for avatar position updates. */ 99 /* The interval in milliseconds for avatar position updates. */
102 var avatarsFetchInterval = 1000; 100 var avatarsFetchInterval = 1000;
103 101
104 var container; 102 var container;
105 var camera, controls, scene, renderer; 103 var camera, controls, scene, renderer;
106 var scatterPlot; 104 var scatterPlot;
107 var points; 105 var points;
108 var avatarLabels = []; 106 var avatarLabels = [];
109 var avatarProjections = []; 107 var avatarProjections = [];
110 var mapImageData = null; 108 var mapImageData = null;
111 var mapBumpData = null; 109 var mapBumpData = null;
112 var mapHeight; 110 var mapHeight;
113 var mapMesh; 111 var mapMesh;
114 112
115 init(); 113 init();
116 animate(); 114 animate();
117   115  
118 function init() { 116 function init() {
119 /* Create the camera. */ 117 /* Create the camera. */
120 camera = new THREE.PerspectiveCamera( 118 camera = new THREE.PerspectiveCamera(
121 60, 119 60,
122 window.innerWidth / window.innerHeight, 120 window.innerWidth / window.innerHeight,
123 2, 121 2,
124 10000 122 10000
125 ); 123 );
126 camera.position.z = plotBounds.maxz * 2; 124 camera.position.z = plotBounds.maxz * 2;
127 camera.position.x = 0; 125 camera.position.x = 0;
128 camera.position.y = plotBounds.maxy * 1.25; 126 camera.position.y = plotBounds.maxy * 1.25;
129 controls = new THREE.OrbitControls(camera); 127 controls = new THREE.OrbitControls(camera);
130 controls.damping = 0.2; 128 controls.damping = 0.2;
131 controls.addEventListener('change', render); 129 controls.addEventListener('change', render);
132   130  
133 /* Create the scene. */ 131 /* Create the scene. */
134 scene = new THREE.Scene(); 132 scene = new THREE.Scene();
135 133
136 /* Add the scatterplot to it. */ 134 /* Add the scatterplot to it. */
137 scatterPlot = new THREE.Object3D(); 135 scatterPlot = new THREE.Object3D();
138 scene.add(scatterPlot); 136 scene.add(scatterPlot);
139   137  
140 /* Draw axes. */ 138 /* Draw axes. */
141 var xAxisGeo = new THREE.Geometry(); 139 var xAxisGeo = new THREE.Geometry();
142 var yAxisGeo = new THREE.Geometry(); 140 var yAxisGeo = new THREE.Geometry();
143 var zAxisGeo = new THREE.Geometry(); 141 var zAxisGeo = new THREE.Geometry();
144   142  
145 xAxisGeo.vertices.push( 143 xAxisGeo.vertices.push(
146 new THREE.Vector3( 144 new THREE.Vector3(
147 plotBounds.minx/2, 145 plotBounds.minx/2,
148 plotBounds.miny/2, 146 plotBounds.miny/2,
149 plotBounds.minz/2 147 plotBounds.minz/2
150 ), 148 ),
151 new THREE.Vector3( 149 new THREE.Vector3(
152 plotBounds.maxx/2, 150 plotBounds.maxx/2,
153 plotBounds.miny/2, 151 plotBounds.miny/2,
154 plotBounds.minz/2 152 plotBounds.minz/2
155 ) 153 )
156 ); 154 );
157 yAxisGeo.vertices.push( 155 yAxisGeo.vertices.push(
158 new THREE.Vector3( 156 new THREE.Vector3(
159 plotBounds.minx/2, 157 plotBounds.minx/2,
160 plotBounds.miny/2, 158 plotBounds.miny/2,
161 plotBounds.minz/2 159 plotBounds.minz/2
162 ), 160 ),
163 new THREE.Vector3( 161 new THREE.Vector3(
164 plotBounds.minx/2, 162 plotBounds.minx/2,
165 plotBounds.maxy/2, 163 plotBounds.maxy/2,
166 plotBounds.minz/2 164 plotBounds.minz/2
167 ) 165 )
168 ); 166 );
169 zAxisGeo.vertices.push( 167 zAxisGeo.vertices.push(
170 new THREE.Vector3( 168 new THREE.Vector3(
171 plotBounds.minx/2, 169 plotBounds.minx/2,
172 plotBounds.miny/2, 170 plotBounds.miny/2,
173 plotBounds.minz/2 171 plotBounds.minz/2
174 ), 172 ),
175 new THREE.Vector3( 173 new THREE.Vector3(
176 plotBounds.minx/2, 174 plotBounds.minx/2,
177 plotBounds.miny/2, 175 plotBounds.miny/2,
178 plotBounds.maxz/2 176 plotBounds.maxz/2
179 ) 177 )
180 ); 178 );
181   179  
182 var xAxisMat = new THREE.LineBasicMaterial( 180 var xAxisMat = new THREE.LineBasicMaterial(
183 { 181 {
184 color: 0xa60000, 182 color: 0xa60000,
185 lineWidth: 1 183 lineWidth: 1
186 } 184 }
187 ); 185 );
188 var xAxis = new THREE.Line(xAxisGeo, xAxisMat); 186 var xAxis = new THREE.Line(xAxisGeo, xAxisMat);
189 xAxis.type = THREE.Lines; 187 xAxis.type = THREE.Lines;
190 scatterPlot.add(xAxis); 188 scatterPlot.add(xAxis);
191   189  
192 var yAxisMat = new THREE.LineBasicMaterial( 190 var yAxisMat = new THREE.LineBasicMaterial(
193 { 191 {
194 color: 0x0000a6, 192 color: 0x0000a6,
195 lineWidth: 1 193 lineWidth: 1
196 } 194 }
197 ); 195 );
198 var yAxis = new THREE.Line(yAxisGeo, yAxisMat); 196 var yAxis = new THREE.Line(yAxisGeo, yAxisMat);
199 yAxis.type = THREE.Lines; 197 yAxis.type = THREE.Lines;
200 scatterPlot.add(yAxis); 198 scatterPlot.add(yAxis);
201   199  
202 var zAxisMat = new THREE.LineBasicMaterial( 200 var zAxisMat = new THREE.LineBasicMaterial(
203 { 201 {
204 color: 0x00a600, 202 color: 0x00a600,
205 lineWidth: 1 203 lineWidth: 1
206 } 204 }
207 ); 205 );
208 var zAxis = new THREE.Line(zAxisGeo, zAxisMat); 206 var zAxis = new THREE.Line(zAxisGeo, zAxisMat);
209 zAxis.type = THREE.Lines; 207 zAxis.type = THREE.Lines;
210 scatterPlot.add(zAxis); 208 scatterPlot.add(zAxis);
211   209  
212 /* Add axes text. */ 210 /* Add axes text. */
213 var text3d = new THREE.TextGeometry("O", { 211 var text3d = new THREE.TextGeometry("O", {
214 size: 8, 212 size: 8,
215 height: 2, 213 height: 2,
216 curveSegments: 2, 214 curveSegments: 2,
217 font: "cmutypewriter_regular" 215 font: "cmutypewriter_regular"
218   216  
219 }); 217 });
220 text3d.computeBoundingBox(); 218 text3d.computeBoundingBox();
221 var centerOffset = -0.5 * ( 219 var centerOffset = -0.5 * (
222 text3d.boundingBox.max.x - 220 text3d.boundingBox.max.x -
223 text3d.boundingBox.min.x 221 text3d.boundingBox.min.x
224 ); 222 );
225 var textMaterial = new THREE.MeshBasicMaterial( 223 var textMaterial = new THREE.MeshBasicMaterial(
226 { 224 {
227 color: 0xa6a6a6, 225 color: 0xa6a6a6,
228 overdraw: 0.5 226 overdraw: 0.5
229 } 227 }
230 ); 228 );
231 text = new THREE.Mesh(text3d, textMaterial); 229 text = new THREE.Mesh(text3d, textMaterial);
232 text.position.x = plotBounds.minx/2 + 2 * centerOffset; 230 text.position.x = plotBounds.minx/2 + 2 * centerOffset;
233 text.position.y = plotBounds.minx/2 + 2 * centerOffset; 231 text.position.y = plotBounds.minx/2 + 2 * centerOffset;
234 text.position.z = plotBounds.minx/2; 232 text.position.z = plotBounds.minx/2;
235 scatterPlot.add(text); 233 scatterPlot.add(text);
236 234
237 text3d = new THREE.TextGeometry( 235 text3d = new THREE.TextGeometry(
238 csv.header[0] + 236 csv.header[0] +
239 " " + 237 " " +
240 "(" + 238 "(" +
241 dataBounds.maxx + 239 dataBounds.maxx +
242 "m)", 240 "m)",
243 { 241 {
244 size: 8, 242 size: 8,
245 height: 2, 243 height: 2,
246 curveSegments: 2, 244 curveSegments: 2,
247 font: "cmutypewriter_regular" 245 font: "cmutypewriter_regular"
248 } 246 }
249 ); 247 );
250 text3d.computeBoundingBox(); 248 text3d.computeBoundingBox();
251 centerOffset = -0.5 * ( 249 centerOffset = -0.5 * (
252 text3d.boundingBox.max.x - 250 text3d.boundingBox.max.x -
253 text3d.boundingBox.min.x 251 text3d.boundingBox.min.x
254 ); 252 );
255 textMaterial = new THREE.MeshBasicMaterial( 253 textMaterial = new THREE.MeshBasicMaterial(
256 { 254 {
257 color: 0xa60000, 255 color: 0xa60000,
258 overdraw: 0.5 256 overdraw: 0.5
259 } 257 }
260 ); 258 );
261 text = new THREE.Mesh(text3d, textMaterial); 259 text = new THREE.Mesh(text3d, textMaterial);
262 text.position.x = plotBounds.maxx/2 - centerOffset / 4; 260 text.position.x = plotBounds.maxx/2 - centerOffset / 4;
263 text.position.y = plotBounds.miny/2 + centerOffset / 8; 261 text.position.y = plotBounds.miny/2 + centerOffset / 8;
264 text.position.z = plotBounds.minz/2; 262 text.position.z = plotBounds.minz/2;
265 scatterPlot.add(text); 263 scatterPlot.add(text);
266   264  
267 text3d = new THREE.TextGeometry( 265 text3d = new THREE.TextGeometry(
268 csv.header[2] + 266 csv.header[2] +
269 " " + 267 " " +
270 "(" + 268 "(" +
271 dataBounds.maxz + 269 dataBounds.maxz +
272 "m)", 270 "m)",
273 { 271 {
274 size: 8, 272 size: 8,
275 height: 2, 273 height: 2,
276 curveSegments: 2, 274 curveSegments: 2,
277 font: "cmutypewriter_regular" 275 font: "cmutypewriter_regular"
278 } 276 }
279 ); 277 );
280 text3d.computeBoundingBox(); 278 text3d.computeBoundingBox();
281 centerOffset = -0.5 * ( 279 centerOffset = -0.5 * (
282 text3d.boundingBox.max.x - 280 text3d.boundingBox.max.x -
283 text3d.boundingBox.min.x 281 text3d.boundingBox.min.x
284 ); 282 );
285 textMaterial = new THREE.MeshBasicMaterial( 283 textMaterial = new THREE.MeshBasicMaterial(
286 { 284 {
287 color: 0x0000a6, 285 color: 0x0000a6,
288 overdraw: 0.5 286 overdraw: 0.5
289 } 287 }
290 ); 288 );
291 text = new THREE.Mesh( text3d, textMaterial ); 289 text = new THREE.Mesh( text3d, textMaterial );
292 text.position.x = plotBounds.minx/2 + centerOffset; 290 text.position.x = plotBounds.minx/2 + centerOffset;
293 text.position.y = plotBounds.maxy/2 - centerOffset / 4; 291 text.position.y = plotBounds.maxy/2 - centerOffset / 4;
294 text.position.z = plotBounds.minz/2; 292 text.position.z = plotBounds.minz/2;
295 scatterPlot.add(text); 293 scatterPlot.add(text);
296   294  
297 text3d = new THREE.TextGeometry( 295 text3d = new THREE.TextGeometry(
298 csv.header[1] + 296 csv.header[1] +
299 " " + 297 " " +
300 "(" + 298 "(" +
301 dataBounds.maxy + 299 dataBounds.maxy +
302 "m)", 300 "m)",
303 { 301 {
304 size: 8, 302 size: 8,
305 height: 2, 303 height: 2,
306 curveSegments: 2, 304 curveSegments: 2,
307 font: "cmutypewriter_regular" 305 font: "cmutypewriter_regular"
308 } 306 }
309 ); 307 );
310 text3d.computeBoundingBox(); 308 text3d.computeBoundingBox();
311 centerOffset = -0.5 * ( 309 centerOffset = -0.5 * (
312 text3d.boundingBox.max.x - 310 text3d.boundingBox.max.x -
313 text3d.boundingBox.min.x 311 text3d.boundingBox.min.x
314 ); 312 );
315 textMaterial = new THREE.MeshBasicMaterial( 313 textMaterial = new THREE.MeshBasicMaterial(
316 { 314 {
317 color: 0x00a600, 315 color: 0x00a600,
318 overdraw: 0.5 316 overdraw: 0.5
319 } 317 }
320 ); 318 );
321 text = new THREE.Mesh(text3d, textMaterial); 319 text = new THREE.Mesh(text3d, textMaterial);
322 text.position.x = plotBounds.minx/2 + centerOffset; 320 text.position.x = plotBounds.minx/2 + centerOffset;
323 text.position.y = plotBounds.miny/2; 321 text.position.y = plotBounds.miny/2;
324 text.position.z = plotBounds.maxz/2 - centerOffset / 4; 322 text.position.z = plotBounds.maxz/2 - centerOffset / 4;
325 scatterPlot.add(text); 323 scatterPlot.add(text);
326 324
327 /* Add enclosing case. */ 325 /* Add enclosing case. */
328 var enclosingCubeGeometry = enclosingCase(plotBounds.maxx); 326 var enclosingCubeGeometry = enclosingCase(plotBounds.maxx);
329 enclosingCubeGeometry.computeLineDistances(); 327 enclosingCubeGeometry.computeLineDistances();
330 var enclosingCube = 328 var enclosingCube =
331 new THREE.Line( 329 new THREE.Line(
332 enclosingCubeGeometry, 330 enclosingCubeGeometry,
333 new THREE.LineDashedMaterial( 331 new THREE.LineDashedMaterial(
334 { 332 {
335 color: 0xa6a6a6, 333 color: 0xa6a6a6,
336 dashSize: 3, 334 dashSize: 3,
337 gapSize: 1, 335 gapSize: 1,
338 linewidth: 2 336 linewidth: 2
339 } 337 }
340 ), 338 ),
341 THREE.LinePieces 339 THREE.LinePieces
342 ); 340 );
343 scene.add(enclosingCube); 341 scene.add(enclosingCube);
344   342  
345 // renderer 343 // renderer
346 renderer = new THREE.WebGLRenderer( 344 renderer = new THREE.WebGLRenderer(
347 { 345 {
348 antialias: true 346 antialias: true
349 } 347 }
350 ); 348 );
351 renderer.setClearColor(0x1d475f, 1.0); 349 renderer.setClearColor(0x1d475f, 1.0);
352 renderer.setPixelRatio(window.devicePixelRatio); 350 renderer.setPixelRatio(window.devicePixelRatio);
353 renderer.setSize(window.innerWidth, window.innerHeight); 351 renderer.setSize(window.innerWidth, window.innerHeight);
354   352  
355 container = document.getElementById( 'container' ); 353 container = document.getElementById( 'container' );
356 container.appendChild( renderer.domElement ); 354 container.appendChild( renderer.domElement );
357 355
358 window.addEventListener('resize', onWindowResize, false ); 356 window.addEventListener('resize', onWindowResize, false );
359   357  
360 render(); 358 render();
361 359
362 getAvatars(); 360 getAvatars();
363 getMapTexture(); 361 getMapTexture();
364 getMapHeight(); 362 getMapHeight();
365 getMapTerrain(); 363 getMapTerrain();
366 } 364 }
367   365  
368 function onWindowResize() { 366 function onWindowResize() {
369   367  
370 camera.aspect = window.innerWidth / window.innerHeight; 368 camera.aspect = window.innerWidth / window.innerHeight;
371 camera.updateProjectionMatrix(); 369 camera.updateProjectionMatrix();
372 renderer.setSize( window.innerWidth, window.innerHeight ); 370 renderer.setSize( window.innerWidth, window.innerHeight );
373 //controls.handleResize(); 371 //controls.handleResize();
374 render(); 372 render();
375 } 373 }
376   374  
377 function animate() { 375 function animate() {
378 requestAnimationFrame(animate); 376 requestAnimationFrame(animate);
379 controls.update(); 377 controls.update();
380 } 378 }
381   379  
382 function render() { 380 function render() {
383 renderer.render(scene,camera); 381 renderer.render(scene,camera);
384 } 382 }
385 383
386 function enclosingCase(size) { 384 function enclosingCase(size) {
387 var h = size * 0.5; 385 var h = size * 0.5;
388 var geometry = new THREE.Geometry(); 386 var geometry = new THREE.Geometry();
389 geometry.vertices.push( 387 geometry.vertices.push(
390 // Oz 388 // Oz
391 //new THREE.Vector3( -h, -h, -h ), 389 //new THREE.Vector3( -h, -h, -h ),
392 //new THREE.Vector3( -h, h, -h ), 390 //new THREE.Vector3( -h, h, -h ),
393   391  
394 new THREE.Vector3( -h, h, -h ), 392 new THREE.Vector3( -h, h, -h ),
395 new THREE.Vector3( h, h, -h ), 393 new THREE.Vector3( h, h, -h ),
396   394  
397 new THREE.Vector3( h, h, -h ), 395 new THREE.Vector3( h, h, -h ),
398 new THREE.Vector3( h, -h, -h ), 396 new THREE.Vector3( h, -h, -h ),
399 397
400 // Ox 398 // Ox
401 //new THREE.Vector3( h, -h, -h ), 399 //new THREE.Vector3( h, -h, -h ),
402 //new THREE.Vector3( -h, -h, -h ), 400 //new THREE.Vector3( -h, -h, -h ),
403   401  
404 new THREE.Vector3( -h, -h, h ), 402 new THREE.Vector3( -h, -h, h ),
405 new THREE.Vector3( -h, h, h ), 403 new THREE.Vector3( -h, h, h ),
406   404  
407 new THREE.Vector3( -h, h, h ), 405 new THREE.Vector3( -h, h, h ),
408 new THREE.Vector3( h, h, h ), 406 new THREE.Vector3( h, h, h ),
409   407  
410 new THREE.Vector3( h, h, h ), 408 new THREE.Vector3( h, h, h ),
411 new THREE.Vector3( h, -h, h ), 409 new THREE.Vector3( h, -h, h ),
412   410  
413 new THREE.Vector3( h, -h, h ), 411 new THREE.Vector3( h, -h, h ),
414 new THREE.Vector3( -h, -h, h ), 412 new THREE.Vector3( -h, -h, h ),
415   413  
416 // Oy 414 // Oy
417 //new THREE.Vector3( -h, -h, -h ), 415 //new THREE.Vector3( -h, -h, -h ),
418 //new THREE.Vector3( -h, -h, h ), 416 //new THREE.Vector3( -h, -h, h ),
419   417  
420 new THREE.Vector3( -h, h, -h ), 418 new THREE.Vector3( -h, h, -h ),
421 new THREE.Vector3( -h, h, h ), 419 new THREE.Vector3( -h, h, h ),
422   420  
423 new THREE.Vector3( h, h, -h ), 421 new THREE.Vector3( h, h, -h ),
424 new THREE.Vector3( h, h, h ), 422 new THREE.Vector3( h, h, h ),
425   423  
426 new THREE.Vector3( h, -h, -h ), 424 new THREE.Vector3( h, -h, -h ),
427 new THREE.Vector3( h, -h, h ) 425 new THREE.Vector3( h, -h, h )
428 ); 426 );
429 return geometry; 427 return geometry;
430 } 428 }
431 429
432 function makeTextSprite(message, parameters) { 430 function makeTextSprite(message, parameters) {
433 if ( parameters === undefined ) parameters = {}; 431 if ( parameters === undefined ) parameters = {};
434   432  
435 var fontface = parameters.hasOwnProperty("fontface") ? 433 var fontface = parameters.hasOwnProperty("fontface") ?
436 parameters["fontface"] : 434 parameters["fontface"] :
437 "Computer Modern Typewriter"; 435 "Computer Modern Typewriter";
438   436  
439 var fontsize = parameters.hasOwnProperty("fontsize") ? 437 var fontsize = parameters.hasOwnProperty("fontsize") ?
440 parameters["fontsize"] : 438 parameters["fontsize"] :
441 18; 439 18;
442   440  
443 var borderThickness = 441 var borderThickness =
444 parameters.hasOwnProperty("borderThickness") ? 442 parameters.hasOwnProperty("borderThickness") ?
445 parameters["borderThickness"] : 443 parameters["borderThickness"] :
446 4; 444 4;
447   445  
448 var borderColor = 446 var borderColor =
449 parameters.hasOwnProperty("borderColor") ? 447 parameters.hasOwnProperty("borderColor") ?
450 parameters["borderColor"] : 448 parameters["borderColor"] :
451 { r:0, g:0, b:0, a:1.0 }; 449 { r:0, g:0, b:0, a:1.0 };
452   450  
453 var backgroundColor = 451 var backgroundColor =
454 parameters.hasOwnProperty("backgroundColor") ? 452 parameters.hasOwnProperty("backgroundColor") ?
455 parameters["backgroundColor"] : 453 parameters["backgroundColor"] :
456 { r:255, g:255, b:255, a:1.0 }; 454 { r:255, g:255, b:255, a:1.0 };
457 455
458 var canvas = document.createElement('canvas'); 456 var canvas = document.createElement('canvas');
459 canvas.width = 162; 457 canvas.width = 162;
460 canvas.height = 64; 458 canvas.height = 64;
461 var context = canvas.getContext('2d'); 459 var context = canvas.getContext('2d');
462 context.font = "Bold " + fontsize + "px " + fontface; 460 context.font = "Bold " + fontsize + "px " + fontface;
463 context.imageSmoothingEnabled = true; 461 context.imageSmoothingEnabled = true;
464   462  
465 // determine the longest line 463 // determine the longest line
466 var textLines = message.split("\n"); 464 var textLines = message.split("\n");
467 var longestLine = textLines[0].length; 465 var longestLine = textLines[0].length;
468 var longestIndex = 0; 466 var longestIndex = 0;
469 for(var i = 1; i <textLines.length; ++i) { 467 for(var i = 1; i <textLines.length; ++i) {
470 if(textLines[i].length > longestLine) { 468 if(textLines[i].length > longestLine) {
471 longestLine = textLines[i].length; 469 longestLine = textLines[i].length;
472 longestIndex = i; 470 longestIndex = i;
473 } 471 }
474 } 472 }
475   473  
476 // get size data (height depends only on font size) 474 // get size data (height depends only on font size)
477 var metrics = context.measureText(textLines[longestIndex]); 475 var metrics = context.measureText(textLines[longestIndex]);
478 var textWidth = metrics.width; 476 var textWidth = metrics.width;
479   477  
480 // background color 478 // background color
481 context.fillStyle = 479 context.fillStyle =
482 "rgba(" + 480 "rgba(" +
483 backgroundColor.r + 481 backgroundColor.r +
484 "," + 482 "," +
485 backgroundColor.g + 483 backgroundColor.g +
486 "," + 484 "," +
487 backgroundColor.b + 485 backgroundColor.b +
488 "," + 486 "," +
489 backgroundColor.a + 487 backgroundColor.a +
490 ")"; 488 ")";
491 // border color 489 // border color
492 context.strokeStyle = 490 context.strokeStyle =
493 "rgba(" + 491 "rgba(" +
494 borderColor.r + 492 borderColor.r +
495 "," + 493 "," +
496 borderColor.g + 494 borderColor.g +
497 "," + 495 "," +
498 borderColor.b + 496 borderColor.b +
499 "," + 497 "," +
500 borderColor.a + 498 borderColor.a +
501 ")"; 499 ")";
502   500  
503 context.lineWidth = borderThickness; 501 context.lineWidth = borderThickness;
504 roundRect( 502 roundRect(
505 context, 503 context,
506 borderThickness/2, 504 borderThickness/2,
507 borderThickness/2, 505 borderThickness/2,
508 textWidth + borderThickness, 506 textWidth + borderThickness,
509 // 1.2 is extra height factor for text below baseline 507 // 1.2 is extra height factor for text below baseline
510 textLines.length * fontsize * 1.2 + borderThickness, 508 textLines.length * fontsize * 1.2 + borderThickness,
511 6 509 6
512 ); 510 );
513   511  
514 // add the text color 512 // add the text color
515 context.fillStyle = 513 context.fillStyle =
516 "rgba(" + 514 "rgba(" +
517 borderColor.r + 515 borderColor.r +
518 "," + 516 "," +
519 borderColor.g + 517 borderColor.g +
520 "," + 518 "," +
521 borderColor.b + 519 borderColor.b +
522 "," + 520 "," +
523 borderColor.a + 521 borderColor.a +
524 ")"; 522 ")";
525 523
526 // add all the requested lines whist increasing lines 524 // add all the requested lines whist increasing lines
527 for(var i = 0; i< textLines.length; ++ i) { 525 for(var i = 0; i< textLines.length; ++ i) {
528 context.fillText( 526 context.fillText(
529 textLines[i], 527 textLines[i],
530 borderThickness, 528 borderThickness,
531 fontsize 529 fontsize
532 ); 530 );
533 fontsize += fontsize; 531 fontsize += fontsize;
534 } 532 }
535   533  
536 // canvas contents will be used for a texture 534 // canvas contents will be used for a texture
537 var spriteTexture = new THREE.Texture(canvas, 535 var spriteTexture = new THREE.Texture(canvas,
538 THREE.UVMapping, // mapping 536 THREE.UVMapping, // mapping
539 THREE.ClampToEdgeWrapping, // wrapS 537 THREE.ClampToEdgeWrapping, // wrapS
540 THREE.ClampToEdgeWrapping, // wrapT 538 THREE.ClampToEdgeWrapping, // wrapT
541 THREE.NearestFilter, // magfilter 539 THREE.NearestFilter, // magfilter
542 THREE.NearestFilter, //minfilter, 540 THREE.NearestFilter, //minfilter,
543 THREE.RGBAFormat, // format 541 THREE.RGBAFormat, // format
544 THREE.UnsignedByteType // type 542 THREE.UnsignedByteType // type
545 ) 543 )
546 spriteTexture.anisotropy = renderer.getMaxAnisotropy(); 544 spriteTexture.anisotropy = renderer.getMaxAnisotropy();
547 spriteTexture.needsUpdate = true; 545 spriteTexture.needsUpdate = true;
548 var spriteMaterial = new THREE.SpriteMaterial( 546 var spriteMaterial = new THREE.SpriteMaterial(
549 { 547 {
550 map: spriteTexture, 548 map: spriteTexture,
551 useScreenCoordinates: false, 549 useScreenCoordinates: false,
552 overdraw: false, 550 overdraw: false,
553 side:THREE.DoubleSide 551 side:THREE.DoubleSide
554 } 552 }
555 ); 553 );
556 var sprite = new THREE.Sprite(spriteMaterial); 554 var sprite = new THREE.Sprite(spriteMaterial);
557 sprite.scale.set(64,32, 1.0); 555 sprite.scale.set(64,32, 1.0);
558 return sprite; 556 return sprite;
559 } 557 }
560   558  
561 // function for drawing rounded rectangles 559 // function for drawing rounded rectangles
562 function roundRect(ctx, x, y, w, h, r) 560 function roundRect(ctx, x, y, w, h, r)
563 { 561 {
564 ctx.beginPath(); 562 ctx.beginPath();
565 ctx.moveTo(x+r, y); 563 ctx.moveTo(x+r, y);
566 ctx.lineTo(x+w-r, y); 564 ctx.lineTo(x+w-r, y);
567 ctx.quadraticCurveTo(x+w, y, x+w, y+r); 565 ctx.quadraticCurveTo(x+w, y, x+w, y+r);
568 ctx.lineTo(x+w, y+h-r); 566 ctx.lineTo(x+w, y+h-r);
569 ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h); 567 ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h);
570 ctx.lineTo(x+r, y+h); 568 ctx.lineTo(x+r, y+h);
571 ctx.quadraticCurveTo(x, y+h, x, y+h-r); 569 ctx.quadraticCurveTo(x, y+h, x, y+h-r);
572 ctx.lineTo(x, y+r); 570 ctx.lineTo(x, y+r);
573 ctx.quadraticCurveTo(x, y, x+r, y); 571 ctx.quadraticCurveTo(x, y, x+r, y);
574 ctx.closePath(); 572 ctx.closePath();
575 ctx.fill(); 573 ctx.fill();
576 ctx.stroke(); 574 ctx.stroke();
577 } 575 }
-   576  
578 /*************************************************************************/ 577 /*************************************************************************/
579 /* Copyright (C) 2015 Wizardry and Steamworks - License: GNU GPLv3 */ 578 /* Copyright (C) 2015 Wizardry and Steamworks - License: GNU GPLv3 */
580 /*************************************************************************/ 579 /*************************************************************************/
581 function wasMapValueToRange(value, xMin, xMax, yMin, yMax) { 580 function wasMapValueToRange(value, xMin, xMax, yMin, yMax) {
582 return yMin + ( 581 return yMin + (
583 ( yMax - yMin ) * ( value - xMin ) / ( xMax - xMin ) 582 ( yMax - yMin ) * ( value - xMin ) / ( xMax - xMin )
584 ); 583 );
585 } 584 }
586 585
587 function updatePoints() { 586 function updatePoints() {
588 /* Remove points. */ 587 /* Remove points. */
589 scatterPlot.remove(points); 588 scatterPlot.remove(points);
590 /* Remove labels. */ 589 /* Remove labels. */
591 for(i=0; i 590 for(i=0; i
592   591  
593   592  
594   593  
595   594  
596   595  
597   596  
598   597  
599   598  
600   599  
601   600  
602   601  
603   602  
604   603  
605   604  
606   605  
607   606  
608   607  
609   608  
610   609  
611   610  
612   611  
613   612  
614   613  
615   614  
616   615  
617   616  
618   617  
619   618  
620   619  
621   620  
622   621  
623   622  
624   623  
625   624  
626   625  
627   626  
628   627  
629   628  
630   629  
631   630  
632   631  
633   632  
634   633  
635   634  
636   635  
637   636  
638   637  
639   638  
640   639  
641   640  
642   641  
643   642  
644   643  
645   644  
646   645  
647   646  
648   647  
649   648  
650   649  
651   650  
652   651  
653   652  
654   653  
655   654  
656   655  
657   656  
658   657  
659   658  
660   659  
661   660  
662   661  
663   662  
664   663  
665   664  
666   665  
667   666  
668   667  
669   668  
670   669  
671   670  
672   671  
673   672  
674   673  
675   674  
676   675  
677   676  
678   677  
679   678  
680   679  
681   680  
682   681  
683   682  
684   683  
685   684  
686   685  
687   686  
688   687  
689   688  
690   689  
691   690  
692   691  
693   692  
694   693  
695   694  
696   695  
697   696  
698   697  
699   698  
700   699  
701   700  
702   701  
703   702  
704   703  
705   704  
706   705  
707   706  
708   707  
709   708  
710   709  
711   710  
712   711  
713   712  
714   713  
715   714  
716   715  
717   716  
718   717  
719   718  
720   719  
721   720  
722   721  
723   722  
724   723  
725   724  
726   725  
727   726  
728   727  
729   728  
730   729  
731   730  
732   731  
733   732  
734   733  
735   734  
736   735  
737   736  
738   737  
739   738  
740   739  
741   740  
742   741  
743   742  
744   743  
745   744  
746   745  
747   746  
748   747  
749   748  
750   749  
751   750  
752   751  
753   752  
754   753  
755   754  
756   755  
757   756  
758   757  
759   758  
760   759  
761   760  
762   761  
763   762  
764   763  
765   764  
766   765  
767   766  
768   767  
769   768  
770   769  
771   770  
772   771  
773   772  
774   773  
775   774  
776   775  
777   776  
778   777  
779   778  
780   779  
781   780  
782   781  
783   782  
784   783  
785   784  
786   785  
787   786  
788   787  
789   788  
790   789  
791   790  
792   791  
793   792  
794   793  
795   794  
796   795  
797   796  
798   797  
799   798  
800   799  
801   800  
802   801  
803   802  
804   803  
805   804  
806   805  
807   806  
808   807  
809   808  
810   809  
811   810  
812   811  
813   812  
814   813  
815   814  
816   815  
817   816  
818   817  
819   818  
820   819  
821   820  
822   821  
823   822  
824   823  
825   824  
826   825  
827   826  
828   827  
829   828  
830   829  
831   830  
832   831  
833   832  
834   833  
835   834  
836   835  
837   836  
838   837  
839   838  
840   839  
841   840  
842   841  
843   842  
844   843  
845   844  
846   845  
847   846  
848   847  
849   848  
850   849  
851   850  
852   851  
853   852  
854   853  
855   854  
856   855  
857   856  
858   857  
859   858  
860   859  
861   860  
862   861  
863   862  
864   863  
865   864  
866   865  
867   866  
868   867  
869   868  
870   869  
871   870  
872   871  
873   872  
874   873  
875   874  
876   875  
877   876  
878   877  
879   878  
880   879  
881   880  
882   881  
883   882  
884   883  
885   884  
886   885  
887   886  
888   887  
889   888  
890   889  
891   890  
892   891  
893   892  
894   893  
895   894  
896   895  
897   896  
898   897  
899   898  
900   899  
901   900  
902   901  
903   902  
904   903  
905   904  
906   905  
907   906  
908   907  
909   908  
910   909  
911   910  
912   911  
913   912  
914   913  
915   914  
916   915  
917   916  
918   917  
919   918  
920   919  
921   920  
922   921  
923   922  
924   923  
925   924  
926   925  
927   926  
928   927  
929   928  
930   929  
931   930  
932   931  
933   932  
934   933  
935   934  
936   935  
937   936  
938   937  
939   938  
940   939  
941   940  
942   941  
943   942  
944   943  
945   944  
946   945  
947   946