Three.js: Why are Sprites which are transparent when rendered by WebGLRenderer opaque with SVGRenderer?

[alexlenail]

Description

I wanted to export SVGs from three.js, so I switched everything over to be rendered by an SVGRenderer:

// var renderer = new THREE.WebGLRenderer( { 'alpha':true, 'transparent':true } );
var renderer = new THREE.SVGRenderer( { 'alpha':true, 'transparent':true } );

However, all sprites are now opaque white, obscuring many other objects in the scene. Is this intentional? Shouldn't sprites which were transparent when rendered by WebGLRenderer still be transparent when rendered by SVGRenderer ?

Three.js version: r91

Browser: Chrome

OS: macOS

[Mugen87]

transparent is not a valid parameter of WebGLRenderer. SVGRenderer has not parameters at all.

You should first ensure that your code is actually correct. Use stackoverflow or the forum for this and also provide your code or (even better) live examples.

[alexlenail]

@Mugen87 Here is a fiddle: https://jsfiddle.net/xh2e5y4d/1/

I'm opening it here because it seems more like a bug than a usage question.

[Mugen87]

Updated fiddle: https://jsfiddle.net/xh2e5y4d/3/ (dependencies to Projector etc. are now included via script tag).

Your sprites do not work since textures are not supported by SVGRenderer.

[alexlenail]

Thanks @Mugen87 ! Just one final (usage) question: is there a way to do effectively the same thing in SVGRenderer? If you could point me towards some keywords I should look into I would much appreciate it!

[Mugen87]

I'm not sure about this but if you can manage to render your text as <text> elements, you should be able to produce the desired result.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

[alexlenail]

@Mugen87 I'm also noticing some other issues with the SVGRenderer in that fiddle -- there are sometimes missing patches in the meshes:

Is this just the reality of the SVGRenderer, or am I configuring it wrong? (Let me know if I should ask this question somewhere else)

[mrdoob]

Is this just the reality of the SVGRenderer

Yeah, it's a limitation of SVGRenderer.