webgl: bordo bianco quando si utilizza la trasparenza (alpha)

Quando si esegue il rendering di trame con un canale alfa, viene visualizzato un bordo bianco attorno alla parte non trasparente (il bordo sembra essere i pixel con alfa> 0 e < 1):webgl: bordo bianco quando si utilizza la trasparenza (alpha)

enter image description here

La trama originale viene creato in illustratore e esportata come png. qui è:

enter image description here

(beh, sembra StackOverflow modificato dell'immagine, regolando pixel che non sono completamente opaco/trasparente, ecco un link)

è probabilmente la fusione, anche se i Non so che cosa è sbagliato con la messa a punto:

gl.enable(gl.BLEND); 
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

[Update]

Qui è una versione resi, dove ho aggiunto un alfa-gradiente nella parte sinistra della trama (in modo che sta ottenendo da 0 opacità a 1 fino alla metà)

enter image description here

questa struttura è il solo trama resa in questa posizione. sembra essere più bianco attorno a a = 0,5. molto strano. lo sfondo è solo un colore eliminato:

gl.clearColor(0.603, 0.76, 0.804, 1.0); 
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 
// render objects here

la profondità funzione è simile:

gl.enable(gl.DEPTH_TEST); 
gl.depthFunc(gl.LEQUAL);

tutte le idee? molte grazie.

[Aggiornamento 2]

Rispondendo alla mia domanda: l'effetto si verifica quando il background-color della tela o il corpo della pagina HTML è bianco. Non ho una spiegazione, però.

fonte

2011-10-11 CodeSalad

provare con una grande sezione che ha 0 Shahbaz

sì. ho aggiornato il post. c'è una regione bianca. la quantità di bianco dipende dall'alfa. sembra essere più bianco intorno a 0.5 – CodeSalad

La cosa strana è che è più luminoso sia della trama che dello sfondo! Hai attivato l'illuminazione? – Shahbaz

-1

Rispondendo alla mia domanda: l'effetto si verifica quando il background-color della tela o il corpo della pagina HTML è bianco. Non ho una spiegazione, però.

(aggiunte questo da Aggiornamento 2 del mio post originale, solo per fare la risposta più facile da trovare)

fonte

2013-03-19 19:56:52 CodeSalad

La spiegazione sarebbe che il framebuffer di destinazione ha un canale alfa, quindi si fonderà con lo sfondo del sito. Un'altra soluzione sarebbe impostare 'alpha: false' quando si richiede il contesto webgl o si utilizza una funzione di fusione più appropriata. – urraka

Qual è il tuo ordine? Questo mi sembra un problema di buffer di profondità: inizi con uno sfondo bianco, disegna la cosa con il bordo in modo che sia composta sul bianco, quindi disegna la cosa dietro la cosa con il bordo. Le aree in cui il bordo è stato fuso con lo sfondo bianco originale avranno memorizzato un valore nel buffer di profondità uguale alla profondità del loro piano, quindi quando l'oggetto dietro viene disegnato successivamente, i suoi pixel vengono scartati in quell'area.

La regola generale è disegnare oggetti trasparenti dopo oggetti opachi, di solito dal retro al fronte. Se si utilizza la miscelazione aggiuntiva, spesso è sufficiente disabilitare il buffer di profondità dopo il disegno opaco e disegnarli in qualsiasi ordine.

fonte

2011-10-12 11:45:21 Tommy

nello screenshot dato, questa è l'unica trama visualizzata sopra uno sfondo cancellato (in una certa tonalità di blu). quindi questo non sembra essere il problema esatto, anche se è stato un suggerimento molto buono! Ho aggiornato la mia domanda con un nuovo screenshot. – CodeSalad

Questo è un problema relativo alla texturizzazione dell'interpolazione lineare. Sui bordi, alcuni pixel interpolati impiegano metà bianco mezzo verde e 0,5 alfa. È necessario modificare la trama per estendere i bordi con un altro pixel verde, anche se è completamente trasparente.

fonte

2011-10-14 16:36:40 neodelphi

Quando si imposta FragColor nello shader, provare a moltiplicare l'immagine RGB con l'immagine alfa.

fonte

2011-12-23 17:35:33 user1113724

Se l'alfa è già un valore basso, il colore dovrebbe essere già quasi invisibile, anziché un bordo bianco? –