CPU vs GPU texImage2D

JavaScript performance comparison

Test case created by ivanpopelyshev

Preparation code


      
      <script>
Benchmark.prototype.setup = function() {
  let webglCanvas = document.createElement('canvas');
  let gl = webglCanvas.getContext('webgl');
  let texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  
  let offscreenCanvas = new OffscreenCanvas(100, 100);
  let offscreenContext = offscreenCanvas.getContext('2d');
  offscreenContext.fillStyle = 'pink';
  offscreenContext.fillRect(0, 0, 100, 100);
  
  let screenCanvas = document.createElement('canvas');
  let screenContext = screenCanvas.getContext('2d');
  screenContext.fillStyle = 'yellow';
  screenContext.fillRect(0, 0, 100, 100);
  
  let screenCanvas2 = document.createElement('canvas');
  let screenContext2 = screenCanvas2.getContext('2d');
  screenContext2.fillStyle = 'yellow';
  screenContext2.fillRect(0, 0, 100, 100);
  let pixels = screenContext2.getImageData(0, 0, 100, 100);

};
</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, screenCanvas);
pending…
OffscreenCanvas
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, offscreenCanvas);
pending…
canvas after getImageData
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, screenCanvas2);
pending…

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

Compare results of other browsers

0 Comments