Detecting the GPU with a browser and javascript

Question

I need to find out if a user is browsing a website with the a graphics card on the webgl blacklist using Chrome:

http://support.google.com/chrome/bin/answer.py?hl=en-GB&answer=1220892

Specifically, I need to know if they are using ATI cards. The project I am doing with THREE.js produces a very ugly render (the lines are nto anti-aliased) when viewed in Chrome on an ATI card and I want to provide an alternative.

I know there is a post effect that blurs the lines but the result with the art direction is even worse.

AFAIK that's impossible using only JS, but correct me if I'm wrong. You'd need to use some browser-implementation to detect that (if possible) — alexandernst, Nov 02 '12 at 14:25
What about rendering a simple scene (one line) and comparing single pixels against the reference? — Torsten Becker, Nov 03 '12 at 06:03
@noiv I think the way we are going to implement it is to render a simple scene but instead of comparing against a reference just look for certain colours. If anti-aliasing is off rendering a white line on a black background shouldn't produce any grey. — Evanbbb, Nov 03 '12 at 20:33
@Evanbbb, sounds good, please post your 3x3 pixel test scene :) — Torsten Becker, Nov 03 '12 at 21:30

score 3 · Accepted Answer · answered Nov 07 '12 at 13:53

Try this:

function aa_test() {
renderer.setSize(4, 4);

var ortho_camera =  new THREE.OrthographicCamera(0, 4, 0, 4, 0, 1 );
var output = new Uint8Array( 4 );

    var material = new THREE.LineBasicMaterial({
      color: 0xffffff
    });

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0, 0, 0));
geometry.vertices.push(new THREE.Vector3(4, 4, 0));

    var line = new THREE.Line(geometry, material);

    renderer.clearTarget( aa_target.renderTarget, true, true, true );
    renderer.context.lineWidth(4);

aa_target.add(line);
renderer.render( aa_target, ortho_camera, aa_target.renderTarget );

renderer.context.readPixels( 0, 2, 1, 1, renderer.context.RGBA,    renderer.context.UNSIGNED_BYTE, output );

if (output[0] == 0)
    aa_available = false;

}

So what you have, is a test for whether AA is available. This method works in Three.js. I've tried looking at Chrome and its special pages (chrome://gpu etc) but getting that data into an arbitrary js script is not possible.

Using FXAA is not so bad SO LONG as the line thickness is around 1.6. Otherwise, you dont get enough line to blend. FXAA is great for scenes that have a lot going on, but if the scene is mostly lines, then it tends to fade the lines into the background too much.

The best answer for this would be FXAA and using the approach here:

https://github.com/OpenGLInsights/OpenGLInsightsCode/tree/master/Chapter%2011%20Antialiased%20Volumetric%20Lines%20Using%20Shader-Based%20Extrusion

this uses a geometry shader yes, but earlier on, it mentions use of a vertex shader to get the same result. This would most likely give much nicer lines.

Hope that helps! :D

Tapio · Answer 2 · 2012-11-05T12:38:09.560

The OpenGL calls that usually can be used to find out the info are useless for this purpose in WebGL since the browser mangles the string values: http://jsbin.com/ovekor/3/ However, there is an extension WEBGL_debug_renderer_info, which could be used, but current browser support is unknown and since it has been marked as a security risk, it will not be smooth to use (might require a debug flag of some kind or a user prompt).

It is also a bit evil to test simply e.g. for "ATI cards", since the drivers might improve or the problem not be present on some of the cards. (This is analogous to the infamous browser sniffing vs. feature detection.)

As such, your best bet is to do a little test render as suggested in the comments.

I know there is a post effect that blurs the lines but the result with the art direction is even worse.

If you mean HorizontalBlurShader and VerticalBlurShader, then I suggest you try FXAAShader, which is an actual screen-space anti-aliasing filter instead of just blurring the entire image.

Detecting the GPU with a browser and javascript

2 Answers2