SVGRenderer not work with LineMaterial

I have my outline object created exactly follow this example from @prisoner849: fatlinesBatch and it works perfectly with WEBGLRenderer. The problem is that when I want to have an svg version of this outline projection, the SVGRenderer could not draw out the outline.
I did some experiments and found out that this might be due to the LineMaterial, when I have Linesegment with LineBasicMaterial, SVG renderer works as expected but when I switch to LineMaterial, not thing comes out of the scene.
I wonder if there’s anyway to make the fatlinesBatch works with SVGRenderer, or any other way to achieve similar outline effect and still work with SVGRenderer.
Thanks a lot for your help! :dizzy:

1 Like

The wide line implementation was added since WebGL can’t draw line primitives greater than 1 pixel. That is not true for SVGRenderer. This renderer handles lines as paths so it can render them by default with line width greater than 1 pixel. Just set the linewidth property of LineBasicMaterial.

So adding support for LineMaterial and LineSegmentsGeometry to SVGRenderer does not really make sense since these classes are intended for WebGL to solve the 1 pixel line restriction.

2 Likes

I see. @Mugen87, but I’m not clear how to make similar outline effect with LineBasicMaterial and EdgesGeometry. Could you please give me some hints about how to accomplish that. The above fatlines example did some shading modification to the LineMaterial to achieve outline effect, which I find no way to apply to the LineBasicMaterial

.
If that’s not possible, is there any way to achieve outline effect with SVGRenderer.
Thanks alot!

I’m thinking of modifying the edgesGeometry according to this example that I found on this similar issue. The problem is that given the positionAttr.count as n then my new edgesGeo will have then runtime of O(n^2) instead of O(n) (which can scale up to 10 billion with n = 100k). My app crashed even before any thing was renderer :pensive:

I already found a solution for my requirement.
For this problem of generating outline edges and also making it work with SVGRenderer, this example by @gkjohnson utilizing three-mesh-bvh is just what I’m looking for.
https://gkjohnson.github.io/three-mesh-bvh/example/bundle/edgeProjection.html