WebGL Texture Loading Performance (v3)

Revision 3 of this benchmark created by Carlos R. on

Description

Please note the internalformat, pixeldataformat, and pixeldatatype members. The order of the channel does matter. Modern graphics cards prefer BGRA, and the combination pixeldataformat=GLBGRA + pixeldatatype=GLUNSIGNEDINT8888REV has helped me with texture uploads and desktop OpenGL a lot. Essentially, this allows the driver to upload directly to VRAM, without expensive swizzling. This change improved performance considerably, as can be seen in the results.

Preparation HTML

<script>
  var glcanvas = document.createElement('canvas');
  var gl = glcanvas.getContext('experimental-webgl');
  
  var canvas1024 = document.createElement('canvas');
  canvas1024.width = 1024;
  canvas1024.height = 1024;
  var img1024 = new Image();
  var tex1024 = gl.createTexture();
  img1024.onload = function() {
      gl.bindTexture(gl.TEXTURE_2D, tex1024);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, gl.BGRA, gl.UNSIGNED_INT_8_8_8_8_REV, img1024);
  };
  img1024.src = canvas1024.toDataURL();
  
  var canvas512 = document.createElement('canvas');
  canvas512.width = 512;
  canvas512.height = 512;
  var img512 = new Image();
  var tex512 = gl.createTexture();
  img512.onload = function() {
      gl.bindTexture(gl.TEXTURE_2D, tex512);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, gl.BGRA, gl.UNSIGNED_INT_8_8_8_8_REV, img512);
  };
  img512.src = canvas512.toDataURL();
  
  var canvas256 = document.createElement('canvas');
  canvas256.width = 256;
  canvas256.height = 256;
  var img256 = new Image();
  var tex256 = gl.createTexture();
  img256.onload = function() {
      gl.bindTexture(gl.TEXTURE_2D, tex256);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, gl.BGRA, gl.UNSIGNED_INT_8_8_8_8_REV, img256);
  };
  img256.src = canvas256.toDataURL();
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
texImage2D 1024
gl.bindTexture(gl.TEXTURE_2D, tex1024);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, gl.BGRA, gl.UNSIGNED_INT_8_8_8_8_REV, img1024);
ready
texSubImage2D 1024
gl.bindTexture(gl.TEXTURE_2D, tex1024);
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.BGRA, gl.UNSIGNED_INT_8_8_8_8_REV, img1024);
ready
texImage2D 512
gl.bindTexture(gl.TEXTURE_2D, tex512);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, gl.RGBA, gl.UNSIGNED_BYTE, img512);
ready
texSubImage2D 512
gl.bindTexture(gl.TEXTURE_2D, tex512);
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.BGRA, gl.UNSIGNED_INT_8_8_8_8_REV, img512);
ready
texImage2D 256
gl.bindTexture(gl.TEXTURE_2D, tex256);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, gl.BGRA, gl.UNSIGNED_INT_8_8_8_8_REV, img256);
ready
texSubImage2D 256
gl.bindTexture(gl.TEXTURE_2D, tex256);
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.BGRA, gl.UNSIGNED_INT_8_8_8_8_REV, img256);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.