Unikać konwersja strona CPU z texImage2D Firefox

Question

Ilekroć używam tekstur w WebGL Firefox (Firefox Developer Edition 50.0a2 dla OSX, aby być wykopywac zaladowanie) Wyjścia te ostrzeżenia w konsoli:

Error: WebGL: texSubImage2D: Incurred CPU-side conversion, which is very slow
Error: WebGL: texSubImage2D: Incurred CPU pixel conversion, which is very slow
Error: WebGL: texSubImage2D: Chosen format/type incurred an expensive reformat: 0x1908/0x1401

Czy istnieje jakiś sposób, aby unikać tego? Próbowałem wszystkich kombinacji dozwolonych formatów i typów dla wywołania texImage2D, ale otrzymuję konwersję na procesor, bez względu na to, co próbuję.

Tutaj jest minimalny przykład pokazujący, co robię:

var gl = document.querySelector('canvas').getContext('webgl'); 
 

 
var textureSize = 512; 
 
var canvas = document.createElement('canvas'); 
 
canvas.width = textureSize; 
 
canvas.height = textureSize; 
 

 
var ctx = canvas.getContext('2d'); 
 
ctx.fillStyle = 'rgba(0, 1, 0, 0.0)'; 
 
ctx.fillRect(0, 0, canvas.width, canvas.height); 
 

 
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; 
 
ctx.fillRect(0, 0, 400, 400); 
 

 
var texture = gl.createTexture(); 
 
gl.bindTexture(gl.TEXTURE_2D, texture); 
 
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas); 
 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 
 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 
 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

<canvas />

Answer 1

Twoja próbka nie drukuje ostrzeżenia w Firefoksie 48 na OSX, więc mogę się tylko domyślać, ale

Płaszczyzna 2D wykorzystuje premilpowane alfa. WebGL domyślnie używa tekstur nieoznaczonych premarną czcionką. Oznacza to, że w celu przeniesienia zawartości tekstury płótna należy ją przekonwertować na wstępnie wygenerowaną alfa, która w zależności od implementacji może być wolna.

Jeśli nie trzeba un-premultiplied alfa w swojej fakturze wtedy można powiedzieć WebGL chcesz premultiplied danych po nazwie texImage2D i texSubImage2D wywołując gl.pixelStorei i poinformować go jak ten

gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); 

W tym przypadku przeglądarka może po prostu użyć danych canvas, jak jest. Może to spowodować, że ostrzeżenie zniknie. Uwaga, jeśli po prostu przesyłasz film, prawdopodobnie nie powinno Cię to obchodzić. Jeśli przesyłasz każdą klatkę, być może powinieneś.

Należy pamiętać, że gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); wpływa na WSZYSTKIE przesyłanie tekstur, w tym nieprzetworzonych danych. Na przykład

gl.texImage2D(
    gl.TEXTURE_2D, 0, gl.RGBA, 
    1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, 
    new Uint8Array([128, 192, 255, 128])); 

jeśli UNPACK_PREMULTIPLY_ALPHA_WEBGL jest true przeglądarka zrobi premultiplication przed przesłaniem teksturę tak [255, 255, 255, 128] staną [64, 96, 128, 128].

UNPACK_FLIP_Y_WEBGL może również wpływać na prędkość wysyłania w zależności od sposobu implementacji w przeglądarce.