使用浏览器和javascript检测GPU

Question

我需要知道用户是否正在使用Chrome浏览带有webgl黑名单上的显卡的网站:

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

具体来说,我需要知道他们是否使用ATI卡.我在THREE.js上做的项目在ATI卡上的Chrome浏览器中产生了一个非常难看的渲染(线条没有消除锯齿),我想提供一个替代方案.

我知道有一个后期效果模糊了线条,但艺术方向的结果更糟糕.

Answer 1

尝试这个：

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;

}

所以你要做的就是测试 AA 是否可用。此方法适用于 Three.js。我尝试查看 Chrome 及其特殊页面（chrome://gpu 等），但无法将该数据放入任意 js 脚本中。

使用 FXAA 还不错，因为线条粗细约为 1.6。否则，您将无法获得足够的线条来混合。FXAA 非常适合有很多事情发生的场景，但如果场景主要是线条，那么它往往会使线条过多地淡入背景。

对此的最佳答案是 FXAA 并使用此处的方法：

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

是的，这使用了几何着色器，但之前它提到使用顶点着色器来获得相同的结果。这很可能会产生更好的线条。

希望有帮助！：D