深度贴图(depth map)概念简介和生成流程

techbrood 发表于 2016-07-25 08:58:42

标签: depth map, shadow map

- +

Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可见的”。

Depth map中像素点记录的深度值为lenth1;然后从视点出现,计算物体顶点v到视点的距离,记为lenth2;比较二者大小,来确定“v”是否被遮挡。该术语的同义词有depth buffer, Z-buffer, Z-buffering 和 Z-depth。这里的"Z"是相对于相机(即视点)视图中心轴线而言的,也就是相机的z轴线,而不是场景的绝对坐标中的z轴线。

下面是一个立方框的深度图示例:


Shadow texture 阴影贴图,就是日常所见的阴影保存为纹理图片;


Depth texture保存的是“从视点到物体顶点的距离,通常称为深度值”。

 

Shadow map 以depth map 为技术基础,通过比较“光源可见点到光源的深度”和“任何点到光源的深度”来判断点是否被物体遮挡;

 

shadow texture 技术,将生成的阴影图形作为投影纹理来处理,也就是将一张阴影图投影映射到一个物体上(阴影接收体)。这种方法的缺点在于:设计者必须确认哪个物体是遮挡物,哪个物体是阴影接受体,并且不能产生自阴影现象(按照常识,物体的阴影不会投射到自己身上)。

生成深度贴图的流程
  • 以光源所在位置为相机位置,光线发射方向为观察方向进行相机参数设置;

  • 将世界视点投影矩阵 worldViewProjMatrix 传入顶点着色程序中,并在其中计算每个点的投影坐标,投影坐标的Z 值即为深度值(将Z 值保存为深度值只是很多方法中的一种)。在片段shadow 程序中将深度值进行归一化,即转化到【0,1】区间。然后将深度值赋给颜色值

  • 从 frame buffer 中读取颜色值,并渲染到一张纹理上,就得到了depthmap。


注意:在实际运用中,如果遇到动态光影,则depth map 通常是实时计算的,这就需要场景渲染两次,第一次渲染出depth map,然后基于depth map 做阴影渲染。

用途
  • 模拟在一个场景中的密度均匀的半透明介质效果-如雾,烟或大量的水;

  • 模拟场景表面的深度域(depth of field (DOF));

  • 可用于高效的变形体碰撞检测。

possitive(1) views28724 comments1

发送私信

最新评论

iefreer 2016-07-25 10:12:56

参考阅读:https://en.wikipedia.org/wiki/Depth_of_field


请先 登录 再评论.
相关文章
  • html5跨平台实战-第一周-水平测验-新闻列表页面

    这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图

  • 踏得网精选2016年度10大最佳HTML5动画

    踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...

  • 通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

    常常听到人们对于HTML5的讨论,看了页面头部这个那个就是HTML5,误认为HTML5只是新增些标签“而已”,学完了

  • HTTP1.1协议现状、问题和解决方案

    HTTP的现状最早的HTTP协议非常简单,只能用来传送文本,方法也只有GET,后来逐步发展到1.1,能够支持多种MIME格式数据(如文本、文件),支持GET,POST,HEAD,OPTI...

  • 学习使用CSS制作进度条

    进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope

  • 三维向量的简单运算和实用意义

    在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...

  • Three.js入门教程2 - 着色器(上)

    之前我已经给出了一篇

  • WebGL入门教程6 - 光照效果和Phong光照模型

    正是因为有了光,世界才能被我们看见,在3D的世界里,光照给物体带来真实的视觉感受。当光照射在某一表面上时,它可能被吸收、反射或投射。其中入射到表面上的一...

  • 如何使用WebGL创建一个逼真的下雨动画

    之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...

  • WebGL入门教程1 - 3D绘图基础知识

    现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数...

  • 如何基于Canvas来模拟真实雨景Part1:预备知识和创建基本对象

    我们之前使用CSS3实现过

  • 如何使用CSS3实现一个平滑的3D文本标题

    要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...

  • 使用requestAnimationFrame和Canvas给按钮添加绕边动画

    要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...

  • 使用CSS3实现流星雨动画教程

    很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...

  • 如何使用CSS3/SCSS实现逼真的车窗雨滴效果

    在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素:.raindrop

  • 在PHP网页程序中执行Sass/Compass命令

    我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...

  • 更多...