How to covert the entire picture with a plane and how to hide the diagonal lines about three.js HOT 10 CLOSED

At first I would have guessed it was from using a second material with {wireframe: true} but I can't see this being the case.

from three.js.

Unfortunately there is no way to avoid the diagonal lines appearing when using CanvasRenderer and opacity < 1 materials.

A work around for you would be to fake the transparency in the texture directly. You could achieve this by having 2 canvas. One with the original image, and another one with the fake-transparent (dynamically tinted to white) image. So every time you interact with the picture you update the texture by drawing the 1st one and then applying fillRect() with the amount of white that you need to give the feeling it's "transparent".

Take a look at materials_video.html to see how to update a texture per frame.

from three.js.

@mrdoob are the diagonal lines from the triangles overlapping?

from three.js.

Yep. No workaround for that, because canvas antialias (depending of the browser) the shapes. So, either you have gaps or if you overlap the triangles you have visual overlapping when opacity < 1.

from three.js.

Do you plan on implementing a depth buffer for the CanvasRenderer?

I think using NOT_EQUAL compositing in conjunction with a depth buffer could alleviate this issue...

from three.js.

How exactly are you achieving Z-buffering ATM?

I had a look through CanvasRenderer but I can't seem to find any reference to anything other than DepthMaterial which I imagine is what you're utilising somehow. But I cannot see the compositing code.

from three.js.

CanvasRenderer and SVGRenderer (and DOMRenderer) use Projector(.js) for projecting the 3d scene in 2d (and that's where the sorting gets done).

from three.js.

So it's painters algorithm?

That explains why my transparent plane pops in and out of cubes I place on it.

Since you already have DepthMaterial, implementing a depth buffer would be relatively easy. It's definitely something to look into as it will solve multiple issues.

from three.js.

I think this issue has been resolved/question has been answered.

pyrotechnick: I think you're question is unrelated here (I have the feeling you're talking about WebGLRenderer). Feel free to open another issue if it's not. Lets try to be organised and keep conversations on-topic.

from three.js.

I'm indeed suggesting CanvasRenderer should implement depth buffering. Depth buffering is currently available in WebGLRenderer since it's handled provided by WebGL and implemented in hardware.

My suggestion entirely relates to this issue since what I propose would allow for hiding the diagonal lines currently drawn by CanvasRenderer.

Nevertheless, as mrdoob suggests, let's move this conversation to another issue; with a more appropriate title.

from three.js.