From 5d49ec9fae92f4128e8b29e6693d7b3f5948d621 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Thu, 3 Nov 2011 11:32:58 +0100 Subject: [PATCH] Workaround for CanvasRenderer 0x0 pixel case It makes the whole thing imprecise, but cubes are now properly reflective. --- build/Three.js | 2 +- build/custom/ThreeCanvas.js | 4 ++-- examples/canvas_lights_pointlights_smooth.html | 2 +- src/renderers/CanvasRenderer.js | 12 +++++++----- 4 files changed, 11 insertions(+), 9 deletions(-) diff --git a/build/Three.js b/build/Three.js index b3f61d3d..3b07a76b 100644 --- a/build/Three.js +++ b/build/Three.js @@ -169,7 +169,7 @@ Q.g,1)),Q.b=Math.max(0,Math.min(m.color.b*Q.b,1)),C.r=Math.max(0,Math.min(m.colo m.wireframe?ya(X,m.wireframeLinewidth,m.wireframeLinecap,m.wireframeLinejoin):w(X)):(Ea(Z,R,W,ka,G,z,y,L),m.wireframe?ya(m.color,m.wireframeLinewidth,m.wireframeLinecap,m.wireframeLinejoin):w(m.color));else if(m instanceof THREE.MeshNormalMaterial)X.r=Ca(n.normalWorld.x),X.g=Ca(n.normalWorld.y),X.b=Ca(n.normalWorld.z),Ea(Z,R,W,ka,G,z,y,L),m.wireframe?ya(X,m.wireframeLinewidth,m.wireframeLinecap,m.wireframeLinejoin):w(X);else if(m instanceof THREE.MeshDepthMaterial)S=k.near,$=k.far,T.r=T.g=T.b=1-Aa(a.positionScreen.z, S,$),ea.r=ea.g=ea.b=1-Aa(d.positionScreen.z,S,$),Q.r=Q.g=Q.b=1-Aa(g.positionScreen.z,S,$),C.r=C.g=C.b=1-Aa(f.positionScreen.z,S,$),oa=Da(T,ea,Q,C),A(Z,R,W,ka,y,L),Ba(Z,R,W,ka,y,L,0,0,1,0,0,1,oa),A(j,ca,G,z,ga,N),Ba(j,ca,G,z,ga,N,1,0,1,1,0,1,oa)}function A(a,b,c,d,e,f){m.beginPath();m.moveTo(a,b);m.lineTo(c,d);m.lineTo(e,f);m.lineTo(a,b);m.closePath()}function Ea(a,b,c,d,e,f,g,j){m.beginPath();m.moveTo(a,b);m.lineTo(c,d);m.lineTo(e,f);m.lineTo(g,j);m.lineTo(a,b);m.closePath()}function ya(a,b,c,e){if(D!= b)m.lineWidth=D=b;if(x!=c)m.lineCap=x=c;if(J!=e)m.lineJoin=J=e;d(a.getContextStyle());m.stroke();aa.inflate(b*2)}function w(a){g(a.getContextStyle());m.fill()}function Ga(a,b,c,d,e,f,j,h,i,k,n,l,ha){if(ha.image.width!=0){if(ha.needsUpdate==!0||Y[ha.id]==void 0){var o=ha.wrapS==THREE.RepeatWrapping,p=ha.wrapT==THREE.RepeatWrapping;Y[ha.id]=m.createPattern(ha.image,o&&p?"repeat":o&&!p?"repeat-x":!o&&p?"repeat-y":"no-repeat");ha.needsUpdate=!1}g(Y[ha.id]);var o=ha.offset.x/ha.repeat.x,p=ha.offset.y/ -ha.repeat.y,U=(ha.image.width-1)*ha.repeat.x,ha=(ha.image.height-1)*ha.repeat.y,j=(j+o)*U,h=(h+p)*ha,i=(i+o)*U,k=(k+p)*ha,n=(n+o)*U,l=(l+p)*ha;c-=a;d-=b;e-=a;f-=b;i-=j;k-=h;n-=j;l-=h;o=1/(i*l-n*k);ha=(l*c-k*e)*o;k=(l*d-k*f)*o;c=(i*e-n*c)*o;d=(i*f-n*d)*o;a=a-ha*j-c*h;b=b-k*j-d*h;m.save();m.transform(ha,k,c,d,a,b);m.fill();m.restore()}}function Ba(a,b,c,d,e,f,g,j,h,i,k,n,l){var ha,o;ha=l.width-1;o=l.height-1;g*=ha;j*=o;h*=ha;i*=o;k*=ha;n*=o;c-=a;d-=b;e-=a;f-=b;h-=g;i-=j;k-=g;n-=j;o=1/(h*n-k*i);ha=(n* +ha.repeat.y,U=ha.image.width*ha.repeat.x,ha=ha.image.height*ha.repeat.y,j=(j+o)*U,h=(h+p)*ha,i=(i+o)*U+1,k=(k+p)*ha,n=(n+o)*U+1,l=(l+p)*ha+1;c-=a;d-=b;e-=a;f-=b;i-=j;k-=h;n-=j;l-=h;o=1/(i*l-n*k);ha=(l*c-k*e)*o;k=(l*d-k*f)*o;c=(i*e-n*c)*o;d=(i*f-n*d)*o;a=a-ha*j-c*h;b=b-k*j-d*h;m.save();m.transform(ha,k,c,d,a,b);m.fill();m.restore()}}function Ba(a,b,c,d,e,f,g,j,h,i,k,n,l){var ha,o;ha=l.width-1;o=l.height-1;g*=ha;j*=o;h*=ha;i*=o;k*=ha;n*=o;c-=a;d-=b;e-=a;f-=b;h-=g;i-=j;k-=g;n-=j;o=1/(h*n-k*i);ha=(n* c-i*e)*o;i=(n*d-i*f)*o;c=(h*e-k*c)*o;d=(h*f-k*d)*o;a=a-ha*g-c*j;b=b-i*g-d*j;m.save();m.transform(ha,i,c,d,a,b);m.clip();m.drawImage(l,0,0);m.restore()}function Da(a,b,c,d){var e=~~(a.r*255),f=~~(a.g*255),a=~~(a.b*255),g=~~(b.r*255),j=~~(b.g*255),b=~~(b.b*255),h=~~(c.r*255),i=~~(c.g*255),c=~~(c.b*255),k=~~(d.r*255),n=~~(d.g*255),d=~~(d.b*255);ma[0]=e<0?0:e>255?255:e;ma[1]=f<0?0:f>255?255:f;ma[2]=a<0?0:a>255?255:a;ma[4]=g<0?0:g>255?255:g;ma[5]=j<0?0:j>255?255:j;ma[6]=b<0?0:b>255?255:b;ma[8]=h<0?0:h> 255?255:h;ma[9]=i<0?0:i>255?255:i;ma[10]=c<0?0:c>255?255:c;ma[12]=k<0?0:k>255?255:k;ma[13]=n<0?0:n>255?255:n;ma[14]=d<0?0:d>255?255:d;xa.putImageData(O,0,0);ha.drawImage(ia,0,0);return sa}function Aa(a,b,c){a=(a-b)/(c-b);return a*a*(3-2*a)}function Ca(a){a=(a+1)*0.5;return a<0?0:a>1?1:a}function za(a,b){var c=b.x-a.x,d=b.y-a.y,e=c*c+d*d;e!=0&&(e=1/Math.sqrt(e),c*=e,d*=e,b.x+=c,b.y+=d,a.x-=c,a.y-=d)}var Fa,Ha,na,va;this.autoClear?this.clear():m.setTransform(1,0,0,-1,n,r);e.info.render.vertices=0;e.info.render.faces= 0;f=l.projectScene(a,k,this.sortElements);h=f.elements;i=f.lights;(ja=i.length>0)&&p(i);Fa=0;for(Ha=h.length;Fa255?255:e;ca[1]=f<0?0:f>255?255:f;ca[2]=a<0?0:a>255?255:a;ca[4]=g<0?0:g>255?255:g;ca[5]=h<0?0:h>255?255:h;ca[6]=b<0?0:b>255?255:b;ca[8]=i<0?0:i>255?255:i;ca[9]=j<0?0:j>255?255:j;ca[10]=c<0?0:c>255?255:c;ca[12]=k<0?0:k>255?255:k;ca[13]=l<0?0:l>255?255:l;ca[14]=d<0? 0:d>255?255:d;qa.putImageData(ya,0,0);ua.drawImage(pa,0,0);return ra}function ma(a,b,c){a=(a-b)/(c-b);return a*a*(3-2*a)}function oa(a){a=(a+1)*0.5;return a<0?0:a>1?1:a}function ja(a,b){var c=b.x-a.x,d=b.y-a.y,e=c*c+d*d;e!=0&&(e=1/Math.sqrt(e),c*=e,d*=e,b.x+=c,b.y+=d,a.x-=c,a.y-=d)}var wa,Ga,U,da;this.autoClear?this.clear():k.setTransform(1,0,0,-1,o,q);e.info.render.vertices=0;e.info.render.faces=0;g=m.projectScene(a,j,this.sortElements);h=g.elements;l=g.lights;(xa=l.length>0)&&i(l);wa=0;for(Ga=h.length;wa< Ga;wa++)if(U=h[wa],da=U.material,da=da instanceof THREE.MeshFaceMaterial?U.faceMaterial:da,!(da==null||da.opacity==0)){X.empty();if(U instanceof THREE.RenderableParticle)u=U,u.x*=o,u.y*=q,t(u,U,da,a);else if(U instanceof THREE.RenderableLine)u=U.v1,r=U.v2,u.positionScreen.x*=o,u.positionScreen.y*=q,r.positionScreen.x*=o,r.positionScreen.y*=q,X.addPoint(u.positionScreen.x,u.positionScreen.y),X.addPoint(r.positionScreen.x,r.positionScreen.y),la.intersects(X)&&w(u,r,U,da,a);else if(U instanceof THREE.RenderableFace3)u= diff --git a/examples/canvas_lights_pointlights_smooth.html b/examples/canvas_lights_pointlights_smooth.html index 00459662..24b7ec7e 100644 --- a/examples/canvas_lights_pointlights_smooth.html +++ b/examples/canvas_lights_pointlights_smooth.html @@ -101,7 +101,7 @@ geometry.computeVertexNormals(); - mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff } ) ); + mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: true } ) ); mesh.overdraw = true; scene.add( mesh ); diff --git a/src/renderers/CanvasRenderer.js b/src/renderers/CanvasRenderer.js index 2f233aa1..39de17dc 100644 --- a/src/renderers/CanvasRenderer.js +++ b/src/renderers/CanvasRenderer.js @@ -868,17 +868,19 @@ THREE.CanvasRenderer = function ( parameters ) { var a, b, c, d, e, f, det, idet, offsetX = texture.offset.x / texture.repeat.x, offsetY = texture.offset.y / texture.repeat.y, - width = ( texture.image.width - 1 ) * texture.repeat.x, - height = ( texture.image.height - 1 ) * texture.repeat.y; + width = texture.image.width * texture.repeat.x, + height = texture.image.height * texture.repeat.y; + + // Adding ones so we don't get a 0x0 pixel get u0 = ( u0 + offsetX ) * width; v0 = ( v0 + offsetY ) * height; - u1 = ( u1 + offsetX ) * width; + u1 = ( u1 + offsetX ) * width + 1; v1 = ( v1 + offsetY ) * height; - u2 = ( u2 + offsetX ) * width; - v2 = ( v2 + offsetY ) * height; + u2 = ( u2 + offsetX ) * width + 1; + v2 = ( v2 + offsetY ) * height + 1; x1 -= x0; y1 -= y0; x2 -= x0; y2 -= y0;