├── .gitignore ├── README.md ├── docs ├── css │ └── main.min.css ├── img │ ├── apple-touch-icon.png │ ├── icon.ico │ ├── osaka01.jpg │ ├── osaka02.jpg │ ├── osaka03.jpg │ ├── osaka04.jpg │ ├── osaka05.jpg │ └── share.jpg ├── index.html └── js │ ├── main.min.js │ └── vendor │ ├── dat.gui.min.js │ └── stats.min.js ├── dst └── img │ ├── apple-touch-icon.png │ ├── icon.ico │ ├── osaka01.jpg │ ├── osaka02.jpg │ ├── osaka03.jpg │ ├── osaka04.jpg │ ├── osaka05.jpg │ └── share.jpg ├── gulp ├── conf.js ├── plugins.js └── tasks │ ├── clean.js │ ├── copy.js │ ├── imagemin.js │ ├── minify-css.js │ ├── pug.js │ ├── replace.js │ ├── sass.js │ ├── scripts.js │ ├── serve.js │ └── uglify.js ├── gulpfile.js ├── package.json └── src ├── .keep ├── css ├── foundation │ ├── _global.scss │ ├── _mixin-easing.scss │ ├── _mixin-utils.scss │ ├── _normalize.scss │ └── _variables.scss ├── main.scss └── object │ ├── component │ └── .keep │ ├── project │ ├── .keep │ ├── _canvas-webgl.scss │ ├── _contents-summary.scss │ └── _preloader.scss │ └── utility │ └── .keep ├── glsl ├── dissolve.fs ├── dissolve.vs └── modules │ ├── hsv2rgb.glsl │ ├── rotate_matrix.glsl │ ├── rotate_matrix_x.glsl │ ├── rotate_matrix_y.glsl │ ├── rotate_matrix_z.glsl │ ├── scale_matrix.glsl │ └── translate_matrix.glsl ├── html ├── index.pug └── modules │ └── _head.pug └── js ├── main.js ├── modules └── dissolve.js └── vendor ├── dat.gui.min.js └── stats.min.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | ignore 4 | dst/css/**/* 5 | dst/js/**/* 6 | dst/**/*.json 7 | dst/**/*.html 8 | build/**/* 9 | .sass-cache 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # glsl-dissolve 2 | 3 | ![](https://ykob.github.io/glsl-dissolve/img/share.jpg) 4 | 5 | it's dissolve effects for the 2D cross fade by glsl. 6 | 7 | https://ykob.github.io/glsl-dissolve/ 8 | -------------------------------------------------------------------------------- /docs/css/main.min.css: -------------------------------------------------------------------------------- 1 | img,legend{border:0}legend,td,th{padding:0}body,svg:not(:root){overflow:hidden}a,body{color:#fff}@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400;src:local('Noto Sans'),local('NotoSans'),url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype')}@font-face{font-family:'Noto Sans';font-style:normal;font-weight:700;src:local('Noto Sans Bold'),local('NotoSans-Bold'),url(https://fonts.gstatic.com/s/notosans/v6/PIbvSEyHEdL91QLOQRnZ14nF5uFdDttMLvmWuJdhhgs.ttf) format('truetype')}/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent;text-decoration:none}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}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}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}body{margin:0;min-height:100%;font-family:"Noto Sans"}::-moz-selection{color:#fff;background:rgba(0,0,0,.5)}::selection{color:#fff;background:rgba(0,0,0,.5)}.p-canvas-webgl{z-index:1;position:relative}.p-contents-summary{position:absolute;bottom:4%;left:2%;z-index:100}.p-contents-summary__head{float:left;margin:0;font-weight:400;letter-spacing:2px;background-color:#000}@media all and (min-width:1367px){.p-contents-summary__head{font-size:54.64px}}@media all and (min-width:569px) and (max-width:1366px){.p-contents-summary__head{font-size:4vw}}@media all and (max-width:568px){.p-contents-summary__head{font-size:22.72px}}.p-contents-summary__text{clear:left;float:left;line-height:1.75;margin:1em 0;letter-spacing:1px;background-color:#000}@media all and (min-width:1367px){.p-contents-summary__text{font-size:13.66px}}@media all and (min-width:569px) and (max-width:1366px){.p-contents-summary__text{font-size:1vw}}@media all and (max-width:568px){.p-contents-summary__text{font-size:5.68px}}.p-contents-summary__link-source{clear:left;margin:0;letter-spacing:1px}@media all and (min-width:1367px){.p-contents-summary__link-source{font-size:15.03px}}@media all and (min-width:569px) and (max-width:1366px){.p-contents-summary__link-source{font-size:1.1vw}}@media all and (max-width:568px){.p-contents-summary__link-source{font-size:6.25px}}.p-contents-summary__link-source a{position:relative;background-color:#000;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:cubic-bezier(.25,.46,.45,.94);transition-timing-function:cubic-bezier(.25,.46,.45,.94)}.p-contents-summary__link-source a:after{-webkit-transform:scale(0,1);-ms-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:left;-ms-transform-origin:left;transform-origin:left;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:cubic-bezier(.25,.46,.45,.94);transition-timing-function:cubic-bezier(.25,.46,.45,.94)}.p-contents-summary__link-source a:hover:after{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1)}@-webkit-keyframes rotatePreloader{0%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}@keyframes rotatePreloader{0%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}.p-preloader{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}.p-preloader__icon{width:40px;height:40px;box-sizing:border-box;margin:0 auto 10px;border-top:2px solid;border-right:2px solid #000;border-bottom:2px solid #000;border-left:2px solid #000;border-radius:25px;-webkit-animation-name:rotatePreloader;animation-name:rotatePreloader;-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.p-preloader__label{color:#000;font-weight:700;text-align:center;letter-spacing:2px;padding-left:2px}@media all and (min-width:1367px){.p-preloader__label{font-size:10.93px}}@media all and (min-width:569px) and (max-width:1366px){.p-preloader__label{font-size:.8vw}}@media all and (max-width:568px){.p-preloader__label{font-size:4.54px}}.p-preloader.is-hidden{opacity:0;-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95);-webkit-transition-duration:.5s;transition-duration:.5s}.p-preloader.is-stoped .p-preloader__icon{-webkit-animation-name:none;animation-name:none} -------------------------------------------------------------------------------- /docs/img/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/docs/img/apple-touch-icon.png -------------------------------------------------------------------------------- /docs/img/icon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/docs/img/icon.ico -------------------------------------------------------------------------------- /docs/img/osaka01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/docs/img/osaka01.jpg -------------------------------------------------------------------------------- /docs/img/osaka02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/docs/img/osaka02.jpg -------------------------------------------------------------------------------- /docs/img/osaka03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/docs/img/osaka03.jpg -------------------------------------------------------------------------------- /docs/img/osaka04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/docs/img/osaka04.jpg -------------------------------------------------------------------------------- /docs/img/osaka05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/docs/img/osaka05.jpg -------------------------------------------------------------------------------- /docs/img/share.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/docs/img/share.jpg -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | glsl-dissolve 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |

glsl-dissolve

28 |

it's dissolve effects for the 2D cross fade by glsl.

29 |

view source.

30 |
31 |
32 |
33 |
34 |
Loading
35 |
36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 51 | 52 | -------------------------------------------------------------------------------- /docs/js/main.min.js: -------------------------------------------------------------------------------- 1 | !function e(n,t,i){function o(a,s){if(!t[a]){if(!n[a]){var v="function"==typeof require&&require;if(!s&&v)return v(a,!0);if(r)return r(a,!0);var u=new Error("Cannot find module '"+a+"'");throw u.code="MODULE_NOT_FOUND",u}var d=t[a]={exports:{}};n[a][0].call(d.exports,function(e){var t=n[a][1][e];return o(t?t:e)},d,d.exports,e,n,t,i)}return t[a].exports}for(var r="function"==typeof require&&require,a=0;a1)){for(this.uniforms.time.value=0,this.prev_num=this.next_num,this.uniforms.texPrev.value=this.textures[this.next_num];this.next_num==this.prev_num;)this.next_num=Math.floor(Math.random()*this.textures.length);this.uniforms.texNext.value=this.textures[this.next_num]}}},{key:"resize",value:function(){this.uniforms.resolution.value.set(window.innerWidth,window.innerHeight)}}]),e}();t["default"]=r},{}]},{},[1]); -------------------------------------------------------------------------------- /docs/js/vendor/dat.gui.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * dat-gui JavaScript Controller Library 3 | * http://code.google.com/p/dat-gui 4 | * 5 | * Copyright 2011 Data Arts Team, Google Creative Lab 6 | * 7 | * Licensed under the Apache License, Version 2.0 (the "License"); 8 | * you may not use this file except in compliance with the License. 9 | * You may obtain a copy of the License at 10 | * 11 | * http://www.apache.org/licenses/LICENSE-2.0 12 | */ 13 | var dat=dat||{};dat.gui=dat.gui||{};dat.utils=dat.utils||{};dat.controllers=dat.controllers||{};dat.dom=dat.dom||{};dat.color=dat.color||{};dat.utils.css=function(){return{load:function(f,a){a=a||document;var d=a.createElement("link");d.type="text/css";d.rel="stylesheet";d.href=f;a.getElementsByTagName("head")[0].appendChild(d)},inject:function(f,a){a=a||document;var d=document.createElement("style");d.type="text/css";d.innerHTML=f;a.getElementsByTagName("head")[0].appendChild(d)}}}(); 14 | dat.utils.common=function(){var f=Array.prototype.forEach,a=Array.prototype.slice;return{BREAK:{},extend:function(d){this.each(a.call(arguments,1),function(a){for(var c in a)this.isUndefined(a[c])||(d[c]=a[c])},this);return d},defaults:function(d){this.each(a.call(arguments,1),function(a){for(var c in a)this.isUndefined(d[c])&&(d[c]=a[c])},this);return d},compose:function(){var d=a.call(arguments);return function(){for(var e=a.call(arguments),c=d.length-1;0<=c;c--)e=[d[c].apply(this,e)];return e[0]}}, 15 | each:function(a,e,c){if(a)if(f&&a.forEach&&a.forEach===f)a.forEach(e,c);else if(a.length===a.length+0)for(var b=0,p=a.length;bthis.__max&&(a=this.__max);void 0!==this.__step&&0!=a%this.__step&&(a=Math.round(a/this.__step)*this.__step);return e.superclass.prototype.setValue.call(this,a)},min:function(a){this.__min=a;return this},max:function(a){this.__max=a;return this},step:function(a){this.__impliedStep=this.__step=a;this.__precision=d(a);return this}});return e}(dat.controllers.Controller,dat.utils.common); 29 | dat.controllers.NumberControllerBox=function(f,a,d){var e=function(c,b,f){function q(){var a=parseFloat(n.__input.value);d.isNaN(a)||n.setValue(a)}function l(a){var b=u-a.clientY;n.setValue(n.getValue()+b*n.__impliedStep);u=a.clientY}function r(){a.unbind(window,"mousemove",l);a.unbind(window,"mouseup",r)}this.__truncationSuspended=!1;e.superclass.call(this,c,b,f);var n=this,u;this.__input=document.createElement("input");this.__input.setAttribute("type","text");a.bind(this.__input,"change",q);a.bind(this.__input, 30 | "blur",function(){q();n.__onFinishChange&&n.__onFinishChange.call(n,n.getValue())});a.bind(this.__input,"mousedown",function(b){a.bind(window,"mousemove",l);a.bind(window,"mouseup",r);u=b.clientY});a.bind(this.__input,"keydown",function(a){13===a.keyCode&&(n.__truncationSuspended=!0,this.blur(),n.__truncationSuspended=!1)});this.updateDisplay();this.domElement.appendChild(this.__input)};e.superclass=f;d.extend(e.prototype,f.prototype,{updateDisplay:function(){var a=this.__input,b;if(this.__truncationSuspended)b= 31 | this.getValue();else{b=this.getValue();var d=Math.pow(10,this.__precision);b=Math.round(b*d)/d}a.value=b;return e.superclass.prototype.updateDisplay.call(this)}});return e}(dat.controllers.NumberController,dat.dom.dom,dat.utils.common); 32 | dat.controllers.NumberControllerSlider=function(f,a,d,e,c){function b(a,b,c,e,d){return e+(a-b)/(c-b)*(d-e)}var p=function(c,e,d,f,u){function A(c){c.preventDefault();var e=a.getOffset(k.__background),d=a.getWidth(k.__background);k.setValue(b(c.clientX,e.left,e.left+d,k.__min,k.__max));return!1}function g(){a.unbind(window,"mousemove",A);a.unbind(window,"mouseup",g);k.__onFinishChange&&k.__onFinishChange.call(k,k.getValue())}p.superclass.call(this,c,e,{min:d,max:f,step:u});var k=this;this.__background= 33 | document.createElement("div");this.__foreground=document.createElement("div");a.bind(this.__background,"mousedown",function(b){a.bind(window,"mousemove",A);a.bind(window,"mouseup",g);A(b)});a.addClass(this.__background,"slider");a.addClass(this.__foreground,"slider-fg");this.updateDisplay();this.__background.appendChild(this.__foreground);this.domElement.appendChild(this.__background)};p.superclass=f;p.useDefaultStyles=function(){d.inject(c)};e.extend(p.prototype,f.prototype,{updateDisplay:function(){var a= 34 | (this.getValue()-this.__min)/(this.__max-this.__min);this.__foreground.style.width=100*a+"%";return p.superclass.prototype.updateDisplay.call(this)}});return p}(dat.controllers.NumberController,dat.dom.dom,dat.utils.css,dat.utils.common,"/**\n * dat-gui JavaScript Controller Library\n * http://code.google.com/p/dat-gui\n *\n * Copyright 2011 Data Arts Team, Google Creative Lab\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n */\n\n.slider {\n box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);\n height: 1em;\n border-radius: 1em;\n background-color: #eee;\n padding: 0 0.5em;\n overflow: hidden;\n}\n\n.slider-fg {\n padding: 1px 0 2px 0;\n background-color: #aaa;\n height: 1em;\n margin-left: -0.5em;\n padding-right: 0.5em;\n border-radius: 1em 0 0 1em;\n}\n\n.slider-fg:after {\n display: inline-block;\n border-radius: 1em;\n background-color: #fff;\n border: 1px solid #aaa;\n content: '';\n float: right;\n margin-right: -1em;\n margin-top: -1px;\n height: 0.9em;\n width: 0.9em;\n}"); 35 | dat.controllers.FunctionController=function(f,a,d){var e=function(c,b,d){e.superclass.call(this,c,b);var f=this;this.__button=document.createElement("div");this.__button.innerHTML=void 0===d?"Fire":d;a.bind(this.__button,"click",function(a){a.preventDefault();f.fire();return!1});a.addClass(this.__button,"button");this.domElement.appendChild(this.__button)};e.superclass=f;d.extend(e.prototype,f.prototype,{fire:function(){this.__onChange&&this.__onChange.call(this);this.getValue().call(this.object); 36 | this.__onFinishChange&&this.__onFinishChange.call(this,this.getValue())}});return e}(dat.controllers.Controller,dat.dom.dom,dat.utils.common); 37 | dat.controllers.BooleanController=function(f,a,d){var e=function(c,b){e.superclass.call(this,c,b);var d=this;this.__prev=this.getValue();this.__checkbox=document.createElement("input");this.__checkbox.setAttribute("type","checkbox");a.bind(this.__checkbox,"change",function(){d.setValue(!d.__prev)},!1);this.domElement.appendChild(this.__checkbox);this.updateDisplay()};e.superclass=f;d.extend(e.prototype,f.prototype,{setValue:function(a){a=e.superclass.prototype.setValue.call(this,a);this.__onFinishChange&& 38 | this.__onFinishChange.call(this,this.getValue());this.__prev=this.getValue();return a},updateDisplay:function(){!0===this.getValue()?(this.__checkbox.setAttribute("checked","checked"),this.__checkbox.checked=!0):this.__checkbox.checked=!1;return e.superclass.prototype.updateDisplay.call(this)}});return e}(dat.controllers.Controller,dat.dom.dom,dat.utils.common); 39 | dat.color.toString=function(f){return function(a){if(1==a.a||f.isUndefined(a.a)){for(a=a.hex.toString(16);6>a.length;)a="0"+a;return"#"+a}return"rgba("+Math.round(a.r)+","+Math.round(a.g)+","+Math.round(a.b)+","+a.a+")"}}(dat.utils.common); 40 | dat.color.interpret=function(f,a){var d,e,c=[{litmus:a.isString,conversions:{THREE_CHAR_HEX:{read:function(a){a=a.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);return null===a?!1:{space:"HEX",hex:parseInt("0x"+a[1].toString()+a[1].toString()+a[2].toString()+a[2].toString()+a[3].toString()+a[3].toString())}},write:f},SIX_CHAR_HEX:{read:function(a){a=a.match(/^#([A-F0-9]{6})$/i);return null===a?!1:{space:"HEX",hex:parseInt("0x"+a[1].toString())}},write:f},CSS_RGB:{read:function(a){a=a.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/); 41 | return null===a?!1:{space:"RGB",r:parseFloat(a[1]),g:parseFloat(a[2]),b:parseFloat(a[3])}},write:f},CSS_RGBA:{read:function(a){a=a.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/);return null===a?!1:{space:"RGB",r:parseFloat(a[1]),g:parseFloat(a[2]),b:parseFloat(a[3]),a:parseFloat(a[4])}},write:f}}},{litmus:a.isNumber,conversions:{HEX:{read:function(a){return{space:"HEX",hex:a,conversionName:"HEX"}},write:function(a){return a.hex}}}},{litmus:a.isArray,conversions:{RGB_ARRAY:{read:function(a){return 3!= 42 | a.length?!1:{space:"RGB",r:a[0],g:a[1],b:a[2]}},write:function(a){return[a.r,a.g,a.b]}},RGBA_ARRAY:{read:function(a){return 4!=a.length?!1:{space:"RGB",r:a[0],g:a[1],b:a[2],a:a[3]}},write:function(a){return[a.r,a.g,a.b,a.a]}}}},{litmus:a.isObject,conversions:{RGBA_OBJ:{read:function(b){return a.isNumber(b.r)&&a.isNumber(b.g)&&a.isNumber(b.b)&&a.isNumber(b.a)?{space:"RGB",r:b.r,g:b.g,b:b.b,a:b.a}:!1},write:function(a){return{r:a.r,g:a.g,b:a.b,a:a.a}}},RGB_OBJ:{read:function(b){return a.isNumber(b.r)&& 43 | a.isNumber(b.g)&&a.isNumber(b.b)?{space:"RGB",r:b.r,g:b.g,b:b.b}:!1},write:function(a){return{r:a.r,g:a.g,b:a.b}}},HSVA_OBJ:{read:function(b){return a.isNumber(b.h)&&a.isNumber(b.s)&&a.isNumber(b.v)&&a.isNumber(b.a)?{space:"HSV",h:b.h,s:b.s,v:b.v,a:b.a}:!1},write:function(a){return{h:a.h,s:a.s,v:a.v,a:a.a}}},HSV_OBJ:{read:function(b){return a.isNumber(b.h)&&a.isNumber(b.s)&&a.isNumber(b.v)?{space:"HSV",h:b.h,s:b.s,v:b.v}:!1},write:function(a){return{h:a.h,s:a.s,v:a.v}}}}}];return function(){e=!1; 44 | var b=1\n\n Here\'s the new load parameter for your GUI\'s constructor:\n\n \n\n
\n\n Automatically save\n values to localStorage on exit.\n\n
The values saved to localStorage will\n override those passed to dat.GUI\'s constructor. This makes it\n easier to work incrementally, but localStorage is fragile,\n and your friends may not see the same values you do.\n \n
\n \n
\n\n', 71 | ".dg {\n /** Clear list styles */\n /* Auto-place container */\n /* Auto-placed GUI's */\n /* Line items that don't contain folders. */\n /** Folder names */\n /** Hides closed items */\n /** Controller row */\n /** Name-half (left) */\n /** Controller-half (right) */\n /** Controller placement */\n /** Shorter number boxes when slider is present. */\n /** Ensure the entire boolean and function row shows a hand */ }\n .dg ul {\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n clear: both; }\n .dg.ac {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 0;\n z-index: 10000; }\n .dg:not(.ac) .main {\n /** Exclude mains in ac so that we don't hide close button */\n overflow: hidden; }\n .dg.main {\n -webkit-transition: opacity 0.1s linear;\n -o-transition: opacity 0.1s linear;\n -moz-transition: opacity 0.1s linear;\n transition: opacity 0.1s linear; }\n .dg.main.taller-than-window {\n overflow-y: auto; }\n .dg.main.taller-than-window .close-button {\n opacity: 1;\n /* TODO, these are style notes */\n margin-top: -1px;\n border-top: 1px solid #2c2c2c; }\n .dg.main ul.closed .close-button {\n opacity: 1 !important; }\n .dg.main:hover .close-button,\n .dg.main .close-button.drag {\n opacity: 1; }\n .dg.main .close-button {\n /*opacity: 0;*/\n -webkit-transition: opacity 0.1s linear;\n -o-transition: opacity 0.1s linear;\n -moz-transition: opacity 0.1s linear;\n transition: opacity 0.1s linear;\n border: 0;\n position: absolute;\n line-height: 19px;\n height: 20px;\n /* TODO, these are style notes */\n cursor: pointer;\n text-align: center;\n background-color: #000; }\n .dg.main .close-button:hover {\n background-color: #111; }\n .dg.a {\n float: right;\n margin-right: 15px;\n overflow-x: hidden; }\n .dg.a.has-save > ul {\n margin-top: 27px; }\n .dg.a.has-save > ul.closed {\n margin-top: 0; }\n .dg.a .save-row {\n position: fixed;\n top: 0;\n z-index: 1002; }\n .dg li {\n -webkit-transition: height 0.1s ease-out;\n -o-transition: height 0.1s ease-out;\n -moz-transition: height 0.1s ease-out;\n transition: height 0.1s ease-out; }\n .dg li:not(.folder) {\n cursor: auto;\n height: 27px;\n line-height: 27px;\n overflow: hidden;\n padding: 0 4px 0 5px; }\n .dg li.folder {\n padding: 0;\n border-left: 4px solid rgba(0, 0, 0, 0); }\n .dg li.title {\n cursor: pointer;\n margin-left: -4px; }\n .dg .closed li:not(.title),\n .dg .closed ul li,\n .dg .closed ul li > * {\n height: 0;\n overflow: hidden;\n border: 0; }\n .dg .cr {\n clear: both;\n padding-left: 3px;\n height: 27px; }\n .dg .property-name {\n cursor: default;\n float: left;\n clear: left;\n width: 40%;\n overflow: hidden;\n text-overflow: ellipsis; }\n .dg .c {\n float: left;\n width: 60%; }\n .dg .c input[type=text] {\n border: 0;\n margin-top: 4px;\n padding: 3px;\n width: 100%;\n float: right; }\n .dg .has-slider input[type=text] {\n width: 30%;\n /*display: none;*/\n margin-left: 0; }\n .dg .slider {\n float: left;\n width: 66%;\n margin-left: -5px;\n margin-right: 0;\n height: 19px;\n margin-top: 4px; }\n .dg .slider-fg {\n height: 100%; }\n .dg .c input[type=checkbox] {\n margin-top: 9px; }\n .dg .c select {\n margin-top: 5px; }\n .dg .cr.function,\n .dg .cr.function .property-name,\n .dg .cr.function *,\n .dg .cr.boolean,\n .dg .cr.boolean * {\n cursor: pointer; }\n .dg .selector {\n display: none;\n position: absolute;\n margin-left: -9px;\n margin-top: 23px;\n z-index: 10; }\n .dg .c:hover .selector,\n .dg .selector.drag {\n display: block; }\n .dg li.save-row {\n padding: 0; }\n .dg li.save-row .button {\n display: inline-block;\n padding: 0px 6px; }\n .dg.dialogue {\n background-color: #222;\n width: 460px;\n padding: 15px;\n font-size: 13px;\n line-height: 15px; }\n\n/* TODO Separate style and structure */\n#dg-new-constructor {\n padding: 10px;\n color: #222;\n font-family: Monaco, monospace;\n font-size: 10px;\n border: 0;\n resize: none;\n box-shadow: inset 1px 1px 1px #888;\n word-wrap: break-word;\n margin: 12px 0;\n display: block;\n width: 440px;\n overflow-y: scroll;\n height: 100px;\n position: relative; }\n\n#dg-local-explain {\n display: none;\n font-size: 11px;\n line-height: 17px;\n border-radius: 3px;\n background-color: #333;\n padding: 8px;\n margin-top: 10px; }\n #dg-local-explain code {\n font-size: 10px; }\n\n#dat-gui-save-locally {\n display: none; }\n\n/** Main type */\n.dg {\n color: #eee;\n font: 11px 'Lucida Grande', sans-serif;\n text-shadow: 0 -1px 0 #111;\n /** Auto place */\n /* Controller row,
  • */\n /** Controllers */ }\n .dg.main {\n /** Scrollbar */ }\n .dg.main::-webkit-scrollbar {\n width: 5px;\n background: #1a1a1a; }\n .dg.main::-webkit-scrollbar-corner {\n height: 0;\n display: none; }\n .dg.main::-webkit-scrollbar-thumb {\n border-radius: 5px;\n background: #676767; }\n .dg li:not(.folder) {\n background: #1a1a1a;\n border-bottom: 1px solid #2c2c2c; }\n .dg li.save-row {\n line-height: 25px;\n background: #dad5cb;\n border: 0; }\n .dg li.save-row select {\n margin-left: 5px;\n width: 108px; }\n .dg li.save-row .button {\n margin-left: 5px;\n margin-top: 1px;\n border-radius: 2px;\n font-size: 9px;\n line-height: 7px;\n padding: 4px 4px 5px 4px;\n background: #c5bdad;\n color: #fff;\n text-shadow: 0 1px 0 #b0a58f;\n box-shadow: 0 -1px 0 #b0a58f;\n cursor: pointer; }\n .dg li.save-row .button.gears {\n background: #c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;\n height: 7px;\n width: 8px; }\n .dg li.save-row .button:hover {\n background-color: #bab19e;\n box-shadow: 0 -1px 0 #b0a58f; }\n .dg li.folder {\n border-bottom: 0; }\n .dg li.title {\n padding-left: 16px;\n background: black url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;\n cursor: pointer;\n border-bottom: 1px solid rgba(255, 255, 255, 0.2); }\n .dg .closed li.title {\n background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==); }\n .dg .cr.boolean {\n border-left: 3px solid #806787; }\n .dg .cr.function {\n border-left: 3px solid #e61d5f; }\n .dg .cr.number {\n border-left: 3px solid #2fa1d6; }\n .dg .cr.number input[type=text] {\n color: #2fa1d6; }\n .dg .cr.string {\n border-left: 3px solid #1ed36f; }\n .dg .cr.string input[type=text] {\n color: #1ed36f; }\n .dg .cr.function:hover, .dg .cr.boolean:hover {\n background: #111; }\n .dg .c input[type=text] {\n background: #303030;\n outline: none; }\n .dg .c input[type=text]:hover {\n background: #3c3c3c; }\n .dg .c input[type=text]:focus {\n background: #494949;\n color: #fff; }\n .dg .c .slider {\n background: #303030;\n cursor: ew-resize; }\n .dg .c .slider-fg {\n background: #2fa1d6; }\n .dg .c .slider:hover {\n background: #3c3c3c; }\n .dg .c .slider:hover .slider-fg {\n background: #44abda; }\n", 72 | dat.controllers.factory=function(f,a,d,e,c,b,p){return function(q,l,r,n){var u=q[l];if(p.isArray(r)||p.isObject(r))return new f(q,l,r);if(p.isNumber(u))return p.isNumber(r)&&p.isNumber(n)?new d(q,l,r,n):new a(q,l,{min:r,max:n});if(p.isString(u))return new e(q,l);if(p.isFunction(u))return new c(q,l,"");if(p.isBoolean(u))return new b(q,l)}}(dat.controllers.OptionController,dat.controllers.NumberControllerBox,dat.controllers.NumberControllerSlider,dat.controllers.StringController=function(f,a,d){var e= 73 | function(c,b){function d(){f.setValue(f.__input.value)}e.superclass.call(this,c,b);var f=this;this.__input=document.createElement("input");this.__input.setAttribute("type","text");a.bind(this.__input,"keyup",d);a.bind(this.__input,"change",d);a.bind(this.__input,"blur",function(){f.__onFinishChange&&f.__onFinishChange.call(f,f.getValue())});a.bind(this.__input,"keydown",function(a){13===a.keyCode&&this.blur()});this.updateDisplay();this.domElement.appendChild(this.__input)};e.superclass=f;d.extend(e.prototype, 74 | f.prototype,{updateDisplay:function(){a.isActive(this.__input)||(this.__input.value=this.getValue());return e.superclass.prototype.updateDisplay.call(this)}});return e}(dat.controllers.Controller,dat.dom.dom,dat.utils.common),dat.controllers.FunctionController,dat.controllers.BooleanController,dat.utils.common),dat.controllers.Controller,dat.controllers.BooleanController,dat.controllers.FunctionController,dat.controllers.NumberControllerBox,dat.controllers.NumberControllerSlider,dat.controllers.OptionController, 75 | dat.controllers.ColorController=function(f,a,d,e,c){function b(a,b,d,e){a.style.background="";c.each(l,function(c){a.style.cssText+="background: "+c+"linear-gradient("+b+", "+d+" 0%, "+e+" 100%); "})}function p(a){a.style.background="";a.style.cssText+="background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);";a.style.cssText+="background: -webkit-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);"; 76 | a.style.cssText+="background: -o-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);";a.style.cssText+="background: -ms-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);";a.style.cssText+="background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);"}var q=function(f,n){function u(b){v(b);a.bind(window,"mousemove",v);a.bind(window, 77 | "mouseup",l)}function l(){a.unbind(window,"mousemove",v);a.unbind(window,"mouseup",l)}function g(){var a=e(this.value);!1!==a?(t.__color.__state=a,t.setValue(t.__color.toOriginal())):this.value=t.__color.toString()}function k(){a.unbind(window,"mousemove",w);a.unbind(window,"mouseup",k)}function v(b){b.preventDefault();var c=a.getWidth(t.__saturation_field),d=a.getOffset(t.__saturation_field),e=(b.clientX-d.left+document.body.scrollLeft)/c;b=1-(b.clientY-d.top+document.body.scrollTop)/c;1 78 | b&&(b=0);1e&&(e=0);t.__color.v=b;t.__color.s=e;t.setValue(t.__color.toOriginal());return!1}function w(b){b.preventDefault();var c=a.getHeight(t.__hue_field),d=a.getOffset(t.__hue_field);b=1-(b.clientY-d.top+document.body.scrollTop)/c;1b&&(b=0);t.__color.h=360*b;t.setValue(t.__color.toOriginal());return!1}q.superclass.call(this,f,n);this.__color=new d(this.getValue());this.__temp=new d(0);var t=this;this.domElement=document.createElement("div");a.makeSelectable(this.domElement,!1); 79 | this.__selector=document.createElement("div");this.__selector.className="selector";this.__saturation_field=document.createElement("div");this.__saturation_field.className="saturation-field";this.__field_knob=document.createElement("div");this.__field_knob.className="field-knob";this.__field_knob_border="2px solid ";this.__hue_knob=document.createElement("div");this.__hue_knob.className="hue-knob";this.__hue_field=document.createElement("div");this.__hue_field.className="hue-field";this.__input=document.createElement("input"); 80 | this.__input.type="text";this.__input_textShadow="0 1px 1px ";a.bind(this.__input,"keydown",function(a){13===a.keyCode&&g.call(this)});a.bind(this.__input,"blur",g);a.bind(this.__selector,"mousedown",function(b){a.addClass(this,"drag").bind(window,"mouseup",function(b){a.removeClass(t.__selector,"drag")})});var y=document.createElement("div");c.extend(this.__selector.style,{width:"122px",height:"102px",padding:"3px",backgroundColor:"#222",boxShadow:"0px 1px 3px rgba(0,0,0,0.3)"});c.extend(this.__field_knob.style, 81 | {position:"absolute",width:"12px",height:"12px",border:this.__field_knob_border+(.5>this.__color.v?"#fff":"#000"),boxShadow:"0px 1px 3px rgba(0,0,0,0.5)",borderRadius:"12px",zIndex:1});c.extend(this.__hue_knob.style,{position:"absolute",width:"15px",height:"2px",borderRight:"4px solid #fff",zIndex:1});c.extend(this.__saturation_field.style,{width:"100px",height:"100px",border:"1px solid #555",marginRight:"3px",display:"inline-block",cursor:"pointer"});c.extend(y.style,{width:"100%",height:"100%", 82 | background:"none"});b(y,"top","rgba(0,0,0,0)","#000");c.extend(this.__hue_field.style,{width:"15px",height:"100px",display:"inline-block",border:"1px solid #555",cursor:"ns-resize"});p(this.__hue_field);c.extend(this.__input.style,{outline:"none",textAlign:"center",color:"#fff",border:0,fontWeight:"bold",textShadow:this.__input_textShadow+"rgba(0,0,0,0.7)"});a.bind(this.__saturation_field,"mousedown",u);a.bind(this.__field_knob,"mousedown",u);a.bind(this.__hue_field,"mousedown",function(b){w(b);a.bind(window, 83 | "mousemove",w);a.bind(window,"mouseup",k)});this.__saturation_field.appendChild(y);this.__selector.appendChild(this.__field_knob);this.__selector.appendChild(this.__saturation_field);this.__selector.appendChild(this.__hue_field);this.__hue_field.appendChild(this.__hue_knob);this.domElement.appendChild(this.__input);this.domElement.appendChild(this.__selector);this.updateDisplay()};q.superclass=f;c.extend(q.prototype,f.prototype,{updateDisplay:function(){var a=e(this.getValue());if(!1!==a){var f=!1; 84 | c.each(d.COMPONENTS,function(b){if(!c.isUndefined(a[b])&&!c.isUndefined(this.__color.__state[b])&&a[b]!==this.__color.__state[b])return f=!0,{}},this);f&&c.extend(this.__color.__state,a)}c.extend(this.__temp.__state,this.__color.__state);this.__temp.a=1;var l=.5>this.__color.v||.5a&&(a+=1);return{h:360*a,s:c/b,v:b/255}},rgb_to_hex:function(a,d,e){a=this.hex_with_component(0,2,a);a=this.hex_with_component(a,1,d);return a=this.hex_with_component(a,0,e)},component_from_hex:function(a,d){return a>>8*d&255},hex_with_component:function(a,d,e){return e<<(f=8*d)|a&~(255<e+1E3&&(r.update(1E3*a/(c-e),100),e=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){g=this.end()},domElement:c,setMode:k}}; 4 | Stats.Panel=function(h,k,l){var c=Infinity,g=0,e=Math.round,a=e(window.devicePixelRatio||1),r=80*a,f=48*a,t=3*a,u=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement("canvas");q.width=r;q.height=f;q.style.cssText="width:80px;height:48px";var b=q.getContext("2d");b.font="bold "+9*a+"px Helvetica,Arial,sans-serif";b.textBaseline="top";b.fillStyle=l;b.fillRect(0,0,r,f);b.fillStyle=k;b.fillText(h,t,u);b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(f, 5 | v){c=Math.min(c,f);g=Math.max(g,f);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=k;b.fillText(e(f)+" "+h+" ("+e(c)+"-"+e(g)+")",t,u);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,e((1-f/v)*p))}}};"object"===typeof module&&(module.exports=Stats); 6 | -------------------------------------------------------------------------------- /dst/img/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/dst/img/apple-touch-icon.png -------------------------------------------------------------------------------- /dst/img/icon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/dst/img/icon.ico -------------------------------------------------------------------------------- /dst/img/osaka01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/dst/img/osaka01.jpg -------------------------------------------------------------------------------- /dst/img/osaka02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/dst/img/osaka02.jpg -------------------------------------------------------------------------------- /dst/img/osaka03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/dst/img/osaka03.jpg -------------------------------------------------------------------------------- /dst/img/osaka04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/dst/img/osaka04.jpg -------------------------------------------------------------------------------- /dst/img/osaka05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/dst/img/osaka05.jpg -------------------------------------------------------------------------------- /dst/img/share.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/dst/img/share.jpg -------------------------------------------------------------------------------- /gulp/conf.js: -------------------------------------------------------------------------------- 1 | // 設定ファイル 2 | // 対象パスやオプションを指定 3 | 4 | const DIR = module.exports.DIR = { 5 | PATH: '', 6 | SRC: 'src', 7 | DEST: 'dst', 8 | BUILD: 'docs' 9 | }; 10 | 11 | module.exports.serve = { 12 | dst: { 13 | //tunnel: 'test', 14 | notify: false, 15 | startPath: DIR.PATH, 16 | ghostMode: false, 17 | server: { 18 | baseDir: DIR.DEST, 19 | index: 'index.html', 20 | routes: { 21 | [DIR.PATH]: `${DIR.DEST}${DIR.PATH}/` 22 | } 23 | } 24 | }, 25 | build: { 26 | //tunnel: 'test', 27 | notify: false, 28 | startPath: DIR.PATH, 29 | ghostMode: false, 30 | server: { 31 | baseDir: DIR.BUILD, 32 | index: 'index.html', 33 | routes: { 34 | [DIR.PATH]: `${DIR.BUILD}${DIR.PATH}/` 35 | } 36 | } 37 | } 38 | }; 39 | 40 | module.exports.scripts = { 41 | common: '', 42 | entryFiles: [ 43 | `./${DIR.SRC}/js/main.js`, 44 | ], 45 | browserifyOpts: { 46 | transform: [ 47 | ['babelify', { 48 | babelrc: false, 49 | presets: ['es2015'] 50 | }], 51 | 'envify', 52 | 'glslify' 53 | ] 54 | }, 55 | dest: `${DIR.DEST}${DIR.PATH}/js` 56 | }; 57 | 58 | module.exports.pug = { 59 | src: [ 60 | `${DIR.SRC}/**/*.pug`, 61 | `!${DIR.SRC}/**/_**/*.pug`, 62 | `!${DIR.SRC}/**/_*.pug` 63 | ], 64 | dest: `${DIR.DEST}${DIR.PATH}`, 65 | opts: { 66 | pretty: true 67 | } 68 | }; 69 | 70 | module.exports.sass = { 71 | src: [ 72 | `${DIR.SRC}/**/*.{sass,scss}`, 73 | `!${DIR.SRC}/**/_**/*.{sass,scss}`, 74 | `!${DIR.SRC}/**/_*.{sass,scss}` 75 | ], 76 | dest: `${DIR.DEST}${DIR.PATH}/css`, 77 | browsers: [ 78 | 'last 2 versions', 79 | 'ie >= 9', 80 | 'Android >= 4', 81 | 'ios_saf >= 8', 82 | ] 83 | }; 84 | 85 | module.exports.replace = { 86 | html: { 87 | src: [ 88 | `${DIR.DEST}${DIR.PATH}/**/*.html` 89 | ], 90 | dest: `${DIR.BUILD}${DIR.PATH}`, 91 | path: `${DIR.PATH}` 92 | } 93 | }; 94 | 95 | module.exports.minify_css = { 96 | src: `${DIR.DEST}${DIR.PATH}/css/main.css`, 97 | dest: `./${DIR.BUILD}${DIR.PATH}/css` 98 | }; 99 | 100 | module.exports.uglify = { 101 | src: [ 102 | `./${DIR.DEST}${DIR.PATH}/js/main.js`, 103 | ], 104 | dest: `./${DIR.BUILD}${DIR.PATH}/js`, 105 | opts: { 106 | preserveComments: (node, comment) => /This header is generated by licensify/.test(comment.value) 107 | } 108 | }; 109 | 110 | module.exports.copy = { 111 | dest: { 112 | src: [ 113 | `${DIR.SRC}/js/vendor/*.js`, 114 | `${DIR.SRC}/font/**/*.*`, 115 | ], 116 | dest: `${DIR.DEST}${DIR.PATH}`, 117 | opts: { 118 | base: `${DIR.SRC}` 119 | } 120 | }, 121 | build: { 122 | src: [ 123 | `${DIR.DEST}${DIR.PATH}/js/vendor/*.js`, 124 | `${DIR.DEST}${DIR.PATH}/img/**/*.ico`, 125 | `${DIR.DEST}${DIR.PATH}/font/**/*.*`, 126 | ], 127 | dest: `${DIR.BUILD}${DIR.PATH}`, 128 | opts: { 129 | base: `${DIR.DEST}${DIR.PATH}` 130 | } 131 | } 132 | }; 133 | 134 | module.exports.imagemin = { 135 | src: [ 136 | `${DIR.DEST}${DIR.PATH}/**/*.{jpg,jpeg,png,gif}` 137 | ], 138 | dest: `./${DIR.BUILD}${DIR.PATH}/img` 139 | }; 140 | 141 | module.exports.clean = { 142 | dst: { 143 | path: [ 144 | `${DIR.DEST}${DIR.PATH}/**/*.html`, 145 | `${DIR.DEST}${DIR.PATH}/css/`, 146 | `${DIR.DEST}${DIR.PATH}/js/` 147 | ] 148 | }, 149 | build: { 150 | path: [`${DIR.BUILD}${DIR.PATH}`] 151 | } 152 | }; 153 | -------------------------------------------------------------------------------- /gulp/plugins.js: -------------------------------------------------------------------------------- 1 | module.exports = require('gulp-load-plugins')(); 2 | -------------------------------------------------------------------------------- /gulp/tasks/clean.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const del = require('del'); 3 | 4 | const conf = require('../conf').clean; 5 | 6 | gulp.task('clean-dst', cb => { 7 | del(conf.dst.path).then(() => { 8 | cb(); 9 | }); 10 | }); 11 | 12 | gulp.task('clean-build', cb => { 13 | del(conf.build.path).then(() => { 14 | cb(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /gulp/tasks/copy.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | 3 | const conf = require('../conf').copy; 4 | 5 | gulp.task('copy-to-dest', () => { 6 | return gulp.src(conf.dest.src, conf.dest.opts) 7 | .pipe(gulp.dest(conf.dest.dest)); 8 | }); 9 | 10 | gulp.task('copy-to-build', () => { 11 | return gulp.src(conf.build.src, conf.build.opts) 12 | .pipe(gulp.dest(conf.build.dest)); 13 | }); 14 | -------------------------------------------------------------------------------- /gulp/tasks/imagemin.js: -------------------------------------------------------------------------------- 1 | // imagemin with pngquant 2 | const gulp = require('gulp'); 3 | const pngquant = require('imagemin-pngquant'); 4 | 5 | const $ = require('../plugins'); 6 | const conf = require('../conf').imagemin; 7 | 8 | gulp.task('imagemin', () => { 9 | return gulp.src(conf.src) 10 | .pipe($.imagemin({ 11 | progressive: true, 12 | svgoPlugins: [{removeViewBox: false}], 13 | use: [pngquant()] 14 | })) 15 | .pipe($.rename(path => { 16 | path.dirname = path.dirname.replace('img', '.'); 17 | })) 18 | .pipe(gulp.dest(conf.dest)); 19 | }); 20 | -------------------------------------------------------------------------------- /gulp/tasks/minify-css.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | 3 | const $ = require('../plugins'); 4 | const conf = require('../conf').minify_css; 5 | 6 | gulp.task('minify-css', () => { 7 | return gulp.src(conf.src) 8 | .pipe($.minifyCss()) 9 | .pipe($.rename({suffix: '.min'})) 10 | .pipe(gulp.dest(conf.dest)); 11 | }); 12 | -------------------------------------------------------------------------------- /gulp/tasks/pug.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | 3 | const $ = require('../plugins'); 4 | const conf = require('../conf').pug; 5 | 6 | gulp.task('pug', () => { 7 | return gulp.src(conf.src) 8 | .pipe($.plumber({ 9 | errorHandler: $.notify.onError('<%= error.message %>') 10 | })) 11 | .pipe($.pug(conf.opts)) 12 | .pipe($.rename(path => { 13 | path.dirname = path.dirname.replace('html', '.'); 14 | })) 15 | .pipe(gulp.dest(conf.dest)); 16 | }); 17 | -------------------------------------------------------------------------------- /gulp/tasks/replace.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | 3 | const $ = require('../plugins'); 4 | const conf = require('../conf').replace; 5 | 6 | gulp.task('replace-html', () => { 7 | return gulp.src(conf.html.src) 8 | .pipe($.replace(/(src="\.\/js\/)([a-z0-9]*)(\.js")/g, '$1$2.min$3')) 9 | .pipe($.replace(/(href="\.\/css\/)([a-z0-9]*)(\.css")/g, '$1$2.min$3')) 10 | .pipe(gulp.dest(conf.html.dest)); 11 | }); 12 | -------------------------------------------------------------------------------- /gulp/tasks/sass.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | 3 | const $ = require('../plugins'); 4 | const conf = require('../conf').sass; 5 | 6 | gulp.task('sass', () => { 7 | return gulp.src(conf.src) 8 | .pipe($.sass().on('error', $.sass.logError)) 9 | .pipe($.autoprefixer({ 10 | browsers: conf.browsers, 11 | cascade: false 12 | })) 13 | .pipe($.rename(path => { 14 | path.dirname = path.dirname.replace('css', '.'); 15 | })) 16 | .pipe(gulp.dest(conf.dest)); 17 | }); 18 | -------------------------------------------------------------------------------- /gulp/tasks/scripts.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const browserify = require('browserify'); 3 | const watchify = require('watchify'); 4 | const licensify = require('licensify'); 5 | const source = require('vinyl-source-stream'); 6 | const eventStream = require('event-stream'); 7 | 8 | const $ = require('../plugins'); 9 | const conf = require('../conf').scripts; 10 | 11 | const bundler = (entry, isWatch) => { 12 | const bOpts = conf.browserifyOpts; 13 | var b; 14 | 15 | bOpts.entries = [conf.common, entry] 16 | 17 | if (isWatch) { 18 | // bOpts.debug = true 19 | bOpts.cache = {}; 20 | bOpts.packageCache = {}; 21 | bOpts.fullPath = true; 22 | b = watchify(browserify(bOpts)); 23 | } else { 24 | b = browserify(bOpts); 25 | } 26 | 27 | if (process.env.NODE_ENV === 'production') { 28 | b.plugin(licensify); 29 | } 30 | 31 | const bundle = () => { 32 | return b.bundle() 33 | .on('error', err => { 34 | console.log(`bundle error: ${err}`); 35 | }) 36 | .pipe(source(entry)) 37 | .pipe($.rename({ 38 | dirname: '', 39 | extname: '.js' 40 | })) 41 | .pipe(gulp.dest(conf.dest)); 42 | }; 43 | 44 | b 45 | .on('update', bundle) 46 | .on('log', message => { 47 | console.log(message); 48 | }); 49 | 50 | return bundle(); 51 | }; 52 | 53 | gulp.task('browserify', () => { 54 | const tasks = conf.entryFiles.map(entry => { 55 | return bundler(entry); 56 | }); 57 | return eventStream.merge.apply(null, tasks); 58 | }); 59 | 60 | gulp.task('watchify', () => { 61 | const tasks = conf.entryFiles.map(entry => { 62 | return bundler(entry, true); 63 | }); 64 | return eventStream.merge.apply(null, tasks); 65 | }); 66 | -------------------------------------------------------------------------------- /gulp/tasks/serve.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const browserSync = require('browser-sync'); 3 | 4 | const conf = require('../conf').serve; 5 | 6 | gulp.task('serve', () => { 7 | browserSync(conf.dst); 8 | }); 9 | 10 | gulp.task('serve-build', () => { 11 | browserSync(conf.build); 12 | }); 13 | -------------------------------------------------------------------------------- /gulp/tasks/uglify.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | 3 | const $ = require('../plugins'); 4 | const conf = require('../conf').uglify; 5 | 6 | gulp.task('uglify', () => { 7 | return gulp.src(conf.src) 8 | .pipe($.uglify(conf.opts)) 9 | .pipe($.rename({ 10 | suffix: '.min' 11 | })) 12 | .pipe(gulp.dest(conf.dest)); 13 | }); 14 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const requireDir = require('require-dir'); 3 | const runSequence = require('run-sequence'); 4 | const browserSync = require('browser-sync'); 5 | const reload = browserSync.reload; 6 | 7 | const DIR = require('./gulp/conf').DIR; 8 | 9 | requireDir('./gulp/tasks'); 10 | 11 | gulp.task('predefault', cb => { 12 | runSequence( 13 | 'clean-dst', 14 | ['pug', 'sass', 'watchify', 'copy-to-dest'], 15 | 'serve', 16 | cb 17 | ); 18 | }); 19 | 20 | gulp.task('default', ['predefault'], () => { 21 | gulp.watch( 22 | [`./${DIR.SRC}/**/*.pug`], 23 | ['pug', reload] 24 | ); 25 | 26 | gulp.watch( 27 | [`./${DIR.SRC}/**/*.{scss,sass}`], 28 | ['sass', reload] 29 | ); 30 | 31 | gulp.watch( 32 | [`./${DIR.DEST}/**/*.js`], 33 | reload 34 | ); 35 | }); 36 | 37 | gulp.task('build', cb => { 38 | runSequence( 39 | 'clean-build', 40 | ['pug', 'sass'], 41 | 'replace-html', 42 | ['minify-css', 'browserify', 'imagemin'], 43 | 'uglify', 44 | 'copy-to-build', 45 | cb 46 | ); 47 | }); 48 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "glsl-dissolve", 3 | "description": "it's dissolve effects for the 2D cross fade by glsl.", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/ykob/glsl-dissolve" 7 | }, 8 | "private": true, 9 | "scripts": { 10 | "start": "gulp", 11 | "build": "NODE_ENV=production gulp build" 12 | }, 13 | "engines": { 14 | "node": "4.2.x" 15 | }, 16 | "devDependencies": { 17 | "babel-core": "^6.10.4", 18 | "babel-preset-es2015": "^6.9.0", 19 | "babelify": "^7.3.0", 20 | "browser-sync": "^2.13.0", 21 | "browserify": "^12.0.2", 22 | "del": "^2.2.1", 23 | "envify": "^3.4.1", 24 | "glsl-fxaa": "^3.0.0", 25 | "gulp": "^3.9.1", 26 | "gulp-autoprefixer": "^3.1.0", 27 | "gulp-imagemin": "^2.4.0", 28 | "gulp-load-plugins": "^1.2.4", 29 | "gulp-minify-css": "^1.2.4", 30 | "gulp-notify": "^2.2.0", 31 | "gulp-plumber": "^1.1.0", 32 | "gulp-pug": "^3.0.3", 33 | "gulp-rename": "^1.2.2", 34 | "gulp-replace": "^0.5.4", 35 | "gulp-sass": "^2.3.2", 36 | "gulp-uglify": "^1.5.4", 37 | "imagemin-pngquant": "^4.2.2", 38 | "licensify": "^2.2.0", 39 | "require-dir": "^0.3.0", 40 | "run-sequence": "^1.2.1", 41 | "vinyl-source-stream": "^1.1.0", 42 | "watchify": "^3.7.0" 43 | }, 44 | "dependencies": { 45 | "glsl-easings": "^1.0.0", 46 | "glsl-inverse": "^1.0.0", 47 | "glsl-noise": "0.0.0", 48 | "glslify": "^5.1.0" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/src/.keep -------------------------------------------------------------------------------- /src/css/foundation/_global.scss: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | body { 5 | min-height: 100%; 6 | overflow: hidden; 7 | color: $color-text; 8 | font-family: "Noto Sans"; 9 | } 10 | a { 11 | color: $color-text; 12 | text-decoration: none; 13 | } 14 | ::selection { 15 | color: #fff; 16 | background: rgba(0, 0, 0, 0.5); 17 | } 18 | -------------------------------------------------------------------------------- /src/css/foundation/_mixin-easing.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Ceaser/developer/ceaser-easings.scss 3 | // https://github.com/matthewlein/Ceaser/blob/master/developer/ceaser-easings.scss 4 | // 5 | 6 | // Cubic 7 | $easeInCubic : cubic-bezier(0.550, 0.055, 0.675, 0.190); 8 | $easeOutCubic : cubic-bezier(0.215, 0.610, 0.355, 1.000); 9 | $easeInOutCubic : cubic-bezier(0.645, 0.045, 0.355, 1.000); 10 | 11 | // Circ 12 | $easeInCirc : cubic-bezier(0.600, 0.040, 0.980, 0.335); 13 | $easeOutCirc : cubic-bezier(0.075, 0.820, 0.165, 1.000); 14 | $easeInOutCirc : cubic-bezier(0.785, 0.135, 0.150, 0.860); 15 | 16 | // Expo 17 | $easeInExpo : cubic-bezier(0.950, 0.050, 0.795, 0.035); 18 | $easeOutExpo : cubic-bezier(0.190, 1.000, 0.220, 1.000); 19 | $easeInOutExpo : cubic-bezier(1.000, 0.000, 0.000, 1.000); 20 | 21 | // Quad 22 | $easeInQuad : cubic-bezier(0.550, 0.085, 0.680, 0.530); 23 | $easeOutQuad : cubic-bezier(0.250, 0.460, 0.450, 0.940); 24 | $easeInOutQuad : cubic-bezier(0.455, 0.030, 0.515, 0.955); 25 | 26 | // Quart 27 | $easeInQuart : cubic-bezier(0.895, 0.030, 0.685, 0.220); 28 | $easeOutQuart : cubic-bezier(0.165, 0.840, 0.440, 1.000); 29 | $easeInOutQuart : cubic-bezier(0.770, 0.000, 0.175, 1.000); 30 | 31 | // Quint 32 | $easeInQuint : cubic-bezier(0.755, 0.050, 0.855, 0.060); 33 | $easeOutQuint : cubic-bezier(0.230, 1.000, 0.320, 1.000); 34 | $easeInOutQuint : cubic-bezier(0.860, 0.000, 0.070, 1.000); 35 | 36 | // Sine 37 | $easeInSine : cubic-bezier(0.470, 0.000, 0.745, 0.715); 38 | $easeOutSine : cubic-bezier(0.390, 0.575, 0.565, 1.000); 39 | $easeInOutSine : cubic-bezier(0.445, 0.050, 0.550, 0.950); 40 | 41 | // Back 42 | $easeInBack : cubic-bezier(0.600, -0.280, 0.735, 0.045); 43 | $easeOutBack : cubic-bezier(0.175, 0.885, 0.320, 1.275); 44 | $easeInOutBack : cubic-bezier(0.680, -0.550, 0.265, 1.550); 45 | -------------------------------------------------------------------------------- /src/css/foundation/_mixin-utils.scss: -------------------------------------------------------------------------------- 1 | @mixin fontSize($size: 14) { 2 | font-size: $size + px; 3 | font-size: $size / 16 * 1rem; 4 | } 5 | @mixin clearfix { 6 | &:before, 7 | &:after { 8 | content: ""; 9 | display: table; 10 | } 11 | &:after { 12 | clear: both; 13 | } 14 | } 15 | @mixin flexFontSize($vw) { 16 | @include l-pc-l { 17 | font-size: $break-point-pc / 100 * $vw; 18 | } 19 | @include l-pc-and-tablet { 20 | font-size: $vw * 1vw; 21 | } 22 | @include l-mobile { 23 | font-size: $break-point-mobile / 100 * $vw; 24 | } 25 | } 26 | 27 | // 28 | // rwd break points 29 | // pc-l | pc-s | tablet | mobile 30 | // 31 | // ○ | - | - | - 32 | @mixin l-pc-l { 33 | @media all and (min-width: $break-point-pc + 1px) { 34 | @content; 35 | } 36 | } 37 | // - | ○ | - | - 38 | @mixin l-pc-s { 39 | @media all and (min-width: $break-point-tablet + 1px) and (max-width: $break-point-pc) { 40 | @content; 41 | } 42 | } 43 | // - | - | ○ | - 44 | @mixin l-tablet { 45 | @media all and (min-width: $break-point-mobile + 1px) and (max-width: $break-point-tablet) { 46 | @content; 47 | } 48 | } 49 | // - | - | - | ○ 50 | @mixin l-mobile { 51 | @media all and (max-width: $break-point-mobile) { 52 | @content; 53 | } 54 | } 55 | // ○ | ○ | - | - 56 | @mixin l-pc-all { 57 | @media all and (min-width: $break-point-tablet + 1px) { 58 | @content; 59 | } 60 | } 61 | // - | ○ | ○ | - 62 | @mixin l-pc-and-tablet { 63 | @media all and (min-width: $break-point-mobile + 1px) and (max-width: $break-point-pc) { 64 | @content; 65 | } 66 | } 67 | @mixin l-tablet-and-mobile { 68 | // - | - | ○ | ○ 69 | @media all and (max-width: $break-point-tablet) { 70 | @content; 71 | } 72 | } 73 | // ○ | ○ | ○ | - 74 | @mixin l-more-than-mobile { 75 | @media all and (min-width: $break-point-mobile + 1px) { 76 | @content; 77 | } 78 | } 79 | // - | ○ | ○ | ○ 80 | @mixin l-less-than-pc { 81 | @media all and (max-width: $break-point-pc) { 82 | @content; 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /src/css/foundation/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability when focused and also mouse hovered in all browsers. 95 | */ 96 | 97 | a:active, 98 | a:hover { 99 | outline: 0; 100 | } 101 | 102 | /* Text-level semantics 103 | ========================================================================== */ 104 | 105 | /** 106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 107 | */ 108 | 109 | abbr[title] { 110 | border-bottom: 1px dotted; 111 | } 112 | 113 | /** 114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 115 | */ 116 | 117 | b, 118 | strong { 119 | font-weight: bold; 120 | } 121 | 122 | /** 123 | * Address styling not present in Safari and Chrome. 124 | */ 125 | 126 | dfn { 127 | font-style: italic; 128 | } 129 | 130 | /** 131 | * Address variable `h1` font-size and margin within `section` and `article` 132 | * contexts in Firefox 4+, Safari, and Chrome. 133 | */ 134 | 135 | h1 { 136 | font-size: 2em; 137 | margin: 0.67em 0; 138 | } 139 | 140 | /** 141 | * Address styling not present in IE 8/9. 142 | */ 143 | 144 | mark { 145 | background: #ff0; 146 | color: #000; 147 | } 148 | 149 | /** 150 | * Address inconsistent and variable font size in all browsers. 151 | */ 152 | 153 | small { 154 | font-size: 80%; 155 | } 156 | 157 | /** 158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 159 | */ 160 | 161 | sub, 162 | sup { 163 | font-size: 75%; 164 | line-height: 0; 165 | position: relative; 166 | vertical-align: baseline; 167 | } 168 | 169 | sup { 170 | top: -0.5em; 171 | } 172 | 173 | sub { 174 | bottom: -0.25em; 175 | } 176 | 177 | /* Embedded content 178 | ========================================================================== */ 179 | 180 | /** 181 | * Remove border when inside `a` element in IE 8/9/10. 182 | */ 183 | 184 | img { 185 | border: 0; 186 | } 187 | 188 | /** 189 | * Correct overflow not hidden in IE 9/10/11. 190 | */ 191 | 192 | svg:not(:root) { 193 | overflow: hidden; 194 | } 195 | 196 | /* Grouping content 197 | ========================================================================== */ 198 | 199 | /** 200 | * Address margin not present in IE 8/9 and Safari. 201 | */ 202 | 203 | figure { 204 | margin: 1em 40px; 205 | } 206 | 207 | /** 208 | * Address differences between Firefox and other browsers. 209 | */ 210 | 211 | hr { 212 | -moz-box-sizing: content-box; 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 354 | * (include `-moz` to future-proof). 355 | */ 356 | 357 | input[type="search"] { 358 | -webkit-appearance: textfield; /* 1 */ 359 | -moz-box-sizing: content-box; 360 | -webkit-box-sizing: content-box; /* 2 */ 361 | box-sizing: content-box; 362 | } 363 | 364 | /** 365 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 366 | * Safari (but not Chrome) clips the cancel button when the search input has 367 | * padding (and `textfield` appearance). 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Define consistent border, margin, and padding. 377 | */ 378 | 379 | fieldset { 380 | border: 1px solid #c0c0c0; 381 | margin: 0 2px; 382 | padding: 0.35em 0.625em 0.75em; 383 | } 384 | 385 | /** 386 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 387 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 388 | */ 389 | 390 | legend { 391 | border: 0; /* 1 */ 392 | padding: 0; /* 2 */ 393 | } 394 | 395 | /** 396 | * Remove default vertical scrollbar in IE 8/9/10/11. 397 | */ 398 | 399 | textarea { 400 | overflow: auto; 401 | } 402 | 403 | /** 404 | * Don't inherit the `font-weight` (applied by a rule above). 405 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 406 | */ 407 | 408 | optgroup { 409 | font-weight: bold; 410 | } 411 | 412 | /* Tables 413 | ========================================================================== */ 414 | 415 | /** 416 | * Remove most spacing between table cells. 417 | */ 418 | 419 | table { 420 | border-collapse: collapse; 421 | border-spacing: 0; 422 | } 423 | 424 | td, 425 | th { 426 | padding: 0; 427 | } 428 | -------------------------------------------------------------------------------- /src/css/foundation/_variables.scss: -------------------------------------------------------------------------------- 1 | $color-text: #fff; 2 | 3 | $break-point-pc: 1366px; 4 | $break-point-tablet: 1024px; 5 | $break-point-mobile: 568px; 6 | -------------------------------------------------------------------------------- /src/css/main.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700"); 4 | 5 | // ========================================================================== 6 | // Foundation 7 | // ========================================================================== 8 | @import "foundation/_variables"; 9 | 10 | // Mixins 11 | @import "foundation/_mixin-utils"; 12 | @import "foundation/_mixin-easing"; 13 | 14 | // Base 15 | @import "foundation/_normalize"; 16 | @import "foundation/_global"; 17 | 18 | // ========================================================================== 19 | // Layout 20 | // ========================================================================== 21 | 22 | // ========================================================================== 23 | // Object 24 | // ========================================================================== 25 | // ----------------------------------------------------------------- 26 | // Component 27 | // ----------------------------------------------------------------- 28 | // @import "object/component/_xxx"; 29 | 30 | // ----------------------------------------------------------------- 31 | // Project 32 | // ----------------------------------------------------------------- 33 | @import "object/project/_canvas-webgl"; 34 | @import "object/project/_contents-summary"; 35 | @import "object/project/_preloader"; 36 | 37 | // ----------------------------------------------------------------- 38 | // Utility 39 | // ----------------------------------------------------------------- 40 | -------------------------------------------------------------------------------- /src/css/object/component/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/src/css/object/component/.keep -------------------------------------------------------------------------------- /src/css/object/project/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/src/css/object/project/.keep -------------------------------------------------------------------------------- /src/css/object/project/_canvas-webgl.scss: -------------------------------------------------------------------------------- 1 | .p-canvas-webgl { 2 | z-index: 1; 3 | position: relative; 4 | } 5 | -------------------------------------------------------------------------------- /src/css/object/project/_contents-summary.scss: -------------------------------------------------------------------------------- 1 | .p-contents-summary { 2 | position: absolute; 3 | bottom: 4%; left: 2%; 4 | z-index: 100; 5 | &__head { 6 | float: left; 7 | margin: 0; 8 | @include flexFontSize(4); 9 | font-weight: 400; 10 | letter-spacing: 2px; 11 | background-color: #000; 12 | } 13 | &__text { 14 | clear: left; 15 | float: left; 16 | line-height: 1.75; 17 | margin: 1em 0; 18 | @include flexFontSize(1); 19 | letter-spacing: 1px; 20 | background-color: #000; 21 | } 22 | &__link-source { 23 | clear: left; 24 | margin: 0; 25 | @include flexFontSize(1.1); 26 | letter-spacing: 1px; 27 | a { 28 | position: relative; 29 | background-color: #000; 30 | } 31 | } 32 | // 33 | // Init Interaction 34 | // 35 | &__link-source { 36 | a { 37 | transition-duration: 0.3s; 38 | transition-timing-function: $easeOutQuad; 39 | &:after { 40 | transform: scale(0, 1); 41 | transform-origin: left; 42 | transition-duration: 0.3s; 43 | transition-timing-function: $easeOutQuad; 44 | } 45 | } 46 | } 47 | // 48 | // Running Interaction 49 | // 50 | &__link-source { 51 | a { 52 | &:hover { 53 | &:after { 54 | transform: scale(1, 1); 55 | } 56 | } 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/css/object/project/_preloader.scss: -------------------------------------------------------------------------------- 1 | @keyframes rotatePreloader { 2 | 0% { 3 | transform: rotateZ(0); 4 | } 5 | 100% { 6 | transform: rotateZ(360deg); 7 | } 8 | } 9 | 10 | .p-preloader { 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | position: absolute; 15 | top: 0; right: 0; bottom: 0; left: 0; 16 | z-index: -1; 17 | &__icon { 18 | width: 40px; 19 | height: 40px; 20 | box-sizing: border-box; 21 | margin: 0 auto 10px; 22 | border-top: 2px solid; 23 | border-right: 2px solid #000; 24 | border-bottom: 2px solid #000; 25 | border-left: 2px solid #000; 26 | border-radius: 25px; 27 | animation-name: rotatePreloader; 28 | animation-duration: 0.6s; 29 | animation-iteration-count: infinite; 30 | animation-timing-function: linear; 31 | } 32 | &__label { 33 | color: #000; 34 | @include flexFontSize(0.8); 35 | font-weight: 700; 36 | text-align: center; 37 | letter-spacing: 2px; 38 | padding-left: 2px; 39 | } 40 | &.is-hidden { 41 | opacity: 0; 42 | transform: scale(0.95); 43 | transition-duration: 0.5s; 44 | } 45 | &.is-stoped & { 46 | &__icon { 47 | animation-name: none; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/css/object/utility/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ykob/glsl-dissolve/47befe77a738b13b18408e37c5510d1435c3f9ea/src/css/object/utility/.keep -------------------------------------------------------------------------------- /src/glsl/dissolve.fs: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | 3 | uniform float time; 4 | uniform vec2 resolution; 5 | uniform vec2 imageResolution; 6 | uniform sampler2D texPrev; 7 | uniform sampler2D texNext; 8 | uniform float noiseX; 9 | uniform float noiseY; 10 | uniform float noiseZ; 11 | uniform float prevEdgeStart; 12 | uniform float prevEdgeWidth; 13 | uniform float nextEdgeStart; 14 | uniform float nextEdgeWidth; 15 | 16 | varying vec3 vPosition; 17 | varying vec2 vUv; 18 | 19 | #pragma glslify: cnoise3 = require(glsl-noise/classic/3d); 20 | #pragma glslify: ease = require(glsl-easings/quadratic-in-out); 21 | 22 | void main(void) { 23 | vec2 ratio = vec2( 24 | min((resolution.x / resolution.y) / (imageResolution.x / imageResolution.y), 1.0), 25 | min((resolution.y / resolution.x) / (imageResolution.y / imageResolution.x), 1.0) 26 | ); 27 | 28 | vec2 uv = vec2( 29 | vUv.x * ratio.x + (1.0 - ratio.x) * 0.5, 30 | vUv.y * ratio.y + (1.0 - ratio.y) * 0.5 31 | ); 32 | vec4 colorPrev = texture2D(texPrev, uv); 33 | vec4 colorNext = texture2D(texNext, uv); 34 | 35 | float noise = (cnoise3(vec3(uv.x * noiseX, uv.y * noiseY, noiseZ)) + 1.0) / 2.0 36 | * (1.0 - (prevEdgeStart + prevEdgeWidth + nextEdgeStart + nextEdgeWidth)) 37 | + (prevEdgeStart + prevEdgeWidth + nextEdgeStart + nextEdgeWidth) * 0.5; 38 | float step = ease(min((time), 1.0)); 39 | 40 | gl_FragColor = colorPrev * smoothstep(step - (prevEdgeStart + prevEdgeWidth), step - prevEdgeStart, noise) 41 | + colorNext * smoothstep((1.0 - step) - (nextEdgeStart + nextEdgeWidth), (1.0 - step) - nextEdgeStart, (1.0 - noise)); 42 | } 43 | -------------------------------------------------------------------------------- /src/glsl/dissolve.vs: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 uv; 3 | 4 | varying vec3 vPosition; 5 | varying vec2 vUv; 6 | 7 | void main(void) { 8 | vPosition = position; 9 | vUv = uv; 10 | gl_Position = vec4(position, 1.0); 11 | } 12 | -------------------------------------------------------------------------------- /src/glsl/modules/hsv2rgb.glsl: -------------------------------------------------------------------------------- 1 | vec3 hsv2rgb(vec3 c){ 2 | vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); 3 | vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); 4 | return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); 5 | } 6 | #pragma glslify: export(hsv2rgb) 7 | -------------------------------------------------------------------------------- /src/glsl/modules/rotate_matrix.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify: rotateMatrixX = require(./rotate_matrix_x); 2 | #pragma glslify: rotateMatrixY = require(./rotate_matrix_y); 3 | #pragma glslify: rotateMatrixZ = require(./rotate_matrix_z); 4 | 5 | mat4 rotateMatrix(float radian_x, float radian_y, float radian_z) { 6 | return rotateMatrixX(radian_x) * rotateMatrixY(radian_y) * rotateMatrixZ(radian_z); 7 | } 8 | #pragma glslify: export(rotateMatrix) 9 | -------------------------------------------------------------------------------- /src/glsl/modules/rotate_matrix_x.glsl: -------------------------------------------------------------------------------- 1 | mat4 rotateMatrixX(float radian) { 2 | return mat4( 3 | 1.0, 0.0, 0.0, 0.0, 4 | 0.0, cos(radian), -sin(radian), 0.0, 5 | 0.0, sin(radian), cos(radian), 0.0, 6 | 0.0, 0.0, 0.0, 1.0 7 | ); 8 | } 9 | #pragma glslify: export(rotateMatrixX) 10 | -------------------------------------------------------------------------------- /src/glsl/modules/rotate_matrix_y.glsl: -------------------------------------------------------------------------------- 1 | mat4 rotateMatrixY(float radian) { 2 | return mat4( 3 | cos(radian), 0.0, sin(radian), 0.0, 4 | 0.0, 1.0, 0.0, 0.0, 5 | -sin(radian), 0.0, cos(radian), 0.0, 6 | 0.0, 0.0, 0.0, 1.0 7 | ); 8 | } 9 | #pragma glslify: export(rotateMatrixY) 10 | -------------------------------------------------------------------------------- /src/glsl/modules/rotate_matrix_z.glsl: -------------------------------------------------------------------------------- 1 | mat4 rotateMatrixZ(float radian) { 2 | return mat4( 3 | cos(radian), -sin(radian), 0.0, 0.0, 4 | sin(radian), cos(radian), 0.0, 0.0, 5 | 0.0, 0.0, 1.0, 0.0, 6 | 0.0, 0.0, 0.0, 1.0 7 | ); 8 | } 9 | #pragma glslify: export(rotateMatrixZ) 10 | -------------------------------------------------------------------------------- /src/glsl/modules/scale_matrix.glsl: -------------------------------------------------------------------------------- 1 | mat4 scaleMatrix(vec3 scale) { 2 | return mat4( 3 | scale.x, 0.0, 0.0, 0.0, 4 | 0.0, scale.y, 0.0, 0.0, 5 | 0.0, 0.0, scale.z, 0.0, 6 | 0.0, 0.0, 0.0, 1.0 7 | ); 8 | } 9 | #pragma glslify: export(scaleMatrix) 10 | -------------------------------------------------------------------------------- /src/glsl/modules/translate_matrix.glsl: -------------------------------------------------------------------------------- 1 | mat4 translateMatrix(vec3 v) { 2 | return mat4( 3 | 1.0, 0.0, 0.0, 0.0, 4 | 0.0, 1.0, 0.0, 0.0, 5 | 0.0, 0.0, 1.0, 0.0, 6 | v.x, v.y, v.z, 1.0 7 | ); 8 | } 9 | #pragma glslify: export(translateMatrix) 10 | -------------------------------------------------------------------------------- /src/html/index.pug: -------------------------------------------------------------------------------- 1 | - 2 | var meta_title = 'glsl-dissolve'; 3 | var meta_keywords = 'WebGL, three.js'; 4 | var meta_description = 'it\'s dissolve effects for the 2D cross fade by glsl.'; 5 | var meta_path = '/'; 6 | var meta_ogp_img = 'share.jpg'; 7 | 8 | doctype html 9 | html(lang="ja") 10 | head 11 | include ./modules/_head.pug 12 | body 13 | .p-contents-summary 14 | h1.p-contents-summary__head 15 | |#{meta_title} 16 | p.p-contents-summary__text 17 | |#{meta_description} 18 | p.p-contents-summary__link-source 19 | a(href="https://github.com/ykob/"+repository_name) 20 | |view source. 21 | .p-preloader 22 | .p-preloader__wrap 23 | .p-preloader__icon 24 | .p-preloader__label 25 | |Loading 26 | canvas(id="canvas-webgl", class="p-canvas-webgl") 27 | script(src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r80/three.min.js") 28 | script(src="https://code.jquery.com/jquery-3.0.0.slim.min.js") 29 | script(src="./js/vendor/dat.gui.min.js") 30 | script(src="./js/vendor/stats.min.js") 31 | script(src="./js/main.js") 32 | script. 33 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 34 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 35 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 36 | })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 37 | ga('create', 'UA-70611485-4', 'auto'); 38 | ga('send', 'pageview'); 39 | -------------------------------------------------------------------------------- /src/html/modules/_head.pug: -------------------------------------------------------------------------------- 1 | - 2 | var repository_name = 'glsl-dissolve'; 3 | var website_domain = 'https://ykob.github.io/' + repository_name; 4 | var meta_path_merge = meta_path; 5 | var meta_ogp_description = meta_description; 6 | 7 | meta(charset="utf-8") 8 | meta(http-equiv="X-UA-Compatible", content="IE=edge") 9 | title #{meta_title} 10 | meta(name="viewport", content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1") 11 | meta(name="description", content=meta_description) 12 | meta(name="keywords", content=meta_keywords) 13 | meta(name="theme-color", content="#ffffff") 14 | link(rel="shortcut icon" href="./img/icon.ico") 15 | link(rel="apple-touch-icon" href="./img/apple-touch-icon.png") 16 | link(rel="stylesheet" href="./css/main.css") 17 | 18 | meta(property="og:title", content=meta_title) 19 | meta(property="og:site_name", content=meta_title) 20 | meta(property="og:type", content="website") 21 | meta(property="og:description", content=meta_ogp_description) 22 | meta(property="og:url", content=website_domain + meta_path) 23 | meta(property="og:image", content=website_domain + '/img/' + meta_ogp_img) 24 | 25 | meta(name="twitter:card", content="summary_large_image") 26 | meta(name="twitter:title", content=meta_title) 27 | meta(name="twitter:description", content=meta_ogp_description) 28 | meta(name="twitter:image", content=website_domain + '/img/' + meta_ogp_img) 29 | -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- 1 | import Dissolve from './modules/dissolve.js'; 2 | 3 | const canvas = document.getElementById('canvas-webgl'); 4 | const renderer = new THREE.WebGLRenderer({ 5 | antialias: true, 6 | canvas: canvas, 7 | alpha: true, 8 | }); 9 | const scene = new THREE.Scene(); 10 | const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000); 11 | const clock = new THREE.Clock(); 12 | const stats = new Stats(); 13 | 14 | const images = [ 15 | 'img/osaka01.jpg', 16 | 'img/osaka02.jpg', 17 | 'img/osaka03.jpg', 18 | 'img/osaka04.jpg', 19 | 'img/osaka05.jpg', 20 | ]; 21 | const dissolve = new Dissolve(images); 22 | 23 | const resizeWindow = () => { 24 | canvas.width = window.innerWidth; 25 | canvas.height = window.innerHeight; 26 | camera.aspect = window.innerWidth / window.innerHeight; 27 | camera.updateProjectionMatrix(); 28 | dissolve.resize(); 29 | renderer.setSize(window.innerWidth, window.innerHeight); 30 | } 31 | const setEvent = () => { 32 | $(window).on('resize', () => { 33 | resizeWindow(); 34 | }); 35 | } 36 | const initDatGui = () => { 37 | const gui = new dat.GUI(); 38 | const controller = { 39 | time: gui.add(dissolve, 'interval', 1, 10).name('interval').step(1), 40 | noiseX: gui.add(dissolve.noise, 'x', 0, 100).name('noise x'), 41 | noiseY: gui.add(dissolve.noise, 'y', 0, 100).name('noise y'), 42 | noiseZ: gui.add(dissolve.noise, 'z', 0, 100).name('noise z'), 43 | prevEdgeStart: gui.add(dissolve.edge, 'prev_start', 0, 0.1).name('prev edge start').step(0.001), 44 | prevEdgeWidth: gui.add(dissolve.edge, 'prev_width', 0, 0.1).name('prev edge width').step(0.001), 45 | nextEdgeStart: gui.add(dissolve.edge, 'next_start', 0, 0.1).name('next edge start').step(0.001), 46 | nextEdgeWidth: gui.add(dissolve.edge, 'next_width', 0, 0.1).name('next edge width').step(0.001), 47 | stop: gui.add(dissolve, 'stop').name('stop animation'), 48 | } 49 | controller.time.onChange((value) => { 50 | dissolve.uniforms.interval.value = value; 51 | }); 52 | controller.noiseX.onChange((value) => { 53 | dissolve.uniforms.noiseX.value = value; 54 | }); 55 | controller.noiseY.onChange((value) => { 56 | dissolve.uniforms.noiseY.value = value; 57 | }); 58 | controller.noiseZ.onChange((value) => { 59 | dissolve.uniforms.noiseZ.value = value; 60 | }); 61 | controller.prevEdgeStart.onChange((value) => { 62 | dissolve.uniforms.prevEdgeStart.value = value; 63 | }); 64 | controller.prevEdgeWidth.onChange((value) => { 65 | dissolve.uniforms.prevEdgeWidth.value = value; 66 | }); 67 | controller.nextEdgeStart.onChange((value) => { 68 | dissolve.uniforms.nextEdgeStart.value = value; 69 | }); 70 | controller.nextEdgeWidth.onChange((value) => { 71 | dissolve.uniforms.nextEdgeWidth.value = value; 72 | }); 73 | } 74 | const initStats = () => { 75 | stats.showPanel(0); 76 | document.body.appendChild(stats.dom); 77 | } 78 | const render = () => { 79 | dissolve.render(clock.getDelta()); 80 | renderer.render(scene, camera); 81 | } 82 | const renderLoop = () => { 83 | stats.begin(); 84 | render(); 85 | stats.end(); 86 | requestAnimationFrame(renderLoop); 87 | } 88 | 89 | const init = () => { 90 | renderer.setSize(window.innerWidth, window.innerHeight); 91 | renderer.setClearColor(0xffffff, 0.0); 92 | 93 | dissolve.loadTexture(images, () => { 94 | setTimeout(() => { 95 | $('.p-preloader').addClass('is-hidden').on('transitionend', function() { 96 | $(this).addClass('is-stoped'); 97 | }); 98 | scene.add(dissolve.mesh); 99 | setEvent(); 100 | initDatGui(); 101 | initStats(); 102 | resizeWindow(); 103 | renderLoop(); 104 | }, 200); 105 | }); 106 | } 107 | init(); 108 | -------------------------------------------------------------------------------- /src/js/modules/dissolve.js: -------------------------------------------------------------------------------- 1 | const glslify = require('glslify'); 2 | 3 | export default class Dissolve { 4 | constructor() { 5 | this.uniforms = {}; 6 | this.textures = []; 7 | this.interval = 3; 8 | this.noise = { x: 8, y: 6, z: 4 }; 9 | this.edge = { 10 | prev_start: 0.01, 11 | prev_width: 0.05, 12 | next_start: 0.01, 13 | next_width: 0.05, 14 | }; 15 | this.prev_num = 0; 16 | this.next_num = 0; 17 | this.stop = false; 18 | this.mesh = null; 19 | } 20 | loadTexture(images, callback) { 21 | let count = 0; 22 | for (var i = 0; i < images.length; i++) { 23 | const index = i; 24 | const loader = new THREE.TextureLoader(); 25 | loader.load(images[index], (texture) => { 26 | texture.magFilter = THREE.NearestFilter; 27 | texture.minFilter = THREE.NearestFilter; 28 | this.textures[index] = texture; 29 | count++; 30 | if (count == images.length) { 31 | this.mesh = this.createMesh(); 32 | callback(); 33 | } 34 | }); 35 | } 36 | } 37 | createMesh() { 38 | const tex_intro = new THREE.DataTexture(new Uint8Array([255, 255, 255, 0]), 1, 1, THREE.RGBAFormat, THREE.UnsignedByteType); 39 | tex_intro.needsUpdate = true; 40 | this.uniforms = { 41 | time: { 42 | type: 'f', 43 | value: 0, 44 | }, 45 | interval: { 46 | type: 'f', 47 | value: this.interval, 48 | }, 49 | resolution: { 50 | type: 'v2', 51 | value: new THREE.Vector2(window.innerWidth, window.innerHeight), 52 | }, 53 | imageResolution: { 54 | type: 'v2', 55 | value: new THREE.Vector2(2048, 1356), 56 | }, 57 | texPrev: { 58 | type: 't', 59 | value: tex_intro, 60 | }, 61 | texNext: { 62 | type: 't', 63 | value: this.textures[0], 64 | }, 65 | noiseX: { 66 | type: 'f', 67 | value: this.noise.x 68 | }, 69 | noiseY: { 70 | type: 'f', 71 | value: this.noise.y 72 | }, 73 | noiseZ: { 74 | type: 'f', 75 | value: this.noise.z 76 | }, 77 | prevEdgeStart: { 78 | type: 'f', 79 | value: this.edge.prev_start 80 | }, 81 | prevEdgeWidth: { 82 | type: 'f', 83 | value: this.edge.prev_width 84 | }, 85 | nextEdgeStart: { 86 | type: 'f', 87 | value: this.edge.next_start 88 | }, 89 | nextEdgeWidth: { 90 | type: 'f', 91 | value: this.edge.next_width 92 | }, 93 | }; 94 | return new THREE.Mesh( 95 | new THREE.PlaneBufferGeometry(2, 2), 96 | new THREE.RawShaderMaterial({ 97 | uniforms: this.uniforms, 98 | vertexShader: glslify('../../glsl/dissolve.vs'), 99 | fragmentShader: glslify('../../glsl/dissolve.fs'), 100 | transparent: true, 101 | }) 102 | ); 103 | } 104 | render(time) { 105 | if (this.stop) return; 106 | this.uniforms.time.value += time / this.interval; 107 | if (this.uniforms.time.value > 1) { 108 | this.uniforms.time.value = 0; 109 | this.prev_num = this.next_num; 110 | this.uniforms.texPrev.value = this.textures[this.next_num]; 111 | while (this.next_num == this.prev_num) { 112 | this.next_num = Math.floor(Math.random() * this.textures.length); 113 | } 114 | this.uniforms.texNext.value = this.textures[this.next_num]; 115 | } 116 | } 117 | resize() { 118 | this.uniforms.resolution.value.set(window.innerWidth, window.innerHeight); 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /src/js/vendor/dat.gui.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * dat-gui JavaScript Controller Library 3 | * http://code.google.com/p/dat-gui 4 | * 5 | * Copyright 2011 Data Arts Team, Google Creative Lab 6 | * 7 | * Licensed under the Apache License, Version 2.0 (the "License"); 8 | * you may not use this file except in compliance with the License. 9 | * You may obtain a copy of the License at 10 | * 11 | * http://www.apache.org/licenses/LICENSE-2.0 12 | */ 13 | var dat=dat||{};dat.gui=dat.gui||{};dat.utils=dat.utils||{};dat.controllers=dat.controllers||{};dat.dom=dat.dom||{};dat.color=dat.color||{};dat.utils.css=function(){return{load:function(f,a){a=a||document;var d=a.createElement("link");d.type="text/css";d.rel="stylesheet";d.href=f;a.getElementsByTagName("head")[0].appendChild(d)},inject:function(f,a){a=a||document;var d=document.createElement("style");d.type="text/css";d.innerHTML=f;a.getElementsByTagName("head")[0].appendChild(d)}}}(); 14 | dat.utils.common=function(){var f=Array.prototype.forEach,a=Array.prototype.slice;return{BREAK:{},extend:function(d){this.each(a.call(arguments,1),function(a){for(var c in a)this.isUndefined(a[c])||(d[c]=a[c])},this);return d},defaults:function(d){this.each(a.call(arguments,1),function(a){for(var c in a)this.isUndefined(d[c])&&(d[c]=a[c])},this);return d},compose:function(){var d=a.call(arguments);return function(){for(var e=a.call(arguments),c=d.length-1;0<=c;c--)e=[d[c].apply(this,e)];return e[0]}}, 15 | each:function(a,e,c){if(a)if(f&&a.forEach&&a.forEach===f)a.forEach(e,c);else if(a.length===a.length+0)for(var b=0,p=a.length;bthis.__max&&(a=this.__max);void 0!==this.__step&&0!=a%this.__step&&(a=Math.round(a/this.__step)*this.__step);return e.superclass.prototype.setValue.call(this,a)},min:function(a){this.__min=a;return this},max:function(a){this.__max=a;return this},step:function(a){this.__impliedStep=this.__step=a;this.__precision=d(a);return this}});return e}(dat.controllers.Controller,dat.utils.common); 29 | dat.controllers.NumberControllerBox=function(f,a,d){var e=function(c,b,f){function q(){var a=parseFloat(n.__input.value);d.isNaN(a)||n.setValue(a)}function l(a){var b=u-a.clientY;n.setValue(n.getValue()+b*n.__impliedStep);u=a.clientY}function r(){a.unbind(window,"mousemove",l);a.unbind(window,"mouseup",r)}this.__truncationSuspended=!1;e.superclass.call(this,c,b,f);var n=this,u;this.__input=document.createElement("input");this.__input.setAttribute("type","text");a.bind(this.__input,"change",q);a.bind(this.__input, 30 | "blur",function(){q();n.__onFinishChange&&n.__onFinishChange.call(n,n.getValue())});a.bind(this.__input,"mousedown",function(b){a.bind(window,"mousemove",l);a.bind(window,"mouseup",r);u=b.clientY});a.bind(this.__input,"keydown",function(a){13===a.keyCode&&(n.__truncationSuspended=!0,this.blur(),n.__truncationSuspended=!1)});this.updateDisplay();this.domElement.appendChild(this.__input)};e.superclass=f;d.extend(e.prototype,f.prototype,{updateDisplay:function(){var a=this.__input,b;if(this.__truncationSuspended)b= 31 | this.getValue();else{b=this.getValue();var d=Math.pow(10,this.__precision);b=Math.round(b*d)/d}a.value=b;return e.superclass.prototype.updateDisplay.call(this)}});return e}(dat.controllers.NumberController,dat.dom.dom,dat.utils.common); 32 | dat.controllers.NumberControllerSlider=function(f,a,d,e,c){function b(a,b,c,e,d){return e+(a-b)/(c-b)*(d-e)}var p=function(c,e,d,f,u){function A(c){c.preventDefault();var e=a.getOffset(k.__background),d=a.getWidth(k.__background);k.setValue(b(c.clientX,e.left,e.left+d,k.__min,k.__max));return!1}function g(){a.unbind(window,"mousemove",A);a.unbind(window,"mouseup",g);k.__onFinishChange&&k.__onFinishChange.call(k,k.getValue())}p.superclass.call(this,c,e,{min:d,max:f,step:u});var k=this;this.__background= 33 | document.createElement("div");this.__foreground=document.createElement("div");a.bind(this.__background,"mousedown",function(b){a.bind(window,"mousemove",A);a.bind(window,"mouseup",g);A(b)});a.addClass(this.__background,"slider");a.addClass(this.__foreground,"slider-fg");this.updateDisplay();this.__background.appendChild(this.__foreground);this.domElement.appendChild(this.__background)};p.superclass=f;p.useDefaultStyles=function(){d.inject(c)};e.extend(p.prototype,f.prototype,{updateDisplay:function(){var a= 34 | (this.getValue()-this.__min)/(this.__max-this.__min);this.__foreground.style.width=100*a+"%";return p.superclass.prototype.updateDisplay.call(this)}});return p}(dat.controllers.NumberController,dat.dom.dom,dat.utils.css,dat.utils.common,"/**\n * dat-gui JavaScript Controller Library\n * http://code.google.com/p/dat-gui\n *\n * Copyright 2011 Data Arts Team, Google Creative Lab\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n */\n\n.slider {\n box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);\n height: 1em;\n border-radius: 1em;\n background-color: #eee;\n padding: 0 0.5em;\n overflow: hidden;\n}\n\n.slider-fg {\n padding: 1px 0 2px 0;\n background-color: #aaa;\n height: 1em;\n margin-left: -0.5em;\n padding-right: 0.5em;\n border-radius: 1em 0 0 1em;\n}\n\n.slider-fg:after {\n display: inline-block;\n border-radius: 1em;\n background-color: #fff;\n border: 1px solid #aaa;\n content: '';\n float: right;\n margin-right: -1em;\n margin-top: -1px;\n height: 0.9em;\n width: 0.9em;\n}"); 35 | dat.controllers.FunctionController=function(f,a,d){var e=function(c,b,d){e.superclass.call(this,c,b);var f=this;this.__button=document.createElement("div");this.__button.innerHTML=void 0===d?"Fire":d;a.bind(this.__button,"click",function(a){a.preventDefault();f.fire();return!1});a.addClass(this.__button,"button");this.domElement.appendChild(this.__button)};e.superclass=f;d.extend(e.prototype,f.prototype,{fire:function(){this.__onChange&&this.__onChange.call(this);this.getValue().call(this.object); 36 | this.__onFinishChange&&this.__onFinishChange.call(this,this.getValue())}});return e}(dat.controllers.Controller,dat.dom.dom,dat.utils.common); 37 | dat.controllers.BooleanController=function(f,a,d){var e=function(c,b){e.superclass.call(this,c,b);var d=this;this.__prev=this.getValue();this.__checkbox=document.createElement("input");this.__checkbox.setAttribute("type","checkbox");a.bind(this.__checkbox,"change",function(){d.setValue(!d.__prev)},!1);this.domElement.appendChild(this.__checkbox);this.updateDisplay()};e.superclass=f;d.extend(e.prototype,f.prototype,{setValue:function(a){a=e.superclass.prototype.setValue.call(this,a);this.__onFinishChange&& 38 | this.__onFinishChange.call(this,this.getValue());this.__prev=this.getValue();return a},updateDisplay:function(){!0===this.getValue()?(this.__checkbox.setAttribute("checked","checked"),this.__checkbox.checked=!0):this.__checkbox.checked=!1;return e.superclass.prototype.updateDisplay.call(this)}});return e}(dat.controllers.Controller,dat.dom.dom,dat.utils.common); 39 | dat.color.toString=function(f){return function(a){if(1==a.a||f.isUndefined(a.a)){for(a=a.hex.toString(16);6>a.length;)a="0"+a;return"#"+a}return"rgba("+Math.round(a.r)+","+Math.round(a.g)+","+Math.round(a.b)+","+a.a+")"}}(dat.utils.common); 40 | dat.color.interpret=function(f,a){var d,e,c=[{litmus:a.isString,conversions:{THREE_CHAR_HEX:{read:function(a){a=a.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);return null===a?!1:{space:"HEX",hex:parseInt("0x"+a[1].toString()+a[1].toString()+a[2].toString()+a[2].toString()+a[3].toString()+a[3].toString())}},write:f},SIX_CHAR_HEX:{read:function(a){a=a.match(/^#([A-F0-9]{6})$/i);return null===a?!1:{space:"HEX",hex:parseInt("0x"+a[1].toString())}},write:f},CSS_RGB:{read:function(a){a=a.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/); 41 | return null===a?!1:{space:"RGB",r:parseFloat(a[1]),g:parseFloat(a[2]),b:parseFloat(a[3])}},write:f},CSS_RGBA:{read:function(a){a=a.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/);return null===a?!1:{space:"RGB",r:parseFloat(a[1]),g:parseFloat(a[2]),b:parseFloat(a[3]),a:parseFloat(a[4])}},write:f}}},{litmus:a.isNumber,conversions:{HEX:{read:function(a){return{space:"HEX",hex:a,conversionName:"HEX"}},write:function(a){return a.hex}}}},{litmus:a.isArray,conversions:{RGB_ARRAY:{read:function(a){return 3!= 42 | a.length?!1:{space:"RGB",r:a[0],g:a[1],b:a[2]}},write:function(a){return[a.r,a.g,a.b]}},RGBA_ARRAY:{read:function(a){return 4!=a.length?!1:{space:"RGB",r:a[0],g:a[1],b:a[2],a:a[3]}},write:function(a){return[a.r,a.g,a.b,a.a]}}}},{litmus:a.isObject,conversions:{RGBA_OBJ:{read:function(b){return a.isNumber(b.r)&&a.isNumber(b.g)&&a.isNumber(b.b)&&a.isNumber(b.a)?{space:"RGB",r:b.r,g:b.g,b:b.b,a:b.a}:!1},write:function(a){return{r:a.r,g:a.g,b:a.b,a:a.a}}},RGB_OBJ:{read:function(b){return a.isNumber(b.r)&& 43 | a.isNumber(b.g)&&a.isNumber(b.b)?{space:"RGB",r:b.r,g:b.g,b:b.b}:!1},write:function(a){return{r:a.r,g:a.g,b:a.b}}},HSVA_OBJ:{read:function(b){return a.isNumber(b.h)&&a.isNumber(b.s)&&a.isNumber(b.v)&&a.isNumber(b.a)?{space:"HSV",h:b.h,s:b.s,v:b.v,a:b.a}:!1},write:function(a){return{h:a.h,s:a.s,v:a.v,a:a.a}}},HSV_OBJ:{read:function(b){return a.isNumber(b.h)&&a.isNumber(b.s)&&a.isNumber(b.v)?{space:"HSV",h:b.h,s:b.s,v:b.v}:!1},write:function(a){return{h:a.h,s:a.s,v:a.v}}}}}];return function(){e=!1; 44 | var b=1\n\n Here\'s the new load parameter for your GUI\'s constructor:\n\n \n\n
    \n\n Automatically save\n values to localStorage on exit.\n\n
    The values saved to localStorage will\n override those passed to dat.GUI\'s constructor. This makes it\n easier to work incrementally, but localStorage is fragile,\n and your friends may not see the same values you do.\n \n
    \n \n
    \n\n', 71 | ".dg {\n /** Clear list styles */\n /* Auto-place container */\n /* Auto-placed GUI's */\n /* Line items that don't contain folders. */\n /** Folder names */\n /** Hides closed items */\n /** Controller row */\n /** Name-half (left) */\n /** Controller-half (right) */\n /** Controller placement */\n /** Shorter number boxes when slider is present. */\n /** Ensure the entire boolean and function row shows a hand */ }\n .dg ul {\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n clear: both; }\n .dg.ac {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 0;\n z-index: 10000; }\n .dg:not(.ac) .main {\n /** Exclude mains in ac so that we don't hide close button */\n overflow: hidden; }\n .dg.main {\n -webkit-transition: opacity 0.1s linear;\n -o-transition: opacity 0.1s linear;\n -moz-transition: opacity 0.1s linear;\n transition: opacity 0.1s linear; }\n .dg.main.taller-than-window {\n overflow-y: auto; }\n .dg.main.taller-than-window .close-button {\n opacity: 1;\n /* TODO, these are style notes */\n margin-top: -1px;\n border-top: 1px solid #2c2c2c; }\n .dg.main ul.closed .close-button {\n opacity: 1 !important; }\n .dg.main:hover .close-button,\n .dg.main .close-button.drag {\n opacity: 1; }\n .dg.main .close-button {\n /*opacity: 0;*/\n -webkit-transition: opacity 0.1s linear;\n -o-transition: opacity 0.1s linear;\n -moz-transition: opacity 0.1s linear;\n transition: opacity 0.1s linear;\n border: 0;\n position: absolute;\n line-height: 19px;\n height: 20px;\n /* TODO, these are style notes */\n cursor: pointer;\n text-align: center;\n background-color: #000; }\n .dg.main .close-button:hover {\n background-color: #111; }\n .dg.a {\n float: right;\n margin-right: 15px;\n overflow-x: hidden; }\n .dg.a.has-save > ul {\n margin-top: 27px; }\n .dg.a.has-save > ul.closed {\n margin-top: 0; }\n .dg.a .save-row {\n position: fixed;\n top: 0;\n z-index: 1002; }\n .dg li {\n -webkit-transition: height 0.1s ease-out;\n -o-transition: height 0.1s ease-out;\n -moz-transition: height 0.1s ease-out;\n transition: height 0.1s ease-out; }\n .dg li:not(.folder) {\n cursor: auto;\n height: 27px;\n line-height: 27px;\n overflow: hidden;\n padding: 0 4px 0 5px; }\n .dg li.folder {\n padding: 0;\n border-left: 4px solid rgba(0, 0, 0, 0); }\n .dg li.title {\n cursor: pointer;\n margin-left: -4px; }\n .dg .closed li:not(.title),\n .dg .closed ul li,\n .dg .closed ul li > * {\n height: 0;\n overflow: hidden;\n border: 0; }\n .dg .cr {\n clear: both;\n padding-left: 3px;\n height: 27px; }\n .dg .property-name {\n cursor: default;\n float: left;\n clear: left;\n width: 40%;\n overflow: hidden;\n text-overflow: ellipsis; }\n .dg .c {\n float: left;\n width: 60%; }\n .dg .c input[type=text] {\n border: 0;\n margin-top: 4px;\n padding: 3px;\n width: 100%;\n float: right; }\n .dg .has-slider input[type=text] {\n width: 30%;\n /*display: none;*/\n margin-left: 0; }\n .dg .slider {\n float: left;\n width: 66%;\n margin-left: -5px;\n margin-right: 0;\n height: 19px;\n margin-top: 4px; }\n .dg .slider-fg {\n height: 100%; }\n .dg .c input[type=checkbox] {\n margin-top: 9px; }\n .dg .c select {\n margin-top: 5px; }\n .dg .cr.function,\n .dg .cr.function .property-name,\n .dg .cr.function *,\n .dg .cr.boolean,\n .dg .cr.boolean * {\n cursor: pointer; }\n .dg .selector {\n display: none;\n position: absolute;\n margin-left: -9px;\n margin-top: 23px;\n z-index: 10; }\n .dg .c:hover .selector,\n .dg .selector.drag {\n display: block; }\n .dg li.save-row {\n padding: 0; }\n .dg li.save-row .button {\n display: inline-block;\n padding: 0px 6px; }\n .dg.dialogue {\n background-color: #222;\n width: 460px;\n padding: 15px;\n font-size: 13px;\n line-height: 15px; }\n\n/* TODO Separate style and structure */\n#dg-new-constructor {\n padding: 10px;\n color: #222;\n font-family: Monaco, monospace;\n font-size: 10px;\n border: 0;\n resize: none;\n box-shadow: inset 1px 1px 1px #888;\n word-wrap: break-word;\n margin: 12px 0;\n display: block;\n width: 440px;\n overflow-y: scroll;\n height: 100px;\n position: relative; }\n\n#dg-local-explain {\n display: none;\n font-size: 11px;\n line-height: 17px;\n border-radius: 3px;\n background-color: #333;\n padding: 8px;\n margin-top: 10px; }\n #dg-local-explain code {\n font-size: 10px; }\n\n#dat-gui-save-locally {\n display: none; }\n\n/** Main type */\n.dg {\n color: #eee;\n font: 11px 'Lucida Grande', sans-serif;\n text-shadow: 0 -1px 0 #111;\n /** Auto place */\n /* Controller row,
  • */\n /** Controllers */ }\n .dg.main {\n /** Scrollbar */ }\n .dg.main::-webkit-scrollbar {\n width: 5px;\n background: #1a1a1a; }\n .dg.main::-webkit-scrollbar-corner {\n height: 0;\n display: none; }\n .dg.main::-webkit-scrollbar-thumb {\n border-radius: 5px;\n background: #676767; }\n .dg li:not(.folder) {\n background: #1a1a1a;\n border-bottom: 1px solid #2c2c2c; }\n .dg li.save-row {\n line-height: 25px;\n background: #dad5cb;\n border: 0; }\n .dg li.save-row select {\n margin-left: 5px;\n width: 108px; }\n .dg li.save-row .button {\n margin-left: 5px;\n margin-top: 1px;\n border-radius: 2px;\n font-size: 9px;\n line-height: 7px;\n padding: 4px 4px 5px 4px;\n background: #c5bdad;\n color: #fff;\n text-shadow: 0 1px 0 #b0a58f;\n box-shadow: 0 -1px 0 #b0a58f;\n cursor: pointer; }\n .dg li.save-row .button.gears {\n background: #c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;\n height: 7px;\n width: 8px; }\n .dg li.save-row .button:hover {\n background-color: #bab19e;\n box-shadow: 0 -1px 0 #b0a58f; }\n .dg li.folder {\n border-bottom: 0; }\n .dg li.title {\n padding-left: 16px;\n background: black url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;\n cursor: pointer;\n border-bottom: 1px solid rgba(255, 255, 255, 0.2); }\n .dg .closed li.title {\n background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==); }\n .dg .cr.boolean {\n border-left: 3px solid #806787; }\n .dg .cr.function {\n border-left: 3px solid #e61d5f; }\n .dg .cr.number {\n border-left: 3px solid #2fa1d6; }\n .dg .cr.number input[type=text] {\n color: #2fa1d6; }\n .dg .cr.string {\n border-left: 3px solid #1ed36f; }\n .dg .cr.string input[type=text] {\n color: #1ed36f; }\n .dg .cr.function:hover, .dg .cr.boolean:hover {\n background: #111; }\n .dg .c input[type=text] {\n background: #303030;\n outline: none; }\n .dg .c input[type=text]:hover {\n background: #3c3c3c; }\n .dg .c input[type=text]:focus {\n background: #494949;\n color: #fff; }\n .dg .c .slider {\n background: #303030;\n cursor: ew-resize; }\n .dg .c .slider-fg {\n background: #2fa1d6; }\n .dg .c .slider:hover {\n background: #3c3c3c; }\n .dg .c .slider:hover .slider-fg {\n background: #44abda; }\n", 72 | dat.controllers.factory=function(f,a,d,e,c,b,p){return function(q,l,r,n){var u=q[l];if(p.isArray(r)||p.isObject(r))return new f(q,l,r);if(p.isNumber(u))return p.isNumber(r)&&p.isNumber(n)?new d(q,l,r,n):new a(q,l,{min:r,max:n});if(p.isString(u))return new e(q,l);if(p.isFunction(u))return new c(q,l,"");if(p.isBoolean(u))return new b(q,l)}}(dat.controllers.OptionController,dat.controllers.NumberControllerBox,dat.controllers.NumberControllerSlider,dat.controllers.StringController=function(f,a,d){var e= 73 | function(c,b){function d(){f.setValue(f.__input.value)}e.superclass.call(this,c,b);var f=this;this.__input=document.createElement("input");this.__input.setAttribute("type","text");a.bind(this.__input,"keyup",d);a.bind(this.__input,"change",d);a.bind(this.__input,"blur",function(){f.__onFinishChange&&f.__onFinishChange.call(f,f.getValue())});a.bind(this.__input,"keydown",function(a){13===a.keyCode&&this.blur()});this.updateDisplay();this.domElement.appendChild(this.__input)};e.superclass=f;d.extend(e.prototype, 74 | f.prototype,{updateDisplay:function(){a.isActive(this.__input)||(this.__input.value=this.getValue());return e.superclass.prototype.updateDisplay.call(this)}});return e}(dat.controllers.Controller,dat.dom.dom,dat.utils.common),dat.controllers.FunctionController,dat.controllers.BooleanController,dat.utils.common),dat.controllers.Controller,dat.controllers.BooleanController,dat.controllers.FunctionController,dat.controllers.NumberControllerBox,dat.controllers.NumberControllerSlider,dat.controllers.OptionController, 75 | dat.controllers.ColorController=function(f,a,d,e,c){function b(a,b,d,e){a.style.background="";c.each(l,function(c){a.style.cssText+="background: "+c+"linear-gradient("+b+", "+d+" 0%, "+e+" 100%); "})}function p(a){a.style.background="";a.style.cssText+="background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);";a.style.cssText+="background: -webkit-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);"; 76 | a.style.cssText+="background: -o-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);";a.style.cssText+="background: -ms-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);";a.style.cssText+="background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);"}var q=function(f,n){function u(b){v(b);a.bind(window,"mousemove",v);a.bind(window, 77 | "mouseup",l)}function l(){a.unbind(window,"mousemove",v);a.unbind(window,"mouseup",l)}function g(){var a=e(this.value);!1!==a?(t.__color.__state=a,t.setValue(t.__color.toOriginal())):this.value=t.__color.toString()}function k(){a.unbind(window,"mousemove",w);a.unbind(window,"mouseup",k)}function v(b){b.preventDefault();var c=a.getWidth(t.__saturation_field),d=a.getOffset(t.__saturation_field),e=(b.clientX-d.left+document.body.scrollLeft)/c;b=1-(b.clientY-d.top+document.body.scrollTop)/c;1 78 | b&&(b=0);1e&&(e=0);t.__color.v=b;t.__color.s=e;t.setValue(t.__color.toOriginal());return!1}function w(b){b.preventDefault();var c=a.getHeight(t.__hue_field),d=a.getOffset(t.__hue_field);b=1-(b.clientY-d.top+document.body.scrollTop)/c;1b&&(b=0);t.__color.h=360*b;t.setValue(t.__color.toOriginal());return!1}q.superclass.call(this,f,n);this.__color=new d(this.getValue());this.__temp=new d(0);var t=this;this.domElement=document.createElement("div");a.makeSelectable(this.domElement,!1); 79 | this.__selector=document.createElement("div");this.__selector.className="selector";this.__saturation_field=document.createElement("div");this.__saturation_field.className="saturation-field";this.__field_knob=document.createElement("div");this.__field_knob.className="field-knob";this.__field_knob_border="2px solid ";this.__hue_knob=document.createElement("div");this.__hue_knob.className="hue-knob";this.__hue_field=document.createElement("div");this.__hue_field.className="hue-field";this.__input=document.createElement("input"); 80 | this.__input.type="text";this.__input_textShadow="0 1px 1px ";a.bind(this.__input,"keydown",function(a){13===a.keyCode&&g.call(this)});a.bind(this.__input,"blur",g);a.bind(this.__selector,"mousedown",function(b){a.addClass(this,"drag").bind(window,"mouseup",function(b){a.removeClass(t.__selector,"drag")})});var y=document.createElement("div");c.extend(this.__selector.style,{width:"122px",height:"102px",padding:"3px",backgroundColor:"#222",boxShadow:"0px 1px 3px rgba(0,0,0,0.3)"});c.extend(this.__field_knob.style, 81 | {position:"absolute",width:"12px",height:"12px",border:this.__field_knob_border+(.5>this.__color.v?"#fff":"#000"),boxShadow:"0px 1px 3px rgba(0,0,0,0.5)",borderRadius:"12px",zIndex:1});c.extend(this.__hue_knob.style,{position:"absolute",width:"15px",height:"2px",borderRight:"4px solid #fff",zIndex:1});c.extend(this.__saturation_field.style,{width:"100px",height:"100px",border:"1px solid #555",marginRight:"3px",display:"inline-block",cursor:"pointer"});c.extend(y.style,{width:"100%",height:"100%", 82 | background:"none"});b(y,"top","rgba(0,0,0,0)","#000");c.extend(this.__hue_field.style,{width:"15px",height:"100px",display:"inline-block",border:"1px solid #555",cursor:"ns-resize"});p(this.__hue_field);c.extend(this.__input.style,{outline:"none",textAlign:"center",color:"#fff",border:0,fontWeight:"bold",textShadow:this.__input_textShadow+"rgba(0,0,0,0.7)"});a.bind(this.__saturation_field,"mousedown",u);a.bind(this.__field_knob,"mousedown",u);a.bind(this.__hue_field,"mousedown",function(b){w(b);a.bind(window, 83 | "mousemove",w);a.bind(window,"mouseup",k)});this.__saturation_field.appendChild(y);this.__selector.appendChild(this.__field_knob);this.__selector.appendChild(this.__saturation_field);this.__selector.appendChild(this.__hue_field);this.__hue_field.appendChild(this.__hue_knob);this.domElement.appendChild(this.__input);this.domElement.appendChild(this.__selector);this.updateDisplay()};q.superclass=f;c.extend(q.prototype,f.prototype,{updateDisplay:function(){var a=e(this.getValue());if(!1!==a){var f=!1; 84 | c.each(d.COMPONENTS,function(b){if(!c.isUndefined(a[b])&&!c.isUndefined(this.__color.__state[b])&&a[b]!==this.__color.__state[b])return f=!0,{}},this);f&&c.extend(this.__color.__state,a)}c.extend(this.__temp.__state,this.__color.__state);this.__temp.a=1;var l=.5>this.__color.v||.5a&&(a+=1);return{h:360*a,s:c/b,v:b/255}},rgb_to_hex:function(a,d,e){a=this.hex_with_component(0,2,a);a=this.hex_with_component(a,1,d);return a=this.hex_with_component(a,0,e)},component_from_hex:function(a,d){return a>>8*d&255},hex_with_component:function(a,d,e){return e<<(f=8*d)|a&~(255<e+1E3&&(r.update(1E3*a/(c-e),100),e=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){g=this.end()},domElement:c,setMode:k}}; 4 | Stats.Panel=function(h,k,l){var c=Infinity,g=0,e=Math.round,a=e(window.devicePixelRatio||1),r=80*a,f=48*a,t=3*a,u=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement("canvas");q.width=r;q.height=f;q.style.cssText="width:80px;height:48px";var b=q.getContext("2d");b.font="bold "+9*a+"px Helvetica,Arial,sans-serif";b.textBaseline="top";b.fillStyle=l;b.fillRect(0,0,r,f);b.fillStyle=k;b.fillText(h,t,u);b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(f, 5 | v){c=Math.min(c,f);g=Math.max(g,f);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=k;b.fillText(e(f)+" "+h+" ("+e(c)+"-"+e(g)+")",t,u);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,e((1-f/v)*p))}}};"object"===typeof module&&(module.exports=Stats); 6 | --------------------------------------------------------------------------------