问题描述
我目前正在运行Chrome v31,并且反锯齿似乎根本不起作用。两个浏览器都没有错误。
可能相关的代码:
var renderer = new THREE.WebGLRenderer ({antialias:true});
在Safari中渲染得很好:
与Chrome:
32位 Chrome?
你可以做两件事来增加质量。首先设置一个渲染器属性
renderer.shadowMapType = THREE.PCFSoftShadowMap; //选项是THREE.BasicShadowMap | THREE.PCFShadowMap | THREE.PCFSoftShadowMap
然后您也可以使用以下方式增加灯光的阴影贴图大小:
light.shadowMapWidth = 1024; //默认为512
light.shadowMapHeight = 1024; //缺省值为512
在这里可以看到:
我相信这取决于您使用的浏览器和系统。据我所知,Firefox现在根本不支持抗锯齿功能。也可能取决于您的图形卡和驱动程序。例如,我在2009年中期的MacBook Pro中没有在Chrome中获得抗锯齿功能,但我在2012年后期的新机器上获得了抗锯齿功能。
另外,您可以考虑使用FXAA着色器将抗锯齿作为后期处理步骤。你可以在这里阅读关于后处理。阅读更多:
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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!