CanvasRenderer bad image mapping.

[tedor]

Hi Mrdoob, firstly thanx for great library.

I try use library for flat cards, who should be rotate, so I have to use PlaneGeometry with > 1 polygons, currently it's:

THREE.PlaneGeometry(img.width, img.height, 8, 8)

and when added image texture, my flat card was rendered with white lines, after added "overdraw: true" for THREE.MeshBasicMaterial, flat card rendered much better, but still so bad for use in real project, like this:
http://tedor.kr.ua/project/html5-pageflip/index-overdraw.html

and I tried to fix it, and was got result like this:
http://tedor.kr.ua/project/html5-pageflip/index-fix.html

for fix it, I edited only CanvasRenderer script, you can take code here:
http://tedor.kr.ua/project/html5-pageflip/js/src/renderers/CanvasRenderer.js
my changes can be find by comments:
// Fix positions for triangles ...
and
// Fix UV mapping...

but still have problem with border flat card, if watch carefully You can see small dots around the card:
http://tedor.kr.ua/project/html5-pageflip/vertex_out.png

Do you have any idea how it can be fixed?

[mrdoob]

Not sure to be honest... :/

[af3290]

Hello,

I would like to notice, as the other guy, that you have such a great library here. I think i have a similar issue as he has.
For instance,
http://mysoman.somee.com/pic1.png
you can see the problem similar to the vertex_out.png that he pointed out. Even worse, in my case
when i draw over the plane a line(pink one), it gets discontinuities(over the red plane). Luckily, when switching to WebGL renderer, all look very nice, http://mysoman.somee.com/pic2.png
that is the line doesn't get interrupted and the plane is smooth.

The only problem now with WebGL is that lines and curves don't look as smooth as in Canvas.

Do you know how these problems can be addressed/solved?

Great library! Keep developing it!

[mrdoob]

For instance, http://mysoman.somee.com/pic1.png you can see the problem similar to the vertex_out.png that he pointed out. Even worse, in my case when i draw over the plane a line(pink one), it gets discontinuities(over the red plane)

Yeah, I'm afraid that's a CanvasRenderer limitation.

The only problem now with WebGL is that lines and curves don't look as smooth as in Canvas.

Did you tried with new THREE.WebGLRenderer( { antialias: true } )?

[af3290]

No, I havn't tried antialias:true. It seemed to be an antialiasing issue.

Is it a issue of CanvasRenderer? Does the version that tedor modified solve this problem?
Why don't you update it with his version?

Thanks for help!

[mrdoob]

Is it a issue of CanvasRenderer? Does the version that tedor modified solve this problem?
Why don't you update it with his version?

If you read his post carefully, you'll see that he wasn't able to fix the issue that you're having too.
It's something I need to propose to W3C...

[af3290]

Yea, you're right.
So it's related to the canvas specifications.

Thanks.

[af3290]

Did you tried with new THREE.WebGLRenderer( { antialias: true } )?

I have here an example with it enabled/disabled.
https://docs.google.com/open?id=0BxQqT5DtCtNTaU5vajVnVFhRY3FaTlFBZ2tuazlyZw
https://docs.google.com/open?id=0BxQqT5DtCtNTaUtBWGw2YTRRUU9PTjZ1alp2RDQ3Zw

It doesn't look like making a difference. Is it related to the videocard?
What could it be?