Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Why are Sprites which are transparent when rendered by WebGLRenderer opaque with SVGRenderer?

See original GitHub issue

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

Issue Analytics

State:
Created 5 years ago
Comments:7 (1 by maintainers)

Top GitHub Comments

3reactions

mrdoobcommented, May 9, 2018

Is this just the reality of the SVGRenderer

Yeah, it’s a limitation of SVGRenderer.

1reaction

Mugen87commented, Apr 25, 2018

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

Top Results From Across the Web

WebGLRenderer#alpha – three.js docs

The WebGL renderer displays your beautifully crafted scenes using WebGL. ... transparency rendering e.g. manually determining each object's rendering order.

Transparency of particles on webgl renderer - three.js

I'm using come particles with sprites, and then drawing some lines. Lines have a transparency and sprites has alpha channels.

three.js - npm

FaceColor support to CanvasRenderer and SVGRenderer . ... (alteredq); WebGLRenderer opaque pass now renders from front to back.

unity - How to understand when and where overdraw occurs

Because the blue sprite is partially transparent, the engine must treat the whole sprite as transparent (even the fully opaque pixels). The ...

Beginning WebGL for HTML5 - Springer Link

Rendering a Grid Mesh with One TRIANGLE_STRIP Call . ... values—and optionally an alpha value that stores the amount of transparency/opacity.