White edge around 3D objects when using Javascript mode

superyuxuan

Hi, I'm not sure whether this is a problem with anti-aliasing or is it a bug with Javascript mode? I tried smooth() but it has no effect and only crashes the application. I am running the app in Google Chrome. Please see the pictures. Thanks for any help.

Processing JS: http://gyazo.com/1fd9e6cc60a05c2b5fa59808029f3bef

Processing: http://gyazo.com/3cb517ce20fb47a95b57202af4a55ae5

PhiLho

Moved to a more appropriate category.

BTW, pictures are rather useless, more interesting would be real information, like what browser you use (WebGL is still in infancy), or to give a minimal code reproducing the issue.

superyuxuan

What do you mean? I already provided the browser.

PhiLho

"I already provided the browser."

Yes, after editing your first message... Still no code in view. Can you reproduce this with a simple sketch? So we can try and reproduce the problem.

superyuxuan

Yeah of course. If you drag the box to reveal its sides, you will see a white line appear.

void setup(){
size(400, 400, P3D);
}
void draw(){

background(0);
directionalLight(249, 250, 91, -3, 4, -4);
lightSpecular(0, 255-second(), 255-second());
emissive(0, 26, 51);
directionalLight(255, 255, 255, 0, -4, 30);
fill(255);
translate(mouseX,mouseY,0);
box(40);
}

koogs

is this simply a case of needing noStroke()? - the edges of the box and drawn using the stroke() colour, the faces coloured using the fill() colour.

koogs

nope 8(

PhiLho

Indeed, I can see that, in Firefox and in Chrome.

http://jsfiddle.net/Vjqcx/

Perhaps somebody more familiar with Processing.js can give an explanation.

koogs

comment out the second directionalLight() and it goes away.

am not sure that helps 8)

koogs

i think it's drawing the obscured faces in bright white (second directionalLight, which is lighting from behind the box) then drawing the visible faces. the lines are where the visible faces don't quite cover the faces that face away (due to rounding errors?)

koogs

yeah, change the second light to (255, 0, 0, 0, -4, 30) and the outline changes to red. so it's that second light.

superyuxuan

Yup it looks much better now. Thank you so much!