Differenza di rendering alfa tra OpenGL e WebGL

Sto visualizzando la stessa scena utilizzando lo stesso esatto codice C++, una volta in OpenGL nativa su Windows e una volta utilizzando Emscripten in WebGL. Tutto nella scena sembra esattamente lo stesso, tranne quando eseguo il rendering di qualcosa con alpha! = 1.0. La differenza è simile al seguente: Differenza di rendering alfa tra OpenGL e WebGL

Il colore cubo blu è (0.0, 0.0, 1.0, 0.5)
Lo shader utilizzati per il rendering del cubo non fa nulla se non richiamare il colore.
Sulla destra è come appare con OpenGL ed è il risultato previsto, solo blu con mezza trasparenza. A sinistra è come appare con Emscripten + WebGL. Sembra che il colore che è reso in realtà è (0.5, 0.5, 1.0, 0.5)

La funzione miscela che uso è lo standard:

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

C'è una sorta di differenza con alfa WebGL? Cosa può causare che ciò accada?

fonte

2016-02-12 shoosh

... chiudere come off-topic? per favore spiega – shoosh

E 'possibile che sia un problema alfa premoltiplicato vs non premoltiplicato? –

@ WacławJasper Ci ho pensato, ma davvero non vedo come ... premuscultare l'alfa lo avrebbe reso più scuro, non più luminoso, no? – shoosh

Hai impostato il canvas come non premeditato?

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

Il valore predefinito per WebGL è true. L'impostazione predefinita per la maggior parte delle app OpenGL è false

In più WebGL è composto con il resto della pagina. Come minimo, si tratta del colore di sfondo della tela o di qualunque cosa si trovi all'interno (il corpo del documento).

Per vedere se questo è il problema provare a impostare il colore di sfondo del canvas per viola o qualcosa che sporgono

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

o in css

canvas { background-color: #F0F; }

applicazioni OpenGL sono raramente mescolati su nulla in cui poiché le app WebGL sono effettivamente composte SEMPRE.

Alcune soluzioni

Spegnere alfa

Se non avete bisogno di alfa nella vostra destinazione è possibile disattivarlo
```
gl = someCanvas.getContext("webgl", { alpha: false }); 
```
Ora l'alfa sarà effettivamente 1
Impostare l'alfa su 1 alla fine di un fotogramma
```
// 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); 
```
non dimenticare di impostare mascherare il colore di nuovo a tutto vero se è necessario per cancellare il buffer di colore in seguito
impostare il colore di sfondo della tela per il nero
```
canvas { background-color: #000; } 
```

Se possibile, sceglierei di disattivare Alpha.Il motivo per cui alfa è impostato su off è possibile che il browser possa disattivare il blending quando si disegna il canvas nel browser. Questo potrebbe essere un aumento del 10-20% o più della velocità a seconda della GPU. Non c'è alcuna garanzia che qualsiasi browser effettui tale ottimizzazione, solo che è possibile farlo mentre con le altre 2 soluzioni non è possibile o almeno molto meno probabile

fonte

2016-02-13 05:14:08 gman

Differenza di rendering alfa tra OpenGL e WebGL

risposta

Problemi correlati