Avoid CPU conversion with texImage2D in Firefox.

Question

Whenever I use textures in webgl Firefox (Firefox Developer Edition 50.0a2 for OSX to be able to excact) displays these warnings in the console:

Error: WebGL: texSubImage2D: Processor-side conversion performed, which is very slow
Error: WebGL: texSubImage2D: Corrupted processor pixel conversion, which is very slow
Error: WebGL: texSubImage2D: Selected format / type incurred expensive reformatting: 0x1908 / 0x1401

Is there any way to avoid this? I tried all combinations of allowed formats and types to call texImage2D , but I get the conversion to the CPU no matter what I try.

Here is a minimal example showing what I'm doing:

 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

Your sample does not print warnings in firefox 48 on OSX, so I can only guess, but

Two-dimensional canvas uses pre-multiplied alpha. WebGL by default uses un-premultipled alpha for textures. This means that to transfer the contents of the canvas texture, you need to convert it to pre-multiplied alpha, which, depending on how it is implemented, can be slow.

If you don't need un-premultiplied alpha in your texture, you can tell WebGL that you want to get pre-multiplied data when you call texImage2D and texSubImage2D by calling gl.pixelStorei and say so:

 gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); 

In this case, the browser can simply use the canvas data as is. This may cause the warning to disappear. Please note if you just download as soon as you probably don't care. If you download every frame, maybe you should.

Remember that gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); affects the loading of all textures, including raw data. for instance

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

if UNPACK_PREMULTIPLY_ALPHA_WEBGL is true , the browser will do preliminary multiplication before loading the texture, so [255, 255, 255, 128] will become [64, 96, 128, 128] .

UNPACK_FLIP_Y_WEBGL can also affect the download speed depending on how it is implemented in the browser.