WebGLQualifier

WebGLQualifier is a simple way to qualify the 3d capabilities of the browser. Instead of having a user choice for quality (low, medium, high, ...), it will fast benchmark the webgl performance.

How does it work ?

Actually, the benchmark is entirely done with a shader. It is a shader using raymarching to stress the graphic card. It will calculate the FPS during the rendering and will qualify the quality according to the FPS. That's all.

Why raymarching ?

First, the benchmark needs to rapidly qualify the performance (at the beginning of a website, for example). So I used raymarching because it is shader intensive, and if the graphic card is capable of supporting this, it should be able to support a lot of polygons and post-processing effects. Actually the shader is a very basic raymarching example (that you can watch if you add showBenchmark: true to the options).

Usage

General

<script src="dist/WebGLQualifier.js"></script>
<script>
    // create qualifier
    var qualifier = new WebGLQualifier();

    // launch benchmark
    console.log('starting benchmark...');
    qualifier.benchmark(function(fps, qualityName, qualityValue) {
        console.log('benchmark results : ' + qualityName + ' (' + qualityValue + ') / ' + fps + 'fps');
    });
</script>

Options

You can pass various options to the qualifier :

new WebGLQualifier({
    benchmarkDuration: 5,
    qualityRange: [20, 40],
    qualityNames: ['low', 'medium', 'high'],
    showBenchmark: true,
    ...
});

• benchmarkDuration (default: 2) : duration of the benchmark
• benchmarkVertexShader : vertex shader used for benchmarking (warning: modify it at your own risks)
• benchmarkFragmentShader : fragment shader used for benchmarking (warning: modify it at your own risks)
• qualityRange (default: [15, 30, 45, 56]) : FPS will return an index according to this array (0 if FPS<15, 1 if 15<=FPS<30... 4 if FPS>=56)
• qualityNames (default: ['ultralow', 'low', 'medium', 'high', 'ultrahigh']) : name of the quality range index. this array length must be qualityRange array length + 1
• showBenchmark (default: false) : display the rendering during the benchmark

Installation

npm install

Development

gulp

Production

gulp build

Output directory is dist/

More Information

• Author: Nicolas Bouvet
• Website: http://www.nico-boo.com/
• LinkedIn: http://fr.linkedin.com/in/nicoboo
• Email: [email protected]

License

MIT-License (see LICENSE file).