value: function() {
var self = this;
EffectLibrary.registerEffectRepository("Paparazzi", PaparazziRepository.templates);
var name, filterCount = 0, descriptions = PaparazziRepository.templates;
for(name in descriptions) {
filterCount++;
}
for(name in descriptions) {
this.buildFilter(name, function(filter) {
self.filters.push(filter);
if(!self.filter) {
self.filterIndex = 0;
self.needsDraw = true;
}
if(self.filters.length == filterCount) {
// Once all of the filters are loaded, throw an event
var filtersLoadedEvent = document.createEvent("CustomEvent");
filtersLoadedEvent.initCustomEvent("filtersloaded", true, false, null);
self.dispatchEvent(filtersLoadedEvent);
}
});
}
this.filterIndex = 0;
}
value: function(name, callback) {
var gl = this.gl;
if(!gl) { return; }
var self = this;
EffectLibrary.effectWithName(name, function(filter) {
filter.name = name;
self.filterDidChange(filter, function() {
filter.previewSrc = self.getFilterPreviewURL(self.previewImage, filter);
if(callback) { callback(filter); }
});
});
}
var Montage=require("montage/core/core").Montage,Component=require("montage/ui/component").Component,MutableEvent=require("montage/core/event/mutable-event").MutableEvent,EffectLibrary=require("shuriken/effect/effect-library").EffectLibrary,PaparazziRepository=require("filters/paparazzi-repository").PaparazziRepository,Promise=require("montage/core/promise").Promise,glUtil=require("gl-util").glUtil;exports.FilteredCamera=Montage.create(Component,{canvas:{value:null},snapshotCanvas:{value:null},snapshotCtx:{value:null},previewCanvas:{value:null},previewCtx:{value:null},previewImage:{value:null},filters:{value:[],distinct:!0},gl:{value:null},video:{value:null},stream:{value:null},texture:{value:null},vertexBuffer:{value:null},framebuffer:{value:null},identityMat:{value:mat4.identity()},invertedIdentityMat:{value:null},projectionMat:{value:null},startTime:{value:0},_filterIndex:{value:-1},filterIndex:{get:function(){return this._filterIndex},set:function(e){var t=this;if(!this.filters.length){this._filterIndex=-1,this.filter=null;return}this._filterIndex=(e+this.filters.length)%this.filters.length,this.filter=this.filters[this._filterIndex],this.needsDraw=!0}},filter:{value:null},mousestate:{value:null},useNextFilter:{value:function(){this.filterIndex=this._filterIndex+1}},usePrevFilter:{value:function(){this.filterIndex=this._filterIndex-1}},templateDidLoad:{value:function(){var e=this;this.startTime=Date.now(),this.projectionMat=mat4.create(),this.invertedIdentityMat=mat4.identity(),mat4.scale(this.invertedIdentityMat,[1,-1,1]);try{navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia,window.URL=window.URL||window.webkitURL,navigator.getUserMedia({video:!0},function(t){e.video.src=window.URL.createObjectURL(t),e.stream=t,e.video.play(),document.addEventListener("webkitvisibilitychange",function(){document.webkitHidden?(console.log("Hidden! Pausing!"),e.video.pause()):(console.log("Visible! Playing!"),e.video.play())},!1)},function(){console.log("getUserMedia denied")})}catch(t){console.log("getUserMedia failed:",t)}window.addEventListener("resize",function(){e.resizeCanvas()},!1),this.canvas.element.addEventListener("click",function(t){e.handleClick(t)},!1),this.canvas.element.addEventListener("mousemove",function(t){e.mousestate={offsetX:t.offsetX-e.canvas.width/2,offsetY:t.offsetY-e.canvas.height/2}},!1)}},handleGlready:{value:function(){var e=this;this.gl=this.canvas.gl,this.initGLTexture(this.gl),this.initGLBuffer(this.gl),this.initGLFramebuffer(this.gl,640,480),this.resizeCanvas(),this.previewImage=new Image,this.previewImage.addEventListener("load",function(){e.initFilterList()},!1),this.previewImage.src="./img/default-scene.png",this.filterIndex=this.filterIndex}},initFilterList:{value:function(){var e=this;EffectLibrary.registerEffectRepository("Paparazzi",PaparazziRepository.templates);var t,n=0,r=PaparazziRepository.templates;for(t in r)n++;for(t in r)this.buildFilter(t,function(t){e.filters.push(t),e.filter||(e.filterIndex=0,e.needsDraw=!0);if(e.filters.length==n){var r=document.createEvent("CustomEvent");r.initCustomEvent("filtersloaded",!0,!1,null),e.dispatchEvent(r)}});this.filterIndex=0}},handleClick:{value:function(e){var t=e.offsetX/this.canvas.width;t<.3?this.usePrevFilter():t>.7&&this.useNextFilter()}},resizeCanvas:{value:function(){var e=this.gl;if(!e)return;this.canvas.width=this.element.offsetWidth,this.canvas.height=480,mat4.perspective(45,this.canvas.width/this.canvas.height,1,1024,this.projectionMat),e.viewport(0,0,this.canvas.width,this.canvas.height)}},draw:{value:function(){var e=this.gl;if(!e||!this.filter)return;this.updateGLTexture(e),e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT);var t=this.video,n=t.videoWidth/t.videoHeight,r=mat4.create(),i=this.nextFilter||this.filter,s=this.prevFilter||this.filter;this.drawFilteredView(e,this.filter,this.identityMat,this.identityMat),this.needsDraw=!0}},drawFilteredView:{value:function(e,t,n,r){if(!t||!t.shaderProgram)return;var i=t.shaderProgram;e.useProgram(i),e.bindBuffer(e.ARRAY_BUFFER,this.vertexBuffer),e.enableVertexAttribArray(i.attribute.aPosition),e.vertexAttribPointer(i.attribute.aPosition,3,e.FLOAT,!1,20,0),e.enableVertexAttribArray(i.attribute.aTexCoord),e.vertexAttribPointer(i.attribute.aTexCoord,2,e.FLOAT,!1,20,12);var s,o=t._textures.length;for(s=0;s<o;s++)e.activeTexture(e.TEXTURE1+s),e.bindTexture(e.TEXTURE_2D,t._textures[s]);e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,this.texture),e.uniform1i(i.uniform.uSampler,0),i.uniform.uModelViewMatrix&&e.uniformMatrix4fv(i.uniform.uModelViewMatrix,!1,n),i.uniform.uProjMatrix&&e.uniformMatrix4fv(i.uniform.uProjMatrix,!1,r),i.uniform.uTime&&e.uniform1f(i.uniform.uTime,(Date.now()-this.startTime)/1e3),i.uniform.uInverseTextureSize&&e.uniform2f(i.uniform.uInverseTextureSize,1/this.camera.videoWidth,1/this.videoHeight),e.drawArrays(e.TRIANGLES,0,6)}},initGLTexture:{value:function(e){this.texture=e.createTexture(),e.bindTexture(e.TEXTURE_2D,this.texture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texImage2D(e.TEXTURE_2D,0,e.RGB,1,1,0,e.RGB,e.UNSIGNED_BYTE,null)}},updateGLTexture:{value:function(e){e.bindTexture(e.TEXTURE_2D,this.texture),e.texImage2D(e.TEXTURE_2D,0,e.RGB,e.RGB,e.UNSIGNED_BYTE,this.video)}},initGLBuffer:{value:function(e){var t=[-1,-1,0,1,0,1,-1,0,0,0,-1,1,0,1,1,-1,1,0,1,1,1,-1,0,0,0,1,1,0,0,1];this.vertexBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,this.vertexBuffer),e.bufferData(e.ARRAY_BUFFER,new Float32Array(t),e.STATIC_DRAW)}},initGLFramebuffer:{value:function(e,t,n){var r=e.createTexture();e.bindTexture(e.TEXTURE_2D,r),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,t,n,0,e.RGBA,e.UNSIGNED_BYTE,null),this.framebuffer=e.createFramebuffer(),e.bindFramebuffer(e.FRAMEBUFFER,this.framebuffer),e.framebufferTexture2D(e.FRAMEBUFFER,e.COLOR_ATTACHMENT0,e.TEXTURE_2D,r,0),e.bindTexture(e.TEXTURE_2D,null),e.bindFramebuffer(e.FRAMEBUFFER,null),this.snapshotCanvas=document.createElement("canvas"),this.snapshotCanvas.width=t,this.snapshotCanvas.height=n,this.snapshotCtx=this.snapshotCanvas.getContext("2d"),this.previewCanvas=document.createElement("canvas"),this.previewCanvas.width=t/2,this.previewCanvas.height=n/2,this.previewCtx=this.previewCanvas.getContext("2d")}},handleWillChange:{value:function(e,t,n,r){if(!e.shaderProgram)return;var i=e.inputs[t].type,s=e.shaderProgram.uniform[n];if(!s)return;var o=this.gl,u=Promise.defer();if(i==="vec4")o.uniform4fv(s,r),u.resolve();else if(i==="vec3")o.uniform3fv(s,r),u.resolve();else if(i=="path"){var a=new Image,f=this,l=o.createTexture();l.image=new Image,l.image.onload=function(){var t=e._textures.length+1;o.activeTexture(o.TEXTURE0+t),o.bindTexture(o.TEXTURE_2D,l),o.texImage2D(o.TEXTURE_2D,0,o.RGBA,o.RGBA,o.UNSIGNED_BYTE,l.image),o.texParameteri(o.TEXTURE_2D,o.TEXTURE_MAG_FILTER,o.LINEAR),o.texParameteri(o.TEXTURE_2D,o.TEXTURE_MIN_FILTER,o.LINEAR),o.texParameteri(o.TEXTURE_2D,o.TEXTURE_WRAP_S,o.CLAMP_TO_EDGE),o.texParameteri(o.TEXTURE_2D,o.TEXTURE_WRAP_T,o.CLAMP_TO_EDGE),e._textures.push(l),o.useProgram(e.shaderProgram),o.uniform1i(s,t),u.resolve()},l.image.src=r}else u.resolve();return u.promise}},_getSourceFromScript:{value:function(e){var t=null;if(e){t="";var n=e.firstChild;while(n)n.nodeType==3&&(t+=n.textContent),n=n.nextSibling}return t}},filterDidChange:{value:function(e,t){var n=this.gl,r=[];if(!e.profiles.GLSL){console.error("Cannot use filters without a GLSL profile");return}var i=null,s=e.profiles.GLSL,o=s.techniques;if(o){techniqueNames=Object.keys(o);if(techniqueNames.length){var u=techniqueNames[0],a=o[u],f=Object.keys(a);i=a[f[0]],e.shaderProgram=glUtil.createShaderProgram(n,this._getSourceFromScript(i["x-shader/x-vertex"]),this._getSourceFromScript(i["x-shader/x-fragment"])),n.useProgram(e.shaderProgram),e._textures=[]}}if(i){var l=e.inputKeys;l&&l.forEach(function(t){var n=i.inputs;n&&(symbol=n[t].symbol,symbol||(symbol=t));var s,o;o=e.inputs[t],r.push(this.handleWillChange(e,t,symbol,o.value))},this)}t&&Promise.all(r).then(t),this.needsDraw=!0}},buildFilter:{value:function(e,t){var n=this.gl;if(!n)return;var r=this;EffectLibrary.effectWithName(e,function(n){n.name=e,r.filterDidChange(n,function(){n.previewSrc=r.getFilterPreviewURL(r.previewImage,n),t&&t(n)})})}},getFilterPreviewURL:{value:function(e,t){var n=this.gl;n.bindTexture(n.TEXTURE_2D,this.texture),n.texImage2D(n.TEXTURE_2D,0,n.RGB,n.RGB,n.UNSIGNED_BYTE,e);var r=this.previewCanvas.width,i=this.previewCanvas.height,s=this.previewCtx.createImageData(r,i),o=new Uint8Array(r*i*4);n.bindFramebuffer(n.FRAMEBUFFER,this.framebuffer),n.viewport(0,0,r,i),n.clear(n.COLOR_BUFFER_BIT|n.DEPTH_BUFFER_BIT),this.drawFilteredView(n,t,this.invertedIdentityMat,this.identityMat),n.finish(),n.readPixels(0,0,r,i,n.RGBA,n.UNSIGNED_BYTE,o),n.bindFramebuffer(n.FRAMEBUFFER,null),n.viewport(0,0,this.canvas.width,this.canvas.height);var u;for(u=0;u<o.length;++u)s.data[u]=o[u];return this.previewCtx.putImageData(s,0,0),this.previewCanvas.toDataURL()}},getSnapshotURL:{value:function(){var e=this.gl;this.updateGLTexture(e);var t=this.snapshotCanvas.width,n=this.snapshotCanvas.height,r=this.snapshotCtx.createImageData(t,n),i=new Uint8Array(t*n*4);e.bindFramebuffer(e.FRAMEBUFFER,this.framebuffer),e.viewport(0,0,t,n),e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT),this.drawFilteredView(e,this.filter,this.invertedIdentityMat,this.identityMat),e.finish(),e.readPixels(0,0,t,n,e.RGBA,e.UNSIGNED_BYTE,i),e.bindFramebuffer(e.FRAMEBUFFER,null),e.viewport(0,0,this.canvas.width,this.canvas.height);var s;for(s=0;s<i.length;++s)r.data[s]=i[s];return this.snapshotCtx.putImageData(r,0,0),this.snapshotCanvas.toDataURL()}}})