├── .gitignore ├── README.md ├── css ├── demo.css └── normalize.css ├── favicon.ico ├── img ├── gradient_map1.png ├── gradient_map2.png ├── gradient_map3.png ├── img1.jpg ├── img2.jpg ├── img3.jpg ├── img4.jpg ├── mouse.svg └── related │ ├── AnimatedHeaderBackgrounds.png │ └── PrismEffectSlider.jpg ├── index.html ├── index2.html ├── index3.html ├── index4.html ├── index5.html ├── index6.html ├── index7.html ├── index8.html ├── index9.html ├── js ├── demo1.js ├── demo2.js ├── demo3.js ├── demo4.js ├── demo5.js ├── demo6.js ├── demo7.js ├── demo8.js ├── demo9.js └── regl.min.js └── psd └── gradient_map.psd /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | 3 | # Windows thumbnail cache files 4 | Thumbs.db 5 | ehthumbs.db 6 | ehthumbs_vista.db 7 | 8 | # Folder config file 9 | Desktop.ini 10 | 11 | # Recycle Bin used on file shares 12 | $RECYCLE.BIN/ 13 | 14 | # Windows Installer files 15 | *.cab 16 | *.msi 17 | *.msm 18 | *.msp 19 | 20 | # Windows shortcuts 21 | *.lnk 22 | 23 | # Dropbox settings and caches 24 | .dropbox 25 | .dropbox.attr 26 | .dropbox.cache 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WebGL Scroll Spiral 2 | 3 | Some decorative background scroll effects for websites using WebGL and regl. By Xoihazard. 4 | 5 | ![WebGL Scroll Spiral](https://tympanus.net/codrops/wp-content/uploads/2017/04/WebGLScrollSpiral_800x600.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=30761) 8 | 9 | [Demo](https://tympanus.net/Development/ScrollSpiral/) 10 | 11 | ## Credits 12 | 13 | - [Official regl website](http://regl.party) 14 | - Images copyright by [RuleByArt](https://creativemarket.com/RuleByArt?u=codrops). Purchase on Creative Market: [Flight](https://creativemarket.com/RuleByArt/468537-Flight?u=codrops) and [Surface Shapes](https://creativemarket.com/RuleByArt/32279-Surface-Shapes?u=codrops) 15 | 16 | ## License 17 | 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. 18 | 19 | ## Misc 20 | 21 | 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/) 22 | 23 | [© Codrops 2017](http://www.codrops.com) 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Roboto Mono', monospace; 9 | color: #fff; 10 | background: #000; 11 | } 12 | 13 | a { 14 | text-decoration: none; 15 | color: #fff; 16 | outline: none; 17 | } 18 | 19 | a:hover, 20 | a:focus { 21 | color: #fff; 22 | } 23 | 24 | .hidden { 25 | position: absolute; 26 | overflow: hidden; 27 | width: 0; 28 | height: 0; 29 | pointer-events: none; 30 | } 31 | 32 | /* Overlay */ 33 | main::before { 34 | content: ''; 35 | position: fixed; 36 | z-index: -1; 37 | top: 0; 38 | left: 0; 39 | width: 100%; 40 | height: 100%; 41 | pointer-events: none; 42 | background: rgba(0,0,0,0.4); 43 | } 44 | 45 | /* Icons */ 46 | 47 | .icon { 48 | display: block; 49 | width: 1.5em; 50 | height: 1.5em; 51 | margin: 0 auto; 52 | fill: currentColor; 53 | } 54 | 55 | /* Page Loader */ 56 | 57 | .js .loading::before { 58 | content: ''; 59 | position: fixed; 60 | z-index: 1000; 61 | top: 0; 62 | left: 0; 63 | width: 100%; 64 | height: 100%; 65 | background: #000; 66 | } 67 | 68 | .js .loading::after { 69 | content: ''; 70 | position: fixed; 71 | z-index: 1001; 72 | top: 50%; 73 | left: 50%; 74 | width: 50px; 75 | height: 50px; 76 | margin: -25px 0 0 -25px; 77 | pointer-events: none; 78 | border-radius: 50%; 79 | background: #3b3b3b; 80 | animation: loaderAnim 0.8s ease-out infinite alternate forwards; 81 | } 82 | 83 | @keyframes loaderAnim { 84 | to { 85 | transform: scale3d(0.5,0.5,1); 86 | } 87 | } 88 | 89 | .content { 90 | display: flex; 91 | flex-wrap: wrap; 92 | min-height: 100vh; 93 | } 94 | 95 | .content--main { 96 | min-height: 500vh; 97 | } 98 | 99 | .content--main::before, 100 | .content--main::after { 101 | position: fixed; 102 | left: 50%; 103 | } 104 | 105 | .content--main::before { 106 | content: ''; 107 | bottom: 3em; 108 | height: 1.5em; 109 | width: 1px; 110 | background: #fff; 111 | } 112 | 113 | .content--main::after { 114 | content: 'Scroll'; 115 | position: fixed; 116 | bottom: 0; 117 | width: 6em; 118 | text-align: center; 119 | margin: 0 0 1.5em -3em; 120 | font-size: 0.75em; 121 | text-transform: uppercase; 122 | letter-spacing: 2px; 123 | text-indent: 2px; 124 | } 125 | 126 | .content--header { 127 | position: relative; 128 | z-index: 11; 129 | align-items: flex-start; 130 | width: 100%; 131 | padding: 1.5em; 132 | } 133 | 134 | .content__top { 135 | display: flex; 136 | flex-direction: row; 137 | flex-wrap: wrap; 138 | align-items: center; 139 | width: 100%; 140 | } 141 | 142 | .main-title { 143 | font-size: 1em; 144 | font-weight: normal; 145 | margin: 0; 146 | padding: 0; 147 | } 148 | 149 | .main-tagline { 150 | font-size: 0.865em; 151 | margin: 0 1em; 152 | opacity: 0.8; 153 | } 154 | 155 | .main-tagline::before, 156 | .main-tagline::after { 157 | content: ' // '; 158 | } 159 | 160 | .github { 161 | font-size: 0.865em; 162 | } 163 | 164 | /* Top Navigation Style */ 165 | 166 | .codrops-links { 167 | position: relative; 168 | display: flex; 169 | justify-content: center; 170 | margin: 0 0 0 auto; 171 | text-align: center; 172 | white-space: nowrap; 173 | } 174 | 175 | .codrops-icon { 176 | display: inline-block; 177 | margin: 0.25em; 178 | padding: 0.5em; 179 | } 180 | 181 | /* Demo links */ 182 | 183 | .demos { 184 | position: fixed; 185 | top: 6em; 186 | left: 0; 187 | display: flex; 188 | flex-direction: column; 189 | align-items: flex-start; 190 | padding: 0 1.25em; 191 | } 192 | 193 | .demo { 194 | font-size: 0.865em; 195 | position: relative; 196 | margin: 0 1em 0.5em 0; 197 | padding: 0 0 0.25em 0.25em; 198 | white-space: nowrap; 199 | } 200 | 201 | .demo:hover, 202 | .demo--current { 203 | text-decoration: underline; 204 | } 205 | 206 | /* Related demos */ 207 | 208 | .content--related { 209 | position: relative; 210 | z-index: 10; 211 | justify-content: center; 212 | padding: 3em 1.5em; 213 | text-align: center; 214 | background: #000; 215 | align-content: center; 216 | } 217 | 218 | .content--related a, 219 | .github { 220 | text-decoration: underline; 221 | } 222 | 223 | .content--related a:hover, 224 | .content--related a:focus, 225 | .github:hover, 226 | .github:focus { 227 | text-decoration: none; 228 | } 229 | 230 | .content__text { 231 | font-size: 0.865em; 232 | font-weight: normal; 233 | width: 100%; 234 | margin: 0 0 1em 0; 235 | } 236 | 237 | .content__text:first-child { 238 | margin: 0 0 5em 0; 239 | } 240 | 241 | .media-item { 242 | display: inline-block; 243 | padding: 1em; 244 | vertical-align: top; 245 | transition: color 0.3s; 246 | } 247 | 248 | .media-item__img { 249 | max-width: 100%; 250 | opacity: 0.6; 251 | transition: opacity 0.3s; 252 | } 253 | 254 | .media-item:hover .media-item__img, 255 | .media-item:focus .media-item__img { 256 | opacity: 1; 257 | } 258 | 259 | .media-item__title { 260 | font-size: 0.865em; 261 | font-weight: normal; 262 | max-width: 200px; 263 | margin: 0; 264 | padding: 0.5em; 265 | } 266 | 267 | #webgl { 268 | position: fixed; 269 | z-index: -1; 270 | top: 0; 271 | left: 0; 272 | display: block; 273 | width: 100vw; 274 | height: 100vh; 275 | } 276 | 277 | /* Colors for demos */ 278 | 279 | /* Demo 2 */ 280 | .demo-2 { 281 | background: #5ae6ae; 282 | } 283 | .demo-2 main::before { 284 | background: rgba(60, 145, 110, 0.3); 285 | } 286 | .demo-2 .content--related { 287 | background: #5ae6ae; 288 | } 289 | 290 | /* Demo 3 */ 291 | .demo-3 { 292 | background: #d8d9cd; 293 | } 294 | .demo-3 main::before { 295 | background: rgba(169, 175, 66, 0.3); 296 | } 297 | .demo-3 .content--related { 298 | background: #d8d9cd; 299 | } 300 | 301 | /* Demo 4 */ 302 | .demo-4 { 303 | background: #babed1; 304 | } 305 | .demo-4 main::before { 306 | background: rgba(175, 179, 194, 0.3); 307 | } 308 | .demo-4 .content--related { 309 | background: #babed1; 310 | } 311 | 312 | /* Demo 5 */ 313 | .demo-5 { 314 | background: #000; 315 | } 316 | .demo-5 main::before { 317 | background: rgba(0,0,0,0.4); 318 | } 319 | .demo-5 .content--related { 320 | background: #000; 321 | } 322 | 323 | /* Demo 6 */ 324 | .demo-6 { 325 | background: #e8dac5; 326 | } 327 | .demo-6 main::before { 328 | background: rgba(0, 0, 0, 0.3); 329 | } 330 | .demo-6 .content--related { 331 | background: #e8dac5; 332 | } 333 | 334 | /* Demo 7 */ 335 | .demo-7 { 336 | background: #000; 337 | } 338 | .demo-7 main::before { 339 | background: rgba(0, 0, 0, 0.6); 340 | } 341 | .demo-7 .content--related { 342 | background: #000; 343 | } 344 | 345 | /* Demo 8 */ 346 | .demo-8 { 347 | background: #232121; 348 | } 349 | .demo-8 main::before { 350 | background: rgba(84, 115, 243, 0.3); 351 | } 352 | .demo-8 .content--related { 353 | background: #232121; 354 | } 355 | 356 | /* Demo 9 */ 357 | .demo-9 { 358 | background: #232121; 359 | } 360 | .demo-9 main::before { 361 | background: rgba(0, 0, 0, 0.3); 362 | } 363 | .demo-9 .content--related { 364 | background: #2a2acf; 365 | } 366 | 367 | @media screen and (max-width: 40em) { 368 | .content--header { 369 | padding: 1em 0.5em 0; 370 | } 371 | .content__top { 372 | display: block; 373 | text-align: center; 374 | } 375 | .main-tagline { 376 | margin: 0; 377 | } 378 | .demos { 379 | position: relative; 380 | width: 100%; 381 | margin: 0; 382 | padding: 0.5em; 383 | transform: none; 384 | top: auto; 385 | display: block; 386 | } 387 | } 388 | -------------------------------------------------------------------------------- /css/normalize.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;} -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollSpiral/3889131fea11ce6b818a1f7e2299cf100f56180d/favicon.ico -------------------------------------------------------------------------------- /img/gradient_map1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollSpiral/3889131fea11ce6b818a1f7e2299cf100f56180d/img/gradient_map1.png -------------------------------------------------------------------------------- /img/gradient_map2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollSpiral/3889131fea11ce6b818a1f7e2299cf100f56180d/img/gradient_map2.png -------------------------------------------------------------------------------- /img/gradient_map3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollSpiral/3889131fea11ce6b818a1f7e2299cf100f56180d/img/gradient_map3.png -------------------------------------------------------------------------------- /img/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollSpiral/3889131fea11ce6b818a1f7e2299cf100f56180d/img/img1.jpg -------------------------------------------------------------------------------- /img/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollSpiral/3889131fea11ce6b818a1f7e2299cf100f56180d/img/img2.jpg -------------------------------------------------------------------------------- /img/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollSpiral/3889131fea11ce6b818a1f7e2299cf100f56180d/img/img3.jpg -------------------------------------------------------------------------------- /img/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollSpiral/3889131fea11ce6b818a1f7e2299cf100f56180d/img/img4.jpg -------------------------------------------------------------------------------- /img/mouse.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /img/related/AnimatedHeaderBackgrounds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollSpiral/3889131fea11ce6b818a1f7e2299cf100f56180d/img/related/AnimatedHeaderBackgrounds.png -------------------------------------------------------------------------------- /img/related/PrismEffectSlider.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollSpiral/3889131fea11ce6b818a1f7e2299cf100f56180d/img/related/PrismEffectSlider.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Scroll Spiral | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 29 |
30 |
31 |
32 |

Scroll Spirals

33 |

Decorative Background Effects with WebGL

34 | GitHub 35 |
36 | 37 | 38 |
39 | 50 |
51 |
52 |
53 |
54 |

This demo is powered by regl — declarative and stateless webgl

55 |

If you enjoyed this demo you might also like:

56 | 57 | 58 |

Animated Background Headers

59 | 60 | 61 | 62 |

Prism Effect Slider

63 | 64 |
65 |
66 | 67 | 154 | 155 | 156 | 157 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Scroll Spiral | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 29 |
30 |
31 |
32 |

Scroll Spirals

33 |

Decorative Background Effects with WebGL

34 | GitHub 35 |
36 | 37 | 38 |
39 | 50 |
51 |
52 |
53 |
54 |

This demo is powered by regl — declarative and stateless webgl

55 |

If you enjoyed this demo you might also like:

56 | 57 | 58 |

Animated Background Headers

59 | 60 | 61 | 62 |

Prism Effect Slider

63 | 64 |
65 |
66 | 67 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Scroll Spiral | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 29 |
30 |
31 |
32 |

Scroll Spirals

33 |

Decorative Background Effects with WebGL

34 | GitHub 35 |
36 | 37 | 38 |
39 | 50 |
51 |
52 |
53 |
54 |

This demo is powered by regl — declarative and stateless webgl

55 |

If you enjoyed this demo you might also like:

56 | 57 | 58 |

Animated Background Headers

59 | 60 | 61 | 62 |

Prism Effect Slider

63 | 64 |
65 |
66 | 67 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Scroll Spiral | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 29 |
30 |
31 |
32 |

Scroll Spirals

33 |

Decorative Background Effects with WebGL

34 | GitHub 35 |
36 | 37 | 38 |
39 | 50 |
51 |
52 |
53 |
54 |

This demo is powered by regl — declarative and stateless webgl

55 |

If you enjoyed this demo you might also like:

56 | 57 | 58 |

Animated Background Headers

59 | 60 | 61 | 62 |

Prism Effect Slider

63 | 64 |
65 |
66 | 67 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /index5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Scroll Spiral | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 29 |
30 |
31 |
32 |

Scroll Spirals

33 |

Decorative Background Effects with WebGL

34 | GitHub 35 |
36 | 37 | 38 |
39 | 50 |
51 |
52 |
53 |
54 |

This demo is powered by regl — declarative and stateless webgl

55 |

If you enjoyed this demo you might also like:

56 | 57 | 58 |

Animated Background Headers

59 | 60 | 61 | 62 |

Prism Effect Slider

63 | 64 |
65 |
66 | 67 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /index6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Scroll Spiral | Demo 3 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 29 |
30 |
31 |
32 |

Scroll Spirals

33 |

Decorative Background Effects with WebGL

34 | GitHub 35 |
36 | 37 | 38 |
39 | 50 |
51 |
52 |
53 |
54 |

This demo is powered by regl — declarative and stateless webgl

55 |

If you enjoyed this demo you might also like:

56 | 57 | 58 |

Animated Background Headers

59 | 60 | 61 | 62 |

Prism Effect Slider

63 | 64 |
65 |
66 | 67 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /index7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Scroll Spiral | Demo 3 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 29 |
30 |
31 |
32 |

Scroll Spirals

33 |

Decorative Background Effects with WebGL

34 | GitHub 35 |
36 | 37 | 38 |
39 | 50 |
51 |
52 |
53 |
54 |

This demo is powered by regl — declarative and stateless webgl

55 |

If you enjoyed this demo you might also like:

56 | 57 | 58 |

Animated Background Headers

59 | 60 | 61 | 62 |

Prism Effect Slider

63 | 64 |
65 |
66 | 67 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /index8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Scroll Spiral | Demo 3 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 29 |
30 |
31 |
32 |

Scroll Spirals

33 |

Decorative Background Effects with WebGL

34 | GitHub 35 |
36 | 37 | 38 |
39 | 50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |

This demo is powered by regl — declarative and stateless webgl

58 |

If you enjoyed this demo you might also like:

59 | 60 | 61 |

Animated Background Headers

62 | 63 | 64 | 65 |

Prism Effect Slider

66 | 67 |
68 |
69 | 70 | 173 | 174 | 175 | 176 | -------------------------------------------------------------------------------- /index9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Scroll Spiral | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 29 |
30 |
31 |
32 |

Scroll Spirals

33 |

Decorative Background Effects with WebGL

34 | GitHub 35 |
36 | 37 | 38 |
39 | 50 |
51 |
52 |
53 |
54 |

This demo is powered by regl — declarative and stateless webgl

55 |

If you enjoyed this demo you might also like:

56 | 57 | 58 |

Animated Background Headers

59 | 60 | 61 | 62 |

Prism Effect Slider

63 | 64 |
65 |
66 | 67 | 154 | 155 | 156 | 157 | -------------------------------------------------------------------------------- /js/demo1.js: -------------------------------------------------------------------------------- 1 | !function() { 2 | 'use strict'; 3 | 4 | var canvas = document.querySelector('#webgl'); 5 | 6 | // Scroll variables 7 | var scroll = 0.0, velocity = 0.0, lastScroll = 0.0; 8 | 9 | // initialize REGL from a canvas element 10 | var regl = createREGL({ 11 | canvas: canvas, 12 | onDone: function(error, regl) { 13 | if (error) { alert(error); } 14 | } 15 | }); 16 | 17 | // Create a REGL draw command 18 | var draw = regl({ 19 | frag: document.querySelector('#fragmentShader').textContent, 20 | vert: 'attribute vec2 position; void main() { gl_Position = vec4(3.0 * position, 0.0, 1.0); }', 21 | attributes: { position: [-1, 0, 0, -1, 1, 1] }, 22 | count: 3, 23 | uniforms: { 24 | globaltime: regl.prop('globaltime'), 25 | resolution: regl.prop('resolution'), 26 | aspect: regl.prop('aspect'), 27 | scroll: regl.prop('scroll'), 28 | velocity: regl.prop('velocity') 29 | } 30 | }); 31 | 32 | // Hook a callback to execute each frame 33 | regl.frame(function(ctx) { 34 | // Resize a canvas element with the aspect ratio (100vw, 100vh) 35 | var aspect = canvas.scrollWidth / canvas.scrollHeight; 36 | canvas.width = 512 * aspect; 37 | canvas.height = 512; 38 | 39 | // Scroll amount (0.0 to 1.0) 40 | scroll = window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight); 41 | 42 | // Scroll velocity 43 | // Inertia example: 44 | // velocity = velocity * 0.99 + (scroll - lastScroll); 45 | // lastScroll = scroll; 46 | 47 | // Clear the draw buffer 48 | regl.clear({ color: [0, 0, 0, 0] }); 49 | 50 | // Execute a REGL draw command 51 | draw({ 52 | globaltime: ctx.time, 53 | resolution: [ctx.viewportWidth, ctx.viewportHeight], 54 | aspect: aspect, 55 | scroll: scroll, 56 | velocity: velocity 57 | }); 58 | }); 59 | 60 | setTimeout(function() { document.body.classList.remove('loading');}, 1000); 61 | 62 | }(); 63 | -------------------------------------------------------------------------------- /js/demo2.js: -------------------------------------------------------------------------------- 1 | !function() { 2 | 'use strict'; 3 | 4 | var canvas = document.querySelector('#webgl'); 5 | 6 | // Scroll variables 7 | var scroll = 0.0, velocity = 0.0, lastScroll = 0.0; 8 | 9 | // Initialize REGL from a canvas element 10 | var regl = createREGL({ 11 | canvas: canvas, 12 | onDone: function(error, regl) { 13 | if (error) { alert(error); } 14 | } 15 | }); 16 | 17 | // Loading a texture 18 | var img = new Image(); 19 | img.src = 'img/img1.jpg'; 20 | img.onload = function() { 21 | setTimeout(function() { document.body.classList.remove('loading');}, 1000); 22 | 23 | // Create a REGL draw command 24 | var draw = regl({ 25 | frag: document.querySelector('#fragmentShader').textContent, 26 | vert: 'attribute vec2 position; void main() { gl_Position = vec4(3.0 * position, 0.0, 1.0); }', 27 | attributes: { position: [-1, 0, 0, -1, 1, 1] }, 28 | count: 3, 29 | uniforms: { 30 | globaltime: regl.prop('globaltime'), 31 | resolution: regl.prop('resolution'), 32 | aspect: regl.prop('aspect'), 33 | scroll: regl.prop('scroll'), 34 | velocity: regl.prop('velocity'), 35 | texture: regl.texture(img) 36 | } 37 | }); 38 | 39 | // Hook a callback to execute each frame 40 | regl.frame(function(ctx) { 41 | 42 | // Resize a canvas element with the aspect ratio (100vw, 100vh) 43 | var aspect = canvas.scrollWidth / canvas.scrollHeight; 44 | canvas.width = 1024 * aspect; 45 | canvas.height = 1024; 46 | 47 | // Scroll amount (0.0 to 1.0) 48 | scroll = window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight); 49 | 50 | // Scroll Velocity 51 | // Inertia example: 52 | // velocity = velocity * 0.99 + (scroll - lastScroll); 53 | // lastScroll = scroll; 54 | 55 | // Clear the draw buffer 56 | regl.clear({ color: [0, 0, 0, 0] }); 57 | 58 | // Execute a REGL draw command 59 | draw({ 60 | globaltime: ctx.time, 61 | resolution: [ctx.viewportWidth, ctx.viewportHeight], 62 | aspect: aspect, 63 | scroll: scroll, 64 | velocity: velocity 65 | }); 66 | }); 67 | }; 68 | 69 | }(); 70 | -------------------------------------------------------------------------------- /js/demo3.js: -------------------------------------------------------------------------------- 1 | !function() { 2 | 'use strict'; 3 | 4 | var canvas = document.querySelector('#webgl'); 5 | 6 | // Scroll variables 7 | var scroll = 0.0, velocity = 0.0, lastScroll = 0.0; 8 | 9 | // Initialize REGL from a canvas element 10 | var regl = createREGL({ 11 | canvas: canvas, 12 | onDone: function(error, regl) { 13 | if (error) { alert(error); } 14 | } 15 | }); 16 | 17 | // Loading a texture 18 | var img = new Image(); 19 | img.src = 'img/img2.jpg'; 20 | img.onload = function() { 21 | setTimeout(function() { document.body.classList.remove('loading');}, 1000); 22 | 23 | // Create a REGL draw command 24 | var draw = regl({ 25 | frag: document.querySelector('#fragmentShader').textContent, 26 | vert: 'attribute vec2 position; void main() { gl_Position = vec4(3.0 * position, 0.0, 1.0); }', 27 | attributes: { position: [-1, 0, 0, -1, 1, 1] }, 28 | count: 3, 29 | uniforms: { 30 | globaltime: regl.prop('globaltime'), 31 | resolution: regl.prop('resolution'), 32 | aspect: regl.prop('aspect'), 33 | scroll: regl.prop('scroll'), 34 | velocity: regl.prop('velocity'), 35 | texture: regl.texture(img) 36 | } 37 | }); 38 | 39 | // Hook a callback to execute each frame 40 | regl.frame(function(ctx) { 41 | 42 | // Resize a canvas element with the aspect ratio (100vw, 100vh) 43 | var aspect = canvas.scrollWidth / canvas.scrollHeight; 44 | canvas.width = 1024 * aspect; 45 | canvas.height = 1024; 46 | 47 | // Scroll amount (0.0 to 1.0) 48 | scroll = window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight); 49 | 50 | // Scroll Velocity 51 | // Inertia example: 52 | // velocity = velocity * 0.99 + (scroll - lastScroll); 53 | // lastScroll = scroll; 54 | 55 | // Clear the draw buffer 56 | regl.clear({ color: [0, 0, 0, 0] }); 57 | 58 | // Execute a REGL draw command 59 | draw({ 60 | globaltime: ctx.time, 61 | resolution: [ctx.viewportWidth, ctx.viewportHeight], 62 | aspect: aspect, 63 | scroll: scroll, 64 | velocity: velocity 65 | }); 66 | }); 67 | }; 68 | 69 | }(); 70 | -------------------------------------------------------------------------------- /js/demo4.js: -------------------------------------------------------------------------------- 1 | !function() { 2 | 'use strict'; 3 | 4 | var canvas = document.querySelector('#webgl'); 5 | 6 | // Scroll variables 7 | var scroll = 0.0, velocity = 0.0, lastScroll = 0.0; 8 | 9 | // Initialize REGL from a canvas element 10 | var regl = createREGL({ 11 | canvas: canvas, 12 | onDone: function(error, regl) { 13 | if (error) { alert(error); } 14 | } 15 | }); 16 | 17 | // Loading a texture 18 | var img = new Image(); 19 | img.src = 'img/img3.jpg'; 20 | img.onload = function() { 21 | setTimeout(function() { document.body.classList.remove('loading');}, 1000); 22 | 23 | // Create a REGL draw command 24 | var draw = regl({ 25 | frag: document.querySelector('#fragmentShader').textContent, 26 | vert: 'attribute vec2 position; void main() { gl_Position = vec4(3.0 * position, 0.0, 1.0); }', 27 | attributes: { position: [-1, 0, 0, -1, 1, 1] }, 28 | count: 3, 29 | uniforms: { 30 | globaltime: regl.prop('globaltime'), 31 | resolution: regl.prop('resolution'), 32 | aspect: regl.prop('aspect'), 33 | scroll: regl.prop('scroll'), 34 | velocity: regl.prop('velocity'), 35 | texture: regl.texture(img) 36 | } 37 | }); 38 | 39 | // Hook a callback to execute each frame 40 | regl.frame(function(ctx) { 41 | 42 | // Resize a canvas element with the aspect ratio (100vw, 100vh) 43 | var aspect = canvas.scrollWidth / canvas.scrollHeight; 44 | canvas.width = 1024 * aspect; 45 | canvas.height = 1024; 46 | 47 | // Scroll amount (0.0 to 1.0) 48 | scroll = window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight); 49 | 50 | // Scroll Velocity 51 | // Inertia example: 52 | // velocity = velocity * 0.99 + (scroll - lastScroll); 53 | // lastScroll = scroll; 54 | 55 | // Clear the draw buffer 56 | regl.clear({ color: [0, 0, 0, 0] }); 57 | 58 | // Execute a REGL draw command 59 | draw({ 60 | globaltime: ctx.time, 61 | resolution: [ctx.viewportWidth, ctx.viewportHeight], 62 | aspect: aspect, 63 | scroll: scroll, 64 | velocity: velocity 65 | }); 66 | }); 67 | }; 68 | }(); 69 | -------------------------------------------------------------------------------- /js/demo5.js: -------------------------------------------------------------------------------- 1 | !function() { 2 | 'use strict'; 3 | 4 | var canvas = document.querySelector('#webgl'); 5 | 6 | // Scroll variables 7 | var scroll = 0.0, velocity = 0.0, lastScroll = 0.0; 8 | 9 | // Initialize REGL from a canvas element 10 | var regl = createREGL({ 11 | canvas: canvas, 12 | onDone: function(error, regl) { 13 | if (error) { alert(error); } 14 | } 15 | }); 16 | 17 | // Loading a texture 18 | var img = new Image(); 19 | img.src = 'img/img4.jpg'; 20 | img.onload = function() { 21 | setTimeout(function() { document.body.classList.remove('loading');}, 1000); 22 | 23 | // Create a REGL draw command 24 | var draw = regl({ 25 | frag: document.querySelector('#fragmentShader').textContent, 26 | vert: 'attribute vec2 position; void main() { gl_Position = vec4(3.0 * position, 0.0, 1.0); }', 27 | attributes: { position: [-1, 0, 0, -1, 1, 1] }, 28 | count: 3, 29 | uniforms: { 30 | globaltime: regl.prop('globaltime'), 31 | resolution: regl.prop('resolution'), 32 | aspect: regl.prop('aspect'), 33 | scroll: regl.prop('scroll'), 34 | velocity: regl.prop('velocity'), 35 | texture: regl.texture(img) 36 | } 37 | }); 38 | 39 | // Hook a callback to execute each frame 40 | regl.frame(function(ctx) { 41 | 42 | // Resize a canvas element with the aspect ratio (100vw, 100vh) 43 | var aspect = canvas.scrollWidth / canvas.scrollHeight; 44 | canvas.width = 1024 * aspect; 45 | canvas.height = 1024; 46 | 47 | // Scroll amount (0.0 to 1.0) 48 | scroll = window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight); 49 | 50 | // Scroll Velocity 51 | // Inertia example: 52 | // velocity = velocity * 0.99 + (scroll - lastScroll); 53 | // lastScroll = scroll; 54 | 55 | // Clear the draw buffer 56 | regl.clear({ color: [0, 0, 0, 0] }); 57 | 58 | // Execute a REGL draw command 59 | draw({ 60 | globaltime: ctx.time, 61 | resolution: [ctx.viewportWidth, ctx.viewportHeight], 62 | aspect: aspect, 63 | scroll: scroll, 64 | velocity: velocity 65 | }); 66 | }); 67 | }; 68 | 69 | }(); 70 | -------------------------------------------------------------------------------- /js/demo6.js: -------------------------------------------------------------------------------- 1 | !function() { 2 | 'use strict'; 3 | 4 | var canvas = document.querySelector('#webgl'); 5 | 6 | // Scroll variables 7 | var scroll = 0.0, velocity = 0.0, lastScroll = 0.0; 8 | 9 | // initialize REGL from a canvas element 10 | var regl = createREGL({ 11 | canvas: canvas, 12 | onDone: function(error, regl) { 13 | if (error) { alert(error); } 14 | } 15 | }); 16 | 17 | // Loading a texture 18 | var img = new Image(); 19 | img.src = 'img/gradient_map1.png'; 20 | img.onload = function() { 21 | setTimeout(function() { document.body.classList.remove('loading');}, 1000); 22 | 23 | // Create a REGL draw command 24 | var draw = regl({ 25 | frag: document.querySelector('#fragmentShader').textContent, 26 | vert: 'attribute vec2 position; void main() { gl_Position = vec4(3.0 * position, 0.0, 1.0); }', 27 | attributes: { position: [-1, 0, 0, -1, 1, 1] }, 28 | count: 3, 29 | uniforms: { 30 | globaltime: regl.prop('globaltime'), 31 | resolution: regl.prop('resolution'), 32 | aspect: regl.prop('aspect'), 33 | scroll: regl.prop('scroll'), 34 | velocity: regl.prop('velocity'), 35 | gradient: regl.texture(img) 36 | } 37 | }); 38 | 39 | // Hook a callback to execute each frame 40 | regl.frame(function(ctx) { 41 | 42 | // Resize a canvas element with the aspect ratio (100vw, 100vh) 43 | var aspect = canvas.scrollWidth / canvas.scrollHeight; 44 | canvas.width = 768 * aspect; 45 | canvas.height = 768; 46 | 47 | // Scroll amount (0.0 to 1.0) 48 | scroll = window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight); 49 | 50 | // Scroll Velocity 51 | // Inertia example: 52 | // velocity = velocity * 0.99 + (scroll - lastScroll); 53 | // lastScroll = scroll; 54 | 55 | // Clear the draw buffer 56 | regl.clear({ color: [0, 0, 0, 0] }); 57 | 58 | // Execute a REGL draw command 59 | draw({ 60 | globaltime: ctx.time, 61 | resolution: [ctx.viewportWidth, ctx.viewportHeight], 62 | aspect: aspect, 63 | scroll: scroll, 64 | velocity: velocity 65 | }); 66 | }); 67 | 68 | }; 69 | 70 | }(); 71 | -------------------------------------------------------------------------------- /js/demo7.js: -------------------------------------------------------------------------------- 1 | !function() { 2 | 'use strict'; 3 | 4 | var canvas = document.querySelector('#webgl'); 5 | 6 | // Scroll variables 7 | var scroll = 0.0, velocity = 0.0, lastScroll = 0.0; 8 | 9 | // initialize REGL from a canvas element 10 | var regl = createREGL({ 11 | canvas: canvas, 12 | onDone: function(error, regl) { 13 | if (error) { alert(error); } 14 | } 15 | }); 16 | 17 | // Loading a texture 18 | var img = new Image(); 19 | img.src = 'img/gradient_map2.png'; 20 | img.onload = function() { 21 | setTimeout(function() { document.body.classList.remove('loading');}, 1000); 22 | 23 | // Create a REGL draw command 24 | var draw = regl({ 25 | frag: document.querySelector('#fragmentShader').textContent, 26 | vert: 'attribute vec2 position; void main() { gl_Position = vec4(3.0 * position, 0.0, 1.0); }', 27 | attributes: { position: [-1, 0, 0, -1, 1, 1] }, 28 | count: 3, 29 | uniforms: { 30 | globaltime: regl.prop('globaltime'), 31 | resolution: regl.prop('resolution'), 32 | aspect: regl.prop('aspect'), 33 | scroll: regl.prop('scroll'), 34 | velocity: regl.prop('velocity'), 35 | gradient: regl.texture(img) 36 | } 37 | }); 38 | 39 | // Hook a callback to execute each frame 40 | regl.frame(function(ctx) { 41 | 42 | // Resize a canvas element with the aspect ratio (100vw, 100vh) 43 | var aspect = canvas.scrollWidth / canvas.scrollHeight; 44 | canvas.width = 768 * aspect; 45 | canvas.height = 768; 46 | 47 | // Scroll amount (0.0 to 1.0) 48 | scroll = window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight); 49 | 50 | // Scroll Velocity 51 | // Inertia example: 52 | // velocity = velocity * 0.99 + (scroll - lastScroll); 53 | // lastScroll = scroll; 54 | 55 | // Clear the draw buffer 56 | regl.clear({ color: [0, 0, 0, 0] }); 57 | 58 | // Execute a REGL draw command 59 | draw({ 60 | globaltime: ctx.time, 61 | resolution: [ctx.viewportWidth, ctx.viewportHeight], 62 | aspect: aspect, 63 | scroll: scroll, 64 | velocity: velocity 65 | }); 66 | }); 67 | 68 | }; 69 | 70 | }(); 71 | -------------------------------------------------------------------------------- /js/demo8.js: -------------------------------------------------------------------------------- 1 | !function() { 2 | 'use strict'; 3 | 4 | var canvas = document.querySelector('#webgl'); 5 | 6 | // Scroll variables 7 | var scroll = 0.0, velocity = 0.0, lastScroll = 0.0; 8 | 9 | // initialize REGL from a canvas element 10 | var regl = createREGL({ 11 | canvas: canvas, 12 | onDone: function(error, regl) { 13 | if (error) { alert(error); } 14 | } 15 | }); 16 | 17 | // Loading a texture 18 | var img = new Image(); 19 | img.src = 'img/gradient_map3.png'; 20 | img.onload = function() { 21 | setTimeout(function() { document.body.classList.remove('loading');}, 1000); 22 | 23 | // Create a REGL draw command 24 | var draw = regl({ 25 | frag: document.querySelector('#fragmentShader').textContent, 26 | vert: 'attribute vec2 position; void main() { gl_Position = vec4(3.0 * position, 0.0, 1.0); }', 27 | attributes: { position: [-1, 0, 0, -1, 1, 1] }, 28 | count: 3, 29 | uniforms: { 30 | globaltime: regl.prop('globaltime'), 31 | resolution: regl.prop('resolution'), 32 | aspect: regl.prop('aspect'), 33 | scroll: regl.prop('scroll'), 34 | velocity: regl.prop('velocity'), 35 | gradient: regl.texture(img) 36 | } 37 | }); 38 | 39 | // Hook a callback to execute each frame 40 | regl.frame(function(ctx) { 41 | 42 | // Resize a canvas element with the aspect ratio (100vw, 100vh) 43 | var aspect = canvas.scrollWidth / canvas.scrollHeight; 44 | canvas.width = 768 * aspect; 45 | canvas.height = 768; 46 | 47 | // Scroll amount (0.0 to 1.0) 48 | scroll = window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight); 49 | 50 | // Scroll Velocity 51 | // Inertia example: 52 | // velocity = velocity * 0.99 + (scroll - lastScroll); 53 | // lastScroll = scroll; 54 | 55 | // Clear the draw buffer 56 | regl.clear({ color: [0, 0, 0, 0] }); 57 | 58 | // Execute a REGL draw command 59 | draw({ 60 | globaltime: ctx.time, 61 | resolution: [ctx.viewportWidth, ctx.viewportHeight], 62 | aspect: aspect, 63 | scroll: scroll, 64 | velocity: velocity 65 | }); 66 | }); 67 | 68 | }; 69 | 70 | }(); 71 | -------------------------------------------------------------------------------- /js/demo9.js: -------------------------------------------------------------------------------- 1 | !function() { 2 | 'use strict'; 3 | 4 | var canvas = document.querySelector('#webgl'); 5 | 6 | // Scroll variables 7 | var scroll = 0.0, velocity = 0.0, lastScroll = 0.0; 8 | 9 | // initialize REGL from a canvas element 10 | var regl = createREGL({ 11 | canvas: canvas, 12 | onDone: function(error, regl) { 13 | if (error) { alert(error); } 14 | } 15 | }); 16 | 17 | // Create a REGL draw command 18 | var draw = regl({ 19 | frag: document.querySelector('#fragmentShader').textContent, 20 | vert: 'attribute vec2 position; void main() { gl_Position = vec4(3.0 * position, 0.0, 1.0); }', 21 | attributes: { position: [-1, 0, 0, -1, 1, 1] }, 22 | count: 3, 23 | uniforms: { 24 | globaltime: regl.prop('globaltime'), 25 | resolution: regl.prop('resolution'), 26 | aspect: regl.prop('aspect'), 27 | scroll: regl.prop('scroll'), 28 | velocity: regl.prop('velocity') 29 | } 30 | }); 31 | 32 | // Hook a callback to execute each frame 33 | regl.frame(function(ctx) { 34 | // Resize a canvas element with the aspect ratio (100vw, 100vh) 35 | var aspect = canvas.scrollWidth / canvas.scrollHeight; 36 | canvas.width = 512 * aspect; 37 | canvas.height = 512; 38 | 39 | // Scroll amount (0.0 to 1.0) 40 | scroll = window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight); 41 | 42 | // Scroll Velocity 43 | // Inertia example: 44 | // velocity = velocity * 0.99 + (scroll - lastScroll); 45 | // lastScroll = scroll; 46 | 47 | // Clear the draw buffer 48 | regl.clear({ color: [0, 0, 0, 0] }); 49 | 50 | // Execute a REGL draw command 51 | draw({ 52 | globaltime: ctx.time, 53 | resolution: [ctx.viewportWidth, ctx.viewportHeight], 54 | aspect: aspect, 55 | scroll: scroll, 56 | velocity: velocity 57 | }); 58 | }); 59 | 60 | setTimeout(function() { document.body.classList.remove('loading');}, 1000); 61 | 62 | }(); 63 | -------------------------------------------------------------------------------- /js/regl.min.js: -------------------------------------------------------------------------------- 1 | (function(da,ea){"object"===typeof exports&&"undefined"!==typeof module?module.exports=ea():"function"===typeof define&&define.amd?define(ea):da.createREGL=ea()})(this,function(){function da(a,b){this.id=vb++;this.type=a;this.data=b}function ea(a){if(0===a.length)return[];var b=a.charAt(0),c=a.charAt(a.length-1);if(1>>=b;c=(255>>=c; 8 | b|=c;c=(15>>=c;b|=c;c=(3>>c>>1}function fa(a){a:{for(var b=16;268435456>=b;b*=16)if(a<=b){a=b;break a}a=0}b=$a[Za(a)>>2];return 0>2].push(a)}function bb(a,b,c,d,f,k){for(var p=0;pg&&(g=d.buffer.byteLength,5123===t?g>>=1:5125===t&&(g>>=2));d.vertCount= 17 | g;g=e;0>e&&(g=4,e=d.buffer.dimension,1===e&&(g=0),2===e&&(g=1),3===e&&(g=4));d.primType=g}function p(a){d.elementsCount--;delete h[a.id];a.buffer.destroy();a.buffer=null}var h={},g=0,r={uint8:5121,uint16:5123};b.oes_element_index_uint&&(r.uint32=5125);f.prototype.bind=function(){this.buffer.bind()};var v=[];return{create:function(a,b){function g(a){if(a)if("number"===typeof a)e(a),n.primType=4,n.vertCount=a|0,n.type=5121;else{var b=null,c=35044,d=-1,f=-1,l=0,p=0;if(Array.isArray(a)||O(a)||ja(a))b= 18 | a;else if("data"in a&&(b=a.data),"usage"in a&&(c=hb[a.usage]),"primitive"in a&&(d=Ra[a.primitive]),"count"in a&&(f=a.count|0),"type"in a&&(p=r[a.type]),"length"in a)l=a.length|0;else if(l=f,5123===p||5122===p)l*=2;else if(5125===p||5124===p)l*=4;k(n,b,c,d,f,l,p)}else e(),n.primType=4,n.vertCount=0,n.type=5121;return g}var e=c.create(null,34963,!0),n=new f(e._buffer);d.elementsCount++;g(a);g._reglType="elements";g._elements=n;g.subdata=function(a,b){e.subdata(a,b);return g};g.destroy=function(){p(n)}; 19 | return g},createStream:function(a){var b=v.pop();b||(b=new f(c.create(null,34963,!0,!1)._buffer));k(b,a,35040,-1,-1,0,0);return b},destroyStream:function(a){v.push(a)},getElements:function(a){return"function"===typeof a&&a._elements instanceof f?a._elements:null},clear:function(){H(h).forEach(p)}}}function ib(a){for(var b=x.allocType(5123,a.length),c=0;c>> 20 | 31<<15,k=(d<<1>>>24)-127,d=d>>13&1023;b[c]=-24>k?f:-14>k?f+(d+1024>>-14-k):15>=f,c.height>>=f,u(c,d[f]),a.mipmask|=1<b;++b)a.images[b]=null;return a}function gb(a){for(var b= 31 | a.images,c=0;cb){for(var c=0;c=--this.refCount&&z(this)}});p.profile&&(k.getTotalTextureSize=function(){var a=0;Object.keys(V).forEach(function(b){a+= 39 | V[b].stats.size});return a});return{create2D:function(b,c){function d(a,b){var c=f.texInfo;C.call(c);var e=B();"number"===typeof a?"number"===typeof b?w(e,a|0,b|0):w(e,a|0,a|0):a?(M(c,a),t(e,a)):w(e,1,1);c.genMipmaps&&(e.mipmask=(e.width<<1)-1);f.mipmask=e.mipmask;g(f,e);f.internalformat=e.internalformat;d.width=e.width;d.height=e.height;Q(f);Z(e,3553);P(c,3553);Aa();gb(e);p.profile&&(f.stats.size=Ia(f.internalformat,f.type,e.width,e.height,c.genMipmaps,!1));d.format=J[f.internalformat];d.type=W[f.type]; 40 | d.mag=la[c.magFilter];d.min=ya[c.minFilter];d.wrapS=ha[c.wrapS];d.wrapT=ha[c.wrapT];return d}var f=new G(3553);V[f.id]=f;k.textureCount++;d(b,c);d.subimage=function(a,b,c,l){b|=0;c|=0;l|=0;var q=e();g(q,f);q.width=0;q.height=0;u(q,a);q.width=q.width||(f.width>>l)-b;q.height=q.height||(f.height>>l)-c;Q(f);m(q,3553,b,c,l);Aa();n(q);return d};d.resize=function(b,c){var e=b|0,g=c|0||e;if(e===f.width&&g===f.height)return d;d.width=f.width=e;d.height=f.height=g;Q(f);for(var q=0;f.mipmask>>q;++q)a.texImage2D(3553, 41 | q,f.format,e>>q,g>>q,0,f.format,f.type,null);Aa();p.profile&&(f.stats.size=Ia(f.internalformat,f.type,e,g,!1,!1));return d};d._reglType="texture2d";d._texture=f;p.profile&&(d.stats=f.stats);d.destroy=function(){f.decRef()};return d},createCube:function(b,c,d,f,l,sa){function z(a,b,c,e,d,f){var F,X=h.texInfo;C.call(X);for(F=0;6>F;++F)q[F]=B();if("number"===typeof a||!a)for(a=a|0||1,F=0;6>F;++F)w(q[F],a,a);else if("object"===typeof a)if(b)t(q[0],a),t(q[1],b),t(q[2],c),t(q[3],e),t(q[4],d),t(q[5],f); 42 | else if(M(X,a),r(h,a),"faces"in a)for(a=a.faces,F=0;6>F;++F)g(q[F],h),t(q[F],a[F]);else for(F=0;6>F;++F)t(q[F],a);g(h,q[0]);h.mipmask=X.genMipmaps?(q[0].width<<1)-1:q[0].mipmask;h.internalformat=q[0].internalformat;z.width=q[0].width;z.height=q[0].height;Q(h);for(F=0;6>F;++F)Z(q[F],34069+F);P(X,34067);Aa();p.profile&&(h.stats.size=Ia(h.internalformat,h.type,z.width,z.height,X.genMipmaps,!0));z.format=J[h.internalformat];z.type=W[h.type];z.mag=la[X.magFilter];z.min=ya[X.minFilter];z.wrapS=ha[X.wrapS]; 43 | z.wrapT=ha[X.wrapT];for(F=0;6>F;++F)gb(q[F]);return z}var h=new G(34067);V[h.id]=h;k.cubeCount++;var q=Array(6);z(b,c,d,f,l,sa);z.subimage=function(a,b,c,q,d){c|=0;q|=0;d|=0;var f=e();g(f,h);f.width=0;f.height=0;u(f,b);f.width=f.width||(h.width>>d)-c;f.height=f.height||(h.height>>d)-q;Q(h);m(f,34069+a,c,q,d);Aa();n(f);return z};z.resize=function(b){b|=0;if(b!==h.width){z.width=h.width=b;z.height=h.height=b;Q(h);for(var c=0;6>c;++c)for(var q=0;h.mipmask>>q;++q)a.texImage2D(34069+c,q,h.format,b>>q, 44 | b>>q,0,h.format,h.type,null);Aa();p.profile&&(h.stats.size=Ia(h.internalformat,h.type,z.width,z.height,!1,!0));return z}};z._reglType="textureCube";z._texture=h;p.profile&&(z.stats=h.stats);z.destroy=function(){h.decRef()};return z},clear:function(){for(var b=0;bc;++c)if(0!==(b.mipmask&1<>c,b.height>>c,0,b.internalformat,b.type,null);else for(var e=0;6>e;++e)a.texImage2D(34069+e,c,b.internalformat,b.width>>c,b.height>>c,0,b.internalformat,b.type,null);P(b.texInfo,b.target)})}}}function Jb(a,b,c,d,f,k){function p(a,b,c){this.target=a;this.texture=b;this.renderbuffer=c;var e=a=0;b?(a=b.width,e=b.height):c&&(a=c.width,e=c.height);this.width=a;this.height=e}function h(a){a&& 46 | (a.texture&&a.texture._texture.decRef(),a.renderbuffer&&a.renderbuffer._renderbuffer.decRef())}function g(a,b,c){a&&(a.texture?a.texture._texture.refCount+=1:a.renderbuffer._renderbuffer.refCount+=1)}function r(b,c){c&&(c.texture?a.framebufferTexture2D(36160,b,c.target,c.texture._texture.texture,0):a.framebufferRenderbuffer(36160,b,36161,c.renderbuffer._renderbuffer.renderbuffer))}function v(a){var b=3553,c=null,e=null,g=a;"object"===typeof a&&(g=a.data,"target"in a&&(b=a.target|0));a=g._reglType; 47 | "texture2d"===a?c=g:"textureCube"===a?c=g:"renderbuffer"===a&&(e=g,b=36161);return new p(b,c,e)}function l(a,b,c,e,g){if(c)return a=d.create2D({width:a,height:b,format:e,type:g}),a._texture.refCount=0,new p(3553,a,null);a=f.create({width:a,height:b,format:e});a._renderbuffer.refCount=0;return new p(36161,null,a)}function u(a){return a&&(a.texture||a.renderbuffer)}function m(a,b,c){a&&(a.texture?a.texture.resize(b,c):a.renderbuffer&&a.renderbuffer.resize(b,c))}function e(){this.id=M++;P[this.id]=this; 48 | this.framebuffer=a.createFramebuffer();this.height=this.width=0;this.colorAttachments=[];this.depthStencilAttachment=this.stencilAttachment=this.depthAttachment=null}function n(a){a.colorAttachments.forEach(h);h(a.depthAttachment);h(a.stencilAttachment);h(a.depthStencilAttachment)}function D(b){a.deleteFramebuffer(b.framebuffer);b.framebuffer=null;k.framebufferCount--;delete P[b.id]}function w(b){var e;a.bindFramebuffer(36160,b.framebuffer);var g=b.colorAttachments;for(e=0;ee;++e){for(n=0;na;++a)c[a].resize(e);b.width=b.height=e;return b},_reglType:"framebufferCube",destroy:function(){c.forEach(function(a){a.destroy()})}})},clear:function(){H(P).forEach(D)},restore:function(){H(P).forEach(function(b){b.framebuffer=a.createFramebuffer();w(b)})}})}function pb(){this.w= 58 | this.z=this.y=this.x=this.state=0;this.buffer=null;this.size=0;this.normalized=!1;this.type=5126;this.divisor=this.stride=this.offset=0}function Kb(a,b,c,d,f){a=c.maxAttributes;b=Array(a);for(c=0;ca&&(a=b.stats.uniformsCount)});return a},c.getMaxAttributesCount=function(){var a=0;u.forEach(function(b){b.stats.attributesCount>a&&(a=b.stats.attributesCount)});return a});return{clear:function(){var b=a.deleteShader.bind(a);H(r).forEach(b);r={};H(v).forEach(b);v={};u.forEach(function(b){a.deleteProgram(b.program)});u.length=0;l={};c.shaderCount=0},program:function(a,b,f){var d=l[b];d||(d=l[b]={});var m=d[a];m||(m=new h(b,a),c.shaderCount++,g(m,f),d[a]= 62 | m,u.push(m));return m},restore:function(){r={};v={};for(var a=0;a="+b+"?"+d+".constant["+b+"]:0;"}).join(""), 90 | "}}else{","if(",q,"(",d,".buffer)){",h,"=",g,".createStream(",34962,",",d,".buffer);","}else{",h,"=",g,".getBuffer(",d,".buffer);","}",K,'="type" in ',d,"?",f.glTypes,"[",d,".type]:",h,".dtype;",y.normalized,"=!!",d,".normalized;");e("size");e("offset");e("stride");e("divisor");c("}}");c.exit("if(",y.isStream,"){",g,".destroyStream(",h,");","}");return y})});return g}function O(a){var b=a["static"],c=a.dynamic,e={};Object.keys(b).forEach(function(a){var c=b[a];e[a]=B(function(a,b){return"number"=== 91 | typeof c||"boolean"===typeof c?""+c:a.link(c)})});Object.keys(c).forEach(function(a){var b=c[a];e[a]=N(b,function(a,c){return a.invoke(c,b)})});return e}function z(a,b,c,e,d){var f=A(a,d),g=x(a,f,d),l=M(a,d),h=P(a,d),k=C(a,d),m=g.viewport;m&&(h.viewport=m);m=n("scissor.box");(g=g[m])&&(h[m]=g);g=0>1)",u],");")}function b(){c(w,".drawArraysInstancedANGLE(",[p,r,t,u],");")}n?v?a():(c("if(",n,"){"),a(),c("}else{"),b(),c("}")):b()}function g(){function a(){c(l+".drawElements("+[p,t,W,r+"<<(("+W+"-5121)>>1)"]+");")}function b(){c(l+".drawArrays("+[p,r,t]+");")}n?v?a():(c("if(",n,"){"),a(),c("}else{"),b(),c("}")): 105 | b()}var h=a.shared,l=h.gl,k=h.draw,m=e.draw,n=function(){var d=m.elements,f=b;if(d){if(d.contextDep&&e.contextDynamic||d.propDep)f=c;d=d.append(a,f)}else d=f.def(k,".","elements");d&&f("if("+d+")"+l+".bindBuffer(34963,"+d+".buffer.buffer);");return d}(),p=d("primitive"),r=d("offset"),t=function(){var d=m.count,f=b;if(d){if(d.contextDep&&e.contextDynamic||d.propDep)f=c;d=d.append(a,f)}else d=f.def(k,".","count");return d}();if("number"===typeof t){if(0===t)return}else c("if(",t,"){"),c.exit("}");var u, 106 | w;ma&&(u=d("instances"),w=a.instancing);var W=n+".type",v=m.elements&&ta(m.elements);ma&&("number"!==typeof u||0<=u)?"string"===typeof u?(c("if(",u,">0){"),f(),c("}else if(",u,"<0){"),g(),c("}")):f():g()}function ba(a,b,c,e,d){b=t();d=b.proc("body",d);ma&&(b.instancing=d.def(b.shared.extensions,".angle_instanced_arrays"));a(b,d,c,e);return b.compile().body}function R(a,b,c,e){ua(a,b);S(a,b,c,e.attributes,function(){return!0});U(a,b,c,e.uniforms,function(){return!0});H(a,b,b,c)}function W(a,b){var c= 107 | a.proc("draw",1);ua(a,c);sa(a,c,b.context);I(a,c,b.framebuffer);T(a,c,b);L(a,c,b.state);E(a,c,b,!1,!0);var e=b.shader.progVar.append(a,c);c(a.shared.gl,".useProgram(",e,".program);");if(b.shader.program)R(a,c,b,b.shader.program);else{var d=a.global.def("{}"),f=c.def(e,".id"),g=c.def(d,"[",f,"]");c(a.cond(g).then(g,".call(this,a0);")["else"](g,"=",d,"[",f,"]=",a.link(function(c){return ba(R,a,b,c,1)}),"(",e,");",g,".call(this,a0);"))}0=--this.refCount&&p(this)};f.profile&&(d.getTotalRenderbufferSize=function(){var a=0;Object.keys(v).forEach(function(b){a+=v[b].stats.size});return a});return{create:function(b,c){function m(b,c){var d=0,l=0,k=32854;"object"===typeof b&&b?("shape"in b?(l=b.shape,d=l[0]|0,l=l[1]|0):("radius"in b&&(d=l=b.radius|0),"width"in b&&(d=b.width|0),"height"in b&&(l=b.height|0)),"format"in b&&(k=h[b.format])): 132 | "number"===typeof b?(d=b|0,l="number"===typeof c?c|0:d):b||(d=l=1);if(d!==e.width||l!==e.height||k!==e.format)return m.width=e.width=d,m.height=e.height=l,e.format=k,a.bindRenderbuffer(36161,e.renderbuffer),a.renderbufferStorage(36161,k,d,l),f.profile&&(e.stats.size=L[e.format]*e.width*e.height),m.format=g[e.format],m}var e=new k(a.createRenderbuffer());v[e.id]=e;d.renderbufferCount++;m(b,c);m.resize=function(b,c){var d=b|0,g=c|0||d;if(d===e.width&&g===e.height)return m;m.width=e.width=d;m.height= 133 | e.height=g;a.bindRenderbuffer(36161,e.renderbuffer);a.renderbufferStorage(36161,e.format,d,g);f.profile&&(e.stats.size=L[e.format]*e.width*e.height);return m};m._reglType="renderbuffer";m._renderbuffer=e;f.profile&&(m.stats=e.stats);m.destroy=function(){e.decRef()};return m},clear:function(){H(v).forEach(p)},restore:function(){H(v).forEach(function(b){b.renderbuffer=a.createRenderbuffer();a.bindRenderbuffer(36161,b.renderbuffer);a.renderbufferStorage(36161,b.format,b.width,b.height)});a.bindRenderbuffer(36161, 134 | null)}}},ob=[];ob[6408]=4;var Ma=[];Ma[5121]=1;Ma[5126]=4;Ma[36193]=2;var Da=["x","y","z","w"],Pb="blend.func blend.equation stencil.func stencil.opFront stencil.opBack sample.coverage viewport scissor.box polygonOffset.offset".split(" "),Ga={0:0,1:1,zero:0,one:1,"src color":768,"one minus src color":769,"src alpha":770,"one minus src alpha":771,"dst color":774,"one minus dst color":775,"dst alpha":772,"one minus dst alpha":773,"constant color":32769,"one minus constant color":32770,"constant alpha":32771, 135 | "one minus constant alpha":32772,"src alpha saturate":776},Ua={never:512,less:513,"<":513,equal:514,"=":514,"==":514,"===":514,lequal:515,"<=":515,greater:516,">":516,notequal:517,"!=":517,"!==":517,gequal:518,">=":518,always:519},Oa={0:0,zero:0,keep:7680,replace:7681,increment:7682,decrement:7683,"increment wrap":34055,"decrement wrap":34056,invert:5386},rb={cw:2304,ccw:2305},sb=new Y(!1,!1,!1,function(){}),Sb=function(a,b){function c(){this.endQueryIndex=this.startQueryIndex=-1;this.sum=0;this.stats= 136 | null}function d(a,b,d){var e=h.pop()||new c;e.startQueryIndex=a;e.endQueryIndex=b;e.sum=0;e.stats=d;g.push(e)}var f=b.ext_disjoint_timer_query;if(!f)return null;var k=[],p=[],h=[],g=[],r=[],v=[];return{beginQuery:function(a){var b=k.pop()||f.createQueryEXT();f.beginQueryEXT(35007,b);p.push(b);d(p.length-1,p.length,a)},endQuery:function(){f.endQueryEXT(35007)},pushScopeStats:d,update:function(){var a,b;a=p.length;if(0!==a){v.length=Math.max(v.length,a+1);r.length=Math.max(r.length,a+1);r[0]=0;var c= 137 | v[0]=0;for(b=a=0;b=E.length&&d()}var c=tb(E,a);E[c]=b}}}function r(){var a=O.viewport,b=O.scissor_box;a[0]=a[1]=b[0]=b[1]=0;M.viewportWidth=M.framebufferWidth=M.drawingBufferWidth=a[2]=b[2]=m.drawingBufferWidth;M.viewportHeight=M.framebufferHeight=M.drawingBufferHeight=a[3]=b[3]=m.drawingBufferHeight}function v(){M.tick+=1;M.time=u();r();T.procs.poll()}function l(){r();T.procs.refresh();x&&x.update()}function u(){return(ub()-C)/1E3}a=zb(a);if(!a)return null;var m=a.gl,e=m.getContextAttributes(); 143 | m.isContextLost();var n=Ab(m,a);if(!n)return null;var D=wb(),w={bufferCount:0,elementsCount:0,framebufferCount:0,shaderCount:0,textureCount:0,cubeCount:0,renderbufferCount:0,maxTextureUnits:0},t=n.extensions,x=Sb(m,t),C=ub(),B=m.drawingBufferWidth,J=m.drawingBufferHeight,M={tick:0,time:0,viewportWidth:B,viewportHeight:J,framebufferWidth:B,framebufferHeight:J,drawingBufferWidth:B,drawingBufferHeight:J,pixelRatio:a.pixelRatio},P=Qb(m,t),G=Bb(m,w,a),Q=Cb(m,t,G,w),B=Kb(m,t,P,G,D),N=Lb(m,D,w,a),z=Fb(m, 144 | t,P,function(){T.procs.poll()},M,w,a),L=Rb(m,t,P,w,a),I=Jb(m,t,P,z,L,w),T=Ob(m,D,t,P,G,Q,z,I,{},B,N,{elements:null,primitive:4,count:-1,offset:0,instances:-1},M,x,a),D=Mb(m,I,T.procs.poll,M,e,t),O=T.next,H=m.canvas,E=[],S=[],U=[],R=[a.onDestroy],ba=null;H&&(H.addEventListener("webglcontextlost",f,!1),H.addEventListener("webglcontextrestored",k,!1));var Y=I.setFBO=p({framebuffer:ia.define.call(null,1,"framebuffer")});l();e=A(p,{clear:function(a){if("framebuffer"in a)if(a.framebuffer&&"framebufferCube"=== 145 | a.framebuffer_reglType)for(var b=0;6>b;++b)Y(A({framebuffer:a.framebuffer.faces[b]},a),h);else Y(a,h);else h(null,a)},prop:ia.define.bind(null,1),context:ia.define.bind(null,2),"this":ia.define.bind(null,3),draw:p({}),buffer:function(a){return G.create(a,34962,!1,!1)},elements:function(a){return Q.create(a,!1)},texture:z.create2D,cube:z.createCube,renderbuffer:L.create,framebuffer:I.create,framebufferCube:I.createCube,attributes:e,frame:g,on:function(a,b){var c;switch(a){case "frame":return g(b); 146 | case "lost":c=S;break;case "restore":c=U;break;case "destroy":c=R}c.push(b);return{cancel:function(){for(var a=0;a