WebGL Texture Loading Performance

JavaScript performance comparison

Revision 3 of this test case created by Carlos R.

Info

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 code

<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

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/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);
pending…
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);
pending…
texImage2D 512
gl.bindTexture(gl.TEXTURE_2D, tex512);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, gl.RGBA, gl.UNSIGNED_BYTE, img512);
pending…
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);
pending…
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);
pending…
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);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment