计算机图形学 Computer Graphics 高级图形绘制方法 —纹理及纹理映射.

Presentation on theme: "计算机图形学 Computer Graphics 高级图形绘制方法 —纹理及纹理映射."— Presentation transcript:

1 计算机图形学 Computer Graphics 高级图形绘制方法 —纹理及纹理映射

2 纹理及纹理映射 纹理映射 扰动纹理 环境映射

3 纹理及纹理映射 Image Mapping Environment Mapping Bump Mapping

4 纹理 纹理（texture）通常指物体的表面细节

5 纹理映射 纹理映射技术的本质 定义表面上任意点属性的一种方式 漫反射率 镜面反射率 透明度 折射率 …

6 纹理映射 两类最常使用的纹理 颜色纹理：在光滑表面上产生花纹图案的效果 几何纹理：来使物体表面产生凹凸不平的效果

7 颜色纹理 确定表面上颜色纹理的两种方法 预先建立表面的纹理模型
纹理映射：建立表面上的每一点和一已知图像上的点的对应关系，取图像上相应点的颜色值作为表面上各点的颜色值

8 颜色纹理 采用景物表面的参数化表示来确立表面的纹理映射坐标，即可实现纹理图像在景物表面的映射 景物表面的参数化表示为f（u，v）
纹理图像表示为T（s，t） 建立景物表面参数空间（u，v）和纹理图像参数空间（s，t）之间的一一对应关系

9 颜色纹理 (a) 纹理空间 (b) 景物空间的曲面片 (c) 纹理映射后的曲面片

10 颜色纹理 颜色纹理映射的三个主要步骤： 1. 纹理函数定义 2. 映射函数定义 3. 纹理映射的实施

11 颜色纹理 实例：采用线性函数将规范化的栅格图案映射到位于第一象限的球面下半部分(π/4≤φ≤π/2) 四个角点： 映射函数：

12 颜色纹理 圆柱面映射： 圆柱面的参数方程 圆柱面上一点(x，y，z)的参数即纹理坐标

13 颜色纹理 球面映射 球面参数方程 球面上一点(x，y，z)的参数即纹理坐标

14 映射方式

15

16 三维纹理域的映射 二维纹理域，三维图形场景物体，二维纹理映射是一种非线性映射
纹理变形 不能保证纹理连续性 三维物体每一个点(x,y,z)均有一个纹理值t(x,y,z)，那么物体空间就可以映射到一个三维纹理空间上了－三维纹理域映射

17 三维纹理映射 纹理空间定义在三维空间上，与物体空间是同维的 把场景中的物体变换到纹理空间的局部坐标系中去
通过物体空间坐标(x,y,z)来计算纹理坐标(u,v,w)

18 几何纹理 几何纹理方法－对物体表面几何性质作微小扰动，产生凹凸不平的细节效果，给物体表面图象加上一个粗糙的外观
物体表面上的每一个点P(u,v)，都沿该点处的法向量方向位移F(u,v)个单位长度，新表面位置：

19 新表面法向量计算 通过对两个偏导数求叉积得到 F相对很小，忽略不计，有

20 几何纹理实现 扰动后的法向量单位化，用于计算曲面的明暗度，产生凹凸不平的几何纹理 F的偏导数的计算，可以用中心差分实现
几何纹理函数定义可以用统一的图案纹理记录 图案中较暗的颜色对应较小F值，较亮的颜色对应较大F值，把各象素的值一个二维数组记录下来，就是几何纹理统一表示

21 纹理映射例子 地板与墙都是经过二维图象纹理映射后的平面

22

23

24

25

26

27

28

29

30

31

32 从微软考题说起 将一张图象映到一张平面上 A B

33 建立一个映射关系F：A－> B 方法1：用F将A上的每个象素映射到B上。
方法2：对B上的每个象素反求A上的对应象素，将其属性映射到B上。

34 几何纹理 凹凸映射（bump mapping） 法向映射（normal mapping）
在不改变物体宏观几何的前提下，模拟物体表面粗糙的、褶皱的、凹凸不平的光照效果 法向映射（normal mapping） 利用法向纹理保证高质量的表面细节复现 位移映射（displacement mapping） 利用纹理改变物体表面上点的几何位置，获得很强的深度感和细节

35 几何纹理 法向映射（Normal mapping） 借助低精度模型和一个法向纹理，获得高精度模型的绘制效果
先计算高精度模型的法向，将其保存在法向纹理中，再将法向纹理映射到低精度模型上进行光照计算

36 几何纹理 位移映射（displacement mapping） 依据与表面上点所对应的纹理值，沿表面法向偏移该点的几何位置
能产生很强的深度感 自遮挡 自阴影 轮廓 计算代价大 与凹凸映射、法向映射相比

37 凹凸映射 方法 在应用光照明模型计算景物表面光亮度时，对景物表面法向进行微小的扰动 物体表面S由参数方程S=S(u,v) 表示
思想 在应用光照明模型计算景物表面光亮度时，对景物表面法向进行微小的扰动 方法 物体表面S由参数方程S=S(u,v) 表示 S上的任意一点（u，v）的法向n=Su×Sv 沿着表面S的法线方向叠加一个微小的扰动量P(u，v)定义了一张新的表面S’

38 凹凸映射 方法(cont.) 新表面的法向可用 n’=Su’×Sv’ 计算
在计算表面S的光亮度时，取新表面的法向量n’取代原光滑表面法向量n，生成物体表面的凹凸效果 扰动函数P(u，v)既可解析定义，也可通过二维图像定义

39 凹凸映射 示例

40 凹凸映射 示例

41 纹理反走样 纹理走样示例

42 纹理反走样 纹理走样原因

43 纹理反走样 常用纹理反走样方法 前置滤波方法 超采样方法 Mipmap方法

44 纹理反走样 前置滤波方法 确定屏幕像素P上可见的景物表面区域A 将区域A直接映射到纹理空间区域T
取区域T内的所有纹理像素颜色值的平均作为景物表面区域A的平均纹理颜色 代入光照明模型，计算出 像素P应显示的光亮度值 前置滤波

45 纹理反走样 前置滤波效果 走样 前置滤波

46 纹理反走样 超采样方法 将屏幕像素P的四个角点分别映射到纹理空间，得到四个纹理像素值

47 纹理反走样 超采样方法效果 走样 超采样

48 纹理反走样 Mipmap方法 MIP来源于 拉丁语“multum in parvo”，意为“many things in a small place” 目前应用最广的纹理反走样算法之一 通过预先计算并存贮原始 纹理图像的一组多分辨率 版本，能显著地节省纹理 反走样的计算量

49 Mipmap方法 预处理：生成一个由不同分辨率图像构成的纹理图像序列 从原始纹理图像出发，生成一个其分辨率为原始图像1/4的新的纹理图像版本
新版本中的每一个像素值取为原始图像中相对应的四个像素颜色值的平均 类似地基于所得到的新纹理图像版本生成一个更低分辨率的、尺寸更小的纹理图像版本 这一过程一直持续到最后生成的纹理图像仅包含一个像素为止

50 Mipmap方法 预处理

51 Mipmap方法 映射阶段 屏幕上的每一像素内的可见表面区域被映射到原始纹理图像上的一块区域
估计该区域所覆盖的原始纹理图像中像素的个数并以此作为选取适当分辨度的纹理图像版本的一种测度

52 Mipmap方法 映射阶段（cont.) 从预先构造的纹理图像序列中找出其压缩率最接近当前纹理像素与屏幕像素比率的两个纹理图像
在相邻分辨率的两纹理图像上计算当前屏幕像素映射点的纹理颜色值 根据两纹理图像对原始图像的压缩率在所得到的两个纹理颜色值间取加权平均，作为当前屏幕像素可见表面区域的颜色值

53 Mipmap方法 映射阶段（cont.)

54 Mipmap效果 无Mipmap 有Mipmap

55 纹理反走样效果对比

56 纹理映射实例程序 利用OpenGL实现纹理映射的三个主要步骤 生成纹理数据 将纹理数据载入纹理内存 将纹理数据映射到物体表面

57 纹理映射实例程序 讲解光盘中所附的程序 DEMO

58 纹理映射实例程序 Step1：生成纹理数据 void glInit (void) { …
if (!loadTGA ("texture.tga", 13)) printf ("texture.tga not found!\n"); } int loadTGA (char *name, int id) unsigned char *imageData = NULL; …. imageData = (unsigned char*)getData (s, size, imageBits); /* no image data */ if (imageData == NULL) returnError (s, TGA_BAD_DATA);

59 纹理映射实例程序 Step2：将纹理数据载入纹理内存 int loadTGA (char *name, int id) { …
glBindTexture (GL_TEXTURE_2D, id); glPixelStorei (GL_UNPACK_ALIGNMENT, 1); glTexParameteri (GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameteri (GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); glTexParameteri (GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri (GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexEnvf (GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_DECAL); glTexImage2D (GL_TEXTURE_2D, 0, texFormat, imageWidth, imageHeight, 0, texFormat, GL_UNSIGNED_BYTE, imageData); ... }

60 纹理映射实例程序 Step3：将纹理数据映射到物体表面 void drawFace (void) {
glEnable (GL_TEXTURE_2D); /* enable texture mapping */ glBindTexture (GL_TEXTURE_2D, 13); /* bind to our texture, has id of 13 */ … glBegin (GL_QUADS); glTexCoord2f (0.2f,0.2f); /* lower left corner of image */ glVertex3f (-10.0f, -10.0f, 0.0f); glTexCoord2f (0.6f, 0.2f); /* lower right corner of image */ glVertex3f (10.0f, -10.0f, 0.0f); glTexCoord2f (0.6f, 0.6f); /* upper right corner of image */ glVertex3f (10.0f, 10.0f, 0.0f); glTexCoord2f (0.2f, 0.6f); /* upper left corner of image */ glVertex3f (-10.0f, 10.0f, 0.0f); glEnd (); glDisable (GL_TEXTURE_2D); /* disable texture mapping */ }

61 纹理映射实例程序 结果

62 7.5 表面图案与纹理

63 7.5 表面图案与纹理 表面图案的描绘 将一幅平面图案描绘到物体表面上的过程如下： ⑴ 将平面图案上的各点(x, y)映射到物体表面的各点(x, y, z)。 ⑵ 求出点(x, y, z)处新的反射系数。 ⑶ 用光照模型计算物体表面点(x, y, z)的色彩明暗。

64 7.5 表面图案与纹理 对于目的四边形S内的任一点P，与在S内的对应点P的映射关系为： 两个凸多边形中的点的映射

65 7.5 表面图案与纹理 凸四边形S和S之间的位置映射算法如下： ⑴ 求S中的边的交点F、E，以及S中的边的交点F、E的位置。
⑵ 对于目的多边形S中的每一个元素P，寻找S中对应位置P。 ① 求PF与AB的交点P1，由P1得f1/f2；求PE与BC的交点P2，由P2得e1/e2。 ② 由f1/f2=f1/f2得P1的位置，由e1/e2=e1/e2得P2的位置。 ③ 求P1 F 与P2E的交点，即为点P的位置。 ④ 取P的色彩，求得P点新的反射系数。

66 7.5 表面图案与纹理 对于边数大于4的多边形，可以用网格的办法将目的多边形S和源多边形S相互对应地划分为凸四边形网格。对于网格中的每个四边形施行上述变换。 凹多边形划分为多个凸四边形分别进行映射

67 7.5 表面图案与纹理 Blinn在1978年提出，用扰动物体表面法线方向的方法来模拟表面凹凸纹理的真实感显示效果。
表面纹理的描绘 Blinn在1978年提出，用扰动物体表面法线方向的方法来模拟表面凹凸纹理的真实感显示效果。 物体的新表面S(u, v)定义为 S(u, v)=Q(u, v)+P(u, v) 上式对u、v分别求偏导函数，得

68 7.5 表面图案与纹理 上式中第三项皆可忽略（由于P(u,v) 很小），即得
记NS为S(u, v)的法向量。法向量可以表示为两个偏导向量Su和Sv的叉积，即： NS = SuSv =

69 Environment Maps Environment Map Viewer Reflected ray Object

70 OpenGL纹理映射 Create texture objects Specify how the texture is applied
1D, 2D, 3D Specify what does texture contain: say, color, depth, etc. Specify how the texture is applied Replace, modulate, or blend Enable texture mapping Specify scene with both geometric coordinates as well as texture coordinates

71 指定纹理 glTexImage2D(target, level, internalformat, width, height, border, format, type, *texels); E.g.: target: GL_TEXTURE_2D Level : 0 (for no mip maps) Internalformat: GL_RGB Width,height: 2^m+2*b, 256 by 256 with b=0 Border b: 0 Format: GL_RGB Type: GL_INT texels: actual texture image

72 指定mipmap You need to specify the levels for which mipmapping is being used. You can also specify scale factor (between the texture image and size of polygon). You also need to supply images for all levels. You use glTexParameteri() and glTexImage2D() glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_BASE_LEVEL, 2); glTexImage2D(..,2,…);

73 自动生成 mipmap If you have highest resolution image, OpenGL can generate low level prefiltered images automatically. gluBuild2DMipmaps() gluBuild2DMipmapsLevels() To build only a subset See book for detailed description of parameters

74 OpenGL 纹理过滤 We can specify the kind of filter to be applied
OpenGL filtering is crude but fast Specify filter using glParameteri() with GL_TEXTURE_MAG_FILTER and GL_TEXTURE_MIN_FILTER E.g. filters : GL_NEAREST, GL_LINEAR, GL_NEAREST_MIPMAP_LINEAR (for minification) E.g. glParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST);

75 其他函数 glGenTextures(); glBindTexture(); glEnable(GL_TEXTURE_2D);
To generate unique names glBindTexture(); Creates if texture object not already created Activates the texture object if already created Pass 0 to stop using texture objects glEnable(GL_TEXTURE_2D); Enables texture mapping glTexCoord2i(texcoordinate);

76 调整表面属性 Instead of replacing color, you can also modulate color or some other property of polygon. glTexEnv(GL_TEXTURE_ENV, pname, param); Pname and param specfiy how texture affects surface E.g. glTexEnv(GL_TEXTURE_ENV,GL_TEXTURE_ENV_MODE,GL_MODULATE);

77 纹理的技巧 If the texture is not large enough to cover a polygon, you can tile it using the GL_REPEAT parameter glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT ); You can also clamp the texture (i.e., stretch the last pixel to cover everything)

78 纹理边界 You can control what happens if a point maps to a texture coordinate outside of the texture image All textures are assumed to go from (0,0) to (1,1) in texture space Repeat: Assume the texture is tiled glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT) Clamp: Clamp to Edge: the texture coordinates are truncated to valid values, and then used glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP) Can specify a special border color: glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, R,G,B,A)

79 重复边界 (1,1) (0,0)

80 固定边界 (1,1) (0,0)

81 边界颜色 (1,1) (0,0)

82 其他 Texture must be in fast memory - it is accessed for every pixel drawn If you exceed it, performance will degrade horribly There are functions for managing texture memory Skilled artists can pack textures for different objects into one map Texture memory is typically limited, so a range of functions are available to manage it Specifying texture coordinates can be annoying, so there are functions to automate it for specific shapes, say quadrics, NURBS.

83 其他 There is a 4x4 texture matrix: apply a matrix transformation to texture coordinates before indexing texture There are “image processing” operations that can be applied to the pixels coming out of the texture

84 环境映射 Environment Map Environment mapping produces reflections on shiny objects Texture is transferred in the direction of the reflected ray from the environment map onto the object Reflected ray: R=2(N·V)N-V Viewer Reflected ray Object

85 环境映射 We use the direction of the reflected ray to index a texture map.
We can simulate reflections. This approach is not completely accurate. It assumes that all reflected rays begin from the same point, and that all objects in the scene are the same distance from that point.

86 凹凸贴图 Bump Mapping assumes that the Illumination model is applied at every pixel (as in Phong Shading or ray tracing). Swirly Bump Map Sphere w/Diffuse Texture & Bump Map Sphere w/Diffuse Texture

87 Thank You!