GPU detection using browser and javascript

Question

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

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

In particular, I need to know if they use ATI cards. The project I am doing with THREE.js creates a very ugly render (the lines are not smoothing) when you are viewing in Chrome on an ATI map, and I want to provide an alternative.

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

Answer 1

Try the following:

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 an AA accessibility test. This method works in Three.js. I tried to browse Chrome and its special pages (chrome: // gpu, etc.), but getting this data into an arbitrary js script is not possible.

Using FXAA is not so bad. SO LONG since the line thickness is about 1.6. Otherwise, you will not get a sufficient line for mixing. FXAA is great for scenes that go through a lot, but if the scene is mostly lines, then it tends to fade lines too much in the background.

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 the yes geometric shader, but earlier he mentioned using the vertex shader to get the same result. This is likely to give much more pleasant lines.

Hope this helps !: D

Answer 2

OpenGL calls, which can usually be used to find information, are useless for this purpose in WebGL, because the browser controls string values: http://jsbin.com/ovekor/3/ However, there is a WEBGL_debug_renderer_info extension that can be used, but current browser support unknown and since it was noted as a security risk, it will not be smooth to use (some kind of debug flag or user prompt may be required).

It is also a little bad to check just for example. for "ATI cards", as drivers may improve or the problem will not be present on some cards. (This is similar to shamefully sniffing the browser and detecting a function.)

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

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

If you mean HorizontalBlurShader and VerticalBlurShader, then I suggest you try FXAAShader, which is the actual screen anti-aliasing filter, rather than just blurring the whole image.