webgl 基础渲染demo_Webgl水平不能老停留十年之前

前些日子客户都会转这个人工智能大会的webgl,老泪纵横，在webgl搞了那么多年之后，组织上终于想起这玩意了么？终于捡起来当噱头了么

https://ai.worldaic.com.cn/pre

但翻了一下之后，脸色逐渐严肃，这个水平任重而道远啊，你基本可以一眼就看出来浓浓的国产气质，和十年前quest3d时代的水平近似。

康托还是得从技术层面分析分析，啥是好的，啥是精致细腻，这东西还是有标准的，并不是什么云山雾罩的玄学。

首先这个场景设计是有的，能看出来对各个主题展商的分割，引擎用的是playcanvas,好像最近国内用的还挺多，（但是普遍还到不了他们官方demo的水平）所以也可以支持手机浏览。

但是，本身包体感觉挺大的刷新起来速度很慢，影子用了实时影（由于shadowmap分辨率问题，经常出现锯齿），对手机性能要求还是比较高，我一游戏行业出来的会觉得不能忍（当然这个只能说技术洁癖，本身还是见仁见智的事情）本身相机的旋转拖曳延迟严重，不知道是何原因，感受很不舒服。

另外就是ui设计过于密集混乱，容易误触，设计师应该没有三维ui的设计经验，均照搬了2dui的逻辑，button也设计的过大。

还有一个我最不喜欢的部分，就是光照和材质部分，貌似严谨，内部还是太过粗糙，这个是国内作品普遍短板。

首先就是整体色调苍白，这个我不认为是设计问题，纯是技术实现出了问题

因为场景中本身有很多建筑为白色素体，色彩倾向和立体感来自于光照和GI对它的影响，而此项目采用蓝色天光的本意我猜测应该就是避免白色天光的无色彩属性，而是希望通过蓝色天光为建筑带来色彩调性，至于效果么。。实在不佳

如果单一白色建筑，应该有至少冷暖两色倾向的光照，来强调立体感，暗示方向性，天光本身是没有方向性，而实时光照的叠加方式会让白色过曝，最终就是一片苍白非常不适。

另外就是单一平行光源如天光太阳光缺乏衰减，而本身大场景的节奏感就需要许多小型的点光进行强调，或者通过丰富的材质色彩来进行分割，国内的设计师在这方面普遍没有任何概念。

最后是材质问题，由于html5的技术问题，一般很难对pbr做完整支持，但是对于反光高光类的效果，应该还是尽量通过skybox , 或者matcap加以模拟，否则在场景转动时候会缺乏动态感。

那理想的webgl美术应该是什么流程呢。

首先要以色彩代替材质，如果是纯色感觉的物体，尽量以大贴图的altas通过uv的框定来设置色彩，这样就能以尽量少的draw来绘制场景，对性能有巨大帮助

然后就是二重uv,本身贴图需要一层，再给一层到lightmap,保证面的彻底展开利用，lightmap本身不需要很大，因为光照本身普遍有渐变感，一个面有即使只有4*4的像素感觉也是对的。

然后就是打光，三点补光，戏剧光天光都是可以，现代的渲染引擎因为GI的无比强大，可以说怎么打怎么好看，稍微强调一下光色的色彩偏向和角度，必要的时候打一点手动补光，或者干脆找hdr图片进行打光，效果都不错。

然后进行lightmap烘培，我们的目标是将前期光照尽量转换为贴图，webgl可以降低对运算的依赖，这里要注意，单层的lightmap即使是采用高动态色彩区间的exr,仅仅叠加给基础贴图效果也是并不理想的，我采用的技术选型是将ao+shadow渲染一层，光照渲染一层，单独分开对基础贴图进行变暗和提亮，这样可以通过直接对贴图再进行gamma或者curve调整，这部分思路其实和后期comp 先渲染再合成思路类似的。

最后我们得到的效果，甚至可以无视shader获得漂亮细腻的光色，当然要完全与offline 渲染的效果一致比较难，因为linear光等等的问题，但是依然可以获得非常丰富细腻的实时渲染效果。国外作品和国内作品在这些细节上立即能看出高下。

艺术标准大家各有体系，但是技术体系我以为还是有硬标准的，大家应咬牙努力，勿为人后。

http://weixin.qq.com/r/6nVsdBjEJkVZrVwX9yD4 (二维码自动识别)