You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
184 lines
251 KiB
JavaScript
184 lines
251 KiB
JavaScript
4 years ago
|
var mobileAndTabletcheck = function() {
|
||
|
|
var check = false;
|
||
|
|
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
|
||
|
|
return check;
|
||
|
|
};
|
||
|
|
|
||
|
|
var canvas = document.createElement( 'canvas' );
|
||
|
|
var ctx = canvas.getContext( '2d' );
|
||
|
|
|
||
|
|
var w = 320;
|
||
|
|
var h = 320;
|
||
|
|
|
||
|
|
var width = window.innerWidth;
|
||
|
|
var height = window.innerHeight;
|
||
|
|
|
||
|
|
var planeSize = 600;
|
||
|
|
|
||
|
|
var radius = 300;
|
||
|
|
|
||
|
|
if(mobileAndTabletcheck()){
|
||
|
|
planeSize = 400;
|
||
|
|
w = 200;
|
||
|
|
h = 200;
|
||
|
|
radius = 150;
|
||
|
|
}
|
||
|
|
|
||
|
|
canvas.setAttribute('width', w);
|
||
|
|
canvas.setAttribute('height', h);
|
||
|
|
|
||
|
|
// canvas.style.position = 'absolute';
|
||
|
|
// canvas.style.width = '320px';
|
||
|
|
// canvas.style.height = '320px';
|
||
|
|
// canvas.style.top = '0';
|
||
|
|
// canvas.style.left = '0';
|
||
|
|
// canvas.style.zIndex = '100';
|
||
|
|
// document.body.appendChild(canvas);
|
||
|
|
|
||
|
|
window.addEventListener('resize', onWindowResize);
|
||
|
|
|
||
|
|
var maskImage = new Image();
|
||
|
|
//because of tainted canvas
|
||
|
|
maskImage.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTM4NzkwRjM0QTk3MTFFNzlCMkFFRTA2QTZFNkM4MTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTM4NzkwRjQ0QTk3MTFFNzlCMkFFRTA2QTZFNkM4MTgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1Mzg3OTBGMTRBOTcxMUU3OUIyQUVFMDZBNkU2QzgxOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1Mzg3OTBGMjRBOTcxMUU3OUIyQUVFMDZBNkU2QzgxOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pmzm5t8AABYsSURBVHja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
|
||
|
|
// maskImage.crossOrigin = "Anonymous";
|
||
|
|
|
||
|
|
var mousePos = [0, 0];
|
||
|
|
|
||
|
|
var raycaster = new THREE.Raycaster();
|
||
|
|
var mouse = new THREE.Vector2();
|
||
|
|
|
||
|
|
if(mobileAndTabletcheck()){
|
||
|
|
window.addEventListener('touchmove', function(e){
|
||
|
|
mouse.x = ( e.touches[0].clientX / window.innerWidth ) * 2 - 1;
|
||
|
|
mouse.y = - ( e.touches[0].clientY / window.innerHeight ) * 2 + 1;
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
window.addEventListener('mousemove', function(e){
|
||
|
|
mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
|
||
|
|
mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderRay() {
|
||
|
|
raycaster.setFromCamera( mouse, camera );
|
||
|
|
var intersects = raycaster.intersectObjects( scene.children );
|
||
|
|
for ( var i = 0; i < intersects.length; i++ ) {
|
||
|
|
mousePos[0] = (((intersects[i].point.x / planeSize)+ 0.5) * w) - (radius*0.5);
|
||
|
|
mousePos[1] = ((((intersects[i].point.y * -1) / planeSize)+ 0.5) * h) - (radius*0.5);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function draw(){
|
||
|
|
ctx.clearRect(0, 0, w, h);
|
||
|
|
ctx.drawImage(maskImage, mousePos[0], mousePos[1], radius, radius);
|
||
|
|
renderRay();
|
||
|
|
}
|
||
|
|
|
||
|
|
var frustumSize = 600;
|
||
|
|
var aspect = window.innerWidth / window.innerHeight;
|
||
|
|
|
||
|
|
|
||
|
|
var clock = new THREE.Clock(true);
|
||
|
|
|
||
|
|
var scene = new THREE.Scene();
|
||
|
|
camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 2000 );
|
||
|
|
|
||
|
|
camera.lookAt(scene.position);
|
||
|
|
camera.position.z = 1;
|
||
|
|
|
||
|
|
|
||
|
|
var renderer = new THREE.WebGLRenderer({
|
||
|
|
antialias: true,
|
||
|
|
alpha: true
|
||
|
|
});
|
||
|
|
renderer.setPixelRatio = 1;
|
||
|
|
renderer.setClearColor(0x3A405A, 1.0);
|
||
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
||
|
|
document.body.appendChild( renderer.domElement );
|
||
|
|
|
||
|
|
function onWindowResize(){
|
||
|
|
|
||
|
|
var aspect = window.innerWidth / window.innerHeight;
|
||
|
|
|
||
|
|
camera.left = - frustumSize * aspect / 2;
|
||
|
|
camera.right = frustumSize * aspect / 2;
|
||
|
|
camera.top = frustumSize / 2;
|
||
|
|
camera.bottom = - frustumSize / 2;
|
||
|
|
|
||
|
|
camera.updateProjectionMatrix();
|
||
|
|
|
||
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
||
|
|
}
|
||
|
|
|
||
|
|
var gui = new dat.GUI();
|
||
|
|
var params = {
|
||
|
|
dispFactor: 0.238,
|
||
|
|
speed: 24.0,
|
||
|
|
};
|
||
|
|
|
||
|
|
gui.add(params, 'dispFactor', 0, 1).step(0.001).onChange(function( value ) {
|
||
|
|
object.material.uniforms._dispFactor.value = value;
|
||
|
|
object.material.uniforms._dispFactor.needsUpdate = true;
|
||
|
|
});
|
||
|
|
gui.add(params, 'speed', 1, 50).step(1).onChange(function( value ) {
|
||
|
|
object.material.uniforms._speed.value = value;
|
||
|
|
object.material.uniforms._speed.needsUpdate = true;
|
||
|
|
});
|
||
|
|
|
||
|
|
// var controls = new THREE.OrbitControls( camera, renderer.domElement );
|
||
|
|
|
||
|
|
var loader = new THREE.TextureLoader();
|
||
|
|
loader.crossOrigin = '';
|
||
|
|
var circle = loader.load('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAAAACXBIWXMAAAsTAAALEwEAmpwYAAA5pmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgICAgICAgICB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIKICAgICAgICAgICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgICAgICAgICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgICAgICAgICB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+QWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCk8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhtcDpDcmVhdGVEYXRlPjIwMTctMTEtMDlUMTU6MDk6MzIrMDE6MDA8L3htcDpDcmVhdGVEYXRlPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxNy0xMS0wOVQxNjowNDo0OCswMTowMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6TWV0YWRhdGFEYXRlPjIwMTctMTEtMDlUMTY6MDQ6NDgrMDE6MDA8L3htcDpNZXRhZGF0YURhdGU+CiAgICAgICAgIDx4bXBNTTpJbnN0YW5jZUlEPnhtcC5paWQ6YWRmM2JhNzAtNDlmOC00NmRhLWIyOTMtYmIzZGMwOTY0ZmQ3PC94bXBNTTpJbnN0YW5jZUlEPgogICAgICAgICA8eG1wTU06RG9jdW1lbnRJRD54bXAuZGlkOjQ5QTI5ODg1QkQ3QzExRTc5RTlEQkZFRTgyOTMzRjVBPC94bXBNTTpEb2N1bWVudElEPgogICAgICAgICA8eG1wTU06RGVyaXZlZEZyb20gcmRmOnBhcnNlVHlwZT0iUmVzb3VyY2UiPgogICAgICAgICAgICA8c3RSZWY6aW5zdGFuY2VJRD54bXAuaWlkOjQ5QTI5ODgyQkQ3QzExRTc5RTlEQkZFRTgyOTMzRjVBPC9zdFJlZjppbnN0YW5jZUlEPgogICAgICAgICAgICA8c3RSZWY6ZG9jdW1lbnRJRD54bXAuZGlkOjQ5QTI5ODgzQkQ3QzExRTc5RTlEQkZFRTgyOTMzRjVBPC9zdFJlZjpkb2N1bWVudElEPgogICAgICAgICA8L3htcE1NOkRlcml2ZWRGcm9tPgogICAgICAgICA8eG1wTU06T3JpZ2luYWxEb2N1bWVudElEPnhtcC5kaWQ6NDlBMjk4ODVCRDdDMTFFNzlFOURCRkVFODI5MzNGNUE8L3htcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD4KICAgICAgICAgPHhtcE1NOkhpc3Rvcnk+CiAgICAgICAgICAgIDxyZGY6U2VxPgogICAgICAgICAgICAgICA8cmRmOmxpIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OmFjdGlvbj5zYXZlZDwvc3RFdnQ6YWN0aW9uPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6aW5zdGFuY2VJRD54bXAuaWlkOmFkZjNiYTcwLTQ5ZjgtNDZkYS1iMjkzLWJiM2RjMDk2NGZkNzwvc3RFdnQ6aW5zdGFuY2VJRD4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OndoZW4+MjAxNy0xMS0wOVQxNjowNDo0OCswMTowMDwvc3RFdnQ6d2hlbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OnNvZnR3YXJlQWdlbnQ+QWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCk8L3N0RXZ0OnNvZnR3YXJlQWdlbnQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpjaGFuZ2VkPi88L3N0RXZ0OmNoYW5nZWQ+CiAgICAgICAgICAgICAgIDwvcmRmOmxpPgogICAgICAgICAgICA8L3JkZjpTZXE+CiAgICAgICAgIDwveG1wTU06SGlzdG9yeT4KICAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9wbmc8L2RjOmZvcm1hdD4KICAgICAgICAgPHBob3Rvc2hvcDpDb2xvck1vZGU+MzwvcGhvdG9zaG9wOkNvbG9yTW9kZT4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+NzIwMDAwLzEwMDAwPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjAwMDAvMTAwMDA8L3RpZmY6WVJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDxleGlmOkNvbG9yU3BhY2U+NjU1MzU8L2V4aWY6Q29sb3JTcGFjZT4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjEwMjQ8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTAyNDwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA
|
||
|
|
var circle_blur = loader.load('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTRFRDNENTBCRDg0MTFFNzlFOURCRkVFODI5MzNGNUEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTRFRDNENEZCRDg0MTFFNzlFOURCRkVFODI5MzNGNUEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0OUEyOTg4NEJEN0MxMUU3OUU5REJGRUU4MjkzM0Y1QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0OUEyOTg4NUJEN0MxMUU3OUU5REJGRUU4MjkzM0Y1QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pro48p4AAIUdSURBVHja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
|
||
|
|
var color = loader.load('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAIAAAB7GkOtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3BpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMzVlMjhlNS1mNDlmLTQwYmItODc1Zi1kMWU5YjA3MzJlMjYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NThBQkUzMzgwNThDMTFFN0I1NkRFMjgyRDRBRkJCMTEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NThBQkUzMzcwNThDMTFFN0I1NkRFMjgyRDRBRkJCMTEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4MjM0NTQ4MzE5QzgxMUU2QjU1RjlFNDUxN0EzMzhDOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4MjM0NTQ4NDE5QzgxMUU2QjU1RjlFNDUxN0EzMzhDOSIvPiA8L3Jk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
|
||
|
|
var dist = loader.load('data:image/jpeg;base64,/9j/4Qn4RXhpZgAATU0AKgAAAAgADAEAAAMAAAABASwAAAEBAAMAAAABASwAAAECAAMAAAADAAAAngEGAAMAAAABAAIAAAESAAMAAAABAAEAAAEVAAMAAAABAAMAAAEaAAUAAAABAAAApAEbAAUAAAABAAAArAEoAAMAAAABAAIAAAExAAIAAAAkAAAAtAEyAAIAAAAUAAAA2IdpAAQAAAABAAAA7AAAASQACAAIAAgALcdAAAAnEAAtx0AAACcQQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkAMjAxNzowNjowNyAxMTo1NzoyNgAABJAAAAcAAAAEMDIyMaABAAMAAAABAAEAAKACAAQAAAABAAABLKADAAQAAAABAAABLAAAAAAAAAAGAQMAAwAAAAEABgAAARoABQAAAAEAAAFyARsABQAAAAEAAAF6ASgAAwAAAAEAAgAAAgEABAAAAAEAAAGCAgIABAAAAAEAAAhuAAAAAAAAAEgAAAABAAAASAAAAAH/2P/tAAxBZG9iZV9DTQAB/+4ADkFkb2JlAGSAAAAAAf/bAIQADAgICAkIDAkJDBELCgsRFQ8MDA8VGBMTFRMTGBEMDAwMDAwRDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAENCwsNDg0QDg4QFA4ODhQUDg4ODhQRDAwMDAwREQwMDAwMDBEMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM/8AAEQgASABIAwEiAAIRAQMRAf/dAAQABf/EAT8AAAEFAQEBAQEBAAAAAAAAAAMAAQIEBQYHCAkKCwEAAQUBAQEBAQEAAAAAAAAAAQACAwQFBgcICQoLEAABBAEDAgQCBQcGCAUDDDMBAAIRAwQhEjEFQVFhEyJxgTIGFJGhsUIjJBVSwWIzNHKC0UMHJZJT8OHxY3M1FqKygyZEk1RkRcKjdDYX0lXiZfKzhMPTdePzRieUpIW0lcTU5PSltcXV5fVWZnaGlqa2xtbm9jdHV2d3h5ent8fX5/cRAAICAQIEBAMEBQYHBwYFNQEAAhEDITESBEFRYXEiEwUygZEUobFCI8FS0fAzJGLhcoKSQ1MVY3M08SUGFqKygwcmNcLSRJNUoxdkRVU2dGXi8rOEw9N14/NGlKSFtJXE1OT0pbXF1eX1VmZ2hpamtsbW5vYnN0dXZ3eHl6e3x//aAAwDAQACEQMRAD8A5PIzsUj030tEzDxZIOntZNntds+n/OIp+zbQPXe5z4IpY9rdY+jLztU3VPaWhuPTL5kOgAyNzRJcW7tv+u9R+y2XEiuhgABNnpQdD9J20/munYkpgKrnk7cag6QHWEyCdfoVu9P1U/2TMIL7H0AxOxtg7nn9H+lQXYXsh1GxpkF7XtaDr2qc3c7+w9P6Lcatu07bCJJ3e0yPpb/53+QkplXXdMObY0EyHasBjQ7nO/SW+9TNPUC0hoYYkawXafyWD38oTSfSlxyHA8FjmvY7Tb7muG/3KP2PHDwMhlgtdrFzWuI8NHN37Ws/lJKSBhdLnXOIAAIeKw2D+7u27kZweAJorvGjnbnM1A8NrGuZ/begza+a2PaQT7iNxM8Dc1m53f2JDGvD9poncSBb7W6DT2sY2z6P9RJSR9zd4c7HFILdQQ0ac7vVM1td/arSTnGuZYHPdqdLPUeJM/vQGOb/AFUklP8A/9DmHjF9wrfQXulvq7S4/wCZ/MM/zVD03WABpflVzDYaW19/9EUQ25HrFhFNzgAH79o5/MbIrQ/e8tfaQ0cBrnnbp2bW1JSSyvIqY0vIqc5sHc2z2wDDWOZ+k3KBY8e7b6jva0Pa3U/ulzyN79u389MHuZY012FgmfUbuGnba2xr2Od+b9JRfbY60DZdYDy+yzZI/eDGj03/ANtJTN1lzfY8iy2dzt0NeAB+j3WOZ7f+3FJjMzcT6LSHiR6jiS7/AIv3u3/RUG2gNNTcWu4j2nc5wbIB3c7fU96mKs2xjvTbUNsbmB7TE+7/AApY5JS7XXuBdZsa6PaC4kME/vMbX/mb0PeQ8RF4d7nE2Wsgj6PtHt+ipNwxUWFzGW2NG+C0EA/yrWP9LandIZo2kOcTBLtP5Wyqx2z3N+h70lMixxgX2voe4xsdY5zIPcsNfuY3+u9JPuvrcQC0ACRpIE+bPj+Z+ekkp//R5eux9jNuK1hAEtbOwfuxu0c7en+zdUI9T7G5rNNhFgA4PDXR9L9z1P5xRspb6bQZdW0Q41bnAADXZy393/SKs6jaC53rNrJnadwaf6zav0W1JTcDr62OrIsbpuB3MEk6bRuDvZ+b7UJtjWk8Otaf0hd2In26f9+Q6sxzRsprhp7uFgBPdzvdt/q+xWGX2XslmRSxgMNDgBEgS535/wD1aSkZfUXAb6C6Q1ocYkky573OaGv/AM1M9jnD02htuwjbWXv2D+qyt2z936aMBmBoe1+K5r9Q4NJJMR9As+ipNq9IussFDSCN21zAZ1+hUB+du9+xiSkXou1Ze1tEQTT9Iaa7nBrff/USr3E7W+g9sAkAO3HX/C7S3YmqMvJadjZ1aAchpPc7Xek9rW/m+9SrvfrWxtVxLdrmCWgz+9XYkpkW1MNhdjmk7iH7ne2J+k2C6xJQfi1F27ZSySdwc3bEfy67D9H+W1JJT//S5S3CuJh7KwQNo9Jxhn77d0FqG1lDAwQ+R7QWEOJb4Vir37XfykVmFVW4bmGp5/MMgcS309z7Nu9MSysCx976Z0a47XFvwc/b7P6tiSlzk0ia623D81k1OjXbO5zdtiZ4xDtF11ZcdWVsa5jwPH9M17t6m7Ltc/0/2jpBG2wioE8/Th9e9/8AXQnijaPWsdcXn3ta0uOv8sOe1zUlLOp6ft3vYWAiWlwcRI/ce136NKhuPXW400ODCQd3q6uJ/OdvKc17WH0Ky06DbWC3bpu8fd/01CxtktNzWgD6IsGp/Obt9Xb7dqSmf2mrfAroAP0WWbpgTrqxtv8AmNQS4vY1p9JrHd6mg7QO1du7f/nVKwLqKoLcSuxgI3Fkl2vb6Tv/AAN7EN2XgPeAcd1ZbyCwzB8Htf8A6/6NJTGnAFtnqtqZe8nm3dtMeDrNqSJtpt9tOM5g4mS1xnv9Ktrd3u96SSn/0+UZVjn9Fsdxuc2CRp7tjD7Wf5qeaay0kNZOjmlm6I7+1zq2bf8AhGrlEklPV/bMJu5o2FkCCNgG0fvM2Nc5/wDUT+rNg+zV1acuHtHHLtjtn0VyaSSnqrDe4MY8VFoOkOlpMRA3t9nuRGDID3bGMG+QW7oa0iPzC61cikkp6za4tL3AsaTw0gTp+bW3c7Z7fzk/p1QGBzZaBo1rQ2I2ncx1ge7Z9Nckkkp6h1FDGn3se50H2S6J/wCN9rv8z9EkuXSSU//Z/+0VnFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAAAPHAFaAAMbJUccAgAAAgACADhCSU0EJQAAAAAAEPzhH4nIt8l4LzRiNAdYd+s4QklNBDoAAAAAAScAAAAQAAAAAQAAAAAAC3ByaW50T3V0cHV0AAAABQAAAABQc3RTYm9vbAEAAAAASW50ZWVudW0AAAAASW50ZQAAAABDbHJtAAAAD3ByaW50U2l4dGVlbkJpdGJvb2wAAAAAC3ByaW50ZXJOYW1lVEVYVAAAACIARABlAGwAbAAgADIAMQA1ADUAYwBkAG4AIABDAG8AbABvAHIAIABNAEYAUAAgACgAQQA1ADoANAAwADoANABGACkAAAAAAA9wcmludFByb29mU2V0dXBPYmpjAAAADABQAHIAbwBvAGYAIABTAGUAdAB1AHAAAAAAAApwcm9vZlNldHVwAAAAAQAAAABCbHRuZW51bQAAAAxidWlsdGluUHJvb2YAAAAJcHJvb2ZDTVlLADhCSU0EOwAAAAACLQAAABAAAAABAAAAAAAScHJpbnRPdXRwdXRPcHRpb25zAAAAFwAAAABDcHRuYm9vbAAAAAAAQ2xicmJvb2wAAAAAAFJnc01ib29sAAAAAABDcm5DYm9v
|
||
|
|
|
||
|
|
|
||
|
|
dist.wrapS = dist.wrapT = THREE.RepeatWrapping;
|
||
|
|
color.wrapS = color.wrapT = THREE.RepeatWrapping;
|
||
|
|
|
||
|
|
var mask = new THREE.Texture(canvas);
|
||
|
|
mask.minFilter = THREE.LinearFilter;
|
||
|
|
|
||
|
|
var mat = new THREE.ShaderMaterial({
|
||
|
|
uniforms: {
|
||
|
|
_time: { type: "f", value: 1.0 },
|
||
|
|
_mask: { type: 't', value: mask },
|
||
|
|
_color: { type: 't', value: color },
|
||
|
|
_circle: { type: 't', value: circle },
|
||
|
|
_circle_blur: { type: 't', value: circle_blur },
|
||
|
|
_dist: { type: 't', value: dist },
|
||
|
|
|
||
|
|
_dispFactor: { type: "f", value: params.dispFactor },
|
||
|
|
_speed: { type: "f", value: params.speed }
|
||
|
|
},
|
||
|
|
|
||
|
|
vertexShader: document.getElementById( 'vertexShader' ).textContent,
|
||
|
|
fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
|
||
|
|
transparent: true,
|
||
|
|
opacity: 1.0,
|
||
|
|
blending: THREE.AdditiveBlending
|
||
|
|
});
|
||
|
|
|
||
|
|
var geometry = new THREE.PlaneBufferGeometry( planeSize, planeSize, 1 );
|
||
|
|
var object = new THREE.Mesh(geometry, mat);
|
||
|
|
scene.add(object);
|
||
|
|
|
||
|
|
window.addEventListener('click', function(){
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
var animate = function () {
|
||
|
|
requestAnimationFrame( animate );
|
||
|
|
renderer.render(scene, camera);
|
||
|
|
|
||
|
|
var d = clock.getDelta();
|
||
|
|
mat.uniforms._time.value += d;
|
||
|
|
|
||
|
|
mask.needsUpdate = true;
|
||
|
|
|
||
|
|
draw();
|
||
|
|
};
|
||
|
|
animate();
|