Three-js canvas texture lost transparency using WebGL renderer (normal with Canvasrenderer)

Question

I am trying to do CircleGeometry over a cubic (in terms of the camera we show both). The cube has a flat color, and the circle has a canvas with an arc and no background color.

• If I use the Canvasrenderer, the canvas transparency is fine and the arc just prints.
• If I use the WebGL visualization tool, the full circle is filled with the background color of the page, indicating only the arc, so transparency is lost.

I am creating a test for this: http://jsfiddle.net/f4u7s/6/ where you can switch between WebGL and CanvasRendering to show the problem. (look for

// ------------> Switch HERE //renderer = new THREE.CanvasRenderer(); renderer = new THREE.WebGLRenderer(); 

)

It sounds like three.js textures that work with CanvasRenderer but appear black with WebGLRenderer , even with the proposed solution (mesh.dynamic = true), the problem is still there.

Did I miss something?

Answer 1

You need to set transparent to true .

 plane = new THREE.Mesh( new THREE.CircleGeometry(50, 50), new THREE.MeshBasicMaterial({ map: texture, transparent: true }) ); 

Updated script: http://jsfiddle.net/f4u7s/10/