这个是写在 folio 那章之后的，嗝
# ui 设计上
在 ui 设计里面，在比较早的扁平化，拟物化，极简风之后出现的风格，比如轻拟物，玻璃磨砂，新拟物，黏土等，都是在”立体“的方向上走 UI 整体的风向是 细节多，复杂的拟物，（此时假设是一个吉他的图标，那么就会老老实实画出吉他每一根弦每一块商标）,到极简化，(这时候只要画一个吉他的轮廓，让人能认出来这是吉他，就够了），在这个阶段，都是为了方便人们了解应用的功能，在下一个阶段，是为了让使用者有更深的印象，也就是通过立体的感觉去加深用户印象，无论是玻璃、新拟物，全是往这个方向走的，前端的 material 标准也是同理 现在先不提实用性，像新拟物的话，我基本没在任何应用中见过
# 3d 的感觉来源
固然可以直接建模，做出真正意义上的 3d 效果，但除去比较新的 spline，其他建模软件使用的复杂度都远远超过了正常开发的标准，很多时候去做图标或者什么的时候，往往并没有用 3d 软件，但却做出了立体的效果，比如 ai 中的 2.5d，虽然看上去立体，但实际只是几个图片的堆叠。 我们能感受的立体感往往来自于两方面，一是生活常识，比如照片中的东西，即使是一平面，我们依然”知道“里面的东西是立体的，二是光线，如果光线在这个物体上表现出了与平面不一样的表现，人就会认为它是立体的
# 光线的 3d 表现
- 高光，也就是物体离光源最近的一个点
- 明部，离光源近的一侧
- 暗部，离光线远的一侧
- 明暗渐变区，明部和暗部的过度区域
- 阴影
- 发光，如果物体本身具有光源的特点，那么它在其他物体上的光线表现，一定与点光源不同
比如新拟物，就是加了更清晰的阴影，比如黏土风，就再多加了一层内阴影，比如糖果风，就是在一侧加了亮色的亮部，另一侧加了暗色的暗部，中间再用渐变色过度，最好在做一个亮的 shadow 去表现其发光性。基本都用了 box-shadow，其中高光在前端实现有点麻烦，可能要用伪元素啥的
# 其他的 3d 表现
当然也不止这几个点，比如在 spline 中（因为 spline 本质上还是在浏览器跑的，而且名义上是使用了 three，我个人对此存疑，如果是全用的 three，那么导出 shader 应该是很容易的事情，到现在为止这玩意儿既不支持导出贴图又不支持导出 shader，本身又不暴露任何事件，非常的憨批，前端人员是基本可以放弃这个的）,光线渲染能力不足，而且材质上也比较简陋，它的制作流程基本就是，用光线，菲涅尔，以及 depth 去制作材质，其中，阴影大多是用 depth 的效果去模拟的，而不是真实光线照出的影子。像菲尼尔，或者伪造的光线效果，一样对立体感有帮助
# 关于 folio2019
在这个项目里面，基本全是”伪造“的光线效果，或者对于”伪造“功能的补充
用 matcap，也即本身带光照信息的贴图去当物体的材质，表现上面中的 1，2，3，4 点
matcap 的问题是，一旦视角转动，就会有比较重的虚假感，这毕竟不是真实的贴图，所以整个项目中，不主动控制的话，camera 是不能转动只能平移的
通过地面以及最后的 effectshader，让整个页面从左下到右上有一定亮度变化，也就是模拟一个太阳永远存在于所有区域的东南侧高空（是平行光不是点光源
既然模拟了一个太阳，那假设太阳对应的 3d 点位是（x,y,z)，物体本身高度是 h ，那么就可以计算出物体的阴影，也就是说，这些阴影是被算出来的，那么当物体碰撞时，物体数值变化，就会动态计算阴影
有一些物体是绑定的，不是单个的，没办法计算阴影，那么就使用阴影贴图，通过 alpha 通道来实现，这个就和计算没关系，就是一个贴图的效果，（静态阴影）
还有一些我自己实现的东西，就单写一篇好了，这里不赘述了 当然这种伪造也会有不方便，一旦这个太阳在尼玛其他地方，就出大问题， 动态阴影中空物体位置要变，静态阴影贴图要重新渲染，effectcomposer 要重新写，matcap 贴图也要换......