texture-sources

JavaScript performance comparison

Test case created by Ilmari

Preparation code

<script>
  var c = document.createElement('canvas');
  c.width = c.height = 512;
  var gl = c.getContext('experimental-webgl');
  var tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  
  var c2 = document.createElement('canvas');
  c2.width = c2.height = 512;
  var gl2 = c2.getContext('experimental-webgl');
  var tex2 = gl2.createTexture();
  gl2.bindTexture(gl2.TEXTURE_2D, tex2);
  gl2.pixelStorei(gl2.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1);
  
  var c3 = document.createElement('canvas');
  c3.width = c3.height = 512;
  var gl3 = c3.getContext('experimental-webgl');
  var tex3 = gl3.createTexture();
  gl3.bindTexture(gl3.TEXTURE_2D, tex3);
  gl3.pixelStorei(gl3.UNPACK_FLIP_Y_WEBGL, 1);
  
  var video = document.createElement('video');
  video.src = 'http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm';
  
  var typedArray = new Uint8Array(640 * 360 * 4);
  
  var canvas = document.createElement('canvas');
  canvas.width = 640;
  canvas.height = 360;
  var cctx = canvas.getContext('2d');
  var idata = cctx.getImageData(0, 0, 640, 360);
  
  var glCanvas = document.createElement('canvas');
  glCanvas.width = 640;
  glCanvas.height = 360;
  glCanvas.getContext('experimental-webgl');
  
  var img = new Image();
  img.src = canvas.toDataURL();
</script>
    

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
canvas
gl.texImage2D(gl.TEXTURE_2d, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
pending…
glCanvas
gl.texImage2D(gl.TEXTURE_2d, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, glCanvas);
pending…
typedArray
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 640, 360, 0, gl.RGBA, gl.UNSIGNED_BYTE, typedArray);
pending…
imageData
gl.texImage2D(gl.TEXTURE_2d, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, idata);
pending…
image
gl.texImage2D(gl.TEXTURE_2d, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
pending…
video
gl.texImage2D(gl.TEXTURE_2d, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
pending…
canvas premult
gl2.texImage2D(gl.TEXTURE_2d, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
pending…
imageData premult
gl2.texImage2D(gl.TEXTURE_2d, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, idata);
pending…
image premult
gl2.texImage2D(gl.TEXTURE_2d, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
pending…
imageData flip
gl3.texImage2D(gl.TEXTURE_2d, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, idata);
pending…
typedArray premult
gl2.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 640, 360, 0, gl.RGBA, gl.UNSIGNED_BYTE, typedArray);
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.

1 Comment

witek commented :

Firefox 8.0, gives on 'video':

[Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: "http://jsperf.com/texture-sources Line: 1"].