Three.js抗锯齿功能无法在Chrome上运行

Question

我目前正在运行Chrome v31，而抗锯齿功能似乎根本无法运行。两种浏览器都没有错误。

可能相关的代码：

var renderer = new THREE.WebGLRenderer( { antialias: true } );

在Safari中，渲染效果很好：

vs Chrome：

Answer 1

这似乎是Chrome的渲染问题，也许你安装了 32位 Chrome？

你可以做两件事来提高质量。首先设置渲染器属性

renderer.shadowMapType = THREE.PCFSoftShadowMap; // options are THREE.BasicShadowMap | THREE.PCFShadowMap | THREE.PCFSoftShadowMap

然后您还可以使用以下方法增加灯光的阴影贴图大小：

light.shadowMapWidth = 1024; // default is 512
light.shadowMapHeight = 1024; // default is 512

如此处的问题所示：Quality of Three.js shadow in Chrome/MacOS?

“我认为这取决于您使用的浏览器和系统。据我所知，Firefox目前根本不支持抗锯齿功能。它也可能取决于您的显卡和驱动程序。例如，我在2009年中期的MacBook Pro上没有在Chrome中获得抗锯齿功能，但我确实在2012年末的新机器上获得了抗锯齿效果。

此外，您可以考虑使用FXAA着色器进行抗锯齿处理作为后处理步骤。你可以在这里阅读有关后处理的内容。 “

了解详情：Antialiasing not working in Three.js