【WebGL】ShadowMap实现阴影原理

GAMESLI-GIS

已于 2024-08-22 10:38:58 修改

阅读量323

点赞数

分类专栏： WebGL 文章标签： webgl

于 2023-06-13 14:43:45 首次发布

本文链接：https://blog.youkuaiyun.com/qq_22849251/article/details/131188144

版权

WebGL 专栏收录该内容

18 篇文章

订阅专栏

文章详细阐述了在WebGL中如何通过渲染平面和三角形来创建阴影效果，首先从灯光视角记录深度信息，然后使用相机视角进行比较，通过深度对比实现阴影的投射。这一过程涉及到投影贴图、纹理映射和自定义着色器的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1.以灯光为相机视角渲染平面和三角形，记录片元的深度信息到gl_FragColor，存在帧缓存，下一步以纹理uniform[u_ShadowMap]形式传入

<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>

这里主要需要关注的是gl_FragCoord

gl_FragCoord 是OpenGL和WebGL中的一个内建变量，它在片段着色器（Fragment Shader）中提供当前片元（fragment）的窗口坐标（window-space coordinates）。这是一个vec4类型的变量，其分量分别表示片元的x坐标、y坐标、深度值，以及一个常量值。

gl_FragCoord 的组成
gl_FragCoord 是一个四维向量（vec4），每个分量的含义如下：

gl_FragCoord.x: 片元在窗口坐标系中的x坐标，屏幕坐标，单位像素
gl_FragCoord.y: 片元在窗口坐标系中的y坐标，屏幕坐标，单位像素
gl_FragCoord.z: 片元的深度值（z值），范围通常在0.0到1.0之间，对应深度缓冲（Depth Buffer）的值。
gl_FragCoord.w: 常数值，通常为1.0，但在某些高级用途中可以用于其他目的。

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

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

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

<script id="vs2" type="x-shader/x-vertex">
  attribute vec4 a_Position;
  uniform mat4 u_PvMatrix;// 相机的投影视图矩阵
  uniform mat4 u_ModelMatrix;
  
  uniform mat4 u_PvMatrixLight;// 灯光的投影视图矩阵
  varying vec4 v_ClipPosLight;//  以灯光为相机时，顶点在裁剪空间里的位置
  void main(){
    vec4 worldPos=u_ModelMatrix*a_Position;
    gl_Position=u_PvMatrix*worldPos;
    v_ClipPosLight=u_PvMatrixLight*worldPos;
  }
</script>
<script id="fs2" type="x-shader/x-fragment">
  precision mediump float;
  uniform sampler2D u_ShadowMap;
  varying vec4 v_ClipPosLight;
  bool isInShadow(){
    vec3 fragPos=(v_ClipPosLight.xyz/v_ClipPosLight.w)/2.0 + 0.5;// v_ClipPosLight.xyz/v_ClipPosLight.w是自己进行透视除法，再/2+0.5就是转到片元空间了
    vec4 shadowFrag = texture2D(u_ShadowMap, fragPos.xy);
    return fragPos.z>shadowFrag.r+1.0/256.0;
  }
  void main(){
    float darkness=isInShadow()?0.7:1.0;
    gl_FragColor=vec4(vec3(darkness),1.0);
  }
</script>