Run results for: Shader compilation strategies

Run details:

User agent: Mozilla/5.0 (X11; CrOS x86_64 14909.100.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Browser: Chrome 104

Operating system: Chrome OS 14909.100.0

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Baseline	41.0 Ops/sec
Recommended (without using extension)	72.0 Ops/sec
Recommended (using extension)	66.4 Ops/sec

HTML Preparation code:

<canvas id='test' width='100' height='100'></canvas>

Script Preparation code:

// Shaders from here: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/By_example/Textures_from_code
// A variety of shaders and shader complexity would make this benchmark much more interesting!

var vertexShaderSource = `
    #version 100
    precision highp float;

    attribute vec2 position;

    void main() {
      gl_Position = vec4(position, 0.0, 1.0);
      gl_PointSize = 128.0;
    }
    `;

var fragmentShaderSource = `
    #version 100
    precision mediump float;
    void main() {
      vec2 fragmentPosition = 2.0*gl_PointCoord - 1.0;
      float distance = length(fragmentPosition);
      float distanceSqrd = distance * distance;
      gl_FragColor = vec4(
        0.2/distanceSqrd,
        0.1/distanceSqrd,
        0.0, 1.0 );
    }`;

const canvas = document.querySelector("canvas");
var gl = canvas.getContext("webgl");

// From https://developer.mozilla.org/en-US/docs/Web/API/KHR_parallel_shader_compile
var ext = gl.getExtension('KHR_parallel_shader_compile');

// Generator yielding a progress ratio [0.0, 1.0].
// Without the extension, this will jank and only check one program per generation.
function* linkingProgress(programs) {
    let todo = programs.slice();
    while (todo.length) {
        if (ext) {
            todo = todo.filter((x) => !gl.getProgramParameter(x, ext.COMPLETION_STATUS_KHR));
        } else {
            const x = todo.pop();
            gl.getProgramParameter(x, gl.LINK_STATUS);
        }
        if (!todo.length)
            return 1.0;
        yield 1.0 - (todo.length / programs.length);
    }
}

var numProgramsToGenerate = 15;

Tests:

Baseline
for (var i = 0; i < numProgramsToGenerate; i++) { const program = gl.createProgram(); const vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader, vertexShaderSource); gl.compileShader(vertexShader); const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, fragmentShaderSource); gl.compileShader(fragmentShader); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.deleteShader(vertexShader); gl.deleteShader(fragmentShader); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { const linkErrLog = gl.getProgramInfoLog(program); console.error(linkErrorLog); } }
Recommended (without using extension)
const programs = []; for (var i = 0; i < numProgramsToGenerate; i++) { const program = gl.createProgram(); const vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader, vertexShaderSource); gl.compileShader(vertexShader); const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, fragmentShaderSource); gl.compileShader(fragmentShader); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.deleteShader(vertexShader); gl.deleteShader(fragmentShader); programs.push(program); } for (var i = 0; i < numProgramsToGenerate; i++) { gl.linkProgram(programs[i]); } for (var i = 0; i < numProgramsToGenerate; i++) { if (!gl.getProgramParameter(programs[i], gl.LINK_STATUS)) { const linkErrLog = gl.getProgramInfoLog(programs[i]); console.error(linkErrorLog); } }
Recommended (using extension)
const programs = []; for (var i = 0; i < numProgramsToGenerate; i++) { const program = gl.createProgram(); const vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader, vertexShaderSource); gl.compileShader(vertexShader); const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, fragmentShaderSource); gl.compileShader(fragmentShader); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.deleteShader(vertexShader); gl.deleteShader(fragmentShader); programs.push(program); } for (var i = 0; i < numProgramsToGenerate; i++) { gl.linkProgram(programs[i]); } // You wouldn't want to loop directly here, rather if progress is not completed, // continue on with this frame and do something else. Check it again on the next frame. var progress = linkingProgress(programs); while (progress < 1.0) { progress = linkingProgress(programs); } for (var i = 0; i < numProgramsToGenerate; i++) { if (!gl.getProgramParameter(programs[i], gl.LINK_STATUS)) { const linkErrLog = gl.getProgramInfoLog(programs[i]); console.error(linkErrorLog); } }

Run results for: Shader compilation strategies

Validating guidance from https://developer.mozilla.org/en-US/docs/Web/API/KHR_parallel_shader_compile

Baseline

Recommended (without using extension)

Recommended (using extension)