Tweaked clearColor handling in CanvasRenderer and WebGLRenderer2.

build/ThreeExtras.js

@@ -111,21 +111,21 @@ R;k.faceMaterials=G.materials;k.overdraw=T;if(P.geometry.uvs[y]){k.uvs[0]=P.geom
 h.w);n.multiplyScalar(1/n.w);l=D[t]=D[t]||new THREE.RenderableLine;l.v1.positionScreen.copy(h);l.v2.positionScreen.copy(n);l.z=Math.max(h.z,n.z);l.materials=P.materials;p.push(l);t++}}}else if(P instanceof THREE.Particle){H.set(P.position.x,P.position.y,P.position.z,1);v.multiplyVector4(H);H.z/=H.w;if(H.z>0&&H.z<1){o=w[u]=w[u]||new THREE.RenderableParticle;o.x=H.x/H.w;o.y=H.y/H.w;o.z=H.z;o.rotation=P.rotation.z;o.scale.x=P.scale.x*Math.abs(o.x-(H.x+z.projectionMatrix.n11)/(H.w+z.projectionMatrix.n14));
 o.scale.y=P.scale.y*Math.abs(o.y-(H.y+z.projectionMatrix.n22)/(H.w+z.projectionMatrix.n24));o.materials=P.materials;p.push(o);u++}}}}M&&p.sort(a);return p};this.unprojectVector=function(q,z){var M=THREE.Matrix4.makeInvert(z.matrix);M.multiplySelf(THREE.Matrix4.makeInvert(z.projectionMatrix));M.multiplyVector3(q);return q}};
 THREE.DOMRenderer=function(){THREE.Renderer.call(this);var a=null,b=new THREE.Projector,d,e,f,g;this.domElement=document.createElement("div");this.setSize=function(k,c){d=k;e=c;f=d/2;g=e/2};this.render=function(k,c){var j,l,t,D,o,u,w,C;a=b.projectScene(k,c);j=0;for(l=a.length;j<l;j++){o=a[j];if(o instanceof THREE.RenderableParticle){w=o.x*f+f;C=o.y*g+g;t=0;for(D=o.material.length;t<D;t++){u=o.material[t];if(u instanceof THREE.ParticleDOMMaterial){u=u.domElement;u.style.left=w+"px";u.style.top=C+"px"}}}}}};
-THREE.CanvasRenderer=function(){function a(ma){if(o!=ma)l.globalAlpha=o=ma}function b(ma){if(u!=ma){switch(ma){case THREE.NormalBlending:l.globalCompositeOperation="source-over";break;case THREE.AdditiveBlending:l.globalCompositeOperation="lighter";break;case THREE.SubtractiveBlending:l.globalCompositeOperation="darker"}u=ma}}var d=null,e=new THREE.Projector,f=document.createElement("canvas"),g,k,c,j,l=f.getContext("2d"),t=null,D=null,o=1,u=0,w=null,C=null,H=1,v,I,m,h,n,B,q,z,M,p=new THREE.Color,
+THREE.CanvasRenderer=function(){function a(ma){if(o!=ma)l.globalAlpha=o=ma}function b(ma){if(u!=ma){switch(ma){case THREE.NormalBlending:l.globalCompositeOperation="source-over";break;case THREE.AdditiveBlending:l.globalCompositeOperation="lighter";break;case THREE.SubtractiveBlending:l.globalCompositeOperation="darker"}u=ma}}var d=null,e=new THREE.Projector,f=document.createElement("canvas"),g,k,c,j,l=f.getContext("2d"),t=new THREE.Color(0),D=0,o=1,u=0,w=null,C=null,H=1,v,I,m,h,n,B,q,z,M,p=new THREE.Color,
 A=new THREE.Color,F=new THREE.Color,E=new THREE.Color,y=new THREE.Color,O,K,U,W,P,da,X,R,T,ba=new THREE.Rectangle,Y=new THREE.Rectangle,G=new THREE.Rectangle,S=false,V=new THREE.Color,ia=new THREE.Color,ha=new THREE.Color,x=new THREE.Color,L=Math.PI*2,J=new THREE.Vector3,Z,ca,ga,ja,qa,sa,ya=16;Z=document.createElement("canvas");Z.width=Z.height=2;ca=Z.getContext("2d");ca.fillStyle="rgba(0,0,0,1)";ca.fillRect(0,0,2,2);ga=ca.getImageData(0,0,2,2);ja=ga.data;qa=document.createElement("canvas");qa.width=
-qa.height=ya;sa=qa.getContext("2d");sa.translate(-ya/2,-ya/2);sa.scale(ya,ya);ya--;this.domElement=f;this.sortElements=this.sortObjects=this.autoClear=true;this.setSize=function(ma,wa){g=ma;k=wa;c=g/2;j=k/2;f.width=g;f.height=k;ba.set(-c,-j,c,j);o=1;u=0;C=w=null;H=1};this.setClearColor=function(ma,wa){t=ma!==null?new THREE.Color(ma):null;D=wa;Y.set(-c,-j,c,j);l.setTransform(1,0,0,-1,c,j);this.clear()};this.clear=function(){if(!Y.isEmpty()){Y.inflate(1);Y.minSelf(ba);if(t!==null){b(THREE.NormalBlending);
-a(1);l.fillStyle="rgba("+Math.floor(t.r*255)+","+Math.floor(t.g*255)+","+Math.floor(t.b*255)+","+D+")";l.fillRect(Y.getX(),Y.getY(),Y.getWidth(),Y.getHeight())}else l.clearRect(Y.getX(),Y.getY(),Y.getWidth(),Y.getHeight());Y.empty()}};this.render=function(ma,wa){function Pa(N){var ea,aa,Q,$=N.lights;ia.setRGB(0,0,0);ha.setRGB(0,0,0);x.setRGB(0,0,0);N=0;for(ea=$.length;N<ea;N++){aa=$[N];Q=aa.color;if(aa instanceof THREE.AmbientLight){ia.r+=Q.r;ia.g+=Q.g;ia.b+=Q.b}else if(aa instanceof THREE.DirectionalLight){ha.r+=
-Q.r;ha.g+=Q.g;ha.b+=Q.b}else if(aa instanceof THREE.PointLight){x.r+=Q.r;x.g+=Q.g;x.b+=Q.b}}}function Da(N,ea,aa,Q){var $,fa,la,na,oa=N.lights;N=0;for($=oa.length;N<$;N++){fa=oa[N];la=fa.color;na=fa.intensity;if(fa instanceof THREE.DirectionalLight){fa=aa.dot(fa.position)*na;if(fa>0){Q.r+=la.r*fa;Q.g+=la.g*fa;Q.b+=la.b*fa}}else if(fa instanceof THREE.PointLight){J.sub(fa.position,ea);J.normalize();fa=aa.dot(J)*na;if(fa>0){Q.r+=la.r*fa;Q.g+=la.g*fa;Q.b+=la.b*fa}}}}function Qa(N,ea,aa){if(aa.opacity!=
-0){a(aa.opacity);b(aa.blending);var Q,$,fa,la,na,oa;if(aa instanceof THREE.ParticleBasicMaterial){if(aa.map){la=aa.map;na=la.width>>1;oa=la.height>>1;$=ea.scale.x*c;fa=ea.scale.y*j;aa=$*na;Q=fa*oa;G.set(N.x-aa,N.y-Q,N.x+aa,N.y+Q);if(ba.instersects(G)){l.save();l.translate(N.x,N.y);l.rotate(-ea.rotation);l.scale($,-fa);l.translate(-na,-oa);l.drawImage(la,0,0);l.restore()}}}else if(aa instanceof THREE.ParticleCircleMaterial){if(S){V.r=ia.r+ha.r+x.r;V.g=ia.g+ha.g+x.g;V.b=ia.b+ha.b+x.b;p.r=aa.color.r*
-V.r;p.g=aa.color.g*V.g;p.b=aa.color.b*V.b;p.updateStyleString()}else p.__styleString=aa.color.__styleString;aa=ea.scale.x*c;Q=ea.scale.y*j;G.set(N.x-aa,N.y-Q,N.x+aa,N.y+Q);if(ba.instersects(G)){$=p.__styleString;if(C!=$)l.fillStyle=C=$;l.save();l.translate(N.x,N.y);l.rotate(-ea.rotation);l.scale(aa,Q);l.beginPath();l.arc(0,0,1,0,L,true);l.closePath();l.fill();l.restore()}}}}function Ra(N,ea,aa,Q){if(Q.opacity!=0){a(Q.opacity);b(Q.blending);l.beginPath();l.moveTo(N.positionScreen.x,N.positionScreen.y);
-l.lineTo(ea.positionScreen.x,ea.positionScreen.y);l.closePath();if(Q instanceof THREE.LineBasicMaterial){p.__styleString=Q.color.__styleString;N=Q.linewidth;if(H!=N)l.lineWidth=H=N;N=p.__styleString;if(w!=N)l.strokeStyle=w=N;l.stroke();G.inflate(Q.linewidth*2)}}}function La(N,ea,aa,Q,$,fa){if($.opacity!=0){a($.opacity);b($.blending);h=N.positionScreen.x;n=N.positionScreen.y;B=ea.positionScreen.x;q=ea.positionScreen.y;z=aa.positionScreen.x;M=aa.positionScreen.y;l.beginPath();l.moveTo(h,n);l.lineTo(B,
-q);l.lineTo(z,M);l.lineTo(h,n);l.closePath();if($ instanceof THREE.MeshBasicMaterial)if($.map)$.map.image.loaded&&$.map.mapping instanceof THREE.UVMapping&&Aa(h,n,B,q,z,M,$.map.image,Q.uvs[0].u,Q.uvs[0].v,Q.uvs[1].u,Q.uvs[1].v,Q.uvs[2].u,Q.uvs[2].v);else if($.env_map){if($.env_map.image.loaded)if($.env_map.mapping instanceof THREE.SphericalReflectionMapping){N=wa.matrix;J.copy(Q.vertexNormalsWorld[0]);W=(J.x*N.n11+J.y*N.n12+J.z*N.n13)*0.5+0.5;P=-(J.x*N.n21+J.y*N.n22+J.z*N.n23)*0.5+0.5;J.copy(Q.vertexNormalsWorld[1]);
-da=(J.x*N.n11+J.y*N.n12+J.z*N.n13)*0.5+0.5;X=-(J.x*N.n21+J.y*N.n22+J.z*N.n23)*0.5+0.5;J.copy(Q.vertexNormalsWorld[2]);R=(J.x*N.n11+J.y*N.n12+J.z*N.n13)*0.5+0.5;T=-(J.x*N.n21+J.y*N.n22+J.z*N.n23)*0.5+0.5;Aa(h,n,B,q,z,M,$.env_map.image,W,P,da,X,R,T)}}else $.wireframe?Ea($.color.__styleString,$.wireframe_linewidth):Fa($.color.__styleString);else if($ instanceof THREE.MeshLambertMaterial){if($.map&&!$.wireframe){$.map.mapping instanceof THREE.UVMapping&&Aa(h,n,B,q,z,M,$.map.image,Q.uvs[0].u,Q.uvs[0].v,
-Q.uvs[1].u,Q.uvs[1].v,Q.uvs[2].u,Q.uvs[2].v);b(THREE.SubtractiveBlending)}if(S)if(!$.wireframe&&$.shading==THREE.SmoothShading&&Q.vertexNormalsWorld.length==3){A.r=F.r=E.r=ia.r;A.g=F.g=E.g=ia.g;A.b=F.b=E.b=ia.b;Da(fa,Q.v1.positionWorld,Q.vertexNormalsWorld[0],A);Da(fa,Q.v2.positionWorld,Q.vertexNormalsWorld[1],F);Da(fa,Q.v3.positionWorld,Q.vertexNormalsWorld[2],E);y.r=(F.r+E.r)*0.5;y.g=(F.g+E.g)*0.5;y.b=(F.b+E.b)*0.5;U=Ma(A,F,E,y);Aa(h,n,B,q,z,M,U,0,0,1,0,0,1)}else{V.r=ia.r;V.g=ia.g;V.b=ia.b;Da(fa,
-Q.centroidWorld,Q.normalWorld,V);p.r=$.color.r*V.r;p.g=$.color.g*V.g;p.b=$.color.b*V.b;p.updateStyleString();$.wireframe?Ea(p.__styleString,$.wireframe_linewidth):Fa(p.__styleString)}else $.wireframe?Ea($.color.__styleString,$.wireframe_linewidth):Fa($.color.__styleString)}else if($ instanceof THREE.MeshDepthMaterial){O=wa.near;K=wa.far;A.r=A.g=A.b=1-Ha(N.positionScreen.z,O,K);F.r=F.g=F.b=1-Ha(ea.positionScreen.z,O,K);E.r=E.g=E.b=1-Ha(aa.positionScreen.z,O,K);y.r=(F.r+E.r)*0.5;y.g=(F.g+E.g)*0.5;y.b=
-(F.b+E.b)*0.5;U=Ma(A,F,E,y);Aa(h,n,B,q,z,M,U,0,0,1,0,0,1)}else if($ instanceof THREE.MeshNormalMaterial){p.r=Ia(Q.normalWorld.x);p.g=Ia(Q.normalWorld.y);p.b=Ia(Q.normalWorld.z);p.updateStyleString();$.wireframe?Ea(p.__styleString,$.wireframe_linewidth):Fa(p.__styleString)}}}function Ea(N,ea){if(w!=N)l.strokeStyle=w=N;if(H!=ea)l.lineWidth=H=ea;l.stroke();G.inflate(ea*2)}function Fa(N){if(C!=N)l.fillStyle=C=N;l.fill()}function Aa(N,ea,aa,Q,$,fa,la,na,oa,ta,pa,ua,Ba){var xa,va;xa=la.width-1;va=la.height-
-1;na*=xa;oa*=va;ta*=xa;pa*=va;ua*=xa;Ba*=va;aa-=N;Q-=ea;$-=N;fa-=ea;ta-=na;pa-=oa;ua-=na;Ba-=oa;va=1/(ta*Ba-ua*pa);xa=(Ba*aa-pa*$)*va;pa=(Ba*Q-pa*fa)*va;aa=(ta*$-ua*aa)*va;Q=(ta*fa-ua*Q)*va;N=N-xa*na-aa*oa;ea=ea-pa*na-Q*oa;l.save();l.transform(xa,pa,aa,Q,N,ea);l.clip();l.drawImage(la,0,0);l.restore()}function Ma(N,ea,aa,Q){var $=~~(N.r*255),fa=~~(N.g*255);N=~~(N.b*255);var la=~~(ea.r*255),na=~~(ea.g*255);ea=~~(ea.b*255);var oa=~~(aa.r*255),ta=~~(aa.g*255);aa=~~(aa.b*255);var pa=~~(Q.r*255),ua=~~(Q.g*
-255);Q=~~(Q.b*255);ja[0]=$<0?0:$>255?255:$;ja[1]=fa<0?0:fa>255?255:fa;ja[2]=N<0?0:N>255?255:N;ja[4]=la<0?0:la>255?255:la;ja[5]=na<0?0:na>255?255:na;ja[6]=ea<0?0:ea>255?255:ea;ja[8]=oa<0?0:oa>255?255:oa;ja[9]=ta<0?0:ta>255?255:ta;ja[10]=aa<0?0:aa>255?255:aa;ja[12]=pa<0?0:pa>255?255:pa;ja[13]=ua<0?0:ua>255?255:ua;ja[14]=Q<0?0:Q>255?255:Q;ca.putImageData(ga,0,0);sa.drawImage(Z,0,0);return qa}function Ha(N,ea,aa){N=(N-ea)/(aa-ea);return N*N*(3-2*N)}function Ia(N){N=(N+1)*0.5;return N<0?0:N>1?1:N}function Ja(N,
+qa.height=ya;sa=qa.getContext("2d");sa.translate(-ya/2,-ya/2);sa.scale(ya,ya);ya--;this.domElement=f;this.sortElements=this.sortObjects=this.autoClear=true;this.setSize=function(ma,wa){g=ma;k=wa;c=g/2;j=k/2;f.width=g;f.height=k;ba.set(-c,-j,c,j);o=1;u=0;C=w=null;H=1};this.setClearColor=function(ma,wa){t.setHex(ma);D=wa;Y.set(-c,-j,c,j);l.setTransform(1,0,0,-1,c,j);this.clear()};this.clear=function(){if(!Y.isEmpty()){Y.inflate(1);Y.minSelf(ba);if(t.hex==0&&D==0)l.clearRect(Y.getX(),Y.getY(),Y.getWidth(),
+Y.getHeight());else{b(THREE.NormalBlending);a(1);l.fillStyle="rgba("+Math.floor(t.r*255)+","+Math.floor(t.g*255)+","+Math.floor(t.b*255)+","+D+")";l.fillRect(Y.getX(),Y.getY(),Y.getWidth(),Y.getHeight())}Y.empty()}};this.render=function(ma,wa){function Pa(N){var ea,aa,Q,$=N.lights;ia.setRGB(0,0,0);ha.setRGB(0,0,0);x.setRGB(0,0,0);N=0;for(ea=$.length;N<ea;N++){aa=$[N];Q=aa.color;if(aa instanceof THREE.AmbientLight){ia.r+=Q.r;ia.g+=Q.g;ia.b+=Q.b}else if(aa instanceof THREE.DirectionalLight){ha.r+=Q.r;
+ha.g+=Q.g;ha.b+=Q.b}else if(aa instanceof THREE.PointLight){x.r+=Q.r;x.g+=Q.g;x.b+=Q.b}}}function Da(N,ea,aa,Q){var $,fa,la,na,oa=N.lights;N=0;for($=oa.length;N<$;N++){fa=oa[N];la=fa.color;na=fa.intensity;if(fa instanceof THREE.DirectionalLight){fa=aa.dot(fa.position)*na;if(fa>0){Q.r+=la.r*fa;Q.g+=la.g*fa;Q.b+=la.b*fa}}else if(fa instanceof THREE.PointLight){J.sub(fa.position,ea);J.normalize();fa=aa.dot(J)*na;if(fa>0){Q.r+=la.r*fa;Q.g+=la.g*fa;Q.b+=la.b*fa}}}}function Qa(N,ea,aa){if(aa.opacity!=0){a(aa.opacity);
+b(aa.blending);var Q,$,fa,la,na,oa;if(aa instanceof THREE.ParticleBasicMaterial){if(aa.map){la=aa.map;na=la.width>>1;oa=la.height>>1;$=ea.scale.x*c;fa=ea.scale.y*j;aa=$*na;Q=fa*oa;G.set(N.x-aa,N.y-Q,N.x+aa,N.y+Q);if(ba.instersects(G)){l.save();l.translate(N.x,N.y);l.rotate(-ea.rotation);l.scale($,-fa);l.translate(-na,-oa);l.drawImage(la,0,0);l.restore()}}}else if(aa instanceof THREE.ParticleCircleMaterial){if(S){V.r=ia.r+ha.r+x.r;V.g=ia.g+ha.g+x.g;V.b=ia.b+ha.b+x.b;p.r=aa.color.r*V.r;p.g=aa.color.g*
+V.g;p.b=aa.color.b*V.b;p.updateStyleString()}else p.__styleString=aa.color.__styleString;aa=ea.scale.x*c;Q=ea.scale.y*j;G.set(N.x-aa,N.y-Q,N.x+aa,N.y+Q);if(ba.instersects(G)){$=p.__styleString;if(C!=$)l.fillStyle=C=$;l.save();l.translate(N.x,N.y);l.rotate(-ea.rotation);l.scale(aa,Q);l.beginPath();l.arc(0,0,1,0,L,true);l.closePath();l.fill();l.restore()}}}}function Ra(N,ea,aa,Q){if(Q.opacity!=0){a(Q.opacity);b(Q.blending);l.beginPath();l.moveTo(N.positionScreen.x,N.positionScreen.y);l.lineTo(ea.positionScreen.x,
+ea.positionScreen.y);l.closePath();if(Q instanceof THREE.LineBasicMaterial){p.__styleString=Q.color.__styleString;N=Q.linewidth;if(H!=N)l.lineWidth=H=N;N=p.__styleString;if(w!=N)l.strokeStyle=w=N;l.stroke();G.inflate(Q.linewidth*2)}}}function La(N,ea,aa,Q,$,fa){if($.opacity!=0){a($.opacity);b($.blending);h=N.positionScreen.x;n=N.positionScreen.y;B=ea.positionScreen.x;q=ea.positionScreen.y;z=aa.positionScreen.x;M=aa.positionScreen.y;l.beginPath();l.moveTo(h,n);l.lineTo(B,q);l.lineTo(z,M);l.lineTo(h,
+n);l.closePath();if($ instanceof THREE.MeshBasicMaterial)if($.map)$.map.image.loaded&&$.map.mapping instanceof THREE.UVMapping&&Aa(h,n,B,q,z,M,$.map.image,Q.uvs[0].u,Q.uvs[0].v,Q.uvs[1].u,Q.uvs[1].v,Q.uvs[2].u,Q.uvs[2].v);else if($.env_map){if($.env_map.image.loaded)if($.env_map.mapping instanceof THREE.SphericalReflectionMapping){N=wa.matrix;J.copy(Q.vertexNormalsWorld[0]);W=(J.x*N.n11+J.y*N.n12+J.z*N.n13)*0.5+0.5;P=-(J.x*N.n21+J.y*N.n22+J.z*N.n23)*0.5+0.5;J.copy(Q.vertexNormalsWorld[1]);da=(J.x*
+N.n11+J.y*N.n12+J.z*N.n13)*0.5+0.5;X=-(J.x*N.n21+J.y*N.n22+J.z*N.n23)*0.5+0.5;J.copy(Q.vertexNormalsWorld[2]);R=(J.x*N.n11+J.y*N.n12+J.z*N.n13)*0.5+0.5;T=-(J.x*N.n21+J.y*N.n22+J.z*N.n23)*0.5+0.5;Aa(h,n,B,q,z,M,$.env_map.image,W,P,da,X,R,T)}}else $.wireframe?Ea($.color.__styleString,$.wireframe_linewidth):Fa($.color.__styleString);else if($ instanceof THREE.MeshLambertMaterial){if($.map&&!$.wireframe){$.map.mapping instanceof THREE.UVMapping&&Aa(h,n,B,q,z,M,$.map.image,Q.uvs[0].u,Q.uvs[0].v,Q.uvs[1].u,
+Q.uvs[1].v,Q.uvs[2].u,Q.uvs[2].v);b(THREE.SubtractiveBlending)}if(S)if(!$.wireframe&&$.shading==THREE.SmoothShading&&Q.vertexNormalsWorld.length==3){A.r=F.r=E.r=ia.r;A.g=F.g=E.g=ia.g;A.b=F.b=E.b=ia.b;Da(fa,Q.v1.positionWorld,Q.vertexNormalsWorld[0],A);Da(fa,Q.v2.positionWorld,Q.vertexNormalsWorld[1],F);Da(fa,Q.v3.positionWorld,Q.vertexNormalsWorld[2],E);y.r=(F.r+E.r)*0.5;y.g=(F.g+E.g)*0.5;y.b=(F.b+E.b)*0.5;U=Ma(A,F,E,y);Aa(h,n,B,q,z,M,U,0,0,1,0,0,1)}else{V.r=ia.r;V.g=ia.g;V.b=ia.b;Da(fa,Q.centroidWorld,
+Q.normalWorld,V);p.r=$.color.r*V.r;p.g=$.color.g*V.g;p.b=$.color.b*V.b;p.updateStyleString();$.wireframe?Ea(p.__styleString,$.wireframe_linewidth):Fa(p.__styleString)}else $.wireframe?Ea($.color.__styleString,$.wireframe_linewidth):Fa($.color.__styleString)}else if($ instanceof THREE.MeshDepthMaterial){O=wa.near;K=wa.far;A.r=A.g=A.b=1-Ha(N.positionScreen.z,O,K);F.r=F.g=F.b=1-Ha(ea.positionScreen.z,O,K);E.r=E.g=E.b=1-Ha(aa.positionScreen.z,O,K);y.r=(F.r+E.r)*0.5;y.g=(F.g+E.g)*0.5;y.b=(F.b+E.b)*0.5;
+U=Ma(A,F,E,y);Aa(h,n,B,q,z,M,U,0,0,1,0,0,1)}else if($ instanceof THREE.MeshNormalMaterial){p.r=Ia(Q.normalWorld.x);p.g=Ia(Q.normalWorld.y);p.b=Ia(Q.normalWorld.z);p.updateStyleString();$.wireframe?Ea(p.__styleString,$.wireframe_linewidth):Fa(p.__styleString)}}}function Ea(N,ea){if(w!=N)l.strokeStyle=w=N;if(H!=ea)l.lineWidth=H=ea;l.stroke();G.inflate(ea*2)}function Fa(N){if(C!=N)l.fillStyle=C=N;l.fill()}function Aa(N,ea,aa,Q,$,fa,la,na,oa,ta,pa,ua,Ba){var xa,va;xa=la.width-1;va=la.height-1;na*=xa;
+oa*=va;ta*=xa;pa*=va;ua*=xa;Ba*=va;aa-=N;Q-=ea;$-=N;fa-=ea;ta-=na;pa-=oa;ua-=na;Ba-=oa;va=1/(ta*Ba-ua*pa);xa=(Ba*aa-pa*$)*va;pa=(Ba*Q-pa*fa)*va;aa=(ta*$-ua*aa)*va;Q=(ta*fa-ua*Q)*va;N=N-xa*na-aa*oa;ea=ea-pa*na-Q*oa;l.save();l.transform(xa,pa,aa,Q,N,ea);l.clip();l.drawImage(la,0,0);l.restore()}function Ma(N,ea,aa,Q){var $=~~(N.r*255),fa=~~(N.g*255);N=~~(N.b*255);var la=~~(ea.r*255),na=~~(ea.g*255);ea=~~(ea.b*255);var oa=~~(aa.r*255),ta=~~(aa.g*255);aa=~~(aa.b*255);var pa=~~(Q.r*255),ua=~~(Q.g*255);
+Q=~~(Q.b*255);ja[0]=$<0?0:$>255?255:$;ja[1]=fa<0?0:fa>255?255:fa;ja[2]=N<0?0:N>255?255:N;ja[4]=la<0?0:la>255?255:la;ja[5]=na<0?0:na>255?255:na;ja[6]=ea<0?0:ea>255?255:ea;ja[8]=oa<0?0:oa>255?255:oa;ja[9]=ta<0?0:ta>255?255:ta;ja[10]=aa<0?0:aa>255?255:aa;ja[12]=pa<0?0:pa>255?255:pa;ja[13]=ua<0?0:ua>255?255:ua;ja[14]=Q<0?0:Q>255?255:Q;ca.putImageData(ga,0,0);sa.drawImage(Z,0,0);return qa}function Ha(N,ea,aa){N=(N-ea)/(aa-ea);return N*N*(3-2*N)}function Ia(N){N=(N+1)*0.5;return N<0?0:N>1?1:N}function Ja(N,
 ea){var aa=ea.x-N.x,Q=ea.y-N.y,$=1/Math.sqrt(aa*aa+Q*Q);aa*=$;Q*=$;ea.x+=aa;ea.y+=Q;N.x-=aa;N.y-=Q}var Ga,Na,ka,ra,za,Ka,Oa,Ca;l.setTransform(1,0,0,-1,c,j);this.autoClear&&this.clear();d=e.projectScene(ma,wa,this.sortElements);(S=ma.lights.length>0)&&Pa(ma);Ga=0;for(Na=d.length;Ga<Na;Ga++){ka=d[Ga];G.empty();if(ka instanceof THREE.RenderableParticle){v=ka;v.x*=c;v.y*=j;ra=0;for(za=ka.materials.length;ra<za;ra++)Qa(v,ka,ka.materials[ra],ma)}else if(ka instanceof THREE.RenderableLine){v=ka.v1;I=ka.v2;
 v.positionScreen.x*=c;v.positionScreen.y*=j;I.positionScreen.x*=c;I.positionScreen.y*=j;G.addPoint(v.positionScreen.x,v.positionScreen.y);G.addPoint(I.positionScreen.x,I.positionScreen.y);if(ba.instersects(G)){ra=0;for(za=ka.materials.length;ra<za;)Ra(v,I,ka,ka.materials[ra++],ma)}}else if(ka instanceof THREE.RenderableFace3){v=ka.v1;I=ka.v2;m=ka.v3;v.positionScreen.x*=c;v.positionScreen.y*=j;I.positionScreen.x*=c;I.positionScreen.y*=j;m.positionScreen.x*=c;m.positionScreen.y*=j;if(ka.overdraw){Ja(v.positionScreen,
 I.positionScreen);Ja(I.positionScreen,m.positionScreen);Ja(m.positionScreen,v.positionScreen)}G.add3Points(v.positionScreen.x,v.positionScreen.y,I.positionScreen.x,I.positionScreen.y,m.positionScreen.x,m.positionScreen.y);if(ba.instersects(G)){ra=0;for(za=ka.meshMaterials.length;ra<za;){Ca=ka.meshMaterials[ra++];if(Ca instanceof THREE.MeshFaceMaterial){Ka=0;for(Oa=ka.faceMaterials.length;Ka<Oa;)(Ca=ka.faceMaterials[Ka++])&&La(v,I,m,ka,Ca,ma)}else La(v,I,m,ka,Ca,ma)}}}Y.addRectangle(G)}l.setTransform(1,

src/renderers/CanvasRenderer.js

@@ -11,8 +11,8 @@ THREE.CanvasRenderer = function () {
 	_canvasWidth, _canvasHeight, _canvasWidthHalf, _canvasHeightHalf,
 	_context = _canvas.getContext( '2d' ),
 
-	_clearColor = null,
-	_clearOpacity = null,
+	_clearColor = new THREE.Color( 0x000000 ),
+	_clearOpacity = 0,
 
 	_contextGlobalAlpha = 1,
 	_contextGlobalCompositeOperation = 0,
@@ -96,7 +96,7 @@ THREE.CanvasRenderer = function () {
 
 	this.setClearColor = function( hex, opacity ) {
 
-		_clearColor = hex !== null ? new THREE.Color( hex ) : null;
+		_clearColor.setHex( hex );
 		_clearOpacity = opacity;
 
 		_clearRect.set( - _canvasWidthHalf, - _canvasHeightHalf, _canvasWidthHalf, _canvasHeightHalf );
@@ -111,7 +111,11 @@ THREE.CanvasRenderer = function () {
 			_clearRect.inflate( 1 );
 			_clearRect.minSelf( _clipRect );
 
-			if ( _clearColor !== null ) {
+			if ( _clearColor.hex == 0x000000 && _clearOpacity == 0 ) {
+
+				_context.clearRect( _clearRect.getX(), _clearRect.getY(), _clearRect.getWidth(), _clearRect.getHeight() );
+
+			} else {
 
 				setBlending( THREE.NormalBlending );
 				setOpacity( 1 );
@@ -119,10 +123,6 @@ THREE.CanvasRenderer = function () {
 				_context.fillStyle = 'rgba(' + Math.floor( _clearColor.r * 255 ) + ',' + Math.floor( _clearColor.g * 255 ) + ',' + Math.floor( _clearColor.b * 255 ) + ',' + _clearOpacity + ')';
 				_context.fillRect( _clearRect.getX(), _clearRect.getY(), _clearRect.getWidth(), _clearRect.getHeight() );
 
-			} else {
-
-				_context.clearRect( _clearRect.getX(), _clearRect.getY(), _clearRect.getWidth(), _clearRect.getHeight() );
-
 			}
 
 			_clearRect.empty();

src/renderers/WebGLRenderer2.js

@@ -12,7 +12,12 @@ THREE.WebGLRenderer2 = function ( antialias ) {
 	_projector = new THREE.Projector(),
 
 	_canvas = document.createElement( 'canvas' ),
+
+	_clearColor = new THREE.Color( 0x000000 ),
+	_clearOpacity = 0,
+
 	_gl, _currentProgram,
+
 	_modelViewMatrix = new THREE.Matrix4(),
 	_normalMatrix = new THREE.Matrix4(),
 	_viewMatrixArray = new Float32Array( 16 ),
@@ -47,7 +52,7 @@ THREE.WebGLRenderer2 = function ( antialias ) {
 
 	_gl.enable( _gl.BLEND );
 	_gl.blendFunc( _gl.ONE, _gl.ONE_MINUS_SRC_ALPHA );
-	_gl.clearColor( 0, 0, 0, 0 );
+	_gl.clearColor( _clearColor.r, _clearColor.g, _clearColor.b, _clearOpacity );
 
 	this.domElement = _canvas;
 
@@ -62,6 +67,15 @@ THREE.WebGLRenderer2 = function ( antialias ) {
 
 	};
 
+	this.setClearColor = function( hex, opacity ) {
+
+		_clearColor = hex.setHex( hex );
+		_clearOpacity = opacity;
+
+		_gl.clearColor( _clearColor.r, _clearColor.g, _clearColor.b, _clearOpacity );
+
+	};
+
 	this.clear = function () {
 
 		_gl.clear( _gl.COLOR_BUFFER_BIT | _gl.DEPTH_BUFFER_BIT );