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

Answer 2

通常可以用来查找信息的OpenGL调用在WebGL中用于此目的，因为浏览器会破坏字符串值：http://jsbin.com/ovekor/3/但是，有一个扩展名WEBGL_debug_renderer_info，可以使用，但当前的浏览器支持是未知的，因为它已被标记为安全风险，它将不会顺利使用（可能需要某种类型的调试标志或用户提示）。

简单地测试例如也是有点邪恶的对于“ATI卡”，因为驱动程序可能会改善或某些卡上不存在问题。（这类似于臭名昭着的浏览器嗅探与特征检测。）

因此，您最好的选择是按照评论中的建议进行一些测试渲染。

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

如果你的意思是HorizontalBlurShader和VerticalBlurShader，那么我建议你试试FXAAShader，这是一个实际的屏幕空间抗锯齿滤镜，而不是模糊整个图像。

使用浏览器和javascript检测GPU

2 个答案: