threejs阴影的渲染机制

理解threejs阴影的渲染机制，对控制阴影的产生性能可以有很大的帮助。本文将对threejs阴影的形成做个简要概述。

threejs中阴影的形成分两步，首先threejs会渲染出针对castShadow和receiveShadow的设定，对每个receiveShadow的面生成一个阴影纹理，然后再把这个纹理给贴在该面上。给每个面贴纹理需要一定计算量，给每次面更新纹理也需要计算量。这两个计算量的存在，有时候能很大幅度的影响一个场景在低端机器上的渲染性能。

因此，threejs的WebglRenderer特别的推出了一个属性renderer.shadowMap.autoUpdate。我们可以给这个属性配置为false从而关闭每次移动摄像头或者添加无关紧要的对象等操作而导致的shadowMap的更新，从而避免上文中提到的第一步的运算量。

正如，下文对阴影提到的问题一样：

If your scene is static, only update the shadow map when something changes, rather than every frame

Use a CameraHelper to visualize the shadow camera’s viewing frustum

Remember that point light shadows are more expensive than other shadow types since they must render six times (once in each direction), compared with a single time for DirectionalLight and SpotLight shadows

While we’re on the topic of PointLight shadows, note that the CameraHelper only visualizes one out of six of the shadow directions when used to visualize point light shadows. It’s still useful, but you’ll need to use your imagination for the other 5 directions