theomonnom/index.html Secret

## index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Test Benchmark</title>
  </head>

  <body>
    <video id="bench-video" src="video.mp4" loop></video>
    <button id="bench-start">Start benchmark</button>
    <canvas id="bench-canvas" width="1280" height="720"></canvas>

    <script>
      function benchmark(name, method, time){
        const start = performance.now();
        let runs = 0;

        while(performance.now() - start < time){
          runs++;
          method();
        }

        const end = performance.now();
        const totalTime = (end - start) / 1000;
        const period = totalTime / runs;
        const ops = 1 / period;

        console.log(`${name} x ${ops} op/s (${runs} runs) in ${totalTime}`);
      }

      // Compare glTexImage2d & glSubTexImage2d
      const video = document.getElementById('bench-video');
      const button = document.getElementById('bench-start');
      const canvas = document.getElementById('bench-canvas');
      const gl = canvas.getContext('webgl2');

      if (!gl) {
        throw 'Unable to initialize WebGL';
      }

      let running = false;
      function run(){
        if(running)
          return;

        running = true;
        console.log('Starting benchmark')
        video.play();

        const texture = gl.createTexture();
        gl.bindTexture(gl.TEXTURE_2D, texture);

        benchmark('texImage2D', function(){
          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
          gl.finish();
        }, 5 * 1000);

        benchmark('texSubImage2D', function(){
          gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, video);
          gl.finish();
        }, 5 * 1000);

        running = false;
      }

      button.addEventListener('click', function(){
        setTimeout(run, 0);
      });
    </script>
  </body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Test Benchmark</title>
	</head>

	<body>
	<video id="bench-video" src="video.mp4" loop></video>
	<button id="bench-start">Start benchmark</button>
	<canvas id="bench-canvas" width="1280" height="720"></canvas>

	<script>
	function benchmark(name, method, time){
	const start = performance.now();
	let runs = 0;

	while(performance.now() - start < time){
	runs++;
	method();
	}

	const end = performance.now();
	const totalTime = (end - start) / 1000;
	const period = totalTime / runs;
	const ops = 1 / period;

	console.log(`${name} x ${ops} op/s (${runs} runs) in ${totalTime}`);
	}

	// Compare glTexImage2d & glSubTexImage2d
	const video = document.getElementById('bench-video');
	const button = document.getElementById('bench-start');
	const canvas = document.getElementById('bench-canvas');
	const gl = canvas.getContext('webgl2');

	if (!gl) {
	throw 'Unable to initialize WebGL';
	}

	let running = false;
	function run(){
	if(running)
	return;

	running = true;
	console.log('Starting benchmark')
	video.play();

	const texture = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, texture);

	benchmark('texImage2D', function(){
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
	gl.finish();
	}, 5 * 1000);

	benchmark('texSubImage2D', function(){
	gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, video);
	gl.finish();
	}, 5 * 1000);

	running = false;
	}

	button.addEventListener('click', function(){
	setTimeout(run, 0);
	});
	</script>
	</body>
	</html>