Różnica renderowania alfa między OpenGL a WebGL

Question

Renderuję tę samą scenę przy użyciu tego samego kodu C++, raz na macierzysty OpenGL w oknach i raz używając Emscriptena do WebGL. Wszystko na scenie wygląda dokładnie tak samo, z wyjątkiem sytuacji, gdy renderuję coś za pomocą alpha! = 1.0. Różnica wygląda następująco:

Niebieska kostka kolor jest (0.0, 0.0, 1.0, 0.5)
Moduł cieniujący używany do renderowania kostkę robi nic oprócz narysować kolor.
Po prawej stronie wygląda on tak, jak w przypadku OpenGL i jest oczekiwanym wynikiem, po prostu niebieski z półprzezroczystością. Po lewej widać jak wygląda z Emscripten + WebGL. Wygląda na to kolor, który jest renderowany jest rzeczywiście (0.5, 0.5, 1.0, 0.5)

Funkcja mieszanka używam to średnia:

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); 

Czy jest jakaś różnica w porównaniu z alfa w WebGL? Co może spowodować to?

Answer 1

Czy ustawiono płótno jako nieprzygotowane?

gl = someCanvas.getContext("webgl", { premultipliedAlpha: false }); 

Ustawieniem domyślnym dla WebGL jest true. Domyślnie dla większości aplikacji OpenGL jest nieprawda.

Co więcej, WebGL jest połączony z resztą strony. Przynajmniej jest to kolor tła płótna lub cokolwiek, co znajduje się wewnątrz (treść dokumentu).

Aby sprawdzić, czy jest to problem spróbuj ustawić płótnie w tle kolor fioletowy lub coś, co będzie trzymać się

<canvas ... style="background-color: #F0F;"></canvas> 

lub w css

canvas { background-color: #F0F; } 

OpenGL aplikacje rzadko są komponowane przez cokolwiek gdzie ponieważ aplikacje WebGL są skutecznie ZAWSZE komponowane.

Niektóre rozwiązania

• Wyłącz alfa

  Jeśli nie trzeba alfa w swojej okolicy można go wyłączyć

  gl = someCanvas.getContext("webgl", { alpha: false }); 
  

  Teraz alfa skutecznie wynosić 1

• Ustaw alfa na 1 na końcu ramki

  // clear only the alpha channel to 1 
  gl.clearColor(1, 1, 1, 1); 
  gl.colorMask(false, false, false, true); 
  gl.clear(gl.COLOR_BUFFER_BIT); 
  

  nie zapomnij, aby ustawić kolor maski z powrotem wszystko prawda, jeśli potrzebujesz wyczyszczenie bufora koloru później

• ustawić płótno za kolor tła na czarny

  canvas { background-color: #000; } 
  

Jeśli to możliwe, wybrałbym wyłączenie alfa.Powód, dla którego alfa jest wyłączony, jest możliwe, że przeglądarka może wyłączyć mieszanie podczas rysowania kanwy w przeglądarce. Może to być 10-20% lub więcej wzrost prędkości w zależności od GPU. Nie ma żadnej gwarancji, że jakakolwiek przeglądarka dokonuje tej optymalizacji, tyle tylko, że jest to możliwe, podczas gdy w przypadku innych 2 rozwiązań nie jest możliwe, a przynajmniej znacznie mniej prawdopodobne, że