8

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

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

具体来说，我需要知道他们是否使用 ATI 卡。我正在使用 THREE.js 进行的项目在 ATI 卡上的 Chrome 中查看时会产生非常难看的渲染（线条未消除锯齿），我想提供一个替代方案。

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

4

2 回答 2

3

尝试这个：

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

于 2012-11-07T13:53:16.620 回答
1

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

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

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

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

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

于 2012-11-05T08:31:07.707 回答