3

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 enter image description here

with canvas render:

enter image description here enter image description here

Saturnix
  • 10,130
  • 17
  • 64
  • 120
  • Can you show a live example (jsfiddle.net) of your code and ask a specific question? Are you _only_ conderned about wireframe models? – WestLangley Apr 03 '13 at 17:23
  • 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 Apr 03 '13 at 17:35
  • 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 Apr 03 '13 at 17:45
  • 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 Apr 03 '13 at 18:11
  • 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 Apr 04 '13 at 22:33
  • @mrdoob - thanks for reading. Please see the update answer for screenshots. – Saturnix Apr 04 '13 at 22:34
  • @WestLangley - here's the JSFiddle as requested. You may switch the first line of code to see the difference between WebGL and Canvas. http://jsfiddle.net/DtMQG/ – Saturnix Apr 05 '13 at 00:41

1 Answers1

10

Note: This question is about CanvasRenderer, which has been removed from the three.js library.

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 );

three.js r.70

WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • now that's some counter intuitive but BRILLIANT stuff! Thank you very much for your help :) – Saturnix Apr 06 '13 at 01:18
  • totally unrelated to the question: how did you found this solution? Did you just studied the whole three.js documentation and learned about THREE.BackSide? Three.js it's huge, how one can possibly know all the tips and trick like the one posted above? – Saturnix Apr 06 '13 at 01:20
  • 3
    By answering hundreds of questions like this one. :-) – WestLangley Apr 06 '13 at 01:35
  • upvote! also unrelated, I have kind of the same problem, but with a .obj loaded into the canvasrenderer. Lots of clipping and 3d glitches. Great solution but only apply for simple shapes, such as cubes ? – Marcel Falliere Feb 12 '14 at 10:44
  • @MarcelFalliere You will just have to experiment. Please make a new post if you are having problems. – WestLangley Feb 12 '14 at 15:19
  • Did THREE.DoubleSide not exist when this question was asked? – Schoening Aug 15 '15 at 11:21
  • @Schoening `THREE.DoubleSide` did exist at the time. There have been a lot of changes to the renderers in the last 2+ years. I do not recall the history of this issue... – WestLangley Aug 15 '15 at 18:17
  • @WestLangley Thank you for the reply. I only asked because I looked at your fiddle where you are using two boxes - one frontside, one backside - instead of using doubleside. I was just curious, don't waste your excellent brain on this please :p – Schoening Aug 16 '15 at 08:06