WebGL+Threejs阴影与画质提升，提…

最初提升的的画质：





图一

提升之后的画质（具体哪个面应该smooth渲染，哪个面应该flat渲染都能清晰标识）：





图二

renderer.shadowMapType=THREE.PCFSoftShadowMap;

SoftShadow虽然能让边缘柔和，但只是基于像素颗粒的边缘柔和，在本身分辨率低的阴影里面几乎没有显著的效果。最好的方法还是直接提升分辨率。

打开SoftShadow如图一的效果，关闭SoftShadow后如图三的效果：





图三

可以看到影子内少了很多纹路。于是提高影子分辨率的方法还是这样：

           
spotLight.shadowMapHeight=2048;

           
spotLight.shadowMapWidth=2048;

让灯光的影子贴图分辨率提升（据说初始默认值是1024）

然后就是哪个面smooth渲染，哪个面flat渲染的问题。此处的模型使用Blender软件制作的，本身有标记边缘线以区分曲面还是折面的问题。但是发觉用auto
smooth方法是不行的，得用EdgeSplit修改器：





图四





图五：Auto
Smooth方法只能在blender里看到效果，导出js文件后Threejs+WebGL渲染不出效果

有了EdgeSplit，我们就不用费神得靠增加网格的办法来提高渲染平面的flat感觉了，赶紧删掉多余的分割网格：





图六：简直密集恐惧症的网格





图七：放大后还是很密集





图八：精简多了。

 

网格不能全部删除，由于在平面上打洞了，所以得留些线以符合3D描述，尤其是连接到洞的线，如图八里面的斜线。