SVGRenderer error in determining hidden surfaces

[nitaku]

I'm trying to render a collada file of a complex building in SVG, in order to build an interactive isometric map working on most browsers.

I ran into what it seems to be an issue with hidden surface determination. If I have an elongated box in front of another box, I get the following error, in which a triangle from the box behind is not correctly occluded by the ones forming the one in front:

If I use a WebGLRenderer instead, I obtain the correct result. Is this a known limitation of SVGRenderer? If so, do you have any suggestions on how to help fix or work around this?

Thanks a lot in advance!

[dubejf]

I'm not familiar with the SVGRenderer, but the CanvasRenderer produces similar artifacts. That's because Z-ordering is done at the face level, not per pixel. The solution is to subdivide the elongated face.

Past discussion http://stackoverflow.com/questions/29020613/three-js-issue-to-render-objects-using-canvasrenderer

[nitaku]

Thanks @dubejf ! I also noticed the same artifacts in canvas.
Any advice on how to subdivide elongated faces if I have a complex object like the one I import from collada? The link you provided covers the simple case of boxes (as in the picture I posted), but I have to make it work for a building.

[dubejf]

A quick search lead me to http://stackoverflow.com/questions/27422549/three-js-split-faces-with-long-edges-into-two-faces, which seems to do what you want. You can also preprocess your models in a 3rd party tool of your choice.

[nitaku]

Ok, thank you for your help with my noob issue :) I will use Stackoverflow next time, I posted it here as an issue because it seemed to me that there was a problem with the renderer.