Artefakte beim Rendern beider Seiten eines transparenten Objekts mit three.js

Question

Ich versuche, beide Seiten eines transparenten Objekts mit three.js zu rendern. Andere Objekte innerhalb des transparenten Objekts sollten ebenfalls angezeigt werden. Leider bekomme ich Artefakte, die ich nicht kenne. Hier ist eine Testseite: https://dl.dropbox.com/u/3778149/webgl_translucency/test.html

Hier ist ein Bild des genannten Artefakts. Sie scheinen von der zugrundeliegenden Kugelgeometrie zu stammen.

Interessanter sind die Artefakte Modus THREE.SubtractiveBlending nicht sichtbar = zum Mischen 2.

Jede Hilfe dankbar!

Alex

Answer 1

Selbsttransparenz ist in WebGL und three.js besonders schwierig. Sie müssen nur die Probleme wirklich verstehen und dann Ihren Code anpassen, um den gewünschten Effekt zu erzielen.

Sie können das Aussehen einer doppelseitigen, transparenten Kugel in three.js, mit einem Trick erreichen: Sie müssen zwei transparente Kugeln machen - einen mit material.side = THREE.BackSide und einem mit material.side = THREE.FrontSide.

Die Verwendung solcher Methoden ist in der Regel erforderlich, wenn Sie eine Eigentransparenz ohne Artefakte wünschen - insbesondere, wenn Sie der Kamera oder dem Objekt erlauben, sich zu bewegen. Hier

ist eine Geige: http://jsfiddle.net/unkya/17/

EDIT: Aktualisiert Geige r.71

Answer 2

Um diese Szene korrekt mit Alpha-Blending zu machen, würden die Dreiecken haben, von hinten nach vorne jedem Rahmen gemacht werden. Ihre Szene ist besonders herausfordernd, da Sie ein Objekt innerhalb eines anderen haben und beide Seiten rendern, was es erforderlich machen würde, einen Teil der Kugel zu rendern, dann den Würfel und dann den Rest der Kugel. Ich bezweifle, dass three.js (oder irgendeine andere Szenegraph-Bibliothek) mit diesem Fall umgehen kann.

Additive oder subtraktive Mischung funktioniert ohne Sortierung, sieht aber nicht so gut aus.

Answer 3

Im Allgemeinen, um transparente Objekte zu tun, müssen Sie sie von vorne nach hinten sortieren (ich vermute, three.js tut dies bereits). Wenn Ihr Objekt konvex ist (wie bei beiden), können Sie es manchmal schaffen, jedes Objekt zweimal zu rendern, einmal mit gl.cullFace (gl.CCW) und erneut mit gl.cullFace (gl.CW). So zum Beispiel, wenn der Würfel im Inneren der Kugel ist würde man effektiv tun

gl.enable(gl.CULL_FACE); 
gl.cullFace(gl.CW); 
drawSphere(); // draws the back of the sphere 
drawCube(); // draws the back of the cube 
gl.cullFace(gl.CCW); 
drawCube(); // draws the front of the cube. 
drawSphere(); // draws the front of the sphere. 

Ich habe keine Ahnung, wie man das in Three.js

Diese nur Objekte behandelt, die konvex sind und sich schneid nicht (ein Objekt ist vollständig innerhalb des anderen enthalten).

Answer 4

Machen Sie eine clon der ursprünglichen Masche Three.js und seine Normalen Flip; dann machen Sie zwei identische "einseitige" Materialien für jeden mit einem anderen Namen. Nicht die eleganteste Herangehensweise, aber es hat gut geklappt. Ich mit dem gleichen Problem zu kämpfen, das ist, was ich getan habe: P

Die .json Datei sieht wie folgt aus:

{ 
"materials":[ 
    { "name":"ext", "texture":"f_03.jpg", "ambient":[255.0,255.0,255.0], "diffuse":[255.0,255.0,255.0], "specular":[255.0,255.0,255.0], "opacity":0.7 }, 
    { "name":"int", "texture":"f_03.jpg", "ambient":[255.0,255.0,255.0], "diffuse":[255.0,255.0,255.0], "specular":[255.0,255.0,255.0], "opacity":0.7 } 
], 
"meshes":[ 
    { 
     "name":"Cylinder001", 
     "material":"ext", ... 

    { 
     "name":"Cylinder002", 
     "material":"int", ...