webglqualifier v0.2.0
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: hi@nico-boo.com
License
MIT-License (see LICENSE file).
6 years ago