Избегайте сторону процессора преобразование с texImage2D в Firefox

Question

Всякий раз, когда я использую текстуры в WebGL Firefox (Firefox Edition, Developer 50.0a2 для OSX, чтобы быть excact) выводит эти предупреждения в консоли:

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

Есть ли способ избегать этого? Я пробовал все комбинации разрешенных форматов и типов для вызова texImage2D, но я получаю преобразование на ЦП независимо от того, что я пытаюсь.

Вот минимальный пример, показывающий, что я делаю:

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

Ваш образец не печатает предупреждения в Firefox 48 на OSX, так что я могу только догадываться, но

2D-холст использует предварительно умноженную альфу. WebGL по умолчанию использует un-premultipled alpha для текстур. Это означает, что для переноса содержимого текстуры холста оно должно быть преобразовано в предварительно умноженное альфа, которое в зависимости от того, как это реализовано, может быть медленным.

Если вам не нужен не-альфа в предварительно умноженный вашей текстуре, то вы можете сказать WebGL вы хотите предварительно умноженных данные при вызове texImage2D и texSubImage2D по телефону gl.pixelStorei и сказать ему, как этот

gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); 

В этом случае браузер может просто использовать данные холста как есть. Это может привести к тому, что предупреждение исчезнет. Обратите внимание, если вы просто загружаете, как только вам, вероятно, все равно. Если вы загружаете каждый кадр, возможно, вам стоит.

Знайте, что это gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); эффекты ВСЕ текстурные загрузки, включая необработанные данные. Например

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

если UNPACK_PREMULTIPLY_ALPHA_WEBGL является true браузер будет делать premultiplication перед загрузкой текстуры так [255, 255, 255, 128] станет [64, 96, 128, 128].

UNPACK_FLIP_Y_WEBGL также может влиять на скорость загрузки в зависимости от того, как он реализован в браузере.