├── .gitignore ├── README.md ├── css └── base.css ├── favicon.ico ├── img ├── ball-map.jpg ├── ball.jpg ├── canyon-map.jpg ├── canyon.jpg ├── lady-map.jpg ├── lady.jpg ├── mount-map.jpg └── mount.jpg ├── index.html ├── index2.html ├── index3.html ├── index4.html └── js ├── app.js ├── lib └── gyronorm.js ├── shaders ├── fragment.glsl └── vertex.glsl └── src.js /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Fake 3D Image Effect with WebGL 2 | 3 | An interactive "fake" 3D effect for images with plain WebGL. 4 | 5 | ![Fake 3D Image Effect](https://tympanus.net/codrops/wp-content/uploads/2019/02/Fake3dEffect_featured1.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=38413) 8 | 9 | [Demo](http://tympanus.net/Tutorials/Fake3DEffect/) 10 | 11 | ## Credits 12 | 13 | * [Gyronorm](https://github.com/dorukeker/gyronorm.js/) library by [Doruk Eker](http://dorukeker.com) 14 | * Photo by [Cosmic Timetraveler](https://unsplash.com/photos/YK_8mABhrtc) 15 | * Photo by [Chelsea Ferenando](https://unsplash.com/photos/WJRZNL7rDF8) 16 | * Photo by [Rio Syhputra](https://unsplash.com/photos/JnOHvMgw_Jo) 17 | * Phoyo by [Jonatan Pie](https://unsplash.com/photos/3l3RwQdHRHg) 18 | 19 | ## License 20 | This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used. 21 | 22 | ## Misc 23 | 24 | Follow akella: [Twitter](https://twitter.com/akella), [Instagram](http://instagram.com/akella_), [Facebook](https://facebook.com/akella), [GitHub](https://github.com/akella) 25 | 26 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/) 27 | 28 | 29 | [© Codrops 2018](http://www.codrops.com) 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} 2 | *, 3 | *::after, 4 | *::before { 5 | box-sizing: border-box; 6 | } 7 | 8 | :root { 9 | font-size: 16px; 10 | } 11 | 12 | body { 13 | --color-text: #fff; 14 | --color-bg: #0e0e0f; 15 | --color-link: #826437; 16 | --color-link-hover: #fff; 17 | color: var(--color-text); 18 | background-color: var(--color-bg); 19 | font-family: moderno-fb, "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; 20 | -webkit-font-smoothing: antialiased; 21 | -moz-osx-font-smoothing: grayscale; 22 | overscroll-behavior: none; 23 | } 24 | 25 | .demo-2 { 26 | font-family: Futura, "futura-pt", Arial, sans-serif; 27 | } 28 | 29 | .demo-2, 30 | .demo-3 { 31 | --color-link: #fbc966; 32 | } 33 | 34 | .demo-4 { 35 | --color-link: #52e093; 36 | } 37 | 38 | #gl { 39 | width: 100vw; 40 | height: 100vh; 41 | left: 0; 42 | top: 0; 43 | position: absolute; 44 | } 45 | 46 | canvas { 47 | display: block; 48 | } 49 | 50 | /* Page Loader */ 51 | .js .loading::before { 52 | content: ''; 53 | position: fixed; 54 | z-index: 100000; 55 | top: 0; 56 | left: 0; 57 | width: 100%; 58 | height: 100%; 59 | background: var(--color-bg); 60 | } 61 | 62 | .js .loading::after { 63 | content: ''; 64 | position: fixed; 65 | z-index: 100000; 66 | top: 50%; 67 | left: 50%; 68 | width: 60px; 69 | height: 60px; 70 | margin: -30px 0 0 -30px; 71 | pointer-events: none; 72 | border-radius: 50%; 73 | opacity: 0.4; 74 | background: var(--color-link); 75 | animation: loaderAnim 0.7s linear infinite alternate forwards; 76 | } 77 | 78 | @keyframes loaderAnim { 79 | to { 80 | opacity: 1; 81 | transform: scale3d(0.5,0.5,1); 82 | } 83 | } 84 | 85 | a { 86 | text-decoration: none; 87 | color: var(--color-link); 88 | outline: none; 89 | } 90 | 91 | a:hover, 92 | a:focus { 93 | color: var(--color-link-hover); 94 | outline: none; 95 | } 96 | 97 | .message { 98 | background: var(--color-text); 99 | color: var(--color-bg); 100 | padding: 1rem; 101 | position: fixed; 102 | top: 0; 103 | width: 100%; 104 | z-index: 10000; 105 | text-align: center; 106 | } 107 | 108 | .frame { 109 | padding: 3rem 5vw; 110 | text-align: center; 111 | position: relative; 112 | z-index: 1000; 113 | height: 100vh; 114 | display: flex; 115 | flex-direction: column; 116 | align-items: center; 117 | justify-content: center; 118 | } 119 | 120 | .frame > * { 121 | position: relative; 122 | } 123 | 124 | .frame__title { 125 | font-size: 1.25rem; 126 | margin: 0; 127 | font-weight: normal; 128 | } 129 | 130 | .frame__tagline { 131 | display: none; 132 | margin: 0.5rem 0 2rem; 133 | } 134 | 135 | .frame__links { 136 | margin: 1rem 0; 137 | } 138 | 139 | .frame a { 140 | text-transform: lowercase; 141 | } 142 | 143 | .frame__links a:not(:last-child), 144 | .frame__demos a:not(:last-child) { 145 | margin-right: 1rem; 146 | } 147 | 148 | .frame__demos { 149 | margin: 1rem 0; 150 | } 151 | 152 | .frame__demo--current, 153 | .frame__demo--current:hover { 154 | color: var(--color-text); 155 | } 156 | 157 | .frame__content { 158 | line-height: 0.8; 159 | pointer-events: none; 160 | margin-top: 13vh; 161 | font-size: 40vw; 162 | font-family: essonnes-display, serif; 163 | mix-blend-mode: soft-light; 164 | font-weight: normal; 165 | text-align: center; 166 | color: #c2ba8b; 167 | } 168 | 169 | .demo-2 .frame__content { 170 | font-size: 9vw; 171 | text-transform: uppercase; 172 | font-weight: bold; 173 | mix-blend-mode: soft-light; 174 | text-align: left; 175 | color: #fff; 176 | font-family: Futura, "futura-pt", Arial, sans-serif; 177 | } 178 | 179 | .demo-3 .frame__content { 180 | color: #24211d; 181 | } 182 | 183 | .demo-4 .frame__content { 184 | color: #75c298; 185 | mix-blend-mode: overlay; 186 | } 187 | 188 | @media screen and (min-width: 53em) { 189 | .message { 190 | display: none; 191 | } 192 | .frame { 193 | position: fixed; 194 | text-align: left; 195 | z-index: 10000; 196 | top: 0; 197 | left: 0; 198 | display: grid; 199 | align-content: space-between; 200 | width: 100%; 201 | max-width: none; 202 | height: 100vh; 203 | padding: 2rem 3rem; 204 | pointer-events: none; 205 | grid-template-columns: 75% 25%; 206 | grid-template-rows: auto auto auto; 207 | grid-template-areas: 'title links' 208 | 'content content' 209 | 'github demos'; 210 | } 211 | .frame__title-wrap { 212 | grid-area: title; 213 | display: flex; 214 | } 215 | .frame__title { 216 | font-size: 1rem; 217 | margin: 0; 218 | } 219 | .frame__tagline { 220 | margin: 0 0 0 1rem; 221 | padding: 0 0 0 1rem; 222 | opacity: 0.6; 223 | display: block; 224 | } 225 | .frame__github { 226 | grid-area: github; 227 | justify-self: start; 228 | margin: 0; 229 | } 230 | .frame__demos { 231 | margin: 0; 232 | grid-area: demos; 233 | justify-self: end; 234 | } 235 | .frame__links { 236 | grid-area: links; 237 | padding: 0; 238 | justify-self: end; 239 | } 240 | .frame__content { 241 | grid-area: content; 242 | margin: 0; 243 | } 244 | .frame a { 245 | pointer-events: auto; 246 | } 247 | } 248 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/fake3d/c86d190b8ab0a5e8d3eae011f1c1a68601ffc77e/favicon.ico -------------------------------------------------------------------------------- /img/ball-map.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/fake3d/c86d190b8ab0a5e8d3eae011f1c1a68601ffc77e/img/ball-map.jpg -------------------------------------------------------------------------------- /img/ball.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/fake3d/c86d190b8ab0a5e8d3eae011f1c1a68601ffc77e/img/ball.jpg -------------------------------------------------------------------------------- /img/canyon-map.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/fake3d/c86d190b8ab0a5e8d3eae011f1c1a68601ffc77e/img/canyon-map.jpg -------------------------------------------------------------------------------- /img/canyon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/fake3d/c86d190b8ab0a5e8d3eae011f1c1a68601ffc77e/img/canyon.jpg -------------------------------------------------------------------------------- /img/lady-map.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/fake3d/c86d190b8ab0a5e8d3eae011f1c1a68601ffc77e/img/lady-map.jpg -------------------------------------------------------------------------------- /img/lady.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/fake3d/c86d190b8ab0a5e8d3eae011f1c1a68601ffc77e/img/lady.jpg -------------------------------------------------------------------------------- /img/mount-map.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/fake3d/c86d190b8ab0a5e8d3eae011f1c1a68601ffc77e/img/mount-map.jpg -------------------------------------------------------------------------------- /img/mount.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/fake3d/c86d190b8ab0a5e8d3eae011f1c1a68601ffc77e/img/mount.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Fake 3D Effect with WebGL Shaders | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
Tilt your phone to see the effect.
17 |
18 |
24 |
25 |
26 |

Fake 3D Effect with Shaders

27 |

Move your mouse around.

28 |
29 |
30 | Previous Demo 31 | Article 32 |
33 | GitHub 34 |
35 | demo 1 36 | demo 2 37 | demo 3 38 | demo 4 39 |
40 |
QO
41 |
42 |
43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Fake 3D Effect with WebGL Shaders | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
Tilt your phone to see the effect.
17 |
18 |
24 |
25 |
26 |

Fake 3D Effect with Shaders

27 |

Move your mouse around.

28 |
29 |
30 | Previous Demo 31 | Article 32 |
33 | GitHub 34 |
35 | demo 1 36 | demo 2 37 | demo 3 38 | demo 4 39 |
40 |
Attitude is
Everything.
41 |
42 |
43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Fake 3D Effect with WebGL Shaders | Demo 3 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
Tilt your phone to see the effect.
17 |
18 |
24 |
25 |
26 |

Fake 3D Effect with Shaders

27 |

Move your mouse around.

28 |
29 |
30 | Previous Demo 31 | Article 32 |
33 | GitHub 34 |
35 | demo 1 36 | demo 2 37 | demo 3 38 | demo 4 39 |
40 |
W
41 |
42 |
43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Fake 3D Effect with WebGL Shaders | Demo 4 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
Tilt your phone to see the effect.
17 |
18 |
24 |
25 |
26 |

Fake 3D Effect with Shaders

27 |

Move your mouse around.

28 |
29 |
30 | Previous Demo 31 | Article 32 |
33 | GitHub 34 |
35 | demo 1 36 | demo 2 37 | demo 3 38 | demo 4 39 |
40 |
S
41 |
42 |
43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | !function(t){var e={};function i(a){if(e[a])return e[a].exports;var n=e[a]={i:a,l:!1,exports:{}};return t[a].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.m=t,i.c=e,i.d=function(t,e,a){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:a})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)i.d(a,n,function(e){return t[e]}.bind(null,n));return a},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="js/",i(i.s=0)}([function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=function(){function t(t,e){for(var i=0;i=e?t:e)),t}e.default=l,h.prototype.set=function(){for(var t="uniform"+this.suffix,e=arguments.length,i=Array(e),a=0;a0?1:-1}function i(t){return new Promise(function(e,i){!function a(n){setTimeout(function(){t&&t.data?e():n>=20?i():a(++n)},50)}(0)})}function a(){d=m?(t.screen.orientation.angle||0)*c:(t.orientation||0)*c}function n(t){for(var e in u.orientation.data=t,u.orientation.callbacks)u.orientation.callbacks[e].call(this)}function o(t){for(var e in u.motion.data=t,u.motion.callbacks)u.motion.callbacks[e].call(this)}if(void 0===t.FULLTILT||null===t.FULLTILT){var r=Math.PI,s=r/2,l=2*r,c=r/180,h=180/r,u={orientation:{active:!1,callbacks:[],data:void 0},motion:{active:!1,callbacks:[],data:void 0}},m=!(!t.screen||!t.screen.orientation||void 0===t.screen.orientation.angle||null===t.screen.orientation.angle),d=(m?t.screen.orientation.angle:t.orientation||0)*c,v=s,g=r,f=l/3,p=-s,y={version:"0.5.3",getDeviceOrientation:function(t){return new Promise(function(e,a){var n=new y.DeviceOrientation(t);n.start(),new i(u.orientation).then(function(){n._alphaAvailable=u.orientation.data.alpha&&null!==u.orientation.data.alpha,n._betaAvailable=u.orientation.data.beta&&null!==u.orientation.data.beta,n._gammaAvailable=u.orientation.data.gamma&&null!==u.orientation.data.gamma,e(n)}).catch(function(){n.stop(),a("DeviceOrientation is not supported")})})},getDeviceMotion:function(t){return new Promise(function(e,a){var n=new y.DeviceMotion(t);n.start(),new i(u.motion).then(function(){n._accelerationXAvailable=u.motion.data.acceleration&&u.motion.data.acceleration.x,n._accelerationYAvailable=u.motion.data.acceleration&&u.motion.data.acceleration.y,n._accelerationZAvailable=u.motion.data.acceleration&&u.motion.data.acceleration.z,n._accelerationIncludingGravityXAvailable=u.motion.data.accelerationIncludingGravity&&u.motion.data.accelerationIncludingGravity.x,n._accelerationIncludingGravityYAvailable=u.motion.data.accelerationIncludingGravity&&u.motion.data.accelerationIncludingGravity.y,n._accelerationIncludingGravityZAvailable=u.motion.data.accelerationIncludingGravity&&u.motion.data.accelerationIncludingGravity.z,n._rotationRateAlphaAvailable=u.motion.data.rotationRate&&u.motion.data.rotationRate.alpha,n._rotationRateBetaAvailable=u.motion.data.rotationRate&&u.motion.data.rotationRate.beta,n._rotationRateGammaAvailable=u.motion.data.rotationRate&&u.motion.data.rotationRate.gamma,e(n)}).catch(function(){n.stop(),a("DeviceMotion is not supported")})})},Quaternion:function(t,i,a,n){var o;this.set=function(t,e,i,a){this.x=t||0,this.y=e||0,this.z=i||0,this.w=a||1},this.copy=function(t){this.x=t.x,this.y=t.y,this.z=t.z,this.w=t.w},this.setFromEuler=function(){var t,e,i,a,n,o,r,s,l,h,u,m;return function(d){return i=((d=d||{}).alpha||0)*c,t=(d.beta||0)*c,e=(d.gamma||0)*c,o=i/2,a=t/2,n=e/2,r=Math.cos(a),s=Math.cos(n),l=Math.cos(o),h=Math.sin(a),u=Math.sin(n),m=Math.sin(o),this.set(h*s*l-r*u*m,r*u*l+h*s*m,r*s*m+h*u*l,r*s*l-h*u*m),this.normalize(),this}}(),this.setFromRotationMatrix=function(){var t;return function(i){return t=i.elements,this.set(.5*Math.sqrt(1+t[0]-t[4]-t[8])*e(t[7]-t[5]),.5*Math.sqrt(1-t[0]+t[4]-t[8])*e(t[2]-t[6]),.5*Math.sqrt(1-t[0]-t[4]+t[8])*e(t[3]-t[1]),.5*Math.sqrt(1+t[0]+t[4]+t[8])),this}}(),this.multiply=function(t){return o=y.Quaternion.prototype.multiplyQuaternions(this,t),this.copy(o),this},this.rotateX=function(t){return o=y.Quaternion.prototype.rotateByAxisAngle(this,[1,0,0],t),this.copy(o),this},this.rotateY=function(t){return o=y.Quaternion.prototype.rotateByAxisAngle(this,[0,1,0],t),this.copy(o),this},this.rotateZ=function(t){return o=y.Quaternion.prototype.rotateByAxisAngle(this,[0,0,1],t),this.copy(o),this},this.normalize=function(){return y.Quaternion.prototype.normalize(this)},this.set(t,i,a,n)}};y.Quaternion.prototype={constructor:y.Quaternion,multiplyQuaternions:function(){var t=new y.Quaternion;return function(e,i){var a=e.x,n=e.y,o=e.z,r=e.w,s=i.x,l=i.y,c=i.z,h=i.w;return t.set(a*h+r*s+n*c-o*l,n*h+r*l+o*s-a*c,o*h+r*c+a*l-n*s,r*h-a*s-n*l-o*c),t}}(),normalize:function(t){var e=Math.sqrt(t.x*t.x+t.y*t.y+t.z*t.z+t.w*t.w);return 0===e?(t.x=0,t.y=0,t.z=0,t.w=1):(e=1/e,t.x*=e,t.y*=e,t.z*=e,t.w*=e),t},rotateByAxisAngle:function(){var t,e,i=new y.Quaternion,a=new y.Quaternion;return function(n,o,r){return t=(r||0)/2,e=Math.sin(t),a.set((o[0]||0)*e,(o[1]||0)*e,(o[2]||0)*e,Math.cos(t)),i=y.Quaternion.prototype.multiplyQuaternions(n,a),y.Quaternion.prototype.normalize(i)}}()},y.RotationMatrix=function(t,e,i,a,n,o,r,s,l){var h;this.elements=new Float32Array(9),this.identity=function(){return this.set(1,0,0,0,1,0,0,0,1),this},this.set=function(t,e,i,a,n,o,r,s,l){this.elements[0]=t||1,this.elements[1]=e||0,this.elements[2]=i||0,this.elements[3]=a||0,this.elements[4]=n||1,this.elements[5]=o||0,this.elements[6]=r||0,this.elements[7]=s||0,this.elements[8]=l||1},this.copy=function(t){this.elements[0]=t.elements[0],this.elements[1]=t.elements[1],this.elements[2]=t.elements[2],this.elements[3]=t.elements[3],this.elements[4]=t.elements[4],this.elements[5]=t.elements[5],this.elements[6]=t.elements[6],this.elements[7]=t.elements[7],this.elements[8]=t.elements[8]},this.setFromEuler=function(){var t,e,i,a,n,o,r,s,l;return function(h){return i=((h=h||{}).alpha||0)*c,t=(h.beta||0)*c,e=(h.gamma||0)*c,a=Math.cos(t),n=Math.cos(e),o=Math.cos(i),r=Math.sin(t),s=Math.sin(e),l=Math.sin(i),this.set(o*n-l*r*s,-a*l,n*l*r+o*s,n*l+o*r*s,o*a,l*s-o*n*r,-a*s,r,a*n),this.normalize(),this}}(),this.setFromQuaternion=function(){var t,e,i,a;return function(n){return t=n.w*n.w,e=n.x*n.x,i=n.y*n.y,a=n.z*n.z,this.set(t+e-i-a,2*(n.x*n.y-n.w*n.z),2*(n.x*n.z+n.w*n.y),2*(n.x*n.y+n.w*n.z),t-e+i-a,2*(n.y*n.z-n.w*n.x),2*(n.x*n.z-n.w*n.y),2*(n.y*n.z+n.w*n.x),t-e-i+a),this}}(),this.multiply=function(t){return h=y.RotationMatrix.prototype.multiplyMatrices(this,t),this.copy(h),this},this.rotateX=function(t){return h=y.RotationMatrix.prototype.rotateByAxisAngle(this,[1,0,0],t),this.copy(h),this},this.rotateY=function(t){return h=y.RotationMatrix.prototype.rotateByAxisAngle(this,[0,1,0],t),this.copy(h),this},this.rotateZ=function(t){return h=y.RotationMatrix.prototype.rotateByAxisAngle(this,[0,0,1],t),this.copy(h),this},this.normalize=function(){return y.RotationMatrix.prototype.normalize(this)},this.set(t,e,i,a,n,o,r,s,l)},y.RotationMatrix.prototype={constructor:y.RotationMatrix,multiplyMatrices:function(){var t,e,i=new y.RotationMatrix;return function(a,n){return t=a.elements,e=n.elements,i.set(t[0]*e[0]+t[1]*e[3]+t[2]*e[6],t[0]*e[1]+t[1]*e[4]+t[2]*e[7],t[0]*e[2]+t[1]*e[5]+t[2]*e[8],t[3]*e[0]+t[4]*e[3]+t[5]*e[6],t[3]*e[1]+t[4]*e[4]+t[5]*e[7],t[3]*e[2]+t[4]*e[5]+t[5]*e[8],t[6]*e[0]+t[7]*e[3]+t[8]*e[6],t[6]*e[1]+t[7]*e[4]+t[8]*e[7],t[6]*e[2]+t[7]*e[5]+t[8]*e[8]),i}}(),normalize:function(t){var e=t.elements,i=e[0]*e[4]*e[8]-e[0]*e[5]*e[7]-e[1]*e[3]*e[8]+e[1]*e[5]*e[6]+e[2]*e[3]*e[7]-e[2]*e[4]*e[6];return e[0]/=i,e[1]/=i,e[2]/=i,e[3]/=i,e[4]/=i,e[5]/=i,e[6]/=i,e[7]/=i,e[8]/=i,t.elements=e,t},rotateByAxisAngle:function(){var t,e,i=new y.RotationMatrix,a=new y.RotationMatrix,n=!1;return function(o,r,s){return a.identity(),n=!1,t=Math.sin(s),e=Math.cos(s),1===r[0]&&0===r[1]&&0===r[2]?(n=!0,a.elements[4]=e,a.elements[5]=-t,a.elements[7]=t,a.elements[8]=e):1===r[1]&&0===r[0]&&0===r[2]?(n=!0,a.elements[0]=e,a.elements[2]=t,a.elements[6]=-t,a.elements[8]=e):1===r[2]&&0===r[0]&&0===r[1]&&(n=!0,a.elements[0]=e,a.elements[1]=-t,a.elements[3]=t,a.elements[4]=e),n?(i=y.RotationMatrix.prototype.multiplyMatrices(o,a),i=y.RotationMatrix.prototype.normalize(i)):i=o,i}}()},y.Euler=function(t,e,i){this.set=function(t,e,i){this.alpha=t||0,this.beta=e||0,this.gamma=i||0},this.copy=function(t){this.alpha=t.alpha,this.beta=t.beta,this.gamma=t.gamma},this.setFromRotationMatrix=function(){var t,e,i,a;return function(n){(t=n.elements)[8]>0?(e=Math.atan2(-t[1],t[4]),i=Math.asin(t[7]),a=Math.atan2(-t[6],t[8])):t[8]<0?(e=Math.atan2(t[1],-t[4]),i=-Math.asin(t[7]),i+=i>=0?-r:r,a=Math.atan2(t[6],-t[8])):t[6]>0?(e=Math.atan2(-t[1],t[4]),i=Math.asin(t[7]),a=-s):t[6]<0?(e=Math.atan2(t[1],-t[4]),i=-Math.asin(t[7]),i+=i>=0?-r:r,a=-s):(e=Math.atan2(t[3],t[0]),i=t[7]>0?s:-s,a=0),0>e&&(e+=l),e*=h,i*=h,a*=h,this.set(e,i,a)}}(),this.setFromQuaternion=function(){var t,e,i;return function(a){var n=a.w*a.w,o=a.x*a.x,c=a.y*a.y,u=a.z*a.z,m=n+o+c+u,d=a.w*a.x+a.y*a.z;if(d>.499999*m)t=2*Math.atan2(a.y,a.w),e=s,i=0;else if((1e-6-.5)*m>d)t=-2*Math.atan2(a.y,a.w),e=-s,i=0;else{var v=n-o+c-u,g=2*(a.w*a.z-a.x*a.y),f=n-o-c+u,p=2*(a.w*a.y-a.x*a.z);f>0?(t=Math.atan2(g,v),e=Math.asin(2*d/m),i=Math.atan2(p,f)):(t=Math.atan2(-g,-v),e=-Math.asin(2*d/m),e+=0>e?r:-r,i=Math.atan2(-p,-f))}0>t&&(t+=l),t*=h,e*=h,i*=h,this.set(t,e,i)}}(),this.rotateX=function(t){return y.Euler.prototype.rotateByAxisAngle(this,[1,0,0],t),this},this.rotateY=function(t){return y.Euler.prototype.rotateByAxisAngle(this,[0,1,0],t),this},this.rotateZ=function(t){return y.Euler.prototype.rotateByAxisAngle(this,[0,0,1],t),this},this.set(t,e,i)},y.Euler.prototype={constructor:y.Euler,rotateByAxisAngle:function(){var t=new y.RotationMatrix;return function(e,i,a){return t.setFromEuler(e),t=y.RotationMatrix.prototype.rotateByAxisAngle(t,i,a),e.setFromRotationMatrix(t),e}}()},y.DeviceOrientation=function(e){this.options=e||{};var i=0,a=0;if(this.alphaOffsetScreen=0,this.alphaOffsetDevice=void 0,"game"===this.options.type){var n=function(e){return null!==e.alpha&&(this.alphaOffsetDevice=new y.Euler(e.alpha,0,0),this.alphaOffsetDevice.rotateZ(-d),++a>=10)?void t.removeEventListener("deviceorientation",n,!1):void(++i>=200&&t.removeEventListener("deviceorientation",n,!1))}.bind(this);t.addEventListener("deviceorientation",n,!1)}else if("world"===this.options.type){var o=function(e){return!0!==e.absolute&&void 0!==e.webkitCompassAccuracy&&null!==e.webkitCompassAccuracy&&+e.webkitCompassAccuracy>=0&&+e.webkitCompassAccuracy<50&&(this.alphaOffsetDevice=new y.Euler(e.webkitCompassHeading,0,0),this.alphaOffsetDevice.rotateZ(d),this.alphaOffsetScreen=d,++a>=10)?void t.removeEventListener("deviceorientation",o,!1):void(++i>=200&&t.removeEventListener("deviceorientation",o,!1))}.bind(this);t.addEventListener("deviceorientation",o,!1)}},y.DeviceOrientation.prototype={constructor:y.DeviceOrientation,start:function(e){e&&"[object Function]"==Object.prototype.toString.call(e)&&u.orientation.callbacks.push(e),m?t.screen.orientation.addEventListener("change",a,!1):t.addEventListener("orientationchange",a,!1),u.orientation.active||(t.addEventListener("deviceorientation",n,!1),u.orientation.active=!0)},stop:function(){u.orientation.active&&(t.removeEventListener("deviceorientation",n,!1),u.orientation.active=!1)},listen:function(t){this.start(t)},getFixedFrameQuaternion:function(){var t=new y.Euler,e=new y.RotationMatrix,i=new y.Quaternion;return function(){var a=u.orientation.data||{alpha:0,beta:0,gamma:0},n=a.alpha;return this.alphaOffsetDevice&&(e.setFromEuler(this.alphaOffsetDevice),e.rotateZ(-this.alphaOffsetScreen),t.setFromRotationMatrix(e),t.alpha<0&&(t.alpha+=360),t.alpha%=360,n-=t.alpha),t.set(n,a.beta,a.gamma),i.setFromEuler(t),i}}(),getScreenAdjustedQuaternion:function(){var t;return function(){return(t=this.getFixedFrameQuaternion()).rotateZ(-d),t}}(),getFixedFrameMatrix:function(){var t=new y.Euler,e=new y.RotationMatrix;return function(){var i=u.orientation.data||{alpha:0,beta:0,gamma:0},a=i.alpha;return this.alphaOffsetDevice&&(e.setFromEuler(this.alphaOffsetDevice),e.rotateZ(-this.alphaOffsetScreen),t.setFromRotationMatrix(e),t.alpha<0&&(t.alpha+=360),t.alpha%=360,a-=t.alpha),t.set(a,i.beta,i.gamma),e.setFromEuler(t),e}}(),getScreenAdjustedMatrix:function(){var t;return function(){return(t=this.getFixedFrameMatrix()).rotateZ(-d),t}}(),getFixedFrameEuler:function(){var t,e=new y.Euler;return function(){return t=this.getFixedFrameMatrix(),e.setFromRotationMatrix(t),e}}(),getScreenAdjustedEuler:function(){var t,e=new y.Euler;return function(){return t=this.getScreenAdjustedMatrix(),e.setFromRotationMatrix(t),e}}(),isAbsolute:function(){return!(!u.orientation.data||!0!==u.orientation.data.absolute)},getLastRawEventData:function(){return u.orientation.data||{}},_alphaAvailable:!1,_betaAvailable:!1,_gammaAvailable:!1,isAvailable:function(t){switch(t){case this.ALPHA:return this._alphaAvailable;case this.BETA:return this._betaAvailable;case this.GAMMA:return this._gammaAvailable}},ALPHA:"alpha",BETA:"beta",GAMMA:"gamma"},y.DeviceMotion=function(t){this.options=t||{}},y.DeviceMotion.prototype={constructor:y.DeviceMotion,start:function(e){e&&"[object Function]"==Object.prototype.toString.call(e)&&u.motion.callbacks.push(e),m?t.screen.orientation.addEventListener("change",a,!1):t.addEventListener("orientationchange",a,!1),u.motion.active||(t.addEventListener("devicemotion",o,!1),u.motion.active=!0)},stop:function(){u.motion.active&&(t.removeEventListener("devicemotion",o,!1),u.motion.active=!1)},listen:function(t){this.start(t)},getScreenAdjustedAcceleration:function(){var t=u.motion.data&&u.motion.data.acceleration?u.motion.data.acceleration:{x:0,y:0,z:0},e={};switch(d){case v:e.x=-t.y,e.y=t.x;break;case g:e.x=-t.x,e.y=-t.y;break;case f:case p:e.x=t.y,e.y=-t.x;break;default:e.x=t.x,e.y=t.y}return e.z=t.z,e},getScreenAdjustedAccelerationIncludingGravity:function(){var t=u.motion.data&&u.motion.data.accelerationIncludingGravity?u.motion.data.accelerationIncludingGravity:{x:0,y:0,z:0},e={};switch(d){case v:e.x=-t.y,e.y=t.x;break;case g:e.x=-t.x,e.y=-t.y;break;case f:case p:e.x=t.y,e.y=-t.x;break;default:e.x=t.x,e.y=t.y}return e.z=t.z,e},getScreenAdjustedRotationRate:function(){var t=u.motion.data&&u.motion.data.rotationRate?u.motion.data.rotationRate:{alpha:0,beta:0,gamma:0},e={};switch(d){case v:e.beta=-t.gamma,e.gamma=t.beta;break;case g:e.beta=-t.beta,e.gamma=-t.gamma;break;case f:case p:e.beta=t.gamma,e.gamma=-t.beta;break;default:e.beta=t.beta,e.gamma=t.gamma}return e.alpha=t.alpha,e},getLastRawEventData:function(){return u.motion.data||{}},_accelerationXAvailable:!1,_accelerationYAvailable:!1,_accelerationZAvailable:!1,_accelerationIncludingGravityXAvailable:!1,_accelerationIncludingGravityYAvailable:!1,_accelerationIncludingGravityZAvailable:!1,_rotationRateAlphaAvailable:!1,_rotationRateBetaAvailable:!1,_rotationRateGammaAvailable:!1,isAvailable:function(t){switch(t){case this.ACCELERATION_X:return this._accelerationXAvailable;case this.ACCELERATION_Y:return this._accelerationYAvailable;case this.ACCELERATION_Z:return this._accelerationZAvailable;case this.ACCELERATION_INCLUDING_GRAVITY_X:return this._accelerationIncludingGravityXAvailable;case this.ACCELERATION_INCLUDING_GRAVITY_Y:return this._accelerationIncludingGravityYAvailable;case this.ACCELERATION_INCLUDING_GRAVITY_Z:return this._accelerationIncludingGravityZAvailable;case this.ROTATION_RATE_ALPHA:return this._rotationRateAlphaAvailable;case this.ROTATION_RATE_BETA:return this._rotationRateBetaAvailable;case this.ROTATION_RATE_GAMMA:return this._rotationRateGammaAvailable}},ACCELERATION_X:"accelerationX",ACCELERATION_Y:"accelerationY",ACCELERATION_Z:"accelerationZ",ACCELERATION_INCLUDING_GRAVITY_X:"accelerationIncludingGravityX",ACCELERATION_INCLUDING_GRAVITY_Y:"accelerationIncludingGravityY",ACCELERATION_INCLUDING_GRAVITY_Z:"accelerationIncludingGravityZ",ROTATION_RATE_ALPHA:"rotationRateAlpha",ROTATION_RATE_BETA:"rotationRateBeta",ROTATION_RATE_GAMMA:"rotationRateGamma"},t.FULLTILT=y}}(window),n={GyroNorm:function(){function t(t){return Math.round(t*Math.pow(10,A))/Math.pow(10,A)}function e(){var e={};e=b?v.getScreenAdjustedEuler():v.getFixedFrameEuler();var i=g.getScreenAdjustedAcceleration(),n=g.getScreenAdjustedAccelerationIncludingGravity(),o=g.getScreenAdjustedRotationRate(),r=0;y===a?r=0>(r=e.alpha-h)?360-Math.abs(r):r:r=e.alpha;var s={do:{alpha:t(r),beta:t(e.beta),gamma:t(e.gamma),absolute:v.isAbsolute()},dm:{x:t(i.x),y:t(i.y),z:t(i.z),gx:t(n.x),gy:t(n.y),gz:t(n.z),alpha:t(o.alpha),beta:t(o.beta),gamma:t(o.gamma)}};return p&&(s.dm.gx*=u,s.dm.gy*=u,s.dm.gz*=u),s}function i(t){x&&("string"==typeof t&&(t={message:t,code:0}),x(t))}var a="game",n="world",o="deviceorientation",r="acceleration",s="accelerationinludinggravity",l="rotationrate",c=null,h=0,u=0,m=!1,d=!1,v=null,g=null,f=50,p=!0,y=a,A=2,x=null,b=!1,E=function(t){};return E.GAME=a,E.WORLD=n,E.DEVICE_ORIENTATION=o,E.ACCELERATION=r,E.ACCELERATION_INCLUDING_GRAVITY=s,E.ROTATION_RATE=l,E.prototype.init=function(t){t&&t.frequency&&(f=t.frequency),t&&t.gravityNormalized&&(p=t.gravityNormalized),t&&t.orientationBase&&(y=t.orientationBase),t&&"number"==typeof t.decimalCount&&t.decimalCount>=0&&(A=parseInt(t.decimalCount)),t&&t.logger&&(x=t.logger),t&&t.screenAdjusted&&(b=t.screenAdjusted);var e=new FULLTILT.getDeviceOrientation({type:y}).then(function(t){v=t}),i=(new FULLTILT.getDeviceMotion).then(function(t){u=(g=t).getScreenAdjustedAccelerationIncludingGravity().z>0?-1:1});return Promise.all([e,i]).then(function(){d=!0})},E.prototype.end=function(){try{d=!1,this.stop(),g.stop(),v.stop()}catch(t){i(t)}},E.prototype.start=function(t){return d?(c=setInterval(function(){t(e())},f),void(m=!0)):void i({message:'GyroNorm is not initialized yet. First call the "init()" function.',code:1})},E.prototype.stop=function(){c&&(clearInterval(c),m=!1)},E.prototype.normalizeGravity=function(t){p=!!t},E.prototype.setHeadDirection=function(){return!b&&y!==n&&(h=v.getFixedFrameEuler().alpha,!0)},E.prototype.startLogging=function(t){t&&(x=t)},E.prototype.stopLogging=function(){x=null},E.prototype.isAvailable=function(t){var e=v.getScreenAdjustedEuler(),i=g.getScreenAdjustedAcceleration(),a=g.getScreenAdjustedAccelerationIncludingGravity(),n=g.getScreenAdjustedRotationRate();switch(t){case o:return e.alpha&&null!==e.alpha&&e.beta&&null!==e.beta&&e.gamma&&null!==e.gamma;case r:return i&&i.x&&i.y&&i.z;case s:return a&&a.x&&a.y&&a.z;case l:return n&&n.alpha&&n.beta&&n.gamma;default:return{deviceOrientationAvailable:e.alpha&&null!==e.alpha&&e.beta&&null!==e.beta&&e.gamma&&null!==e.gamma,accelerationAvailable:i&&i.x&&i.y&&i.z,accelerationIncludingGravityAvailable:a&&a.x&&a.y&&a.z,rotationRateAvailable:n&&n.alpha&&n.beta&&n.gamma}}},E.prototype.isRunning=function(){return m},E}()},void 0===(a=function(){return n}.call(e,i,e,t))||(t.exports=a)}]); 2 | //# sourceMappingURL=app.js.map -------------------------------------------------------------------------------- /js/lib/gyronorm.js: -------------------------------------------------------------------------------- 1 | 2 | /* eslint-disable */ 3 | /*! Full Tilt v0.5.3 / http://github.com/richtr/Full-Tilt */ 4 | !function(a){function b(a){return a=+a,0===a||isNaN(a)?a:a>0?1:-1}function c(a){var b=new Promise(function(b,c){var d=function(e){setTimeout(function(){a&&a.data?b():e>=20?c():d(++e)},50)};d(0)});return b}function d(){o=n?(a.screen.orientation.angle||0)*j:(a.orientation||0)*j}function e(a){l.orientation.data=a;for(var b in l.orientation.callbacks)l.orientation.callbacks[b].call(this)}function f(a){l.motion.data=a;for(var b in l.motion.callbacks)l.motion.callbacks[b].call(this)}if(void 0===a.FULLTILT||null===a.FULLTILT){var g=Math.PI,h=g/2,i=2*g,j=g/180,k=180/g,l={orientation:{active:!1,callbacks:[],data:void 0},motion:{active:!1,callbacks:[],data:void 0}},m=!1,n=a.screen&&a.screen.orientation&&void 0!==a.screen.orientation.angle&&null!==a.screen.orientation.angle?!0:!1,o=(n?a.screen.orientation.angle:a.orientation||0)*j,p=h,q=g,r=i/3,s=-h,t={};t.version="0.5.3",t.getDeviceOrientation=function(a){var b=new Promise(function(b,d){var e=new t.DeviceOrientation(a);e.start();var f=new c(l.orientation);f.then(function(){e._alphaAvailable=l.orientation.data.alpha&&null!==l.orientation.data.alpha,e._betaAvailable=l.orientation.data.beta&&null!==l.orientation.data.beta,e._gammaAvailable=l.orientation.data.gamma&&null!==l.orientation.data.gamma,b(e)})["catch"](function(){e.stop(),d("DeviceOrientation is not supported")})});return b},t.getDeviceMotion=function(a){var b=new Promise(function(b,d){var e=new t.DeviceMotion(a);e.start();var f=new c(l.motion);f.then(function(){e._accelerationXAvailable=l.motion.data.acceleration&&l.motion.data.acceleration.x,e._accelerationYAvailable=l.motion.data.acceleration&&l.motion.data.acceleration.y,e._accelerationZAvailable=l.motion.data.acceleration&&l.motion.data.acceleration.z,e._accelerationIncludingGravityXAvailable=l.motion.data.accelerationIncludingGravity&&l.motion.data.accelerationIncludingGravity.x,e._accelerationIncludingGravityYAvailable=l.motion.data.accelerationIncludingGravity&&l.motion.data.accelerationIncludingGravity.y,e._accelerationIncludingGravityZAvailable=l.motion.data.accelerationIncludingGravity&&l.motion.data.accelerationIncludingGravity.z,e._rotationRateAlphaAvailable=l.motion.data.rotationRate&&l.motion.data.rotationRate.alpha,e._rotationRateBetaAvailable=l.motion.data.rotationRate&&l.motion.data.rotationRate.beta,e._rotationRateGammaAvailable=l.motion.data.rotationRate&&l.motion.data.rotationRate.gamma,b(e)})["catch"](function(){e.stop(),d("DeviceMotion is not supported")})});return b},t.Quaternion=function(a,c,d,e){var f;this.set=function(a,b,c,d){this.x=a||0,this.y=b||0,this.z=c||0,this.w=d||1},this.copy=function(a){this.x=a.x,this.y=a.y,this.z=a.z,this.w=a.w},this.setFromEuler=function(){var a,b,c,d,e,f,g,h,i,k,l,m;return function(n){return n=n||{},c=(n.alpha||0)*j,a=(n.beta||0)*j,b=(n.gamma||0)*j,f=c/2,d=a/2,e=b/2,g=Math.cos(d),h=Math.cos(e),i=Math.cos(f),k=Math.sin(d),l=Math.sin(e),m=Math.sin(f),this.set(k*h*i-g*l*m,g*l*i+k*h*m,g*h*m+k*l*i,g*h*i-k*l*m),this.normalize(),this}}(),this.setFromRotationMatrix=function(){var a;return function(c){return a=c.elements,this.set(.5*Math.sqrt(1+a[0]-a[4]-a[8])*b(a[7]-a[5]),.5*Math.sqrt(1-a[0]+a[4]-a[8])*b(a[2]-a[6]),.5*Math.sqrt(1-a[0]-a[4]+a[8])*b(a[3]-a[1]),.5*Math.sqrt(1+a[0]+a[4]+a[8])),this}}(),this.multiply=function(a){return f=t.Quaternion.prototype.multiplyQuaternions(this,a),this.copy(f),this},this.rotateX=function(a){return f=t.Quaternion.prototype.rotateByAxisAngle(this,[1,0,0],a),this.copy(f),this},this.rotateY=function(a){return f=t.Quaternion.prototype.rotateByAxisAngle(this,[0,1,0],a),this.copy(f),this},this.rotateZ=function(a){return f=t.Quaternion.prototype.rotateByAxisAngle(this,[0,0,1],a),this.copy(f),this},this.normalize=function(){return t.Quaternion.prototype.normalize(this)},this.set(a,c,d,e)},t.Quaternion.prototype={constructor:t.Quaternion,multiplyQuaternions:function(){var a=new t.Quaternion;return function(b,c){var d=b.x,e=b.y,f=b.z,g=b.w,h=c.x,i=c.y,j=c.z,k=c.w;return a.set(d*k+g*h+e*j-f*i,e*k+g*i+f*h-d*j,f*k+g*j+d*i-e*h,g*k-d*h-e*i-f*j),a}}(),normalize:function(a){var b=Math.sqrt(a.x*a.x+a.y*a.y+a.z*a.z+a.w*a.w);return 0===b?(a.x=0,a.y=0,a.z=0,a.w=1):(b=1/b,a.x*=b,a.y*=b,a.z*=b,a.w*=b),a},rotateByAxisAngle:function(){var a,b,c=new t.Quaternion,d=new t.Quaternion;return function(e,f,g){return a=(g||0)/2,b=Math.sin(a),d.set((f[0]||0)*b,(f[1]||0)*b,(f[2]||0)*b,Math.cos(a)),c=t.Quaternion.prototype.multiplyQuaternions(e,d),t.Quaternion.prototype.normalize(c)}}()},t.RotationMatrix=function(a,b,c,d,e,f,g,h,i){var k;this.elements=new Float32Array(9),this.identity=function(){return this.set(1,0,0,0,1,0,0,0,1),this},this.set=function(a,b,c,d,e,f,g,h,i){this.elements[0]=a||1,this.elements[1]=b||0,this.elements[2]=c||0,this.elements[3]=d||0,this.elements[4]=e||1,this.elements[5]=f||0,this.elements[6]=g||0,this.elements[7]=h||0,this.elements[8]=i||1},this.copy=function(a){this.elements[0]=a.elements[0],this.elements[1]=a.elements[1],this.elements[2]=a.elements[2],this.elements[3]=a.elements[3],this.elements[4]=a.elements[4],this.elements[5]=a.elements[5],this.elements[6]=a.elements[6],this.elements[7]=a.elements[7],this.elements[8]=a.elements[8]},this.setFromEuler=function(){var a,b,c,d,e,f,g,h,i;return function(k){return k=k||{},c=(k.alpha||0)*j,a=(k.beta||0)*j,b=(k.gamma||0)*j,d=Math.cos(a),e=Math.cos(b),f=Math.cos(c),g=Math.sin(a),h=Math.sin(b),i=Math.sin(c),this.set(f*e-i*g*h,-d*i,e*i*g+f*h,e*i+f*g*h,f*d,i*h-f*e*g,-d*h,g,d*e),this.normalize(),this}}(),this.setFromQuaternion=function(){var a,b,c,d;return function(e){return a=e.w*e.w,b=e.x*e.x,c=e.y*e.y,d=e.z*e.z,this.set(a+b-c-d,2*(e.x*e.y-e.w*e.z),2*(e.x*e.z+e.w*e.y),2*(e.x*e.y+e.w*e.z),a-b+c-d,2*(e.y*e.z-e.w*e.x),2*(e.x*e.z-e.w*e.y),2*(e.y*e.z+e.w*e.x),a-b-c+d),this}}(),this.multiply=function(a){return k=t.RotationMatrix.prototype.multiplyMatrices(this,a),this.copy(k),this},this.rotateX=function(a){return k=t.RotationMatrix.prototype.rotateByAxisAngle(this,[1,0,0],a),this.copy(k),this},this.rotateY=function(a){return k=t.RotationMatrix.prototype.rotateByAxisAngle(this,[0,1,0],a),this.copy(k),this},this.rotateZ=function(a){return k=t.RotationMatrix.prototype.rotateByAxisAngle(this,[0,0,1],a),this.copy(k),this},this.normalize=function(){return t.RotationMatrix.prototype.normalize(this)},this.set(a,b,c,d,e,f,g,h,i)},t.RotationMatrix.prototype={constructor:t.RotationMatrix,multiplyMatrices:function(){var a,b,c=new t.RotationMatrix;return function(d,e){return a=d.elements,b=e.elements,c.set(a[0]*b[0]+a[1]*b[3]+a[2]*b[6],a[0]*b[1]+a[1]*b[4]+a[2]*b[7],a[0]*b[2]+a[1]*b[5]+a[2]*b[8],a[3]*b[0]+a[4]*b[3]+a[5]*b[6],a[3]*b[1]+a[4]*b[4]+a[5]*b[7],a[3]*b[2]+a[4]*b[5]+a[5]*b[8],a[6]*b[0]+a[7]*b[3]+a[8]*b[6],a[6]*b[1]+a[7]*b[4]+a[8]*b[7],a[6]*b[2]+a[7]*b[5]+a[8]*b[8]),c}}(),normalize:function(a){var b=a.elements,c=b[0]*b[4]*b[8]-b[0]*b[5]*b[7]-b[1]*b[3]*b[8]+b[1]*b[5]*b[6]+b[2]*b[3]*b[7]-b[2]*b[4]*b[6];return b[0]/=c,b[1]/=c,b[2]/=c,b[3]/=c,b[4]/=c,b[5]/=c,b[6]/=c,b[7]/=c,b[8]/=c,a.elements=b,a},rotateByAxisAngle:function(){var a,b,c=new t.RotationMatrix,d=new t.RotationMatrix,e=!1;return function(f,g,h){return d.identity(),e=!1,a=Math.sin(h),b=Math.cos(h),1===g[0]&&0===g[1]&&0===g[2]?(e=!0,d.elements[4]=b,d.elements[5]=-a,d.elements[7]=a,d.elements[8]=b):1===g[1]&&0===g[0]&&0===g[2]?(e=!0,d.elements[0]=b,d.elements[2]=a,d.elements[6]=-a,d.elements[8]=b):1===g[2]&&0===g[0]&&0===g[1]&&(e=!0,d.elements[0]=b,d.elements[1]=-a,d.elements[3]=a,d.elements[4]=b),e?(c=t.RotationMatrix.prototype.multiplyMatrices(f,d),c=t.RotationMatrix.prototype.normalize(c)):c=f,c}}()},t.Euler=function(a,b,c){this.set=function(a,b,c){this.alpha=a||0,this.beta=b||0,this.gamma=c||0},this.copy=function(a){this.alpha=a.alpha,this.beta=a.beta,this.gamma=a.gamma},this.setFromRotationMatrix=function(){var a,b,c,d;return function(e){a=e.elements,a[8]>0?(b=Math.atan2(-a[1],a[4]),c=Math.asin(a[7]),d=Math.atan2(-a[6],a[8])):a[8]<0?(b=Math.atan2(a[1],-a[4]),c=-Math.asin(a[7]),c+=c>=0?-g:g,d=Math.atan2(a[6],-a[8])):a[6]>0?(b=Math.atan2(-a[1],a[4]),c=Math.asin(a[7]),d=-h):a[6]<0?(b=Math.atan2(a[1],-a[4]),c=-Math.asin(a[7]),c+=c>=0?-g:g,d=-h):(b=Math.atan2(a[3],a[0]),c=a[7]>0?h:-h,d=0),0>b&&(b+=i),b*=k,c*=k,d*=k,this.set(b,c,d)}}(),this.setFromQuaternion=function(){var a,b,c;return function(d){var e=d.w*d.w,f=d.x*d.x,j=d.y*d.y,l=d.z*d.z,m=e+f+j+l,n=d.w*d.x+d.y*d.z,o=1e-6;if(n>(.5-o)*m)a=2*Math.atan2(d.y,d.w),b=h,c=0;else if((-.5+o)*m>n)a=-2*Math.atan2(d.y,d.w),b=-h,c=0;else{var p=e-f+j-l,q=2*(d.w*d.z-d.x*d.y),r=e-f-j+l,s=2*(d.w*d.y-d.x*d.z);r>0?(a=Math.atan2(q,p),b=Math.asin(2*n/m),c=Math.atan2(s,r)):(a=Math.atan2(-q,-p),b=-Math.asin(2*n/m),b+=0>b?g:-g,c=Math.atan2(-s,-r))}0>a&&(a+=i),a*=k,b*=k,c*=k,this.set(a,b,c)}}(),this.rotateX=function(a){return t.Euler.prototype.rotateByAxisAngle(this,[1,0,0],a),this},this.rotateY=function(a){return t.Euler.prototype.rotateByAxisAngle(this,[0,1,0],a),this},this.rotateZ=function(a){return t.Euler.prototype.rotateByAxisAngle(this,[0,0,1],a),this},this.set(a,b,c)},t.Euler.prototype={constructor:t.Euler,rotateByAxisAngle:function(){var a=new t.RotationMatrix;return function(b,c,d){return a.setFromEuler(b),a=t.RotationMatrix.prototype.rotateByAxisAngle(a,c,d),b.setFromRotationMatrix(a),b}}()},t.DeviceOrientation=function(b){this.options=b||{};var c=0,d=200,e=0,f=10;if(this.alphaOffsetScreen=0,this.alphaOffsetDevice=void 0,"game"===this.options.type){var g=function(b){return null!==b.alpha&&(this.alphaOffsetDevice=new t.Euler(b.alpha,0,0),this.alphaOffsetDevice.rotateZ(-o),++e>=f)?void a.removeEventListener("deviceorientation",g,!1):void(++c>=d&&a.removeEventListener("deviceorientation",g,!1))}.bind(this);a.addEventListener("deviceorientation",g,!1)}else if("world"===this.options.type){var h=function(b){return b.absolute!==!0&&void 0!==b.webkitCompassAccuracy&&null!==b.webkitCompassAccuracy&&+b.webkitCompassAccuracy>=0&&+b.webkitCompassAccuracy<50&&(this.alphaOffsetDevice=new t.Euler(b.webkitCompassHeading,0,0),this.alphaOffsetDevice.rotateZ(o),this.alphaOffsetScreen=o,++e>=f)?void a.removeEventListener("deviceorientation",h,!1):void(++c>=d&&a.removeEventListener("deviceorientation",h,!1))}.bind(this);a.addEventListener("deviceorientation",h,!1)}},t.DeviceOrientation.prototype={constructor:t.DeviceOrientation,start:function(b){b&&"[object Function]"==Object.prototype.toString.call(b)&&l.orientation.callbacks.push(b),m||(n?a.screen.orientation.addEventListener("change",d,!1):a.addEventListener("orientationchange",d,!1)),l.orientation.active||(a.addEventListener("deviceorientation",e,!1),l.orientation.active=!0)},stop:function(){l.orientation.active&&(a.removeEventListener("deviceorientation",e,!1),l.orientation.active=!1)},listen:function(a){this.start(a)},getFixedFrameQuaternion:function(){var a=new t.Euler,b=new t.RotationMatrix,c=new t.Quaternion;return function(){var d=l.orientation.data||{alpha:0,beta:0,gamma:0},e=d.alpha;return this.alphaOffsetDevice&&(b.setFromEuler(this.alphaOffsetDevice),b.rotateZ(-this.alphaOffsetScreen),a.setFromRotationMatrix(b),a.alpha<0&&(a.alpha+=360),a.alpha%=360,e-=a.alpha),a.set(e,d.beta,d.gamma),c.setFromEuler(a),c}}(),getScreenAdjustedQuaternion:function(){var a;return function(){return a=this.getFixedFrameQuaternion(),a.rotateZ(-o),a}}(),getFixedFrameMatrix:function(){var a=new t.Euler,b=new t.RotationMatrix;return function(){var c=l.orientation.data||{alpha:0,beta:0,gamma:0},d=c.alpha;return this.alphaOffsetDevice&&(b.setFromEuler(this.alphaOffsetDevice),b.rotateZ(-this.alphaOffsetScreen),a.setFromRotationMatrix(b),a.alpha<0&&(a.alpha+=360),a.alpha%=360,d-=a.alpha),a.set(d,c.beta,c.gamma),b.setFromEuler(a),b}}(),getScreenAdjustedMatrix:function(){var a;return function(){return a=this.getFixedFrameMatrix(),a.rotateZ(-o),a}}(),getFixedFrameEuler:function(){var a,b=new t.Euler;return function(){return a=this.getFixedFrameMatrix(),b.setFromRotationMatrix(a),b}}(),getScreenAdjustedEuler:function(){var a,b=new t.Euler;return function(){return a=this.getScreenAdjustedMatrix(),b.setFromRotationMatrix(a),b}}(),isAbsolute:function(){return l.orientation.data&&l.orientation.data.absolute===!0?!0:!1},getLastRawEventData:function(){return l.orientation.data||{}},_alphaAvailable:!1,_betaAvailable:!1,_gammaAvailable:!1,isAvailable:function(a){switch(a){case this.ALPHA:return this._alphaAvailable;case this.BETA:return this._betaAvailable;case this.GAMMA:return this._gammaAvailable}},ALPHA:"alpha",BETA:"beta",GAMMA:"gamma"},t.DeviceMotion=function(a){this.options=a||{}},t.DeviceMotion.prototype={constructor:t.DeviceMotion,start:function(b){b&&"[object Function]"==Object.prototype.toString.call(b)&&l.motion.callbacks.push(b),m||(n?a.screen.orientation.addEventListener("change",d,!1):a.addEventListener("orientationchange",d,!1)),l.motion.active||(a.addEventListener("devicemotion",f,!1),l.motion.active=!0)},stop:function(){l.motion.active&&(a.removeEventListener("devicemotion",f,!1),l.motion.active=!1)},listen:function(a){this.start(a)},getScreenAdjustedAcceleration:function(){var a=l.motion.data&&l.motion.data.acceleration?l.motion.data.acceleration:{x:0,y:0,z:0},b={};switch(o){case p:b.x=-a.y,b.y=a.x;break;case q:b.x=-a.x,b.y=-a.y;break;case r:case s:b.x=a.y,b.y=-a.x;break;default:b.x=a.x,b.y=a.y}return b.z=a.z,b},getScreenAdjustedAccelerationIncludingGravity:function(){var a=l.motion.data&&l.motion.data.accelerationIncludingGravity?l.motion.data.accelerationIncludingGravity:{x:0,y:0,z:0},b={};switch(o){case p:b.x=-a.y,b.y=a.x;break;case q:b.x=-a.x,b.y=-a.y;break;case r:case s:b.x=a.y,b.y=-a.x;break;default:b.x=a.x,b.y=a.y}return b.z=a.z,b},getScreenAdjustedRotationRate:function(){var a=l.motion.data&&l.motion.data.rotationRate?l.motion.data.rotationRate:{alpha:0,beta:0,gamma:0},b={};switch(o){case p:b.beta=-a.gamma,b.gamma=a.beta;break;case q:b.beta=-a.beta,b.gamma=-a.gamma;break;case r:case s:b.beta=a.gamma,b.gamma=-a.beta;break;default:b.beta=a.beta,b.gamma=a.gamma}return b.alpha=a.alpha,b},getLastRawEventData:function(){return l.motion.data||{}},_accelerationXAvailable:!1,_accelerationYAvailable:!1,_accelerationZAvailable:!1,_accelerationIncludingGravityXAvailable:!1,_accelerationIncludingGravityYAvailable:!1,_accelerationIncludingGravityZAvailable:!1,_rotationRateAlphaAvailable:!1,_rotationRateBetaAvailable:!1,_rotationRateGammaAvailable:!1,isAvailable:function(a){switch(a){case this.ACCELERATION_X:return this._accelerationXAvailable;case this.ACCELERATION_Y:return this._accelerationYAvailable;case this.ACCELERATION_Z:return this._accelerationZAvailable;case this.ACCELERATION_INCLUDING_GRAVITY_X:return this._accelerationIncludingGravityXAvailable;case this.ACCELERATION_INCLUDING_GRAVITY_Y:return this._accelerationIncludingGravityYAvailable;case this.ACCELERATION_INCLUDING_GRAVITY_Z:return this._accelerationIncludingGravityZAvailable;case this.ROTATION_RATE_ALPHA:return this._rotationRateAlphaAvailable;case this.ROTATION_RATE_BETA:return this._rotationRateBetaAvailable;case this.ROTATION_RATE_GAMMA:return this._rotationRateGammaAvailable}},ACCELERATION_X:"accelerationX",ACCELERATION_Y:"accelerationY",ACCELERATION_Z:"accelerationZ",ACCELERATION_INCLUDING_GRAVITY_X:"accelerationIncludingGravityX",ACCELERATION_INCLUDING_GRAVITY_Y:"accelerationIncludingGravityY",ACCELERATION_INCLUDING_GRAVITY_Z:"accelerationIncludingGravityZ",ROTATION_RATE_ALPHA:"rotationRateAlpha",ROTATION_RATE_BETA:"rotationRateBeta",ROTATION_RATE_GAMMA:"rotationRateGamma"},a.FULLTILT=t}}(window); 5 | 6 | /* gyronorm.js v2.0.6 - https://github.com/dorukeker/gyronorm.git*/ 7 | !function(a,b){var c={GyroNorm:b()};"function"==typeof define&&define.amd?define(function(){return c}):"object"==typeof module&&module.exports?module.exports=c:a.GyroNorm=c.GyroNorm}(this,function(){function a(a){return Math.round(a*Math.pow(10,t))/Math.pow(10,t)}function b(){var b={};b=v?o.getScreenAdjustedEuler():o.getFixedFrameEuler();var c=p.getScreenAdjustedAcceleration(),e=p.getScreenAdjustedAccelerationIncludingGravity(),f=p.getScreenAdjustedRotationRate(),g=0;s===d?(g=b.alpha-k,g=0>g?360-Math.abs(g):g):g=b.alpha;var h={"do":{alpha:a(g),beta:a(b.beta),gamma:a(b.gamma),absolute:o.isAbsolute()},dm:{x:a(c.x),y:a(c.y),z:a(c.z),gx:a(e.x),gy:a(e.y),gz:a(e.z),alpha:a(f.alpha),beta:a(f.beta),gamma:a(f.gamma)}};return r&&(h.dm.gx*=l,h.dm.gy*=l,h.dm.gz*=l),h}function c(a){u&&("string"==typeof a&&(a={message:a,code:0}),u(a))}var d="game",e="world",f="deviceorientation",g="acceleration",h="accelerationinludinggravity",i="rotationrate",j=null,k=0,l=0,m=!1,n=!1,o=null,p=null,q=50,r=!0,s=d,t=2,u=null,v=!1,w=function(a){};return w.GAME=d,w.WORLD=e,w.DEVICE_ORIENTATION=f,w.ACCELERATION=g,w.ACCELERATION_INCLUDING_GRAVITY=h,w.ROTATION_RATE=i,w.prototype.init=function(a){a&&a.frequency&&(q=a.frequency),a&&a.gravityNormalized&&(r=a.gravityNormalized),a&&a.orientationBase&&(s=a.orientationBase),a&&"number"==typeof a.decimalCount&&a.decimalCount>=0&&(t=parseInt(a.decimalCount)),a&&a.logger&&(u=a.logger),a&&a.screenAdjusted&&(v=a.screenAdjusted);var b=new FULLTILT.getDeviceOrientation({type:s}).then(function(a){o=a}),c=(new FULLTILT.getDeviceMotion).then(function(a){p=a,l=p.getScreenAdjustedAccelerationIncludingGravity().z>0?-1:1});return Promise.all([b,c]).then(function(){n=!0})},w.prototype.end=function(){try{n=!1,this.stop(),p.stop(),o.stop()}catch(a){c(a)}},w.prototype.start=function(a){return n?(j=setInterval(function(){a(b())},q),void(m=!0)):void c({message:'GyroNorm is not initialized yet. First call the "init()" function.',code:1})},w.prototype.stop=function(){j&&(clearInterval(j),m=!1)},w.prototype.normalizeGravity=function(a){r=a?!0:!1},w.prototype.setHeadDirection=function(){return v||s===e?!1:(k=o.getFixedFrameEuler().alpha,!0)},w.prototype.startLogging=function(a){a&&(u=a)},w.prototype.stopLogging=function(){u=null},w.prototype.isAvailable=function(a){var b=o.getScreenAdjustedEuler(),c=p.getScreenAdjustedAcceleration(),d=p.getScreenAdjustedAccelerationIncludingGravity(),e=p.getScreenAdjustedRotationRate();switch(a){case f:return b.alpha&&null!==b.alpha&&b.beta&&null!==b.beta&&b.gamma&&null!==b.gamma;case g:return c&&c.x&&c.y&&c.z;case h:return d&&d.x&&d.y&&d.z;case i:return e&&e.alpha&&e.beta&&e.gamma;default:return{deviceOrientationAvailable:b.alpha&&null!==b.alpha&&b.beta&&null!==b.beta&&b.gamma&&null!==b.gamma,accelerationAvailable:c&&c.x&&c.y&&c.z,accelerationIncludingGravityAvailable:d&&d.x&&d.y&&d.z,rotationRateAvailable:e&&e.alpha&&e.beta&&e.gamma}}},w.prototype.isRunning=function(){return m},w}); -------------------------------------------------------------------------------- /js/shaders/fragment.glsl: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec4 resolution; 6 | uniform vec2 mouse; 7 | uniform vec2 threshold; 8 | uniform float time; 9 | uniform float pixelRatio; 10 | uniform sampler2D image0; 11 | uniform sampler2D image1; 12 | 13 | 14 | vec2 mirrored(vec2 v) { 15 | vec2 m = mod(v,2.); 16 | return mix(m,2.0 - m, step(1.0 ,m)); 17 | } 18 | 19 | void main() { 20 | // uvs and textures 21 | vec2 uv = pixelRatio*gl_FragCoord.xy / resolution.xy ; 22 | vec2 vUv = (uv - vec2(0.5))*resolution.zw + vec2(0.5); 23 | vUv.y = 1. - vUv.y; 24 | vec4 tex1 = texture2D(image1,mirrored(vUv)); 25 | vec2 fake3d = vec2(vUv.x + (tex1.r - 0.5)*mouse.x/threshold.x, vUv.y + (tex1.r - 0.5)*mouse.y/threshold.y); 26 | gl_FragColor = texture2D(image0,mirrored(fake3d)); 27 | } -------------------------------------------------------------------------------- /js/shaders/vertex.glsl: -------------------------------------------------------------------------------- 1 | attribute vec2 a_position; 2 | 3 | void main() { 4 | gl_Position = vec4( a_position, 0, 1 ); 5 | } -------------------------------------------------------------------------------- /js/src.js: -------------------------------------------------------------------------------- 1 | import fragment from './shaders/fragment.glsl'; 2 | import vertex from './shaders/vertex.glsl'; 3 | 4 | import GyroNorm from './lib/gyronorm'; 5 | const gn = new GyroNorm.GyroNorm(); 6 | 7 | export default class Sketch { 8 | constructor() { 9 | this.container = document.getElementById('gl'); 10 | this.canvas = document.createElement('canvas'); 11 | this.container.appendChild(this.canvas); 12 | this.gl = this.canvas.getContext('webgl'); 13 | this.ratio = window.devicePixelRatio; 14 | this.windowWidth = window.innerWidth; 15 | this.windowHeight = window.innerHeight; 16 | this.mouseX = 0; 17 | this.mouseY = 0; 18 | 19 | this.mouseTargetX = 0; 20 | this.mouseTargetY = 0; 21 | 22 | this.imageOriginal = this.container.getAttribute('data-imageOriginal'); 23 | this.imageDepth = this.container.getAttribute('data-imageDepth'); 24 | this.vth = this.container.getAttribute('data-verticalThreshold'); 25 | this.hth = this.container.getAttribute('data-horizontalThreshold'); 26 | 27 | this.imageURLs = [ 28 | this.imageOriginal, 29 | this.imageDepth 30 | ]; 31 | this.textures = []; 32 | 33 | 34 | this.startTime = new Date().getTime(); // Get start time for animating 35 | 36 | this.createScene(); 37 | this.addTexture(); 38 | this.mouseMove(); 39 | this.gyro(); 40 | } 41 | 42 | addShader( source, type ) { 43 | let shader = this.gl.createShader( type ); 44 | this.gl.shaderSource( shader, source ); 45 | this.gl.compileShader( shader ); 46 | let isCompiled = this.gl.getShaderParameter( shader, this.gl.COMPILE_STATUS ); 47 | if ( !isCompiled ) { 48 | throw new Error( 'Shader compile error: ' + this.gl.getShaderInfoLog( shader ) ); 49 | } 50 | this.gl.attachShader( this.program, shader ); 51 | } 52 | 53 | resizeHandler() { 54 | this.windowWidth = window.innerWidth; 55 | this.windowHeight = window.innerHeight; 56 | this.width = this.container.offsetWidth; 57 | this.height = this.container.offsetHeight; 58 | 59 | this.canvas.width = this.width*this.ratio; 60 | this.canvas.height = this.height*this.ratio; 61 | this.canvas.style.width = this.width + 'px'; 62 | this.canvas.style.height = this.height + 'px'; 63 | let a1,a2; 64 | if(this.height/this.width= lower ? number : lower; 272 | } 273 | } 274 | return number; 275 | } 276 | new Sketch(); 277 | --------------------------------------------------------------------------------