WebGL Texture Loading Performance (v37)

Revision 37 of this benchmark created on

Preparation HTML

<script>
var glcanvas = document.createElement('canvas');
  var gl = glcanvas.getContext('webgl2');
 var texHD = gl.createTexture();
function imageLoaded(i) {
gl.bindTexture(gl.TEXTURE_2D, texHD);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, i);
}
</script>


<img id="imgHD" onload="imageLoaded"  src="https://tctechcrunch2011.files.wordpress.com/2013/05/sf-directions-from-home.png">


<script>
  
  var imgHD = document.getElementById("imgHD");

  var canvasHD = document.createElement('canvas');
  canvasHD.width = 1920;
  canvasHD.height = 1080;

  var bitmapHD = createImageBitmap(new ImageData(new Uint8Array(1920*1080*4), 1920, 1080));

  var idHD = new ImageData(new Uint8Array(1920*1080*4), 1920, 1080);
  
  var abHD = new Uint8Array(1920*1080*4).buffer;

  var uint8HD = new Uint8Array(1920*1080*4);
  
  var cuint8HD = new Uint8ClampedArray(1920*1080*4);



  
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
texImage2D HD Image 
gl.bindTexture(gl.TEXTURE_2D, texHD);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1920, 1080, 0, gl.RGBA, gl.UNSIGNED_BYTE, imgHD);
ready
texImage2D HD canvas
gl.bindTexture(gl.TEXTURE_2D, texHD);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1920, 1080, 0, gl.RGBA, gl.UNSIGNED_BYTE, canvasHD);
ready
texImage2D HD Bitmap
gl.bindTexture(gl.TEXTURE_2D, texHD);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1920, 1080, 0, gl.RGBA, gl.UNSIGNED_BYTE, bitmapHD);
ready
texImage2D HD ImageData
gl.bindTexture(gl.TEXTURE_2D, texHD);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1920, 1080, 0, gl.RGBA, gl.UNSIGNED_BYTE, idHD);
ready
texImage2D HD ArrayBuffer
gl.bindTexture(gl.TEXTURE_2D, texHD);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1920, 1080, 0, gl.RGBA, gl.UNSIGNED_BYTE, abHD);
ready
texImage2D HD Uint8Array
gl.bindTexture(gl.TEXTURE_2D, texHD);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1920, 1080, 0, gl.RGBA, gl.UNSIGNED_BYTE, uint8HD);
ready
texImage2D Uint8ClampedArray
gl.bindTexture(gl.TEXTURE_2D, texHD);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1920, 1080, 0, gl.RGBA, gl.UNSIGNED_BYTE, cuint8HD);
ready

Revisions

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