javascript - 使用浏览器和 javascript 检测 GPU

Question

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

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

具体来说，我需要知道他们是否使用 ATI 显卡。当我在 ATI 卡上的 Chrome 中查看时，我使用 THREE.js 进行的项目会产生非常丑陋的渲染(线条没有抗锯齿)，我想提供一个替代方案。

我知道有一个模糊线条的后期效果，但艺术指导的结果更糟。

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