我需要使用 Chrome 查明用户是否正在使用 webgl 黑名单上的显卡浏览网站:
http://support.google.com/chrome/bin/answer.py?hl=en-GB&answer=1220892
具体来说,我需要知道他们是否使用 ATI 显卡。当我在 ATI 卡上的 Chrome 中查看时,我使用 THREE.js 进行的项目会产生非常丑陋的渲染(线条没有抗锯齿),我想提供一个替代方案。
我知道有一个模糊线条的后期效果,但艺术指导的结果更糟。
最佳答案
试试这个:
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 并使用此处的方法:
是的,这使用了几何着色器,但早些时候,它提到使用顶点着色器来获得相同的结果。这很可能会产生更好的线条。
希望对您有所帮助! :D
关于javascript - 使用浏览器和 javascript 检测 GPU,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13196753/