Three.js反锯齿不适用于Chrome [英] Three.js antialiasing not working on Chrome

问题描述

我目前正在运行Chrome v31，并且反锯齿似乎根本不起作用。两个浏览器都没有错误。

可能相关的代码：

  var renderer = new THREE.WebGLRenderer （{antialias：true}）; 
  

在Safari中渲染得很好：

与Chrome：

解决方案

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

你可以做两件事来增加质量。首先设置一个渲染器属性

  renderer.shadowMapType = THREE.PCFSoftShadowMap; //选项是THREE.BasicShadowMap | THREE.PCFShadowMap | THREE.PCFSoftShadowMap 
  

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

  light.shadowMapWidth = 1024; //默认为512 
 light.shadowMapHeight = 1024; //缺省值为512 
  

在这里可以看到： Chrome / MacOS中Three.js阴影的质量？

我相信这取决于您使用的浏览器和系统。据我所知，Firefox现在根本不支持抗锯齿功能。也可能取决于您的图形卡和驱动程序。例如，我在2009年中期的MacBook Pro中没有在Chrome中获得抗锯齿功能，但我在2012年后期的新机器上获得了抗锯齿功能。

另外，您可以考虑使用FXAA着色器将抗锯齿作为后期处理步骤。你可以在这里阅读关于后处理。

阅读更多： Antialiasing在Three.js中不起作用

I'm currently running Chrome v31 and antialiasing seems to not be working at all. No errors in either browsers.

Possibly relevant code:

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

In Safari it renders fine:

vs Chrome:

解决方案

It seems to be a rendering issue with Chrome, perhaps you have the 32 bit Chrome installed?

You can do two things to increase the quality. First set a renderer attribute

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

and then you can also increase the shadowmap size of your light with:

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

as seen in the issue here: Quality of Three.js shadow in Chrome/MacOS?

" I believe that this depends on the browser and system you are using. As far as i know, Firefox doesn't support antialiasing right now at all. Also it may be dependant on your graphics card and drivers. For example, i don't get antialiasing in Chrome on my old mid 2009 MacBook Pro, but i do get antialiasing on my newer late 2012 machine.

Also, you may consider using the FXAA shader to do the antialiasing as a postprocessing step. You can read about postprocessing here. "

Read more: Antialiasing not working in Three.js

这篇关于Three.js反锯齿不适用于Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！