【WebGL】ShadowMap实现阴影原理

假如场景中有一个平面和三角形，实现阴影的步骤和原理如下：

1.以灯光为相机视角渲染平面和三角形，记录片元的深度信息到gl_FragColor

<script id="vs1" type="x-shader/x-vertex">
  attribute vec4 a_Position;
  uniform mat4 u_PvMatrix;
  uniform mat4 u_ModelMatrix;
  void main(){
    gl_Position=u_PvMatrix*u_ModelMatrix*a_Position;
  }
</script>

<script id="fs1" type="x-shader/x-fragment">
  precision mediump float;
  void main(){
    gl_FragColor=vec4(gl_FragCoord.z,0.0,0.0,0.0);
  }
</script>

2.以相机为视角进行渲染三角形和平面，着色器如下

这里就是当前模型同一个点取得灯光视角空间的深度和在相机视角下的深度，进行对比（当前片元在投影贴图中所对应的片元）

之所以要先取灯光视角空间的所有模型的深度信息（上一步的帧缓存），是当前渲染的时候只能取得自己得深度

参考

https://juejin.cn/post/7067424409065095205

webgl2fundamentals的两个教程比较好，其中纹理投射那篇和上面那篇对应着看，对纹理映射也能加深理解
https://webgl2fundamentals.org/webgl/lessons/zh_cn/webgl-shadows.html
https://webgl2fundamentals.org/webgl/lessons/zh_cn/webgl-planar-projection-mapping.html