search

mrdoob / three.js

JavaScript 3D Library.
https://threejs.org/
MIT License
101.85k stars 35.31k forks source link

How to control culling in WebGLRenderer #430

Closed roben closed 13 years ago

roben commented 13 years ago

Hello everyone and sorry for bothering you again, but I'm stuck with a small problem here:

I am visualising a simulated and "ideal" radio network consisting of equally shaped radio cells. These cells are merged together in one large mesh to improve performance. The problem is, when I move (scroll) the center of those meshes out of the view port, the whole mesh disappears. I understand that this has something to do with culling but I did not find any way to manipulate this behavior.

The field _cullEnabled in WebGLRenderer has private access, so disabling does not work for now without modifying the Renderer. Besides that, are there other Culling methods available behaving better in this case?

Here are two screenshots:

http://dl.dropbox.com/u/18449425/culling1.jpg http://dl.dropbox.com/u/18449425/culling2.jpg

Note, that the highlighted sphere in the center of the first image is the same on the left edge in the second one.

roben commented 13 years ago

Small update: I just noticed the renderer.setFaceCulling(false) method but it seems to have no effect.

gero3 commented 13 years ago

It seems to me that the boundingsphere isn't correct

so try calling computeBoundingSphere on your geometry when you are creating it.

roben commented 13 years ago

Oh, that was easy. Thanks!

valette commented 12 years ago

Hi,

Small update: I just noticed the renderer.setFaceCulling(false) method but it seems to have no effect.

I faced the same issue. There is an example here: http://www.creatis.insa-lyon.fr/~valette/three.js/examples/bunny.html

on line 308 I wrote : "renderer.setFaceCulling (false);"

but looking at the hole at the bottom of the bunny, I can clearly see through the bunny, which is impossible if backface culling is really disabled.

Any idea?

valette commented 12 years ago

OK, I just found object3D.doubleSided=true as a workaround...

alteredq commented 12 years ago

Yes, that's how it's supposed to be done, you control face culling per object.

bsergean commented 8 years ago

For those of us who will find this after a google search, back-face culling seems to be controlled by the material in current version of three.js (at least > 0.71), and default to ON (only front-facing faces are displayed). This is a good default as it will make rendering faster. In the source code, src/materials/Material.js, the Material constructor set the default sidedness to THREE.FrontSide.

material.side = THREE.DoubleSide; // will make it so that front and back faces are displayed