Three.js canvas render and transparency

Question

Please have a look this demo with both WebGL enable and disabled.

As you switch between WebGL and canvas render (it's done automatically as the javascript detect if you have WebGL or not) the wireframe-only sphere (the first one on the left) change.

As WebGL is enabled you can see also the wireframe on the back of the sphere (the part which is hidden on the other spheres as they have a non-transparent material).

As WebGL is disabled you can't appreciate the transparency anymore.

I'm preparing a demo and I'd like to offer support to those browser not supporting WebGL: it is crucial to have transparency as my idea is entirely based on it. My presentation only have a 6-face cube, I guess even old CPU's should have no trouble presenting it in transparent wireframe.

Does three.js support this? Is there any way I can do it? How should I set the material so that it works even with canvas render?

To further prove my point, here's a second demo. Same issue as you switch between WebGL and canvas.

Current wireframe material is declared this way:

new THREE.MeshBasicMaterial( { color: 0x00ee00, wireframe: true, transparent: true } );

but behave as expected only in WebGL.

Jsfiddle here

Thanks for reading!

p.s. I'm willing to adopt any alternative to Three.js if this can't do what I need. I MUST prepare this demo but I don't have the math/geometry knowledge to do this by myself even if it is as simple as rotating a 3d cube.

With webgl:

enter image description here

with canvas render:

enter image description here

Can you show a live example (jsfiddle.net) of your code and ask a specific question? Are you only conderned about wireframe models? — WestLangley
Thanks for posting. There are two examples linked in the question and the code to generate the wireframe material is the one posted. What do you mean by wireframe "models"? I need to render just the wireframe of the mesh (the edges), not the faces if that's what you mean. Point is some edges are missing with canvas render, while with webgl you see them all. Just try the demos with Safari and Chrome and you'll see the difference. — Saturnix
I see the difference. I was asking you to ask a specific question about YOUR code, and the best way to do that is to provide a live example of YOUR code. — WestLangley
To me it would be helpful if you could post screenshot to illustrate what you mean. I'm not sure what you're trying to achieve. — mrdoob
Please assume my code is the one posted in the examples. If you need to isolate the part which causes the problem just look at the code I've posted: that's where you decide if the wireframe will be transparent or not. — Saturnix

WestLangley WestLangley · Accepted Answer · 2013-04-05T08:09:48

The trick that works in your case, when using CanvasRenderer, is to create two identical cubes in the same location -- the second one is flip-sided. For convenience, you can add them both to a parent object, but it is not necessary.

var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x00ee00, wireframe: true, transparent: false, opacity: 1 } ); 

var wireframeMaterial2 = new THREE.MeshBasicMaterial( { color: 0x00ee00, wireframe: true, transparent: false, opacity: 1, side: THREE.BackSide } ); 

var cube = new THREE.Mesh( geometry, wireframeMaterial );
            parent.add( cube );

var cube2 = new THREE.Mesh( geometry, wireframeMaterial2 );
            parent.add( cube2 );

EDIT: updated fiddle: http://jsfiddle.net/k0vcnkqh/

three.js r.70

Three.js canvas render and transparency

1 Answers