artefakty przy renderowaniu obu stron przezroczystego obiektu za pomocą three.js

Question

Próbuję renderować obie strony przezroczystego obiektu za pomocą pliku three.js. Inne obiekty znajdujące się w przezroczystym obiekcie również powinny się wyświetlać. Niestety dostaję artefakty, których nie znam. Oto strona testowa: https://dl.dropbox.com/u/3778149/webgl_translucency/test.html

Oto obraz wspomnianego artefaktu. Wydaje się, że wynikają one z podstawowej geometrii sfer.

ciekawe artefakty nie są widoczne dla trybu mieszania THREE.SubtractiveBlending = 2.

Każda pomoc mile widziana!

Alex

Answer 1

Samokontrola jest szczególnie trudna w WebGL i three.js. Musisz tylko zrozumieć problemy, a następnie dostosować kod, aby osiągnąć pożądany efekt.

Można osiągnąć wygląd dwustronnego, przezroczystej kuli w three.js z trick: Trzeba uczynić dwa przezroczyste kule - jedna z material.side = THREE.BackSide, a jeden z material.side = THREE.FrontSide.

Stosowanie takich metod jest zazwyczaj wymagane, jeśli wymagana jest przezroczystość własna bez artefaktów - szczególnie w przypadku zezwolenia na ruch kamery lub obiektu.

Oto skrzypce: http://jsfiddle.net/unkya/17/

EDIT: Aktualizacja skrzypce Three.js r.71

Answer 2

Aby uczynić tę scenę prawidłowo alfa mieszania, trójkąty musiałaby zostać wygenerowana od tyłu do przodu każdej ramce. Twoja scena jest szczególnie trudna, ponieważ masz jeden obiekt wewnątrz drugiego i renderujesz obie strony, które wymagałyby renderowania części sfery, następnie sześcianu, a następnie reszty sfery. Wątpię, aby trojka trzy.js (lub jakakolwiek inna biblioteka grafów scen) poradziła sobie z tą sprawą.

Dodawanie lub subtraktywne mieszanie będzie działało bez sortowania, ale nie wygląda tak ładnie.

Answer 3

Ogólnie rzecz biorąc, aby wykonać przezroczyste obiekty, należy posortować je od początku do końca (domyślam się, że three.js już to robi). Jeśli twój obiekt jest wypukły (jak oba te elementy), możesz czasami uzyskać efekt podwójnego renderowania każdego obiektu, jeden raz gl.cullFace (gl.CCW) i ponownie gl.cullFace (gl.CW). Tak na przykład, jeśli kostka jest wewnątrz kuli ty by skutecznie zrobić

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. 

nie mam pojęcia, jak to zrobić w Three.js

ta obsługuje tylko obiekty, które są wypukłe i nie przecinające się (jeden obiekt jest zawarty całkowicie w drugim).

Answer 4

Zrób Klon oryginalnej siatki i przerzucić swoje normalne; następnie utwórz dwa identyczne materiały "jednostronne" dla każdego o innej nazwie. Nie najbardziej klasyczne podejście, ale działało dobrze. Walczyłem z tym samym problemem, jest to, co zrobiłem: P

Plik .json wygląda następująco:

{ 
"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", ...