OpenGLES demo - 14. 阴影贴图 Shadow Map 之平行光

最新推荐文章于 2024-04-08 09:56:45 发布

hoytGM

最新推荐文章于 2024-04-08 09:56:45 发布

阅读量3.5k

点赞数

分类专栏： OpenGLES 文章标签： opengles shadow map 阴影贴图

本文链接：https://blog.youkuaiyun.com/hoytGM/article/details/38343829

版权

本文详细介绍了如何在OpenGLES中使用阴影贴图（Shadow Map）技术实现实时阴影效果。通过在光源位置渲染物体深度信息到贴图，然后在被投射面上进行两次变换对比深度，确定阴影区域。文章提供了Shader代码、顶点数据创建、深度贴图及Framebuffer的创建过程，展示了从高到低光源位置时物体在地板上形成的阴影变化，有助于理解并实现动态阴影效果。

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

原创文章，转载请注明链接 http://blog.youkuaiyun.com/hoytgm/article/details/38343829

假设有一个一个场景，里面摆放着各种物体，如果有一个光源，那么物体在地面上就会投射出阴影，这样整个场景显得更立体。那么我们这节就来讲讲怎么在OpenGLES里面实现阴影。

其实阴影的实现技术已经很成熟了，最节省效率的就是在模型下面贴一张椭圆的灰色贴图，跟着人物或者物体走。但是这种阴影没有物体或人物应该有的形状，一点都不生动。那么要做一个实时跟随物体或人物变化而变化的阴影，阴影贴图(Shadow Map)是一个很不错也很基本的方法。

那么先来说一说阴影贴图的基本原理。首先，在光源的位置(这个位置是我们任意指定的一个位置)对要投射阴影的物体(假设这里是一个立方体)渲染一次，并把最后渲染的深度信息存储在一张贴图上面，这个就需要用到上一章讲的Framebuffer，不同的是我们用GL_DEPTH_ATTACHMENT，而不是上一章的GL_COLOR_ATTACHMENT0。有了这张贴图，我们画被投射面(通常是地板或者墙壁)的时候，先做正常的MVP变换，这是得到被投影面的最终位置，然后还需要从光源的角度再对被投射面做一次MVP变换，这时候就得到了从光源处观看被投射面的位置信息。然后用这个位置信息的xy坐标去采样刚开始得到的深度贴图，就能得到整个被投射面上面的深度信息，如果采样得到的深度比被投射面本身的深度小，那说明这个位置就是刚才投射阴影物体的地方，也就是阴影区域了。

这章先讲一个平行光源投射阴影的例子，我们画一块地板，然后地板上面画一个彩色立方体，立方体在地板上面投射出阴影，原理很简单，实现起来还是会写比较多的代码。

先看渲染立方体的Shader代码

    char* color_vs =
    "precision mediump float;\n"
    "attribute vec4 aPosition;\n"
    "attribute vec3 aColor;\n"
    "uniform mat4 uMvp;\n"
    "varying vec3 vColor;\n"
    "void main() {\n"
    "    gl_Position = uMvp*aPosition;\n"
    "    vColor = aColor;\n"
    "}\n";
    
    char* color_fs =
    "precision mediump float;\n"
    "uniform sampler2D uTex;\n"
    "varying vec3 vColor;\n"
    "void main() {\n"
    "    gl_FragColor = vec4(vColor, 1.0);\n"
    "}\n";

很简单，没有什么好讲的

再看渲染阴影用的Shader

    char* texture_vs =
    "precision mediump float;\n"
    "attribute vec4 aPosition;\n"
    "uniform mat4 uMvp;\n"
    "uniform mat4 uShadowMvp;\n"
    "varying vec4 vTexCoord;\n"
    "void main() {\n"
    "    gl_Position = uMvp*aPosition;\n"