深度贴图(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(10) views34849 comments1

发送私信

最新评论

iefreer 2016-07-25 10:12:56

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


请先 登录 再评论.
相关文章
  • 3D感知和建模关键硬件技术:双目、3D结构光和TOF

    无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...

  • ARCore基本概念和工作原理简介

    谷歌的WebAROnARCore项目基于Android手机提供的ARCore增强现实引擎,要了解WebAROnARCore,需要先了解ARCore的工作原理。基本上ARCore做了两件事,首先跟踪手机...

  • html5跨平台实战-第一周-水平测验-新闻列表页面

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

  • JavaScript事件模型图解

    在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
    event是用户操作网页时发生的交互动作,比如clic...

  • 使用CSS3 box-decoration-break特性实现多行文本样式

    当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
    按照规范...

  • 前端开发框架技术选型:Angular2 VS React VS jQuery

    Angular和React是主流的2个前端开发框架,但是严格来说两者并非对等的概念。Angular是一个基于MVC(或者MVVM)的框架,包含model(模型)/view(视图)/controll...

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

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

  • Blender2.7 快捷键一览表

    通用操作
    停止当前操作:ESC
    快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
    单选:鼠标右键(RMB)全选:A
    框选:B
    刷选:...

  • S3TC(S3 Texture Compression)纹理压缩格式详解

    使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这...

  • IE各版本CSS Hack(兼容性处理)语法速查表

    为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...

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

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

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

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

  • 更多...