Three.js: SVGRenderer is failing to clip SVGObjects behind the camera.

[bpetar]

When adding svg object to 360 scene, i see it two times.

Issue is also explained on this stackoverflow link:
https://stackoverflow.com/questions/53762371/svgrenderer-with-orbitcontrols-shows-two-svg-elements-on-opposite-sides?noredirect=1

Problem example is here:
http://mystic-peanut.com/mystic_sites/svgdouble/svg_sandbox.html

Three.js version

• [ ] Dev
• [x] r99
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[Mugen87]

Um, I'm not able to reproduce the problem with this fiddle:

https://jsfiddle.net/f2Lommf5/16832/

What are you doing differently?

[bpetar]

I am using 'THREE.SVGObject'

https://jsfiddle.net/f2Lommf5/16842/

[Mugen87]

Ah, now I see! Yes, that's indeed a buggy behavior.

[Mugen87]

How about testing if the z-coordinate in NDC space of a SVGObject lies in the range of [0,1]? It would a single line to add right here:

if ( _vector3.z < 0 || _vector3.z > 1 ) return; // FIX

For testing: https://jsfiddle.net/f2Lommf5/16845/

[WestLangley]

How about testing if the z-coordinate in NDC space of a SVGObject lies in the range of [0,1]?

That mapping is very sensitive near the boundary for a perspective camera. I'd test in camera space.

[Mugen87]

How about this then?

_vector3.setFromMatrixPosition( object.matrixWorld );

_vector3.applyMatrix4( _viewMatrix );

var z = - _vector3.z;

if ( z < camera.near || z > camera.far ) return;

For testing: https://jsfiddle.net/f2Lommf5/16846/

[Mugen87]

In any event, performing this type of object clipping in clip space (well, in NDC in our case) seems more natural to me.

That mapping is very sensitive near the boundary for a perspective camera.

Can you demonstrate this with a live example? It would be interesting to see an actual use case where the range test fails in NDC space but works in view space.

[WestLangley]

Well, perhaps it is not a problem; the mapping to NDC space is just not continuous.

Personally, I prefer the test in camera space for clarity, but do as you wish.

[Mugen87]

I'm a bit impatient so I've created a PR with the first approach mentioned in this thread.

[bpetar]

This helped me greatly with my project. Thank you for your fix.

[sebastien-schneider]

There's some drawbacks with this fix when you use an OrthographicCamera. By default, without any position change on the SVGObject, the z value is slightly under 0 and the SVG object just not appears at all :-(