webgl - text in three.js: transparency lost when rotating -

webgl - text in three.js: transparency lost when rotating -

i'm trying sec approach use text in three.js, drawing on canvas , using result texture. works, except next problem -don't know if it's bug:

i create 2 texts, transparent background, , overlap then. show ok, when rotate 1 of them, transparency messed up.

i create text objects next (excerpt) function

function createtext(text, ...){ var textholder = document.createelement( 'canvas' ); var ctext = textholder.getcontext('2d'); ... var tex = new three.texture(textholder); var mat = new three.meshbasicmaterial( { map: tex, overdraw: true}); mat.transparent = true; mat.map.needsupdate = true; var textboard = new three.mesh(new three.planegeometry(textholder.width, textholder.height),mat); textboard.dynamic = true; textboard.doublesided = true; homecoming textboard; }

and add together them scene. see demonstration total code in jsfiddle

transparency tricky in webgl.

the best solution in case next transparent text material:

mat.depthtest = false;

updated fiddle: http://jsfiddle.net/sxa8n/4/

three.js r.55

three.js webgl