spherical-viewer/spherical-viewer.min.js

lightweight panorama photo viewer

var spherical_viewer=function(e){"use strict";!function(){var t=32,n=t<<1,r={src:"",width:640,height:360,hDiv:t,vDiv:n,att:.98,maxTextureSize:0};for(var a in r)"undefined"==typeof e[a]&&(e[a]=r[a])}();var t=function(e){return e=e||[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],e.concat=function(n){for(var r=[],a=0;16>a;a+=1){for(var l=0,o=0;4>o;o+=1)l+=e[4*~~(a/4)+o]*n[a%4+4*o];r.push(l)}return t(r)},e.translateX=function(t){return e.concat([1,0,0,t,0,1,0,0,0,0,1,0,0,0,0,1])},e.translateY=function(t){return e.concat([1,0,0,0,0,1,0,t,0,0,1,0,0,0,0,1])},e.translateZ=function(t){return e.concat([1,0,0,0,0,1,0,0,0,0,1,t,0,0,0,1])},e.scaleX=function(t){return e.concat([t,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1])},e.scaleY=function(t){return e.concat([1,0,0,0,0,t,0,0,0,0,1,0,0,0,0,1])},e.scaleZ=function(t){return e.concat([1,0,0,0,0,1,0,0,0,0,t,0,0,0,0,1])},e.rotateX=function(t){var n=Math.cos(t),r=Math.sin(t);return e.concat([1,0,0,0,0,n,-r,0,0,r,n,0,0,0,0,1])},e.rotateY=function(t){var n=Math.cos(t),r=Math.sin(t);return e.concat([n,0,r,0,0,1,0,0,-r,0,n,0,0,0,0,1])},e.rotateZ=function(t){var n=Math.cos(t),r=Math.sin(t);return e.concat([n,-r,0,0,r,n,0,0,0,0,1,0,0,0,0,1])},e.translate=function(t){return e.translateX(t.x||0).translateY(t.y||0).translateZ(t.z||0)},e.scale=function(t){return"number"==typeof t?e.scale({x:t,y:t,z:t}):e.scaleX(t.x||1).scaleY(t.y||1).scaleZ(t.z||1)},e.invert=function(){return invert(e)},e},n=function(e,t,n){var r=e.createShader(t);e.shaderSource(r,n),e.compileShader(r);var a=e.getShaderParameter(r,e.COMPILE_STATUS);if(a)return r;var l=e.getShaderInfoLog(r);throw e.deleteShader(r),"createShader:"+l},r=function(e,t,n){var r=e.createProgram();e.attachShader(r,t),e.attachShader(r,n),e.linkProgram(r);var a=e.getProgramParameter(r,e.LINK_STATUS);if(a)return r;var l=e.getProgramInfoLog(r);throw e.deleteProgram(r),"createProgram:"+l},a=function(e,t){var n=function(t){var n="";n="getSrc('"+e+"',\n";for(var r=0,a=t.split(/[\r\n]+/g),l=0;l<a.length;l+=1){var o=a[l],i=o.indexOf("//");-1!=i&&(o=o.substring(0,i)),o=o.replace(/^\s+|\s+$/g,"").replace(/\s+/g," "),0!=o.length&&(r>0&&(n+=" +\n"),n+="  '"+o+"'",r+=1)}n+=")",console.log(n)};if(E){var r=document.getElementById(e);return r?(t=r.text,n(t),t):t}return t},l=function(){var e=n(T,T.VERTEX_SHADER,a("vertex-shader1","attribute vec3 aPosition;uniform mat4 uMatrix;attribute vec2 aTexcoord;varying vec2 vTexcoord;void main() {gl_Position = vec4(aPosition, 1) * uMatrix;vTexcoord = aTexcoord;}")),t=n(T,T.FRAGMENT_SHADER,a("fragment-shader1","precision mediump float;varying vec2 vTexcoord;uniform sampler2D uTexture;void main() {gl_FragColor = texture2D(uTexture, vTexcoord);}")),l=r(T,e,t);return T.useProgram(l),l},o=function(e){var t=document.createElement("canvas");t.setAttribute("width",""+e),t.setAttribute("height",""+(e>>1));var n=t.getContext("2d");n.strokeStyle="none",n.fillStyle="#666666",n.fillRect(0,0,e,e>>1);for(var r=8,a=r/2,l=e/r,o=["#ff0000","#00ff00","#0000ff","#ffcc00"],i=0;r>i;i+=1)for(var u=0;a>u;u+=1)(i+u)%2==0&&(n.fillStyle=o[i%o.length],n.fillRect(i*l,u*l,l,l));return n.fillStyle="#ffffff",n.font=(e>>4)+"px sans-serif",n.fillText("Spherical Viewer",e>>1,e>>2),t},i=function(){var t=T.createTexture();T.bindTexture(T.TEXTURE_2D,t),T.texImage2D(T.TEXTURE_2D,0,T.RGB,1,1,0,T.RGB,T.UNSIGNED_BYTE,new Uint8Array([63,63,63]));var n=function(e){T.bindTexture(T.TEXTURE_2D,t),T.texImage2D(T.TEXTURE_2D,0,T.RGB,T.RGB,T.UNSIGNED_BYTE,e),T.generateMipmap(T.TEXTURE_2D)},r=+T.getParameter(T.MAX_TEXTURE_SIZE);if(e.maxTextureSize&&(r=Math.min(r,e.maxTextureSize)),E)n(o(r));else{var a=function(){var e=document.createElement("canvas");e.setAttribute("width",""+r),e.setAttribute("height",""+(r>>1));var t=e.getContext("2d");t.drawImage(l,0,0,r,r>>1),n(e),x.valid=!1},l=new Image;l.addEventListener("load",a),l.crossOrigin="anonymous",l.src=e.src}},u=function(){for(var t=e.vDiv,n=e.hDiv,r=[],a=[],l=function(e,l,o){var i=2*Math.PI*e/n,u=Math.PI*((l+o)/t-.5);r.push(Math.cos(i)*Math.cos(u)),r.push(Math.sin(u)),r.push(Math.sin(i)*Math.cos(u)),a.push(i/(2*Math.PI)+l),a.push(1-(u/Math.PI+.5))},o=0;t>o;o+=1)for(var i=0;n>i;i+=1)l(i,o,0==o?0:i/n),l(i,o,o==t-1?1:i/n+1);T.bindBuffer(T.ARRAY_BUFFER,T.createBuffer()),T.bufferData(T.ARRAY_BUFFER,new Float32Array(a),T.STATIC_DRAW);var u=T.getAttribLocation(b,"aTexcoord");T.enableVertexAttribArray(u),T.vertexAttribPointer(u,2,T.FLOAT,!1,0,0),T.bindBuffer(T.ARRAY_BUFFER,T.createBuffer()),T.bufferData(T.ARRAY_BUFFER,new Float32Array(r),T.STATIC_DRAW);var c=T.getAttribLocation(b,"aPosition");return T.enableVertexAttribArray(c),T.vertexAttribPointer(c,3,T.FLOAT,!1,0,0),r.length/3},c=function(){x.r=x.width*Math.exp(Math.log(1.5)*x.z);var e=x.width,n=x.height,r=t().translate({x:-1,y:-1,z:-1}).scale(2).scale({x:1/e,y:1/n,z:1/(2*x.r)}).translate({x:e/2,y:n/2,z:x.r+10}).rotateX(x.t).rotateY(x.p-Math.PI/2).scale(x.r);T.clearColor(0,0,0,255),T.clear(T.COLOR_BUFFER_BIT|T.DEPTH_BUFFER_BIT);var a=T.getUniformLocation(b,"uMatrix");T.uniformMatrix4fv(a,!1,r),T.drawArrays(T.TRIANGLE_STRIP,0,x.numPoints)},s=function(){var e=null,t=window;w.addEventListener("mousedown",function(a){a.preventDefault(),e={pageX:a.pageX,pageY:a.pageY},x.dragging=!0,t.addEventListener("mousemove",n),t.addEventListener("mouseup",r)});var n=function(t){var n=d();if(t.ctrlKey){var r=n.z+(t.pageY-e.pageY)/x.r;h(n.p,n.t,r)}else{var a=n.p-(t.pageX-e.pageX)/x.r,l=n.t-(t.pageY-e.pageY)/x.r;h(a,l,n.z)}e={pageX:t.pageX,pageY:t.pageY}},r=function(e){x.dragging=!1,t.removeEventListener("mousemove",n),t.removeEventListener("mouseup",r)};w.addEventListener("wheel",function(e){e.preventDefault();var t=d();h(t.p,t.t,t.z+e.deltaY/x.r*.1)})},f=function(){var e=function(e){for(var t=[],n=0;n<e.touches.length;n+=1)t.push({pageX:e.touches[n].pageX,pageY:e.touches[n].pageY});return t},t=null,n=window;w.addEventListener("touchstart",function(l){l.preventDefault(),null==t&&(t=e(l),x.dragging=!0,n.addEventListener("touchmove",r),n.addEventListener("touchend",a))});var r=function(n){var r=d();if(1==n.touches.length){var a=r.p-(n.touches[0].pageX-t[0].pageX)/x.r,l=r.t-(n.touches[0].pageY-t[0].pageY)/x.r;h(a,l,r.z)}else if(2==n.touches.length&&2==t.length){var o=function(e){var t=e[0].pageX-e[1].pageX,n=e[0].pageY-e[1].pageY;return Math.sqrt(t*t+n*n)},i=r.z+(o(n.touches)-o(t))/x.r;h(r.p,r.t,i)}t=e(n)},a=function(e){0==e.touches.length&&(t=null,x.dragging=!1,n.removeEventListener("touchmove",r),n.removeEventListener("touchend",a))}},h=function(e,t,n){t=Math.max(-Math.PI/2,Math.min(t,Math.PI/2)),n=Math.max(-5,Math.min(n,5));var r=x.p!=e||x.t!=t||x.z!=n;r&&(x.p=e,x.t=t,x.z=n,x.valid=!1)},d=function(){return{p:x.p,t:x.t,z:x.z}},v=function(){var t=function(t){var a="v"+t,l=0,o=[],i=0,u=8,c=function(){for(var e=0,t=0;t<o.length;t+=1)e+=o[t];return e/o.length},s=function(e){o.length<u?o.push(e):(o[i]=e,i=(i+1)%u)};return{val:function(){return l},delta:function(o){x.dragging?(s((x[t]-r[t])/o),x[a]=c()):(l=x[t]+x[a]*o,x[a]*=e.att,Math.abs(x[a])<n&&(x[a]=0))}}},n=1e-6,r=null,a=t("p"),l=t("t"),o=t("z");return function(e){null!=r&&(a.delta(e),l.delta(e),o.delta(e),x.dragging||h(a.val(),l.val(),o.val())),r={p:x.p,t:x.t,z:x.z}}}(),g=function(e){return e.requestFullscreen?{requestFullscreen:"requestFullscreen",exitFullscreen:"exitFullscreen",fullscreenEnabled:"fullscreenEnabled",fullscreenElement:"fullscreenElement",fullscreenchange:"fullscreenchange"}:e.webkitRequestFullscreen?{requestFullscreen:"webkitRequestFullscreen",exitFullscreen:"webkitExitFullscreen",fullscreenEnabled:"webkitFullscreenEnabled",fullscreenElement:"webkitFullscreenElement",fullscreenchange:"webkitfullscreenchange"}:w.mozRequestFullScreen?{requestFullscreen:"mozRequestFullScreen",exitFullscreen:"mozCancelFullScreen",fullscreenEnabled:"mozFullScreenEnabled",fullscreenElement:"mozFullScreenElement",fullscreenchange:"mozfullscreenchange"}:w.msRequestFullscreen?{requestFullscreen:"msRequestFullscreen",exitFullscreen:"msExitFullscreen",fullscreenEnabled:"msFullscreenEnabled",fullscreenElement:"msFullscreenElement",fullscreenchange:"msfullscreenchange"}:null},m=function(){var e=null,t=!1,n=function(){e={width:w.width,height:w.height,scrollLeft:document.body.scrollLeft,scrollTop:document.body.scrollTop},w.style.position="absolute",w.style.left="0px",w.style.top="0px",document.body.style.overflow="hidden",document.body.scrollLeft=0,document.body.scrollTop=0;var n={width:0,height:0},r=function(){if(!t)return w.style.position="",w.style.left="",w.style.top="",document.body.style.overflow="",document.body.scrollLeft=e.scrollLeft,document.body.scrollTop=e.scrollTop,w.width=e.width,void(w.height=e.height);var a={width:window.innerWidth,height:window.innerHeight},l=n.width!=a.width||n.height!=a.height;l&&(w.width=a.width,w.height=a.height,n=a),window.setTimeout(r,50)};r()},r=g(w);if(!r||!document[r.fullscreenEnabled])return function(){t=!t,t&&n()};var a=function(e){t=!!document[r.fullscreenElement],t?n():document.removeEventListener(r.fullscreenchange,a)};return function(){document[r.fullscreenElement]?document[r.exitFullscreen]():(document.addEventListener(r.fullscreenchange,a),w[r.requestFullscreen]())}},p=function(e){0!=x.lastTime&&v(e-x.lastTime),x.lastTime=e;var t=x.width!=T.canvas.width||x.height!=T.canvas.height;t&&(x.width=T.canvas.width,x.height=T.canvas.height,T.viewport(0,0,x.width,x.height),x.valid=!1),x.valid||(c(),x.valid=!0),window.requestAnimationFrame(p)},E="file:"==location.protocol,w=document.createElement("canvas");w.setAttribute("width",""+e.width),w.setAttribute("height",""+e.height),w.style.cursor="all-scroll";var T=w.getContext("webgl")||w.getContext("experimental-webgl",{preserveDrawingBuffer:!0});if(!T)return console.log("gl not supported."),null;var x={valid:!1,lastTime:0,width:0,height:0,numPoints:0,r:0,p:0,t:0,z:0,vp:0,vt:0,vz:0,dragging:!1},b=l();i(),x.numPoints=u(),"undefined"!=typeof window.ontouchstart?f():s();var F=m();return T.enable(T.DEPTH_TEST),window.requestAnimationFrame(p),{canvas:w,setPTZ:h,getPTZ:d,toggleFullscreen:F}};!function(e){"object"==typeof exports&&(module.exports=e)}(spherical_viewer);