From 530f87070fe7bc4ebb7571fbb11ba35b49f347f2 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Mon, 17 May 2010 11:36:27 +0100 Subject: [PATCH] 2d clipping on CanvasRenderer and SVGRenderer clearRect optimisations on CanvasRenderer --- README.md | 9 ++- build/three.js | 4 +- src/core/Rectangle.js | 124 ++++++++++++++++++++++++++++++ src/renderers/CanvasRenderer.js | 130 +++++++++++++++++++++++--------- src/renderers/SVGRenderer.js | 95 +++++++++++++++++------ utils/deployer.py | 3 +- 6 files changed, 300 insertions(+), 65 deletions(-) create mode 100644 src/core/Rectangle.js diff --git a/README.md b/README.md index 7433cf0ca2..5a6506cce1 100644 --- a/README.md +++ b/README.md @@ -76,7 +76,8 @@ If you are interested on messing with the actual library, instead of importing t - + + @@ -101,6 +102,12 @@ If you are interested on messing with the actual library, instead of importing t ### Change Log ### +2010 05 17 - **r6** (21.003 kb) + +* 2d clipping on CanvasRenderer and SVGRenderer +* clearRect optimisations on CanvasRenderer + + 2010 05 16 - **r5** (19.026 kb) * Removed Class.js dependency diff --git a/build/three.js b/build/three.js index a1860570fc..08ac27a835 100644 --- a/build/three.js +++ b/build/three.js @@ -1,2 +1,2 @@ -// three.js r5 - http://github.com/mrdoob/three.js -var THREE=THREE||{};THREE.Color=function(c){var f,e,a,b,d;this.styleString;this.setHex=function(g){d=g;this.updateRGBA();this.updateStyleString()};this.setRGBA=function(k,j,h,i){f=k;e=j;a=h;b=i;this.updateHex();this.updateStyleString()};this.updateHex=function(){d=b<<24|f<<16|e<<8|a};this.updateRGBA=function(){f=d>>16&255;e=d>>8&255;a=d&255;b=d>>24&255};this.updateStyleString=function(){this.styleString="rgba("+f+","+e+","+a+","+(b/255)+")"};this.toString=function(){return"THREE.Color ( r: "+f+", g: "+e+", b: "+a+", a: "+b+", hex: "+d+", style: "+this.styleString+" )"};this.setHex(c)};THREE.Vector2=function(a,b){this.x=a||0;this.y=b||0;this.set=function(c,d){this.x=c;this.y=d};this.copy=function(c){this.x=c.x;this.y=c.y};this.addSelf=function(c){this.x+=c.x;this.y+=c.y};this.add=function(d,c){this.x=d.x+c.x;this.y=d.y+c.y};this.subSelf=function(c){this.x-=c.x;this.y-=c.y};this.sub=function(d,c){this.x=d.x-c.x;this.y=d.y-c.y};this.multiplyScalar=function(c){this.x*=c;this.y*=c};this.unit=function(){this.multiply(1/this.length())};this.expand=function(d,c){this.unit(this.sub(c,d));c.addSelf(this)};this.length=function(){return Math.sqrt(this.x*this.x+this.y*this.y)};this.lengthSq=function(){return this.x*this.x+this.y*this.y};this.negate=function(){this.x=-this.x;this.y=-this.y};this.clone=function(){return new THREE.Vector2(this.x,this.y)};this.toString=function(){return"THREE.Vector2 ("+this.x+", "+this.y+")"}};THREE.Vector3=function(a,c,b){this.x=a||0;this.y=c||0;this.z=b||0;this.set=function(d,f,e){this.x=d;this.y=f;this.z=e};this.copy=function(d){this.x=d.x;this.y=d.y;this.z=d.z};this.add=function(e,d){this.x=e.x+d.x;this.y=e.y+d.y;this.z=e.z+d.z};this.addSelf=function(d){this.x+=d.x;this.y+=d.y;this.z+=d.z};this.addScalar=function(d){this.x+=d;this.y+=d;this.z+=d};this.sub=function(e,d){this.x=e.x-d.x;this.y=e.y-d.y;this.z=e.z-d.z};this.subSelf=function(d){this.x-=d.x;this.y-=d.y;this.z-=d.z};this.crossSelf=function(f){var e=this.x,d=this.y,g=this.z;this.x=d*f.z-g*f.y;this.y=g*f.x-e*f.z;this.z=e*f.y-d*f.x};this.multiplySelf=function(d){this.x*=d.x;this.y*=d.y;this.z*=d.z};this.multiplyScalar=function(d){this.x*=d;this.y*=d;this.z*=d};this.dot=function(d){return this.x*d.x+this.y*d.y+this.z*d.z};this.distanceTo=function(g){var f=this.x-g.x,e=this.y-g.y,d=this.z-g.z;return Math.sqrt(f*f+e*e+d*d)};this.distanceToSquared=function(g){var f=this.x-g.x,e=this.y-g.y,d=this.z-g.z;return f*f+e*e+d*d};this.length=function(){return Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z)};this.lengthSq=function(){return this.x*this.x+this.y*this.y+this.z*this.z};this.negate=function(){this.x=-this.x;this.y=-this.y;this.z=-this.z};this.normalize=function(){if(this.length()>0){this.multiplyScalar(1/this.length())}else{this.multiplyScalar(0)}};this.isZero=function(){var d=0.0001;return(Math.abs(this.x)0;w.screen.x*=w.screen.z;w.screen.y*=w.screen.z}f=y.geometry.faces.length;for(q=0;q0)){n.screen.z=(l.screen.z+k.screen.z+h.screen.z)*0.3;if(e[p]==null){e[p]=new THREE.RenderableFace3()}e[p].v1.x=l.screen.x;e[p].v1.y=l.screen.y;e[p].v2.x=k.screen.x;e[p].v2.y=k.screen.y;e[p].v3.x=h.screen.x;e[p].v3.y=h.screen.y;e[p].screenZ=n.screen.z;e[p].color=n.color;e[p].material=y.material;this.renderList.push(e[p]);p++}}else{if(n instanceof THREE.Face4){l=y.geometry.vertices[n.a];k=y.geometry.vertices[n.b];h=y.geometry.vertices[n.c];g=y.geometry.vertices[n.d];if(l.visible&&k.visible&&h.visible&&g.visible&&(y.doubleSided||((g.screen.x-l.screen.x)*(k.screen.y-l.screen.y)-(g.screen.y-l.screen.y)*(k.screen.x-l.screen.x)>0||(k.screen.x-h.screen.x)*(g.screen.y-h.screen.y)-(k.screen.y-h.screen.y)*(g.screen.x-h.screen.x)>0))){n.screen.z=(l.screen.z+k.screen.z+h.screen.z+g.screen.z)*0.25;if(c[u]==null){c[u]=new THREE.RenderableFace4()}c[u].v1.x=l.screen.x;c[u].v1.y=l.screen.y;c[u].v2.x=k.screen.x;c[u].v2.y=k.screen.y;c[u].v3.x=h.screen.x;c[u].v3.y=h.screen.y;c[u].v4.x=g.screen.x;c[u].v4.y=g.screen.y;c[u].screenZ=n.screen.z;c[u].color=n.color;c[u].material=y.material;this.renderList.push(c[u]);u++}}}}}else{if(y instanceof THREE.Particle){y.screen.copy(y.position);v.matrix.transform(y.screen);y.screen.z=o/(t+y.screen.z);if(y.screen.z<0){continue}y.screen.x*=y.screen.z;y.screen.y*=y.screen.z;if(a[r]==null){a[r]=new THREE.RenderableParticle()}a[r].x=y.screen.x;a[r].y=y.screen.y;a[r].screenZ=y.screen.z;a[r].size=y.size;a[r].material=y.material;a[r].color=y.color;this.renderList.push(a[r]);r++}}}this.renderList.sort(d)}};THREE.CanvasRenderer=function(){THREE.Renderer.call(this);var a=document.createElement("canvas"),b=a.getContext("2d");this.setSize=function(d,c){a.width=d;a.height=c;b.setTransform(1,0,0,1,d/2,c/2)};this.domElement=a;this.render=function(f,h){var d,c,e,m=Math.PI*2,g,k,l;b.clearRect(-a.width/2,-a.height/2,a.width,a.height);this.project(f,h);g=this.renderList.length;for(d=0;d0){a.removeChild(a.childNodes[0])}o=this.renderList.length;for(k=0;k>16&255;e=d>>8&255;a=d&255;b=d>>24&255};this.updateStyleString=function(){this.styleString="rgba("+f+","+e+","+a+","+(b/255)+")"};this.toString=function(){return"THREE.Color ( r: "+f+", g: "+e+", b: "+a+", a: "+b+", hex: "+d+", style: "+this.styleString+" )"};this.setHex(c)};THREE.Vector2=function(a,b){this.x=a||0;this.y=b||0;this.set=function(c,d){this.x=c;this.y=d};this.copy=function(c){this.x=c.x;this.y=c.y};this.addSelf=function(c){this.x+=c.x;this.y+=c.y};this.add=function(d,c){this.x=d.x+c.x;this.y=d.y+c.y};this.subSelf=function(c){this.x-=c.x;this.y-=c.y};this.sub=function(d,c){this.x=d.x-c.x;this.y=d.y-c.y};this.multiplyScalar=function(c){this.x*=c;this.y*=c};this.unit=function(){this.multiply(1/this.length())};this.expand=function(d,c){this.unit(this.sub(c,d));c.addSelf(this)};this.length=function(){return Math.sqrt(this.x*this.x+this.y*this.y)};this.lengthSq=function(){return this.x*this.x+this.y*this.y};this.negate=function(){this.x=-this.x;this.y=-this.y};this.clone=function(){return new THREE.Vector2(this.x,this.y)};this.toString=function(){return"THREE.Vector2 ("+this.x+", "+this.y+")"}};THREE.Vector3=function(a,c,b){this.x=a||0;this.y=c||0;this.z=b||0;this.set=function(d,f,e){this.x=d;this.y=f;this.z=e};this.copy=function(d){this.x=d.x;this.y=d.y;this.z=d.z};this.add=function(e,d){this.x=e.x+d.x;this.y=e.y+d.y;this.z=e.z+d.z};this.addSelf=function(d){this.x+=d.x;this.y+=d.y;this.z+=d.z};this.addScalar=function(d){this.x+=d;this.y+=d;this.z+=d};this.sub=function(e,d){this.x=e.x-d.x;this.y=e.y-d.y;this.z=e.z-d.z};this.subSelf=function(d){this.x-=d.x;this.y-=d.y;this.z-=d.z};this.crossSelf=function(f){var e=this.x,d=this.y,g=this.z;this.x=d*f.z-g*f.y;this.y=g*f.x-e*f.z;this.z=e*f.y-d*f.x};this.multiplySelf=function(d){this.x*=d.x;this.y*=d.y;this.z*=d.z};this.multiplyScalar=function(d){this.x*=d;this.y*=d;this.z*=d};this.dot=function(d){return this.x*d.x+this.y*d.y+this.z*d.z};this.distanceTo=function(g){var f=this.x-g.x,e=this.y-g.y,d=this.z-g.z;return Math.sqrt(f*f+e*e+d*d)};this.distanceToSquared=function(g){var f=this.x-g.x,e=this.y-g.y,d=this.z-g.z;return f*f+e*e+d*d};this.length=function(){return Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z)};this.lengthSq=function(){return this.x*this.x+this.y*this.y+this.z*this.z};this.negate=function(){this.x=-this.x;this.y=-this.y;this.z=-this.z};this.normalize=function(){if(this.length()>0){this.multiplyScalar(1/this.length())}else{this.multiplyScalar(0)}};this.isZero=function(){var d=0.0001;return(Math.abs(this.x)0&&Math.min(e,l.getY2())-Math.max(f,l.getY1())>0};this.empty=function(){g=true;j=0;f=0;h=0,e=0;this.resize()};this.toString=function(){return"THREE.Rectangle (x1: "+j+", y1: "+e+", x2: "+h+", y1: "+f+", width: "+c+", height: "+d+")"}};THREE.Matrix4=function(){var a,c,b;a=new THREE.Vector3();c=new THREE.Vector3();b=new THREE.Vector3();this.n11=1;this.n12=0;this.n13=0;this.n14=0;this.n21=0;this.n22=1;this.n23=0;this.n24=0;this.n31=0;this.n32=0;this.n33=1;this.n34=0;this.n41=0;this.n42=0;this.n43=0;this.n44=1;this.identity=function(){this.n11=1;this.n12=0;this.n13=0;this.n14=0;this.n21=0;this.n22=1;this.n23=0;this.n24=0;this.n31=0;this.n32=0;this.n33=1;this.n34=0;this.n41=0;this.n42=0;this.n43=0;this.n44=1};this.lookAt=function(f,e,d){b.sub(e,f);b.normalize();a.copy(b);a.crossSelf(d);a.normalize();c.copy(a);c.crossSelf(b);c.normalize();c.negate();this.n11=a.x;this.n12=a.y;this.n13=a.z;this.n14=-a.dot(f);this.n21=c.x;this.n22=c.y;this.n23=c.z;this.n24=-c.dot(f);this.n31=b.x;this.n32=b.y;this.n33=b.z;this.n34=-b.dot(f)};this.transform=function(d){var g=d.x,f=d.y,e=d.z,h=(d.w?d.w:1);d.x=this.n11*g+this.n12*f+this.n13*e+this.n14*h;d.y=this.n21*g+this.n22*f+this.n23*e+this.n24*h;d.z=this.n31*g+this.n32*f+this.n33*e+this.n34*h;h=this.n41*g+this.n42*f+this.n43*e+this.n44*h;if(d.w){d.w=h}else{d.x=d.x/h;d.y=d.y/h;d.z=d.z/h}};this.crossVector=function(d){var e=new THREE.Vector4();e.x=this.n11*d.x+this.n12*d.y+this.n13*d.z+this.n14*d.w;e.y=this.n21*d.x+this.n22*d.y+this.n23*d.z+this.n24*d.w;e.z=this.n31*d.x+this.n32*d.y+this.n33*d.z+this.n34*d.w;e.w=(d.w)?this.n41*d.x+this.n42*d.y+this.n43*d.z+this.n44*d.w:1;return e};this.multiply=function(e,d){this.n11=e.n11*d.n11+e.n12*d.n21+e.n13*d.n31+e.n14*d.n41;this.n12=e.n11*d.n12+e.n12*d.n22+e.n13*d.n32+e.n14*d.n42;this.n13=e.n11*d.n13+e.n12*d.n23+e.n13*d.n33+e.n14*d.n43;this.n14=e.n11*d.n14+e.n12*d.n24+e.n13*d.n34+e.n14*d.n44;this.n21=e.n21*d.n11+e.n22*d.n21+e.n23*d.n31+e.n24*d.n41;this.n22=e.n21*d.n12+e.n22*d.n22+e.n23*d.n32+e.n24*d.n42;this.n23=e.n21*d.n13+e.n22*d.n23+e.n23*d.n33+e.n24*d.n34;this.n24=e.n21*d.n14+e.n22*d.n24+e.n23*d.n34+e.n24*d.n44;this.n31=e.n31*d.n11+e.n32*d.n21+e.n33*d.n31+e.n34*d.n41;this.n32=e.n31*d.n12+e.n32*d.n22+e.n33*d.n32+e.n34*d.n42;this.n33=e.n31*d.n13+e.n32*d.n23+e.n33*d.n33+e.n34*d.n43;this.n34=e.n31*d.n14+e.n32*d.n24+e.n33*d.n34+e.n34*d.n44;this.n41=e.n41*d.n11+e.n42*d.n21+e.n43*d.n31+e.n44*d.n41;this.n42=e.n41*d.n12+e.n42*d.n22+e.n43*d.n32+e.n44*d.n42;this.n43=e.n41*d.n13+e.n42*d.n23+e.n43*d.n33+e.n44*d.n43;this.n44=e.n41*d.n14+e.n42*d.n24+e.n43*d.n34+e.n44*d.n44};this.multiplySelf=function(f){var r=this.n11,q=this.n12,o=this.n13,l=this.n14,i=this.n21,h=this.n22,g=this.n23,e=this.n24,d=this.n31,u=this.n32,t=this.n33,s=this.n34,p=this.n41,n=this.n42,k=this.n43,j=this.n44;this.n11=r*f.n11+q*f.n21+o*f.n31+l*f.n41;this.n12=r*f.n12+q*f.n22+o*f.n32+l*f.n42;this.n13=r*f.n13+q*f.n23+o*f.n33+l*f.n43;this.n14=r*f.n14+q*f.n24+o*f.n34+l*f.n44;this.n21=i*f.n11+h*f.n21+g*f.n31+e*f.n41;this.n22=i*f.n12+h*f.n22+g*f.n32+e*f.n42;this.n23=i*f.n13+h*f.n23+g*f.n33+e*f.n43;this.n24=i*f.n14+h*f.n24+g*f.n34+e*f.n44;this.n31=d*f.n11+u*f.n21+t*f.n31+s*f.n41;this.n32=d*f.n12+u*f.n22+t*f.n32+s*f.n42;this.n33=d*f.n13+u*f.n23+t*f.n33+s*f.n43;this.n34=d*f.n14+u*f.n24+t*f.n34+s*f.n44;this.n41=p*f.n11+n*f.n21+k*f.n31+j*f.n41;this.n42=p*f.n12+n*f.n22+k*f.n32+j*f.n42;this.n43=p*f.n13+n*f.n23+k*f.n33+j*f.n43;this.n44=p*f.n14+n*f.n24+k*f.n34+j*f.n44};this.clone=function(){var d=new THREE.Matrix4();d.n11=this.n11;d.n12=this.n12;d.n13=this.n13;d.n14=this.n14;d.n21=this.n21;d.n22=this.n22;d.n23=this.n23;d.n24=this.n24;d.n31=this.n31;d.n32=this.n32;d.n33=this.n33;d.n34=this.n34;d.n41=this.n41;d.n42=this.n42;d.n43=this.n43;d.n44=this.n44;return d};this.toString=function(){return"| "+this.n11+" "+this.n12+" "+this.n13+" "+this.n14+" |\n| "+this.n21+" "+this.n22+" "+this.n23+" "+this.n24+" |\n| "+this.n31+" "+this.n32+" "+this.n33+" "+this.n34+" |\n| "+this.n41+" "+this.n42+" "+this.n43+" "+this.n44+" |"}};THREE.Matrix4.translationMatrix=function(b,d,c){var a=new THREE.Matrix4();a.n14=b;a.n24=d;a.n34=c;return a};THREE.Matrix4.scaleMatrix=function(b,d,c){var a=new THREE.Matrix4();a.n11=b;a.n22=d;a.n33=c;return a};THREE.Matrix4.rotationXMatrix=function(b){var a=new THREE.Matrix4();a.n22=a.n33=Math.cos(b);a.n32=Math.sin(b);a.n23=-a.n32;return a};THREE.Matrix4.rotationYMatrix=function(b){var a=new THREE.Matrix4();a.n11=a.n33=Math.cos(b);a.n13=Math.sin(b);a.n31=-a.n13;return a};THREE.Matrix4.rotationZMatrix=function(b){var a=new THREE.Matrix4();a.n11=a.n22=Math.cos(b);a.n21=Math.sin(b);a.n12=-a.n21;return a};THREE.Matrix4.makeFrustum=function(f,r,e,o,i,h){var g=new THREE.Matrix4(),q=2*i/(r-f),n=2*i/(o-e),p=(r+f)/(r-f),l=(o+e)/(o-e),k=-(h+i)/(h-i),j=-2*h*i/(h-i);g.n11=q;g.n13=p;g.n22=n;g.n23=l;g.n33=k;g.n34=j;g.n43=-1;g.n44=0;return g};THREE.Matrix4.makePerspective=function(d,c,g,b){var a=g*Math.tan(d*0.00872664625972),f=-a,h=f*c,e=a*c;return THREE.Matrix4.makeFrustum(h,e,f,a,g,b)};THREE.Vertex=function(a,b){this.position=a||new THREE.Vector3();this.normal=b||new THREE.Vector3();this.screen=new THREE.Vector3();this.visible=true;this.toString=function(){return"THREE.Vertex ( position: "+this.position+", normal: "+this.normal+" )"}};THREE.Face3=function(e,d,i,g,h,f){this.a=e;this.b=d;this.c=i;this.normal=h||new THREE.Vector3();this.screen=new THREE.Vector3();this.uv=g||[[0,0],[0,0],[0,0]];this.color=f||new THREE.Color();this.toString=function(){return"THREE.Face3 ( "+this.a+", "+this.b+", "+this.c+" )"}};THREE.Face4=function(f,e,k,j,h,i,g){this.a=f;this.b=e;this.c=k;this.d=j;this.normal=i||new THREE.Vector3();this.screen=new THREE.Vector3();this.uv=h||[[0,0],[0,0],[0,0],[0,0]];this.color=g||new THREE.Color();this.toString=function(){return"THREE.Face4 ( "+this.a+", "+this.b+", "+this.c+" "+this.d+" )"}};THREE.Geometry=function(){this.vertices=[];this.faces=[];this.computeNormals=function(){var b,h,e,d,c,a,g,i;for(b=0;b0;w.screen.x*=w.screen.z;w.screen.y*=w.screen.z}f=y.geometry.faces.length;for(q=0;q0)){n.screen.z=(l.screen.z+k.screen.z+h.screen.z)*0.3;if(e[p]==null){e[p]=new THREE.RenderableFace3()}e[p].v1.x=l.screen.x;e[p].v1.y=l.screen.y;e[p].v2.x=k.screen.x;e[p].v2.y=k.screen.y;e[p].v3.x=h.screen.x;e[p].v3.y=h.screen.y;e[p].screenZ=n.screen.z;e[p].color=n.color;e[p].material=y.material;this.renderList.push(e[p]);p++}}else{if(n instanceof THREE.Face4){l=y.geometry.vertices[n.a];k=y.geometry.vertices[n.b];h=y.geometry.vertices[n.c];g=y.geometry.vertices[n.d];if(l.visible&&k.visible&&h.visible&&g.visible&&(y.doubleSided||((g.screen.x-l.screen.x)*(k.screen.y-l.screen.y)-(g.screen.y-l.screen.y)*(k.screen.x-l.screen.x)>0||(k.screen.x-h.screen.x)*(g.screen.y-h.screen.y)-(k.screen.y-h.screen.y)*(g.screen.x-h.screen.x)>0))){n.screen.z=(l.screen.z+k.screen.z+h.screen.z+g.screen.z)*0.25;if(c[u]==null){c[u]=new THREE.RenderableFace4()}c[u].v1.x=l.screen.x;c[u].v1.y=l.screen.y;c[u].v2.x=k.screen.x;c[u].v2.y=k.screen.y;c[u].v3.x=h.screen.x;c[u].v3.y=h.screen.y;c[u].v4.x=g.screen.x;c[u].v4.y=g.screen.y;c[u].screenZ=n.screen.z;c[u].color=n.color;c[u].material=y.material;this.renderList.push(c[u]);u++}}}}}else{if(y instanceof THREE.Particle){y.screen.copy(y.position);v.matrix.transform(y.screen);y.screen.z=o/(t+y.screen.z);if(y.screen.z<0){continue}y.screen.x*=y.screen.z;y.screen.y*=y.screen.z;if(a[r]==null){a[r]=new THREE.RenderableParticle()}a[r].x=y.screen.x;a[r].y=y.screen.y;a[r].screenZ=y.screen.z;a[r].size=y.size;a[r].material=y.material;a[r].color=y.color;this.renderList.push(a[r]);r++}}}this.renderList.sort(d)}};THREE.CanvasRenderer=function(){THREE.Renderer.call(this);var b=document.createElement("canvas"),a=b.getContext("2d"),c=new THREE.Rectangle(),e=new THREE.Rectangle(),d=new THREE.Rectangle();this.setSize=function(g,f){b.width=g;b.height=f;a.setTransform(1,0,0,1,g/2,f/2);c.set(-g/2,-f/2,g/2,f/2)};this.domElement=b;this.render=function(w,v){var u,s,h,q=Math.PI*2,y,o,x,l,k,t,r,g,f,n,m,p;a.clearRect(e.getX()-1,e.getY()-1,e.getWidth()+2,e.getHeight()+2);e.empty();this.project(w,v);y=this.renderList.length;for(u=0;u0){a.removeChild(a.childNodes[0])}C=this.renderList.length;for(y=0;y _x1 && x < _x2 && y > _y1 && y < _y2; + } + */ + this.instersects = function (r) { + + return Math.min(_x2, r.getX2()) - Math.max(_x1, r.getX1()) > 0 && Math.min(_y2, r.getY2()) - Math.max(_y1, r.getY1()) > 0; + } + + this.empty = function () { + + _isEmpty = true; + + _x1 = 0; _y1 = 0; + _x2 = 0, _y2 = 0; + + this.resize(); + } + + this.toString = function () { + + return "THREE.Rectangle (x1: " + _x1 + ", y1: " + _y2 + ", x2: " + _x2 + ", y1: " + _y1 + ", width: " + _width + ", height: " + _height + ")"; + } +} diff --git a/src/renderers/CanvasRenderer.js b/src/renderers/CanvasRenderer.js index b0d13c1392..73ab2bec05 100755 --- a/src/renderers/CanvasRenderer.js +++ b/src/renderers/CanvasRenderer.js @@ -6,26 +6,39 @@ THREE.CanvasRenderer = function () { THREE.Renderer.call(this); - var viewport = document.createElement("canvas"), - context = viewport.getContext("2d"); + var _viewport = document.createElement("canvas"), + _context = _viewport.getContext("2d"), + _clipRect = new THREE.Rectangle(), + _clearRect = new THREE.Rectangle(), + _bboxRect = new THREE.Rectangle(); this.setSize = function (width, height) { - viewport.width = width; - viewport.height = height; + _viewport.width = width; + _viewport.height = height; - context.setTransform(1, 0, 0, 1, width / 2, height / 2); + _context.setTransform(1, 0, 0, 1, width / 2, height / 2); + + _clipRect.set(-width / 2, -height / 2, width / 2, height / 2); } - this.domElement = viewport; + this.domElement = _viewport; this.render = function (scene, camera) { var i, j, element, pi2 = Math.PI * 2, - elementsLength, material, materialLength; + elementsLength, material, materialLength, + v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, + size; - context.clearRect (-viewport.width / 2, -viewport.height / 2, viewport.width, viewport.height); + _context.clearRect(_clearRect.getX() - 1, _clearRect.getY() - 1, _clearRect.getWidth() + 2, _clearRect.getHeight() + 2); + _clearRect.empty(); + /* + _context.fillStyle = 'rgba(255, 255, 0, 0.5)'; + _context.fillRect(_clipRect.getX(), _clipRect.getY(), _clipRect.getWidth(), _clipRect.getHeight()); + */ + this.project(scene, camera); elementsLength = this.renderList.length; @@ -39,59 +52,104 @@ THREE.CanvasRenderer = function () { material = element.material[j]; - context.beginPath(); + _context.beginPath(); + + _bboxRect.empty(); if (element instanceof THREE.RenderableFace3) { - - context.moveTo(element.v1.x, element.v1.y); - context.lineTo(element.v2.x, element.v2.y); - context.lineTo(element.v3.x, element.v3.y); - context.lineTo(element.v1.x, element.v1.y); + + v1x = element.v1.x; v1y = element.v1.y; + v2x = element.v2.x; v2y = element.v2.y; + v3x = element.v3.x; v3y = element.v3.y; + + _bboxRect.addPoint(v1x, v1y); + _bboxRect.addPoint(v2x, v2y); + _bboxRect.addPoint(v3x, v3y); + + if (!_clipRect.instersects(_bboxRect)) { + + continue; + } + + _clearRect.addRectangle(_bboxRect); + + _context.moveTo(v1x, v1y); + _context.lineTo(v2x, v2y); + _context.lineTo(v3x, v3y); + _context.lineTo(v1x, v1y); } else if (element instanceof THREE.RenderableFace4) { - context.moveTo(element.v1.x, element.v1.y); - context.lineTo(element.v2.x, element.v2.y); - context.lineTo(element.v3.x, element.v3.y); - context.lineTo(element.v4.x, element.v4.y); - context.lineTo(element.v1.x, element.v1.y); + v1x = element.v1.x; v1y = element.v1.y; + v2x = element.v2.x; v2y = element.v2.y; + v3x = element.v3.x; v3y = element.v3.y; + v4x = element.v4.x; v4y = element.v4.y; + + _bboxRect.addPoint(v1x, v1y); + _bboxRect.addPoint(v2x, v2y); + _bboxRect.addPoint(v3x, v3y); + _bboxRect.addPoint(v4x, v4y); + + if (!_clipRect.instersects(_bboxRect)) { + + continue; + } + + _clearRect.addRectangle(_bboxRect); + + _context.moveTo(v1x, v1y); + _context.lineTo(v2x, v2y); + _context.lineTo(v3x, v3y); + _context.lineTo(v4x, v4y); + _context.lineTo(v1x, v1y); } else if (element instanceof THREE.RenderableParticle) { - - context.arc(element.x, element.y, element.size * element.screenZ, 0, pi2, true); + + size = element.size * element.screenZ; + + _bboxRect.set(element.x - size, element.y - size, element.x + size, element.y + size); + + if (!_clipRect.instersects(_bboxRect)) { + + continue; + } + + _clearRect.addRectangle(_bboxRect); + + _context.arc(element.x, element.y, size, 0, pi2, true); } if (material instanceof THREE.ColorFillMaterial) { - context.fillStyle = material.color.styleString; - context.fill(); + _context.fillStyle = material.color.styleString; + _context.fill(); } else if (material instanceof THREE.FaceColorFillMaterial) { - context.fillStyle = element.color.styleString; - context.fill(); + _context.fillStyle = element.color.styleString; + _context.fill(); } else if (material instanceof THREE.ColorStrokeMaterial) { - context.lineWidth = material.lineWidth; - context.lineJoin = "round"; - context.lineCap = "round"; + _context.lineWidth = material.lineWidth; + _context.lineJoin = "round"; + _context.lineCap = "round"; - context.strokeStyle = material.color.styleString; - context.stroke(); + _context.strokeStyle = material.color.styleString; + _context.stroke(); } else if (material instanceof THREE.FaceColorStrokeMaterial) { - context.lineWidth = material.lineWidth; - context.lineJoin = "round"; - context.lineCap = "round"; + _context.lineWidth = material.lineWidth; + _context.lineJoin = "round"; + _context.lineCap = "round"; - context.strokeStyle = element.color.styleString; - context.stroke(); + _context.strokeStyle = element.color.styleString; + _context.stroke(); } - context.closePath(); + _context.closePath(); } } } diff --git a/src/renderers/SVGRenderer.js b/src/renderers/SVGRenderer.js index d4dab30e34..04b2b14f6b 100755 --- a/src/renderers/SVGRenderer.js +++ b/src/renderers/SVGRenderer.js @@ -6,28 +6,34 @@ THREE.SVGRenderer = function () { THREE.Renderer.call(this); - var viewport = document.createElementNS('http://www.w3.org/2000/svg', 'svg'), - svgPathPool = [], svgCirclePool = []; + var _viewport = document.createElementNS('http://www.w3.org/2000/svg', 'svg'), + _clipRect = new THREE.Rectangle(), + _bboxRect = new THREE.Rectangle(), + _svgPathPool = [], _svgCirclePool = []; this.setSize = function (width, height) { - viewport.setAttribute('viewBox', (-width / 2) + ' ' + (-height / 2) + ' ' + width + ' ' + height ); - viewport.setAttribute('width', width); - viewport.setAttribute('height', height); + _viewport.setAttribute('viewBox', (-width / 2) + ' ' + (-height / 2) + ' ' + width + ' ' + height ); + _viewport.setAttribute('width', width); + _viewport.setAttribute('height', height); + + _clipRect.set(-width / 2, -height / 2, width / 2, height / 2); } - this.domElement = viewport; + this.domElement = _viewport; this.render = function (scene, camera) { var i, j, element, elementsLength, material, materialLength, - pathCount = 0, circleCount = 0, svgNode; + pathCount = 0, circleCount = 0, svgNode, + v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, + size; this.project(scene, camera); - while (viewport.childNodes.length > 0) { + while (_viewport.childNodes.length > 0) { - viewport.removeChild(viewport.childNodes[0]); + _viewport.removeChild(_viewport.childNodes[0]); } elementsLength = this.renderList.length; @@ -40,23 +46,62 @@ THREE.SVGRenderer = function () { for (j = 0; j < materialLength; j++) { material = element.material[j]; + + _bboxRect.empty(); if (element instanceof THREE.RenderableFace3) { + + v1x = element.v1.x; v1y = element.v1.y; + v2x = element.v2.x; v2y = element.v2.y; + v3x = element.v3.x; v3y = element.v3.y; + + _bboxRect.addPoint(v1x, v1y); + _bboxRect.addPoint(v2x, v2y); + _bboxRect.addPoint(v3x, v3y); + + if (!_clipRect.instersects(_bboxRect)) { + + continue; + } svgNode = getPathNode(pathCount++); - svgNode.setAttribute('d', 'M ' + element.v1.x + ' ' + element.v1.y + ' L ' + element.v2.x + ' ' + element.v2.y + ' L ' + element.v3.x + ',' + element.v3.y + 'z'); + svgNode.setAttribute('d', 'M ' + v1x + ' ' + v1y + ' L ' + v2x + ' ' + v2y + ' L ' + v3x + ',' + v3y + 'z'); } else if (element instanceof THREE.RenderableFace4) { - + + v1x = element.v1.x; v1y = element.v1.y; + v2x = element.v2.x; v2y = element.v2.y; + v3x = element.v3.x; v3y = element.v3.y; + v4x = element.v4.x; v4y = element.v4.y; + + _bboxRect.addPoint(v1x, v1y); + _bboxRect.addPoint(v2x, v2y); + _bboxRect.addPoint(v3x, v3y); + _bboxRect.addPoint(v4x, v4y); + + if (!_clipRect.instersects(_bboxRect)) { + + continue; + } + svgNode = getPathNode(pathCount++); - svgNode.setAttribute('d', 'M ' + element.v1.x + ' ' + element.v1.y + ' L ' + element.v2.x + ' ' + element.v2.y + ' L ' + element.v3.x + ',' + element.v3.y + ' L ' + element.v4.x + ',' + element.v4.y + 'z'); + svgNode.setAttribute('d', 'M ' + v1x + ' ' + v1y + ' L ' + v2x + ' ' + v2y + ' L ' + v3x + ',' + v3y + ' L ' + v4x + ',' + v4y + 'z'); } else if (element instanceof THREE.RenderableParticle) { + size = element.size * element.screenZ; + + _bboxRect.set(element.x - size, element.y - size, element.x + size, element.y + size); + + if (!_clipRect.instersects(_bboxRect)) { + + continue; + } + svgNode = getCircleNode(circleCount++); svgNode.setAttribute('cx', element.x); svgNode.setAttribute('cy', element.y); - svgNode.setAttribute('r', element.size * element.screenZ); + svgNode.setAttribute('r', size); } if (material instanceof THREE.ColorFillMaterial) { @@ -77,34 +122,34 @@ THREE.SVGRenderer = function () { } - viewport.appendChild(svgNode); + _viewport.appendChild(svgNode); } } } function getPathNode(id) { - if (svgPathPool[id] == null) { + if (_svgPathPool[id] == null) { - svgPathPool[id] = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - // svgPathPool[id].setAttribute('shape-rendering', 'crispEdges'); //optimizeSpeed - return svgPathPool[id]; + _svgPathPool[id] = document.createElementNS('http://www.w3.org/2000/svg', 'path'); + // _svgPathPool[id].setAttribute('shape-rendering', 'crispEdges'); //optimizeSpeed + return _svgPathPool[id]; } - return svgPathPool[id]; + return _svgPathPool[id]; } function getCircleNode(id) { - if (svgCirclePool[id] == null) { + if (_svgCirclePool[id] == null) { - svgCirclePool[id] = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - // svgCirclePool[id].setAttribute('shape-rendering', 'crispEdges'); //optimizeSpeed - // svgCirclePool[id].setAttribute('fill', 'red'); - return svgCirclePool[id]; + _svgCirclePool[id] = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); + // _svgCirclePool[id].setAttribute('shape-rendering', 'crispEdges'); //optimizeSpeed + // _svgCirclePool[id].setAttribute('fill', 'red'); + return _svgCirclePool[id]; } - return svgCirclePool[id]; + return _svgCirclePool[id]; } } diff --git a/utils/deployer.py b/utils/deployer.py index a55633c9e8..23e594c910 100755 --- a/utils/deployer.py +++ b/utils/deployer.py @@ -3,7 +3,7 @@ import os # MERGER -rev = 5; +rev = 6; files = []; files.append('Three.js'); @@ -11,6 +11,7 @@ files.append('core/Color.js'); files.append('core/Vector2.js'); files.append('core/Vector3.js'); files.append('core/Vector4.js'); +files.append('core/Rectangle.js'); files.append('core/Matrix4.js'); files.append('core/Vertex.js'); files.append('core/Face3.js'); -- GitLab