transferToImageBitmap benchmark

by yjbanov

HTML

<canvas class="rendercanvas" width=1000 height=1000></canvas>
<canvas class="rendercanvas" width=1000 height=1000></canvas>
<canvas class="rendercanvas" width=1000 height=1000></canvas>
<canvas class="rendercanvas" width=1000 height=1000></canvas>
<canvas class="rendercanvas" width=1000 height=1000></canvas>
<canvas class="rendercanvas" width=1000 height=1000></canvas>
<canvas class="rendercanvas" width=1000 height=1000></canvas>
<canvas class="rendercanvas" width=1000 height=1000></canvas>
<canvas class="rendercanvas" width=1000 height=1000></canvas>
<canvas class="rendercanvas" width=1000 height=1000></canvas>

JavaScript

const offscreen = new OffscreenCanvas(1000, 1000);
const rendercanvases = document.querySelectorAll('.rendercanvas');
const gl = offscreen.getContext('webgl2');

const renderers = [];

for (let rendercanvas of rendercanvases) {
  renderers.push(rendercanvas.getContext('bitmaprenderer'));
}

var vertices = [
  -1,-1,-1, 1,-1,-1, 1, 1,-1, -1, 1,-1,
  -1,-1, 1, 1,-1, 1, 1, 1, 1, -1, 1, 1,
  -1,-1,-1, -1, 1,-1, -1, 1, 1, -1,-1, 1,
  1,-1,-1, 1, 1,-1, 1, 1, 1, 1,-1, 1,
  -1,-1,-1, -1,-1, 1, 1,-1, 1, 1,-1,-1,
  -1, 1,-1, -1, 1, 1, 1, 1, 1, 1, 1,-1, 
];

var colors = [
  5,3,7, 5,3,7, 5,3,7, 5,3,7,
  1,1,3, 1,1,3, 1,1,3, 1,1,3,
  0,0,1, 0,0,1, 0,0,1, 0,0,1,
  1,0,0, 1,0,0, 1,0,0, 1,0,0,
  1,1,0, 1,1,0, 1,1,0, 1,1,0,
  0,1,0, 0,1,0, 0,1,0, 0,1,0
];

var indices = [
  0,1,2, 0,2,3, 4,5,6, 4,6,7,
  8,9,10, 8,10,11, 12,13,14, 12,14,15,
  16,17,18, 16,18,19, 20,21,22, 20,22,23 
];

// Create and store data into vertex buffer
var vertex_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// Create and store data into color buffer
var color_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

// Create and store data into index buffer
var index_buffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

/*=================== Shaders =========================*/

var vertCode = 'attribute vec3 position;'+
    'uniform mat4 Pmatrix;'+
    'uniform mat4 Vmatrix;'+
    'uniform mat4 Mmatrix;'+
    'attribute vec3 color;'+//the color of the point
    'varying vec3 vColor;'+

    'void main(void) { '+//pre-built function
    'gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position, 1.);'+
    'vColor = color;'+
    '}';

var fragCode = 'precision mediump float;'+
    'varying vec3 vColor;'+
 ...