增加场景真实感

最近看了看sketchfab，一个以模型内容为主的展示和交易平台，感觉它的web端渲染效果做的比较不错，有些达到了照片级别的显示效果，我就研究下了渲染管线及相关后处理，它采用了OSGJS作为模型浏览器，说实在的，OSGJS 从渲染效果上比不过现在如日中天的threejs，但OSGJS渲染引擎架构比较出色，它是基于OSG架构开发的，模块划分、调用、层次关系更合理，其它的web端显示引擎架构多数都比较简单，采用大循环模式绘制场景。有时我在想架构搞的多复杂并不一定是好事，简单实用才是王道。他们的工程师确实比较有实力，对PBR渲染轻车熟路 ,听说后期加入的合伙人是参与起草webGL标准的。

当然它的用户体验做的也非常棒！在线模型展示这块应该是做的最好了。虽然我们公司前期也做了一些web协同端的工作，我也是比较早使用threejs作为viewer 基础给公司开发了个web展示套件,但用户体验和渲染质量跟人家有些差距，归结起来就是我们是做CAD的不搞旁门左道，没有深入开发：），专心搞定制，做公司相关业务。国内大多数做以模型内容展示和售卖的公司前几年也是如火如荼，但做不久就倒闭了，比如lao3d, icreator，这里确实佩服老外的创新精神和推广方式。

言归正传，由于使用了FXAA的缘故，总感觉画面模糊，丢失细节，看上去有点不真实，sketchfab 用OSGJS是如何做到渲染质量更好呢？它是物理渲染，我也做了物理渲染，为啥差距还不小呢？一项一项尝试，纳尼？原来是IBL和后处理，还有个神器~~~~~~~烘焙。

（1）IBL

做物理渲染的都知道， IBL 对提高渲染质量也是至关重要的，尤其是室内渲染，如果不做烘焙，不打灯光的情况下，IBL全局光照省时、实力、省心，出图的效果也不错。没有全局光照（烘焙我认为也是全局光照的一种技法），即使是使用物理渲染也是一坨翔，就像圣经里说的  God said, Let there be light: and there was light. 

（2）烘焙

你看看，这画面质量赶上UE场景渲染了，老牛了。看到这，我就在我的模型浏览器场景里调了调的，就是赶不上它，也得做到人家八成渲染质量，哎，最后楞是没调出来。看了看它的Viewer也没啥特别的？我再看看它加载纹理吧，噢，贴图带了光照信息，肯定是烘焙过的纹理。。。，我也不调我的模型浏览器物理渲染参数了，认输。

这个是我的模型浏览器调参数调出来的，，，

（3）后处理

就是人家不烘焙也清晰的多，显得更真实，图像更亮、更清晰。。。

看了看它的后处理，一项一项试验，原来是泛光+锐化的原因，俺也加上吧。。。

GIF 图， 从无锐化、无泛光 -> 锐化-> 锐化+泛光 ， 放大可以看出明显区别，公司的办公电脑比较烂，740GT， 1000多万三角面片，10多帧。。。

 

对于FXAA导致的模糊，先锐化一下图片再进行反走样，图片会清晰不少。泛光会使整个场景的亮度提高，但泛光用不好就会适得其反，会出现过曝的情况。