Three.js 如何给模型的渲染进行优化？

Question

如何给模型的渲染进行优化？
上图是我自己渲染出来的，下图是把模型上传到别的平台上渲染出来的，但是，很明显看出下图的更清晰一些，是因为加了阴影吗？还是别的什么？怎么样才能做到像图二一样。

（这是我渲染出来的）

---

（这是通过别的平台渲染出来的）

Answer 1

1、mesh的边缘线加上一些线条，可以增加轮廓感。EdgesGeometry（边缘几何体）+ LineSegments（线段）+ LineBasicMaterial（基础线条材质），可以实现。值得注意的是，如果线条太清晰，会使得模型像线稿图。

2、从three.js中找到一些示例发现，后期处理的AO环境光遮蔽可以达到这种效果（边缘线有阴影）。
但是，因为后期处理的是实时的AO，所以可能会导致有比较多的噪点，需要再搭配后期处理的抗锯齿使用。
可是即便是这样，感觉效果还是不太行，可能跟光照的因素还是有比较大的。而且，两者叠加，对渲染性能要求比较高。

如果可以，可以尝试使用glsl去写这种AO环境光遮蔽的效果，说不定会更好。可以看看这些glsl的示例：https://www.shadertoy.com/results?query=ambient+occlusion&sor...