CanvasRenderer bad image mapping. #1227

Closed
tedor opened this Issue Feb 1, 2012 · 7 comments

Comments

3 participants

tedor commented Feb 1, 2012

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?

Owner

mrdoob commented Feb 1, 2012

Not sure to be honest... :/

af3290 commented Feb 20, 2012

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!

Owner

mrdoob commented Feb 20, 2012

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 commented Feb 21, 2012

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!

Owner

mrdoob commented Feb 21, 2012

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 commented Feb 21, 2012

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

Thanks.

mrdoob closed this Feb 24, 2012

af3290 commented Feb 25, 2012

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment