Alpha-Rendering-Unterschied zwischen OpenGL und WebGL

Question

Ich rendere die gleiche Szene mit dem gleichen genauen C++ - Code, einmal zu nativen OpenGL unter Windows und einmal mit Emscripten zu WebGL. Alles in der Szene sieht genau gleich aus, außer wenn ich etwas mit Alpha! = 1.0 rende. Der Unterschied sieht wie folgt aus:

Der blaue Würfel Farbe ist (0.0, 0.0, 1.0, 0.5)
Der Shader zum Rendern Cube verwendet tut nichts, außer der Farbe zu ziehen.
Auf der rechten Seite ist, wie es mit OpenGL aussieht und ist das erwartete Ergebnis, nur blau mit halber Transparenz. Auf der linken Seite ist, wie es mit Emscripten + WebGL aussieht. Es sieht aus wie die Farbe, die tatsächlich erbracht wird, ist (0.5, 0.5, 1.0, 0.5)

Die Vermischungsfunktion verwende ich der Standard ist:

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); 

Gibt es irgendeine Art von Unterschied mit Alpha in WebGL? Was kann dazu führen, dass dies geschieht?

Answer 1

Haben Sie die Leinwand so eingestellt, dass sie nicht vorgemischt wird?

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

Der Standardwert für WebGL ist wahr. Die Standardeinstellung für die meisten OpenGL-Anwendungen ist falsch

Darüber hinaus wird WebGL mit dem Rest der Seite zusammengefügt. Zumindest ist dies die Hintergrundfarbe der Leinwand oder was auch immer sie ist (der Körper Ihres Dokuments).

Um zu sehen, ob dies das Problem ist zu versuchen, Ihre Leinwand Hintergrundfarbe zu lila oder etwas Einstellung, die

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

oder in css

canvas { background-color: #F0F; } 

OpenGL-Anwendungen selten Compositing werden über etwas herausstehen wird, wo wie WebGL-Apps effektiv sind immer zusammengesetzt.

Einige Lösungen

• Schalten Sie alpha

  Wenn Sie nicht über Alpha in Ihrem Ziel brauchen können deaktivieren

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

  Nun ist die alpha effektiv 1 sein wird

• Setzen Sie das Alpha auf 1 am Ende eines Rahmens

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

  vergessen Sie nicht, die Farbe aller wahren Maske zu setzen zurück, wenn Sie brauchen

• den Hintergrund Satz später die Farbpuffer zu löschen Farbe der Leinwand schwarz

  canvas { background-color: #000; } 
  

Wenn möglich, würde ich Alpha ausschalten.Der Grund, wenn Alpha deaktiviert ist, ist, dass der Browser die Überblendung beim Zeichnen der Zeichenfläche in den Browser ausschalten kann. Je nach GPU könnte dies eine Steigerung der Geschwindigkeit um 10-20% oder mehr bedeuten. Es gibt keine Garantie, dass irgendein Browser diese Optimierung durchführt, nur dass es möglich ist, während es mit den anderen 2 Lösungen nicht möglich oder zumindest weit weniger wahrscheinlich ist