使用浏览器和javascript检测GPU

Question

我需要找出用户是否在使用Chrome浏览器浏览一个被WebGL黑名单限制的网站时，使用了一张显卡。

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

具体来说，我需要知道他们是否使用ATI显卡。我正在使用THREE.js进行的项目在Chrome上使用ATI显卡查看时会产生非常丑陋的渲染效果（线条不平滑），因此我想提供一种替代方案。

我知道有一种后期效果可以模糊线条，但与美术方向的结果更差。

- Evanbbb

---

据我所知，仅使用JS是不可能的，但如果我错了，请纠正我。您需要使用某些浏览器实现来检测它（如果可能）。 - alexandernst

渲染一个简单的场景（一行）并将单个像素与参考像素进行比较，这个方案怎么样？ - Torsten Becker

@noiv 我认为我们将实现的方式是渲染一个简单的场景，但不是与参考图像进行比较，而是寻找特定的颜色。如果关闭抗锯齿，在黑色背景上渲染白线不应该产生任何灰色。 - Evanbbb

@Evanbbb，听起来不错，请发布你的3x3像素测试场景 :) - Torsten Becker

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

- Oni

Answer 2

在WebGL中，通常用于查找信息的OpenGL调用对于此目的是无用的，因为浏览器会篡改字符串值：http://jsbin.com/ovekor/3/。然而，有一个扩展WEBGL_debug_renderer_info可以使用，但当前浏览器支持情况未知，并且由于被标记为安全风险，使用起来可能不太顺畅（可能需要某种调试标志或用户提示）。

仅仅测试“ATI卡”也有点邪恶，因为驱动程序可能会改进，或者问题在某些卡上不存在。（这类似于臭名昭著的浏览器嗅探与特性检测之间的区别。）

因此，最好的方法是按照评论中建议进行一些小型测试渲染。

我知道有一种后期效果可以模糊线条，但与艺术方向的结果更糟。

如果您指的是HorizontalBlurShader和VerticalBlurShader，那么我建议您尝试使用FXAAShader，它是一种实际的屏幕空间抗锯齿滤镜，而不仅仅是模糊整个图像。

- Tapio