', 31 | 'Find out how to get it here.' 32 | ].join( '\n' ) : [ 33 | 'Your browser does not seem to support WebGL.
', 34 | 'Find out how to get it here.' 35 | ].join( '\n' ); 36 | 37 | } 38 | 39 | return element; 40 | 41 | }, 42 | 43 | addGetWebGLMessage: function ( parameters ) { 44 | 45 | var parent, id, element; 46 | 47 | parameters = parameters || {}; 48 | 49 | parent = parameters.parent !== undefined ? parameters.parent : document.body; 50 | id = parameters.id !== undefined ? parameters.id : 'oldie'; 51 | 52 | element = Detector.getWebGLErrorMessage(); 53 | element.id = id; 54 | 55 | parent.appendChild( element ); 56 | 57 | } 58 | 59 | }; 60 | -------------------------------------------------------------------------------- /sw-engineering-candies-webgl-examples/WebContent/square-melon/lib/hashmap.js: -------------------------------------------------------------------------------- 1 | /* 2 | ===================================================================== 3 | Redistribution and use in source and binary forms, with or without 4 | modification, are permitted provided that the following conditions 5 | are met: 6 | 7 | 1. Redistributions of source code must retain the above 8 | copyright notice, this list of conditions and the following 9 | disclaimer. 10 | 11 | 2. Redistributions in binary form must reproduce the above 12 | copyright notice, this list of conditions and the following 13 | disclaimer in the documentation and/or other materials provided 14 | with the distribution. 15 | 16 | 3. The name of the author may not be used to endorse or promote 17 | products derived from this software without specific prior 18 | written permission. 19 | 20 | THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``AS IS'' AND ANY EXPRESS 21 | OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 22 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE 23 | ARE DISCLAIMED. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY 24 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 25 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE 26 | GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 27 | INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 28 | WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 29 | NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 30 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 31 | 32 | @author Daniel Kwiecinski
', 31 | 'Find out how to get it here.' 32 | ].join( '\n' ) : [ 33 | 'Your browser does not seem to support WebGL.
', 34 | 'Find out how to get it here.' 35 | ].join( '\n' ); 36 | 37 | } 38 | 39 | return element; 40 | 41 | }, 42 | 43 | addGetWebGLMessage: function ( parameters ) { 44 | 45 | var parent, id, element; 46 | 47 | parameters = parameters || {}; 48 | 49 | parent = parameters.parent !== undefined ? parameters.parent : document.body; 50 | id = parameters.id !== undefined ? parameters.id : 'oldie'; 51 | 52 | element = Detector.getWebGLErrorMessage(); 53 | element.id = id; 54 | 55 | parent.appendChild( element ); 56 | 57 | } 58 | 59 | }; 60 | -------------------------------------------------------------------------------- /sw-engineering-candies-webgl-examples/WebContent/teddy-regards-you/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkusSprunck/webgl-examples/a1fb7b84e598c480df5a2a23f2959af9ed1906ff/sw-engineering-candies-webgl-examples/WebContent/teddy-regards-you/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /sw-engineering-candies-webgl-examples/WebContent/teddy-regards-you/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkusSprunck/webgl-examples/a1fb7b84e598c480df5a2a23f2959af9ed1906ff/sw-engineering-candies-webgl-examples/WebContent/teddy-regards-you/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /sw-engineering-candies-webgl-examples/WebContent/teddy-regards-you/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkusSprunck/webgl-examples/a1fb7b84e598c480df5a2a23f2959af9ed1906ff/sw-engineering-candies-webgl-examples/WebContent/teddy-regards-you/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /sw-engineering-candies-webgl-examples/WebContent/teddy-regards-you/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkusSprunck/webgl-examples/a1fb7b84e598c480df5a2a23f2959af9ed1906ff/sw-engineering-candies-webgl-examples/WebContent/teddy-regards-you/github.png -------------------------------------------------------------------------------- /sw-engineering-candies-webgl-examples/WebContent/teddy-regards-you/glfx-lean.js: -------------------------------------------------------------------------------- 1 | /* 2 | * This class is based on glfx.js 3 | */ 4 | 5 | /* 6 | * glfx.js 7 | * http://evanw.github.com/glfx.js/ 8 | * 9 | * Copyright 2011 Evan Wallace 10 | * Released under the MIT license 11 | */ 12 | var fx = (function() { 13 | 14 | var exports = {}; 15 | 16 | // src/core/canvas.js 17 | var gl; 18 | 19 | function wrapTexture(texture) { 20 | return { 21 | _ : texture, 22 | loadContentsOf : function(element) { 23 | // Make sure that we're using the correct global WebGL context 24 | gl = this._.gl; 25 | this._.loadContentsOf(element); 26 | } 27 | }; 28 | } 29 | 30 | function texture(element) { 31 | return wrapTexture(Texture.fromElement(element)); 32 | } 33 | 34 | function initialize(width, height) { 35 | var type = gl.UNSIGNED_BYTE; 36 | this.width = width; 37 | this.height = height; 38 | this._.texture = new Texture(width, height, gl.RGBA, type); 39 | this._.spareTexture = new Texture(width, height, gl.RGBA, type); 40 | this._.flippedShader = this._.flippedShader 41 | || new Shader( 42 | null, 43 | '\ 44 | uniform sampler2D texture;\ 45 | varying vec2 texCoord;\ 46 | void main() {\ 47 | gl_FragColor = texture2D(texture, vec2(texCoord.x, 1.0 - texCoord.y));\ 48 | }\ 49 | '); 50 | this._.isInitialized = true; 51 | } 52 | 53 | /* 54 | * Draw a texture to the canvas, with an optional width and height to scale 55 | * to. If no width and height are given then the original texture width and 56 | * height are used. 57 | */ 58 | function draw(texture, width, height) { 59 | if (!this._.isInitialized || texture._.width != this.width || texture._.height != this.height) { 60 | initialize.call(this, width ? width : texture._.width, height ? height : texture._.height); 61 | } 62 | 63 | texture._.use(); 64 | this._.texture.drawTo(function() { 65 | Shader.getDefaultShader().drawRect(); 66 | }); 67 | 68 | return this; 69 | } 70 | 71 | function update() { 72 | this._.texture.use(); 73 | this._.flippedShader.drawRect(); 74 | return this; 75 | } 76 | 77 | function simpleShader(shader, uniforms, textureIn, textureOut) { 78 | (textureIn || this._.texture).use(); 79 | this._.spareTexture.drawTo(function() { 80 | shader.uniforms(uniforms).drawRect(); 81 | }); 82 | this._.spareTexture.swapWith(textureOut || this._.texture); 83 | } 84 | 85 | function wrap(func) { 86 | return function() { 87 | // Make sure that we're using the correct global WebGL context 88 | gl = this._.gl; 89 | 90 | // Now that the context has been switched, we can call the wrapped 91 | // function 92 | return func.apply(this, arguments); 93 | }; 94 | } 95 | 96 | exports.canvas = function() { 97 | var canvas = document.createElement('canvas'); 98 | gl = canvas.getContext('experimental-webgl', { 99 | premultipliedAlpha : false 100 | }); 101 | 102 | canvas._ = { 103 | gl : gl, 104 | isInitialized : false, 105 | texture : null, 106 | spareTexture : null, 107 | flippedShader : null 108 | }; 109 | 110 | // Methods 111 | canvas.texture = wrap(texture); 112 | canvas.draw = wrap(draw); 113 | canvas.update = wrap(update); 114 | canvas.move = wrap(move); 115 | canvas.mirror = wrap(mirror); 116 | return canvas; 117 | }; 118 | 119 | function mirror() { 120 | gl.mirror = gl.mirror 121 | || new Shader( 122 | null, 123 | ' \ 124 | uniform sampler2D texture; \ 125 | uniform float brightness; \ 126 | varying vec2 texCoord; \ 127 | void main() { \ 128 | vec4 color = texture2D(texture, vec2(1.0 - texCoord.x,texCoord.y)); \ 129 | gl_FragColor = color; \ 130 | } \ 131 | '); 132 | 133 | simpleShader.call(this, gl.mirror, {}); 134 | return this; 135 | } 136 | 137 | function move() { 138 | gl.move = gl.move 139 | || new Shader( 140 | null, 141 | ' \ 142 | uniform sampler2D texture; \ 143 | uniform float brightness; \ 144 | varying vec2 texCoord; \ 145 | void main() { \ 146 | vec4 color = texture2D(texture, texCoord); \ 147 | if (texCoord.y < 0.5) { \ 148 | vec4 color2 = texture2D(texture, vec2(texCoord.x, texCoord.y + 0.5)); \ 149 | float d = abs(color2.r - color.r) + abs(color2.g - color.g) + abs(color2.b - color.b); \ 150 | d = d * 1.5; \ 151 | color = vec4(d,d,d,1.0); \ 152 | if (d < 0.5) { \ 153 | color = vec4(0.0,0.0,0.0,1.0); \ 154 | } \ 155 | } \ 156 | gl_FragColor = color; \ 157 | }\ 158 | '); 159 | 160 | simpleShader.call(this, gl.move, {}); 161 | return this; 162 | } 163 | 164 | var Shader = (function() { 165 | 166 | function compileSource(type, source) { 167 | var shader = gl.createShader(type); 168 | gl.shaderSource(shader, source); 169 | gl.compileShader(shader); 170 | return shader; 171 | } 172 | 173 | var defaultVertexSource = '\ 174 | attribute vec2 vertex;\ 175 | attribute vec2 _texCoord;\ 176 | varying vec2 texCoord;\ 177 | void main() {\ 178 | texCoord = _texCoord;\ 179 | gl_Position = vec4(vertex * 2.0 - 1.0, 0.0, 1.0);\ 180 | }'; 181 | 182 | var defaultFragmentSource = '\ 183 | uniform sampler2D texture;\ 184 | varying vec2 texCoord;\ 185 | void main() {\ 186 | gl_FragColor = texture2D(texture, texCoord);\ 187 | }'; 188 | 189 | function Shader(vertexSource, fragmentSource) { 190 | this.vertexAttribute = null; 191 | this.texCoordAttribute = null; 192 | this.program = gl.createProgram(); 193 | vertexSource = vertexSource || defaultVertexSource; 194 | fragmentSource = fragmentSource || defaultFragmentSource; 195 | fragmentSource = 'precision lowp float;' + fragmentSource; 196 | gl.attachShader(this.program, compileSource(gl.VERTEX_SHADER, vertexSource)); 197 | gl.attachShader(this.program, compileSource(gl.FRAGMENT_SHADER, fragmentSource)); 198 | gl.linkProgram(this.program); 199 | } 200 | 201 | Shader.prototype.uniforms = function(uniforms) { 202 | gl.useProgram(this.program); 203 | return this; 204 | }; 205 | 206 | Shader.prototype.drawRect = function(left, top, right, bottom) { 207 | var undefined; 208 | var viewport = gl.getParameter(gl.VIEWPORT); 209 | top = top !== undefined ? (top - viewport[1]) / viewport[3] : 0; 210 | left = left !== undefined ? (left - viewport[0]) / viewport[2] : 0; 211 | right = right !== undefined ? (right - viewport[0]) / viewport[2] : 1; 212 | bottom = bottom !== undefined ? (bottom - viewport[1]) / viewport[3] : 1; 213 | if (gl.vertexBuffer == null) { 214 | gl.vertexBuffer = gl.createBuffer(); 215 | } 216 | gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer); 217 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ left, top, left, bottom, right, top, right, bottom ]), gl.STATIC_DRAW); 218 | if (gl.texCoordBuffer == null) { 219 | gl.texCoordBuffer = gl.createBuffer(); 220 | gl.bindBuffer(gl.ARRAY_BUFFER, gl.texCoordBuffer); 221 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 0, 0, 0, 1, 1, 0, 1, 1 ]), gl.STATIC_DRAW); 222 | } 223 | if (this.vertexAttribute == null) { 224 | this.vertexAttribute = gl.getAttribLocation(this.program, 'vertex'); 225 | gl.enableVertexAttribArray(this.vertexAttribute); 226 | } 227 | if (this.texCoordAttribute == null) { 228 | this.texCoordAttribute = gl.getAttribLocation(this.program, '_texCoord'); 229 | gl.enableVertexAttribArray(this.texCoordAttribute); 230 | } 231 | gl.useProgram(this.program); 232 | gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer); 233 | gl.vertexAttribPointer(this.vertexAttribute, 2, gl.FLOAT, false, 0, 0); 234 | gl.bindBuffer(gl.ARRAY_BUFFER, gl.texCoordBuffer); 235 | gl.vertexAttribPointer(this.texCoordAttribute, 2, gl.FLOAT, false, 0, 0); 236 | gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 237 | }; 238 | 239 | Shader.getDefaultShader = function() { 240 | gl.defaultShader = gl.defaultShader || new Shader(); 241 | return gl.defaultShader; 242 | }; 243 | 244 | return Shader; 245 | })(); 246 | 247 | var Texture = (function() { 248 | Texture.fromElement = function(element) { 249 | var texture = new Texture(0, 0, gl.RGBA, gl.UNSIGNED_BYTE); 250 | texture.loadContentsOf(element); 251 | return texture; 252 | }; 253 | 254 | function Texture(width, height, format, type) { 255 | this.gl = gl; 256 | this.id = gl.createTexture(); 257 | this.width = width; 258 | this.height = height; 259 | this.format = format; 260 | this.type = type; 261 | 262 | gl.bindTexture(gl.TEXTURE_2D, this.id); 263 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 264 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 265 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 266 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 267 | if (width && height) 268 | gl.texImage2D(gl.TEXTURE_2D, 0, this.format, width, height, 0, this.format, this.type, null); 269 | } 270 | 271 | Texture.prototype.loadContentsOf = function(element) { 272 | this.width = element.width || element.videoWidth; 273 | this.height = element.height || element.videoHeight; 274 | gl.bindTexture(gl.TEXTURE_2D, this.id); 275 | gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, this.type, element); 276 | }; 277 | 278 | Texture.prototype.use = function(unit) { 279 | gl.activeTexture(gl.TEXTURE0 + (unit || 0)); 280 | gl.bindTexture(gl.TEXTURE_2D, this.id); 281 | }; 282 | 283 | Texture.prototype.drawTo = function(callback) { 284 | // start rendering to this texture 285 | gl.framebuffer = gl.framebuffer || gl.createFramebuffer(); 286 | gl.bindFramebuffer(gl.FRAMEBUFFER, gl.framebuffer); 287 | gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.id, 0); 288 | gl.viewport(0, 0, this.width, this.height); 289 | 290 | // do the drawing 291 | callback(); 292 | 293 | // stop rendering to this texture 294 | gl.bindFramebuffer(gl.FRAMEBUFFER, null); 295 | }; 296 | 297 | Texture.prototype.swapWith = function(other) { 298 | var temp; 299 | temp = other.id; 300 | other.id = this.id; 301 | this.id = temp; 302 | temp = other.width; 303 | other.width = this.width; 304 | this.width = temp; 305 | temp = other.height; 306 | other.height = this.height; 307 | this.height = temp; 308 | temp = other.format; 309 | other.format = this.format; 310 | this.format = temp; 311 | }; 312 | 313 | return Texture; 314 | })(); 315 | 316 | return exports; 317 | })(); 318 | -------------------------------------------------------------------------------- /sw-engineering-candies-webgl-examples/WebContent/teddy-regards-you/index-tests.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 9 |
21 |
22 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
124 |
125 |
126 |
--------------------------------------------------------------------------------
/sw-engineering-candies-webgl-examples/WebContent/teddy-regards-you/move-head.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MarkusSprunck/webgl-examples/a1fb7b84e598c480df5a2a23f2959af9ed1906ff/sw-engineering-candies-webgl-examples/WebContent/teddy-regards-you/move-head.png
--------------------------------------------------------------------------------
/sw-engineering-candies-webgl-examples/WebContent/teddy-regards-you/moving-averager.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (C) 2013, Markus Sprunck
3 | *
4 | * All rights reserved.
5 | *
6 | * Redistribution and use in source and binary forms, with or
7 | * without modification, are permitted provided that the following
8 | * conditions are met:
9 | *
10 | * - Redistributions of source code must retain the above copyright
11 | * notice, this list of conditions and the following disclaimer.
12 | *
13 | * - Redistributions in binary form must reproduce the above
14 | * copyright notice, this list of conditions and the following
15 | * disclaimer in the documentation and/or other materials provided
16 | * with the distribution.
17 | *
18 | * - The name of its contributor may be used to endorse or promote
19 | * products derived from this software without specific prior
20 | * written permission.
21 | *
22 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND
23 | * CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,
24 | * INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
25 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
26 | * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
27 | * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
28 | * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT
29 | * NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
30 | * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
31 | * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
32 | * STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
33 | * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
34 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
35 | *
36 | *
37 | * MovingAverager:
38 | *
39 | * Calculates the moving average of a number of data
40 | * points.
41 | *
42 | */
43 | function MovingAverager(length) {
44 | this.maxLength = length;
45 | this.nums = [];
46 | }
47 |
48 | MovingAverager.prototype.setValue = function(num) {
49 | this.nums.push(num);
50 | if (this.nums.length > this.maxLength) {
51 | this.nums.splice(0, this.nums.length - this.maxLength);
52 | }
53 | }
54 |
55 | MovingAverager.prototype.getValue = function() {
56 | var sum = 0.0;
57 | for (var i in this.nums) {
58 | sum += this.nums[i];
59 | }
60 | return (sum / this.nums.length);
61 | };
62 |
63 | MovingAverager.prototype.getStandardDeviation = function() {
64 | var sum = 0.0;
65 | var mean = this.getValue();
66 | for (var i in this.nums) {
67 | sum += Math.pow(mean - this.nums[i], 2);
68 | }
69 | return Math.pow(sum / this.nums.length, 0.5);
70 | };
--------------------------------------------------------------------------------
/sw-engineering-candies-webgl-examples/WebContent/teddy-regards-you/qunit-1.23.1.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * QUnit 1.23.1
3 | * https://qunitjs.com/
4 | *
5 | * Copyright jQuery Foundation and other contributors
6 | * Released under the MIT license
7 | * https://jquery.org/license
8 | *
9 | * Date: 2016-04-12T17:29Z
10 | */
11 |
12 | /** Font Family and Sizes */
13 |
14 | #qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult {
15 | font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
16 | }
17 |
18 | #qunit-testrunner-toolbar, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
19 | #qunit-tests { font-size: smaller; }
20 |
21 |
22 | /** Resets */
23 |
24 | #qunit-tests, #qunit-header, #qunit-banner, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
25 | margin: 0;
26 | padding: 0;
27 | }
28 |
29 |
30 | /** Header */
31 |
32 | #qunit-header {
33 | padding: 0.5em 0 0.5em 1em;
34 |
35 | color: #8699A4;
36 | background-color: #0D3349;
37 |
38 | font-size: 1.5em;
39 | line-height: 1em;
40 | font-weight: 400;
41 |
42 | border-radius: 5px 5px 0 0;
43 | }
44 |
45 | #qunit-header a {
46 | text-decoration: none;
47 | color: #C2CCD1;
48 | }
49 |
50 | #qunit-header a:hover,
51 | #qunit-header a:focus {
52 | color: #FFF;
53 | }
54 |
55 | #qunit-testrunner-toolbar label {
56 | display: inline-block;
57 | padding: 0 0.5em 0 0.1em;
58 | }
59 |
60 | #qunit-banner {
61 | height: 5px;
62 | }
63 |
64 | #qunit-testrunner-toolbar {
65 | padding: 0.5em 1em 0.5em 1em;
66 | color: #5E740B;
67 | background-color: #EEE;
68 | overflow: hidden;
69 | }
70 |
71 | #qunit-filteredTest {
72 | padding: 0.5em 1em 0.5em 1em;
73 | background-color: #F4FF77;
74 | color: #366097;
75 | }
76 |
77 | #qunit-userAgent {
78 | padding: 0.5em 1em 0.5em 1em;
79 | background-color: #2B81AF;
80 | color: #FFF;
81 | text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
82 | }
83 |
84 | #qunit-modulefilter-container {
85 | float: right;
86 | padding: 0.2em;
87 | }
88 |
89 | .qunit-url-config {
90 | display: inline-block;
91 | padding: 0.1em;
92 | }
93 |
94 | .qunit-filter {
95 | display: block;
96 | float: right;
97 | margin-left: 1em;
98 | }
99 |
100 | /** Tests: Pass/Fail */
101 |
102 | #qunit-tests {
103 | list-style-position: inside;
104 | }
105 |
106 | #qunit-tests li {
107 | padding: 0.4em 1em 0.4em 1em;
108 | border-bottom: 1px solid #FFF;
109 | list-style-position: inside;
110 | }
111 |
112 | #qunit-tests > li {
113 | display: none;
114 | }
115 |
116 | #qunit-tests li.running,
117 | #qunit-tests li.pass,
118 | #qunit-tests li.fail,
119 | #qunit-tests li.skipped {
120 | display: list-item;
121 | }
122 |
123 | #qunit-tests.hidepass {
124 | position: relative;
125 | }
126 |
127 | #qunit-tests.hidepass li.running,
128 | #qunit-tests.hidepass li.pass {
129 | visibility: hidden;
130 | position: absolute;
131 | width: 0;
132 | height: 0;
133 | padding: 0;
134 | border: 0;
135 | margin: 0;
136 | }
137 |
138 | #qunit-tests li strong {
139 | cursor: pointer;
140 | }
141 |
142 | #qunit-tests li.skipped strong {
143 | cursor: default;
144 | }
145 |
146 | #qunit-tests li a {
147 | padding: 0.5em;
148 | color: #C2CCD1;
149 | text-decoration: none;
150 | }
151 |
152 | #qunit-tests li p a {
153 | padding: 0.25em;
154 | color: #6B6464;
155 | }
156 | #qunit-tests li a:hover,
157 | #qunit-tests li a:focus {
158 | color: #000;
159 | }
160 |
161 | #qunit-tests li .runtime {
162 | float: right;
163 | font-size: smaller;
164 | }
165 |
166 | .qunit-assert-list {
167 | margin-top: 0.5em;
168 | padding: 0.5em;
169 |
170 | background-color: #FFF;
171 |
172 | border-radius: 5px;
173 | }
174 |
175 | .qunit-source {
176 | margin: 0.6em 0 0.3em;
177 | }
178 |
179 | .qunit-collapsed {
180 | display: none;
181 | }
182 |
183 | #qunit-tests table {
184 | border-collapse: collapse;
185 | margin-top: 0.2em;
186 | }
187 |
188 | #qunit-tests th {
189 | text-align: right;
190 | vertical-align: top;
191 | padding: 0 0.5em 0 0;
192 | }
193 |
194 | #qunit-tests td {
195 | vertical-align: top;
196 | }
197 |
198 | #qunit-tests pre {
199 | margin: 0;
200 | white-space: pre-wrap;
201 | word-wrap: break-word;
202 | }
203 |
204 | #qunit-tests del {
205 | background-color: #E0F2BE;
206 | color: #374E0C;
207 | text-decoration: none;
208 | }
209 |
210 | #qunit-tests ins {
211 | background-color: #FFCACA;
212 | color: #500;
213 | text-decoration: none;
214 | }
215 |
216 | /*** Test Counts */
217 |
218 | #qunit-tests b.counts { color: #000; }
219 | #qunit-tests b.passed { color: #5E740B; }
220 | #qunit-tests b.failed { color: #710909; }
221 |
222 | #qunit-tests li li {
223 | padding: 5px;
224 | background-color: #FFF;
225 | border-bottom: none;
226 | list-style-position: inside;
227 | }
228 |
229 | /*** Passing Styles */
230 |
231 | #qunit-tests li li.pass {
232 | color: #3C510C;
233 | background-color: #FFF;
234 | border-left: 10px solid #C6E746;
235 | }
236 |
237 | #qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
238 | #qunit-tests .pass .test-name { color: #366097; }
239 |
240 | #qunit-tests .pass .test-actual,
241 | #qunit-tests .pass .test-expected { color: #999; }
242 |
243 | #qunit-banner.qunit-pass { background-color: #C6E746; }
244 |
245 | /*** Failing Styles */
246 |
247 | #qunit-tests li li.fail {
248 | color: #710909;
249 | background-color: #FFF;
250 | border-left: 10px solid #EE5757;
251 | white-space: pre;
252 | }
253 |
254 | #qunit-tests > li:last-child {
255 | border-radius: 0 0 5px 5px;
256 | }
257 |
258 | #qunit-tests .fail { color: #000; background-color: #EE5757; }
259 | #qunit-tests .fail .test-name,
260 | #qunit-tests .fail .module-name { color: #000; }
261 |
262 | #qunit-tests .fail .test-actual { color: #EE5757; }
263 | #qunit-tests .fail .test-expected { color: #008000; }
264 |
265 | #qunit-banner.qunit-fail { background-color: #EE5757; }
266 |
267 | /*** Skipped tests */
268 |
269 | #qunit-tests .skipped {
270 | background-color: #EBECE9;
271 | }
272 |
273 | #qunit-tests .qunit-skipped-label {
274 | background-color: #F4FF77;
275 | display: inline-block;
276 | font-style: normal;
277 | color: #366097;
278 | line-height: 1.8em;
279 | padding: 0 0.5em;
280 | margin: -0.4em 0.4em -0.4em 0;
281 | }
282 |
283 | /** Result */
284 |
285 | #qunit-testresult {
286 | padding: 0.5em 1em 0.5em 1em;
287 |
288 | color: #2B81AF;
289 | background-color: #D2E0E6;
290 |
291 | border-bottom: 1px solid #FFF;
292 | }
293 | #qunit-testresult .module-name {
294 | font-weight: 700;
295 | }
296 |
297 | /** Fixture */
298 |
299 | #qunit-fixture {
300 | position: absolute;
301 | top: -10000px;
302 | left: -10000px;
303 | width: 1000px;
304 | height: 1000px;
305 | }
306 |
--------------------------------------------------------------------------------
/sw-engineering-candies-webgl-examples/WebContent/teddy-regards-you/request-animation-frame.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Provides requestAnimationFrame in a cross browser way.
3 | * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
4 | */
5 |
6 | if ( !window.requestAnimationFrame ) {
7 |
8 | window.requestAnimationFrame = ( function() {
9 |
10 | return window.webkitRequestAnimationFrame ||
11 | window.mozRequestAnimationFrame ||
12 | window.oRequestAnimationFrame ||
13 | window.msRequestAnimationFrame ||
14 | function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
15 |
16 | window.setTimeout( callback, 1000 / 60 );
17 |
18 | };
19 |
20 | } )();
21 |
22 | }
23 |
--------------------------------------------------------------------------------
/sw-engineering-candies-webgl-examples/WebContent/teddy-regards-you/simple-motion-detector.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (C) 2013-2017, Markus Sprunck
3 | *
4 | * All rights reserved.
5 | *
6 | * Redistribution and use in source and binary forms, with or without
7 | * modification, are permitted provided that the following conditions are met: -
8 | * Redistributions of source code must retain the above copyright notice, this
9 | * list of conditions and the following disclaimer. - Redistributions in binary
10 | * form must reproduce the above copyright notice, this list of conditions and
11 | * the following disclaimer in the documentation and/or other materials provided
12 | * with the distribution. - The name of its contributor may be used to endorse
13 | * or promote products derived from this software without specific prior written
14 | * permission.
15 | *
16 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
17 | * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
18 | * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
19 | * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
20 | * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
21 | * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
22 | * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
23 | * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
24 | * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
25 | * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
26 | * POSSIBILITY OF SUCH DAMAGE.
27 | *
28 | *
29 | * SimpleMotionDetector:
30 | *
31 | * Captures the video signal and compares single frames to detect motion. The
32 | * center of this motion is used to find the viewpoint of the user. With this
33 | * viewpoint the g_camera position will be rotated.
34 | *
35 | */
36 | function SimpleMotionDetector(object) {
37 |
38 | // number of pixels for analysis
39 | var PIXELS_HORIZONTAL = 16 * 4;
40 | var PIXELS_VERTICAL = 10 * 4;
41 |
42 | // size of info window
43 | var WIDTH = 16 * 19;
44 | var HEIGHT = 10 * 19;
45 |
46 | // expected to be THREE.g_camera object
47 | this.object = object;
48 |
49 | // amplification factor for rotation (one is almost natural)
50 | this.amplificationAlpha = 0.25;
51 | this.amplificationGamma = 0.25;
52 |
53 | // in degrees
54 | this.offsetAlpha = -35.0;
55 | this.offsetGamma = -12.0;
56 |
57 | // just the upper part of the video should be detected
58 | this.detectionBorder = 0.85;
59 |
60 | // threshold of detected pixels
61 | this.pixelThreshold = 128;
62 |
63 | // average of all x positions of detected motion
64 | this.averageX = new MovingAverager(250);
65 | this.averageX.setValue(WIDTH / 2);
66 |
67 | // average of all y positions of detected motion
68 | this.averageY = new MovingAverager(250);
69 | this.averageY.setValue(HEIGHT / 2);
70 |
71 | // show canvas
72 | this.showCanvas = true;
73 |
74 | this.isVideoRunning = false;
75 |
76 | this.stop = false;
77 |
78 | this.videoCanvas = document.createElement('canvas');
79 | this.videoCanvas.width = PIXELS_HORIZONTAL;
80 | this.videoCanvas.height = PIXELS_VERTICAL;
81 |
82 | var canvas = document.createElement('canvas');
83 | canvas.width = WIDTH;
84 | canvas.height = HEIGHT;
85 | canvas.style.position = 'absolute';
86 | canvas.style.right = '10px';
87 | canvas.style.bottom = '10px';
88 | canvas.style.opacity = 1.0;
89 | canvas.hidden = !this.showCanvas;
90 | canvas.id = "video_canvas";
91 |
92 | var videoContext = this.videoCanvas.getContext('2d');
93 | var APP = {};
94 | var simpleMotionDetector;
95 | var texture = null;
96 | var ctx = canvas.getContext('2d');
97 | var video;
98 | this.stream;
99 | document.body.appendChild(canvas);
100 |
101 | SimpleMotionDetector.prototype.init = function () {
102 |
103 | simpleMotionDetector = this;
104 |
105 | var _that = this;
106 | video = document.createElement('video');
107 |
108 | if (navigator.mediaDevices) {
109 |
110 | navigator.mediaDevices.getUserMedia({
111 | audio: false,
112 | video: true
113 | }).then(
114 | function (stream) {
115 | video.srcObject = stream;
116 | _that.stream = stream;
117 |
118 | APP.videoWidth = PIXELS_HORIZONTAL;
119 | APP.videoHeight = PIXELS_VERTICAL;
120 | APP.frontCanvas = document.createElement('canvas');
121 | APP.frontCanvas.width = APP.videoWidth;
122 | APP.frontCanvas.height = APP.videoHeight * 2;
123 | APP.ctx = APP.frontCanvas.getContext('2d');
124 | APP.comp = [];
125 | simpleMotionDetector.run();
126 | },
127 | function (err) {
128 | $("#error-message").text("The following error occurred: " + err.name);
129 | }
130 | )
131 | } else {
132 | $("#error-message").text("Your browser does not seem to support UserMedia (video).");
133 | }
134 | }
135 |
136 | SimpleMotionDetector.prototype.analyisMotionPicture = function() {
137 | videoContext.drawImage(canvas, 0, 0);
138 | var data = videoContext.getImageData(0, 0, PIXELS_HORIZONTAL, PIXELS_VERTICAL).data;
139 |
140 | ctx.fillStyle = '#FFFFFF';
141 | ctx.fillRect(0, 0, WIDTH, HEIGHT);
142 | ctx.globalAlpha = 0.2;
143 |
144 | var cubeWidth = WIDTH / PIXELS_HORIZONTAL - 1 | 0;
145 | var cubeHeight = HEIGHT / PIXELS_VERTICAL - 1 | 0;
146 |
147 | // draw movements with blue and green color
148 | var yTopPosition = Number.MAX_VALUE;
149 | for (var y = 0; y < PIXELS_VERTICAL - 1; y++) {
150 | for (var x = 0; x < PIXELS_HORIZONTAL; x++) {
151 | if (data[x * 4 + y * PIXELS_HORIZONTAL * 4] > this.pixelThreshold) {
152 | var xPos = x * WIDTH / PIXELS_HORIZONTAL;
153 | var yPos = y * HEIGHT / PIXELS_VERTICAL;
154 | if (y < PIXELS_VERTICAL * this.detectionBorder) {
155 | if (yTopPosition >= Math.min(yTopPosition, yPos)) {
156 | yTopPosition = yPos;
157 | this.averageX.setValue(xPos);
158 | this.averageY.setValue(yPos);
159 | ctx.fillStyle = '#000000';
160 | ctx.fillRect(xPos, yPos, cubeWidth, cubeHeight);
161 | }
162 | ctx.fillStyle = '#0000FF';
163 | ctx.fillRect(xPos, yPos, cubeWidth, cubeHeight);
164 | } else {
165 | ctx.fillStyle = '#00FF00';
166 | ctx.fillRect(xPos, yPos, cubeWidth, cubeHeight);
167 | }
168 | }
169 | }
170 | }
171 |
172 | // draw orange ellipse for two times empirical standard deviation around
173 | // center
174 | var valueX = simpleMotionDetector.averageX.getValue();
175 | var stddevX = simpleMotionDetector.averageX.getStandardDeviation();
176 | var varianceX = stddevX * stddevX * 4;
177 | var valueY = simpleMotionDetector.averageY.getValue();
178 | var stddevY = simpleMotionDetector.averageY.getStandardDeviation();
179 | var varianceY = stddevY * stddevY * 4;
180 | for (var y = 0; y < PIXELS_VERTICAL - 1; y++) {
181 | for (var x = 0; x < PIXELS_HORIZONTAL; x++) {
182 | var xPos = x * WIDTH / PIXELS_HORIZONTAL;
183 | var yPos = y * HEIGHT / PIXELS_VERTICAL;
184 | if ((xPos - valueX) * (xPos - valueX) / varianceX + (yPos - valueY) * (yPos - valueY) / varianceY < 1) {
185 | ctx.fillStyle = '#F87217';
186 | ctx.fillRect(xPos, yPos, cubeWidth, cubeHeight);
187 | }
188 | }
189 | }
190 |
191 | // draw red cross on center
192 | ctx.fillStyle = '#AA0000';
193 | ctx.fillRect(simpleMotionDetector.averageX.getValue() - cubeWidth * 0.5, simpleMotionDetector.averageY.getValue(), cubeWidth * 1.5, cubeHeight * 0.5);
194 | ctx.fillRect(simpleMotionDetector.averageX.getValue(), simpleMotionDetector.averageY.getValue() - cubeHeight * 0.5, cubeWidth * 0.5, cubeHeight * 1.5);
195 | }
196 |
197 | SimpleMotionDetector.prototype.terminate = function() {
198 | var stream = this.stream;
199 | if (typeof stream !== "undefined") {
200 | var track = stream.getTracks()[0];
201 | track.stop();
202 | }
203 | }
204 |
205 | SimpleMotionDetector.prototype.analyseVideo = function() {
206 | videoContext.drawImage(video, 0, 0, PIXELS_HORIZONTAL, PIXELS_VERTICAL);
207 | APP.ctx.drawImage(this.videoCanvas, 0, 0);
208 | texture.loadContentsOf(APP.frontCanvas);
209 | canvas.draw(texture);
210 | canvas.mirror();
211 | canvas.move();
212 | canvas.update();
213 | APP.ctx.drawImage(this.videoCanvas, 0, PIXELS_VERTICAL);
214 | simpleMotionDetector.analyisMotionPicture();
215 |
216 | var _that = this;
217 | if (!this.stop) {
218 | setTimeout(function() {
219 | _that.analyseVideo();
220 | }, 20);
221 | }
222 | this.isVideoRunning = true;
223 | }
224 |
225 | SimpleMotionDetector.prototype.run = function() {
226 | canvas = fx.canvas();
227 | texture = canvas.texture(APP.frontCanvas);
228 |
229 | var r = confirm("Allow video preview");
230 | if (r == true) {
231 | var promise = video.play();
232 | if (promise !== undefined) {
233 | promise.catch(error => {
234 | console.log("Auto-play was prevented");
235 | }).then(() => {
236 | console.log("Video started");
237 | });
238 | }
239 | }
240 |
241 |
242 | this.analyseVideo();
243 | }
244 |
245 | SimpleMotionDetector.prototype.domElement = canvas;
246 | }
247 |
--------------------------------------------------------------------------------
/sw-engineering-candies-webgl-examples/WebContent/teddy-regards-you/startHTTPServer.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | python -m SimpleHTTPServer
3 |
--------------------------------------------------------------------------------
/sw-engineering-candies-webgl-examples/WebContent/teddy-regards-you/subdivisionmodifier.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @author zz85 / http://twitter.com/blurspline / http://www.lab4games.net/zz85/blog
3 | * @author centerionware / http://www.centerionware.com
4 | *
5 | * Subdivision Geometry Modifier
6 | * using Loop Subdivision Scheme
7 | *
8 | * References:
9 | * http://graphics.stanford.edu/~mdfisher/subdivision.html
10 | * http://www.holmes3d.net/graphics/subdivision/
11 | * http://www.cs.rutgers.edu/~decarlo/readings/subdiv-sg00c.pdf
12 | *
13 | * Known Issues:
14 | * - currently doesn't handle "Sharp Edges"
15 | */
16 |
17 | THREE.SubdivisionModifier = function ( subdivisions ) {
18 |
19 | this.subdivisions = ( subdivisions === undefined ) ? 1 : subdivisions;
20 |
21 | };
22 |
23 | // Applies the "modify" pattern
24 | THREE.SubdivisionModifier.prototype.modify = function ( geometry ) {
25 |
26 | var repeats = this.subdivisions;
27 |
28 | while ( repeats -- > 0 ) {
29 |
30 | this.smooth( geometry );
31 |
32 | }
33 |
34 | geometry.computeFaceNormals();
35 | geometry.computeVertexNormals();
36 |
37 | };
38 |
39 | ( function() {
40 |
41 | // Some constants
42 | var WARNINGS = ! true; // Set to true for development
43 | var ABC = [ 'a', 'b', 'c' ];
44 |
45 |
46 | function getEdge( a, b, map ) {
47 |
48 | var vertexIndexA = Math.min( a, b );
49 | var vertexIndexB = Math.max( a, b );
50 |
51 | var key = vertexIndexA + "_" + vertexIndexB;
52 |
53 | return map[ key ];
54 |
55 | }
56 |
57 |
58 | function processEdge( a, b, vertices, map, face, metaVertices ) {
59 |
60 | var vertexIndexA = Math.min( a, b );
61 | var vertexIndexB = Math.max( a, b );
62 |
63 | var key = vertexIndexA + "_" + vertexIndexB;
64 |
65 | var edge;
66 |
67 | if ( key in map ) {
68 |
69 | edge = map[ key ];
70 |
71 | } else {
72 |
73 | var vertexA = vertices[ vertexIndexA ];
74 | var vertexB = vertices[ vertexIndexB ];
75 |
76 | edge = {
77 |
78 | a: vertexA, // pointer reference
79 | b: vertexB,
80 | newEdge: null,
81 | // aIndex: a, // numbered reference
82 | // bIndex: b,
83 | faces: [] // pointers to face
84 |
85 | };
86 |
87 | map[ key ] = edge;
88 |
89 | }
90 |
91 | edge.faces.push( face );
92 |
93 | metaVertices[ a ].edges.push( edge );
94 | metaVertices[ b ].edges.push( edge );
95 |
96 |
97 | }
98 |
99 | function generateLookups( vertices, faces, metaVertices, edges ) {
100 |
101 | var i, il, face, edge;
102 |
103 | for ( i = 0, il = vertices.length; i < il; i ++ ) {
104 |
105 | metaVertices[ i ] = { edges: [] };
106 |
107 | }
108 |
109 | for ( i = 0, il = faces.length; i < il; i ++ ) {
110 |
111 | face = faces[ i ];
112 |
113 | processEdge( face.a, face.b, vertices, edges, face, metaVertices );
114 | processEdge( face.b, face.c, vertices, edges, face, metaVertices );
115 | processEdge( face.c, face.a, vertices, edges, face, metaVertices );
116 |
117 | }
118 |
119 | }
120 |
121 | function newFace( newFaces, a, b, c ) {
122 |
123 | newFaces.push( new THREE.Face3( a, b, c ) );
124 |
125 | }
126 |
127 | function midpoint( a, b ) {
128 |
129 | return ( Math.abs( b - a ) / 2 ) + Math.min( a, b );
130 |
131 | }
132 |
133 | function newUv( newUvs, a, b, c ) {
134 |
135 | newUvs.push( [ a.clone(), b.clone(), c.clone() ] );
136 |
137 | }
138 |
139 | /////////////////////////////
140 |
141 | // Performs one iteration of Subdivision
142 | THREE.SubdivisionModifier.prototype.smooth = function ( geometry ) {
143 |
144 | var tmp = new THREE.Vector3();
145 |
146 | var oldVertices, oldFaces, oldUvs;
147 | var newVertices, newFaces, newUVs = [];
148 |
149 | var n, l, i, il, j, k;
150 | var metaVertices, sourceEdges;
151 |
152 | // new stuff.
153 | var sourceEdges, newEdgeVertices, newSourceVertices;
154 |
155 | oldVertices = geometry.vertices; // { x, y, z}
156 | oldFaces = geometry.faces; // { a: oldVertex1, b: oldVertex2, c: oldVertex3 }
157 | oldUvs = geometry.faceVertexUvs[ 0 ];
158 |
159 | var hasUvs = oldUvs !== undefined && oldUvs.length > 0;
160 |
161 | /******************************************************
162 | *
163 | * Step 0: Preprocess Geometry to Generate edges Lookup
164 | *
165 | *******************************************************/
166 |
167 | metaVertices = new Array( oldVertices.length );
168 | sourceEdges = {}; // Edge => { oldVertex1, oldVertex2, faces[] }
169 |
170 | generateLookups( oldVertices, oldFaces, metaVertices, sourceEdges );
171 |
172 |
173 | /******************************************************
174 | *
175 | * Step 1.
176 | * For each edge, create a new Edge Vertex,
177 | * then position it.
178 | *
179 | *******************************************************/
180 |
181 | newEdgeVertices = [];
182 | var other, currentEdge, newEdge, face;
183 | var edgeVertexWeight, adjacentVertexWeight, connectedFaces;
184 |
185 | for ( i in sourceEdges ) {
186 |
187 | currentEdge = sourceEdges[ i ];
188 | newEdge = new THREE.Vector3();
189 |
190 | edgeVertexWeight = 3 / 8;
191 | adjacentVertexWeight = 1 / 8;
192 |
193 | connectedFaces = currentEdge.faces.length;
194 |
195 | // check how many linked faces. 2 should be correct.
196 | if ( connectedFaces != 2 ) {
197 |
198 | // if length is not 2, handle condition
199 | edgeVertexWeight = 0.5;
200 | adjacentVertexWeight = 0;
201 |
202 | if ( connectedFaces != 1 ) {
203 |
204 | if ( WARNINGS ) console.warn( 'Subdivision Modifier: Number of connected faces != 2, is: ', connectedFaces, currentEdge );
205 |
206 | }
207 |
208 | }
209 |
210 | newEdge.addVectors( currentEdge.a, currentEdge.b ).multiplyScalar( edgeVertexWeight );
211 |
212 | tmp.set( 0, 0, 0 );
213 |
214 | for ( j = 0; j < connectedFaces; j ++ ) {
215 |
216 | face = currentEdge.faces[ j ];
217 |
218 | for ( k = 0; k < 3; k ++ ) {
219 |
220 | other = oldVertices[ face[ ABC[ k ] ] ];
221 | if ( other !== currentEdge.a && other !== currentEdge.b ) break;
222 |
223 | }
224 |
225 | tmp.add( other );
226 |
227 | }
228 |
229 | tmp.multiplyScalar( adjacentVertexWeight );
230 | newEdge.add( tmp );
231 |
232 | currentEdge.newEdge = newEdgeVertices.length;
233 | newEdgeVertices.push( newEdge );
234 |
235 | // console.log(currentEdge, newEdge);
236 |
237 | }
238 |
239 | /******************************************************
240 | *
241 | * Step 2.
242 | * Reposition each source vertices.
243 | *
244 | *******************************************************/
245 |
246 | var beta, sourceVertexWeight, connectingVertexWeight;
247 | var connectingEdge, connectingEdges, oldVertex, newSourceVertex;
248 | newSourceVertices = [];
249 |
250 | for ( i = 0, il = oldVertices.length; i < il; i ++ ) {
251 |
252 | oldVertex = oldVertices[ i ];
253 |
254 | // find all connecting edges (using lookupTable)
255 | connectingEdges = metaVertices[ i ].edges;
256 | n = connectingEdges.length;
257 |
258 | if ( n == 3 ) {
259 |
260 | beta = 3 / 16;
261 |
262 | } else if ( n > 3 ) {
263 |
264 | beta = 3 / ( 8 * n ); // Warren's modified formula
265 |
266 | }
267 |
268 | // Loop's original beta formula
269 | // beta = 1 / n * ( 5/8 - Math.pow( 3/8 + 1/4 * Math.cos( 2 * Math. PI / n ), 2) );
270 |
271 | sourceVertexWeight = 1 - n * beta;
272 | connectingVertexWeight = beta;
273 |
274 | if ( n <= 2 ) {
275 |
276 | // crease and boundary rules
277 | // console.warn('crease and boundary rules');
278 |
279 | if ( n == 2 ) {
280 |
281 | if ( WARNINGS ) console.warn( '2 connecting edges', connectingEdges );
282 | sourceVertexWeight = 3 / 4;
283 | connectingVertexWeight = 1 / 8;
284 |
285 | // sourceVertexWeight = 1;
286 | // connectingVertexWeight = 0;
287 |
288 | } else if ( n == 1 ) {
289 |
290 | if ( WARNINGS ) console.warn( 'only 1 connecting edge' );
291 |
292 | } else if ( n == 0 ) {
293 |
294 | if ( WARNINGS ) console.warn( '0 connecting edges' );
295 |
296 | }
297 |
298 | }
299 |
300 | newSourceVertex = oldVertex.clone().multiplyScalar( sourceVertexWeight );
301 |
302 | tmp.set( 0, 0, 0 );
303 |
304 | for ( j = 0; j < n; j ++ ) {
305 |
306 | connectingEdge = connectingEdges[ j ];
307 | other = connectingEdge.a !== oldVertex ? connectingEdge.a : connectingEdge.b;
308 | tmp.add( other );
309 |
310 | }
311 |
312 | tmp.multiplyScalar( connectingVertexWeight );
313 | newSourceVertex.add( tmp );
314 |
315 | newSourceVertices.push( newSourceVertex );
316 |
317 | }
318 |
319 |
320 | /******************************************************
321 | *
322 | * Step 3.
323 | * Generate Faces between source vertices
324 | * and edge vertices.
325 | *
326 | *******************************************************/
327 |
328 | newVertices = newSourceVertices.concat( newEdgeVertices );
329 | var sl = newSourceVertices.length, edge1, edge2, edge3;
330 | newFaces = [];
331 |
332 | var uv, x0, x1, x2;
333 | var x3 = new THREE.Vector2();
334 | var x4 = new THREE.Vector2();
335 | var x5 = new THREE.Vector2();
336 |
337 | for ( i = 0, il = oldFaces.length; i < il; i ++ ) {
338 |
339 | face = oldFaces[ i ];
340 |
341 | // find the 3 new edges vertex of each old face
342 |
343 | edge1 = getEdge( face.a, face.b, sourceEdges ).newEdge + sl;
344 | edge2 = getEdge( face.b, face.c, sourceEdges ).newEdge + sl;
345 | edge3 = getEdge( face.c, face.a, sourceEdges ).newEdge + sl;
346 |
347 | // create 4 faces.
348 |
349 | newFace( newFaces, edge1, edge2, edge3 );
350 | newFace( newFaces, face.a, edge1, edge3 );
351 | newFace( newFaces, face.b, edge2, edge1 );
352 | newFace( newFaces, face.c, edge3, edge2 );
353 |
354 | // create 4 new uv's
355 |
356 | if ( hasUvs ) {
357 |
358 | uv = oldUvs[ i ];
359 |
360 | x0 = uv[ 0 ];
361 | x1 = uv[ 1 ];
362 | x2 = uv[ 2 ];
363 |
364 | x3.set( midpoint( x0.x, x1.x ), midpoint( x0.y, x1.y ) );
365 | x4.set( midpoint( x1.x, x2.x ), midpoint( x1.y, x2.y ) );
366 | x5.set( midpoint( x0.x, x2.x ), midpoint( x0.y, x2.y ) );
367 |
368 | newUv( newUVs, x3, x4, x5 );
369 | newUv( newUVs, x0, x3, x5 );
370 |
371 | newUv( newUVs, x1, x4, x3 );
372 | newUv( newUVs, x2, x5, x4 );
373 |
374 | }
375 |
376 | }
377 |
378 | // Overwrite old arrays
379 | geometry.vertices = newVertices;
380 | geometry.faces = newFaces;
381 | if ( hasUvs ) geometry.faceVertexUvs[ 0 ] = newUVs;
382 |
383 | // console.log('done');
384 |
385 | };
386 |
387 | } )();
388 |
--------------------------------------------------------------------------------
/sw-engineering-candies-webgl-examples/WebContent/teddy-regards-you/webgl-motion-detector.iml:
--------------------------------------------------------------------------------
1 |
2 |
23 |
24 |
25 |
88 |
26 |
86 |
87 |
27 |
28 |
29 |
31 | Teddy Regards You!
30 |
32 |
33 |
34 |
80 |
81 |
82 |
85 |
36 | Grant camera permission for the page37 | |
38 | |
42 | |
43 | This page uses the browsers video signal as input for a 44 | simple motion detector to move the teddy bear. Please enable the 45 | capture of video signal in your browser. 46 | 47 | | 48 |
51 | Move your head in front of camera.52 | |
53 | |
 |
57 | The motion detector calculates the average movement for 58 | several frames and teddy bear looks in this direction. To fine 59 | tune the detection parameter and control the video signal you 60 | may 'Open Controls' on the right top of the page. | 61 |
64 | Fork on GitHub65 | |
66 | |
 |
70 | This experiment has been developed by 72 | Markus Sprunck. The complete source code is available. It is 73 | implemented in Javascript based on three.ja and glfx.js 74 | libraries. You may fork me at GitHub and visit my blog www.sw-engineering-candies.com | 78 |