WebGL Texture Loading Performance (v8)

Revision 8 of this benchmark created by Michael Bebenita on

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.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, 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.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, 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.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img256);
  };
  img256.src = canvas256.toDataURL();

var canvas128 = document.createElement('canvas');
  canvas128.width = 128;
  canvas128.height = 128;
  var img128 = new Image();
  var tex128 = gl.createTexture();
  img128.onload = function() {
      gl.bindTexture(gl.TEXTURE_2D, tex128);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img128);
  };
  img128.src = canvas128.toDataURL();

var buf1024 = new Uint8Array(1024 * 1024);

</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.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img1024);
ready
texSubImage2D 1024
gl.bindTexture(gl.TEXTURE_2D, tex1024);
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, img1024);
ready
texImage2D 512
gl.bindTexture(gl.TEXTURE_2D, tex512);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img512);
ready
texSubImage2D 512
gl.bindTexture(gl.TEXTURE_2D, tex512);
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, img512);
ready
texImage2D 256
gl.bindTexture(gl.TEXTURE_2D, tex256);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img256);
ready
texSubImage2D 256
gl.bindTexture(gl.TEXTURE_2D, tex256);
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, img256);
ready
texImage2D 128
gl.bindTexture(gl.TEXTURE_2D, tex128);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img128);
ready
texSubImage2D 128
gl.bindTexture(gl.TEXTURE_2D, tex128);
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, img128);
ready
texImage2D 1024 Luminance
gl.bindTexture(gl.TEXTURE_2D, tex1024);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, 1024, 1024, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, buf1024);
ready
texSubImage2D 1024 Luminance
gl.bindTexture(gl.TEXTURE_2D, tex1024);
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 1024, 1024, gl.LUMINANCE, gl.UNSIGNED_BYTE, buf1024);
ready

Revisions

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