Benchmark: Shader compilation strategies

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); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Baseline
Recommended (without using extension)
Recommended (using extension)

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark results and analyze the three test cases:

**Test Cases:**

1. **Baseline**: This test case links each program individually using `gl.linkProgram(programs[i])` without utilizing the shader link group extension.
2. **Recommended (without using extension)**: Similar to the baseline, but the same logic is used, just with a different name for clarity.
3. **Recommended (using extension)**: This test case uses the shader link group extension (`linkingProgress(programs)`) to manage program linking.

**Benchmark Results:**

The results show the following:

* The Baseline test has the lowest executions per second (40.98360824584961).
* The Recommended (without using extension) test has a higher executions per second (66.4168472290039), which is closer to the Recommended (using extension) test.
* The Recommended (using extension) test has the highest executions per second (72.04963684082031).

**Analysis:**

The results suggest that using the shader link group extension (`linkingProgress(programs)`) provides a significant performance improvement over linking programs individually (Baseline and Recommended without extension). This is likely because the extension allows for more efficient management of program dependencies and reduces the overhead associated with individual linking operations.

In contrast, the Baseline test has the lowest executions per second, indicating that linking each program individually incurs additional overhead compared to using the shader link group extension.

The Recommended (without using extension) test falls somewhere in between, suggesting that this approach still offers some performance benefits but not as much as utilizing the shader link group extension.

**Key Takeaways:**

* Using the shader link group extension can provide significant performance improvements over linking programs individually.
* Linking each program individually incurs additional overhead compared to using the shader link group extension.
* The Recommended (without using extension) test falls in between the Baseline and Recommended (using extension) tests, suggesting that this approach still offers some benefits but not as much as utilizing the shader link group extension.

Latest run results:

Run details: (Test run date: 2 years ago)

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/OS: Chrome 104 on Chrome OS 14909.100.0

View result in a separate tab

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

Related benchmarks:

Shader compilation strategies (version: 0)

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

Comparing performance of: Baseline vs Recommended (without using extension) vs Recommended (using extension)

Created: 2 years ago by: Guest

Jump to the latest result

Baseline

Recommended (without using extension)

Recommended (using extension)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):