binding-draw-arrays.html | Explore in Territory

<!DOCTYPE html>
<html>

<head>
  <title>
    Test CPU performance of the WebGLRenderingContext.drawArrays binding
  </title>
  <script src="../resources/runner.js"></script>
</head>

<body>
  <canvas id="canvas" width=400 height=400></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const gl = canvas.getContext('webgl');

    const vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
      0.0, 0.5, 0.0,
      -0.5, -0.5, 0.0,
      0.5, -0.5, 0.0,
    ]), gl.STATIC_DRAW);
    gl.bindBuffer(gl.ARRAY_BUFFER, null);

    const vertShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertShader, `
      attribute vec3 a_coord;
      void main() {
          gl_Position = vec4(a_coord, 1.0);
      }`);
    gl.compileShader(vertShader);

    const fragShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragShader, `
      precision mediump float;
      uniform vec3 u_color;
      void main() {
          gl_FragColor = vec4(u_color, 1.0);
      }`);
    gl.compileShader(fragShader);

    const shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertShader);
    gl.attachShader(shaderProgram, fragShader);
    gl.linkProgram(shaderProgram);

    gl.useProgram(shaderProgram);
    const aCoord = gl.getAttribLocation(shaderProgram, 'a_coord');
    const uColor = gl.getUniformLocation(shaderProgram, 'u_color');

    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

    gl.vertexAttribPointer(aCoord, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(aCoord);

    gl.clearColor(0, 0, 0, 1);
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.uniform3fv(uColor, [0, 1, 0]);

    const iterations = 10000;
    PerfTestRunner.measureInnerRAFTime({
      description: `CPU time for ${iterations} calls to WebGLRenderingContext.drawArrays`,
      warmUpCount: 10,
      run() {
        gl.clear(gl.COLOR_BUFFER_BIT);
        for (let i = 0; i < iterations; ++i) {
          gl.drawArrays(gl.TRIANGLES, 0, 3);
        }
      }
    });
  </script>
</body>

</html>
chromium/third_party/blink/perf_tests/webgl/binding-draw-arrays.html
