openGL CG5 – Environment Mapping (环境贴图)

最新推荐文章于 2022-09-18 17:12:45 发布
最新推荐文章于 2022-09-18 17:12:45 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： OpenGL
本文介绍了如何使用Cg进行环境贴图，包括环境贴图的原理、创建环境贴图的方法以及如何在Cg中实现环境贴图的效果。文中详细解释了如何计算反射向量，并展示了如何使用Cg内置函数实现环境反射。

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

利用物体材质specular属性来模拟高反光的物体是不够的。高反光的物体通常可以在表面反射出周围的物体，这样的效果需要通过环境贴图来实现。这篇教程将介绍如何利用Cg进行环境贴图。环境反射的原理很简单，一个光滑的物体表面可以根据我们观察的不同角度反射出不同位置的环境。即物体表面一点反射的颜色和该点的法线，观察视线和反射视线有关系。

1Fig1 观察视线和反射

Fig1中显示了它们的关系，其中I为观察视线，N为物体上一点p的法线，R为I的反射视线。P点的颜色取决于反射视线R，只要R达到周围环境一点p1，那么p1的颜色就会显示到p点上。向量R可以根据公式

R = 2(I•N)•N-I

简单计算，或者使用Cg的内置函数reflect()，该函数接受参数向量I和法线N，返回I关于N的反射向量。


  
  

   
   

    
    

     
     [cpp] 
     
     view plain
     
     copy
     
     

    
    

   
   

   
   
  1. float3 R = reflect(I,N);  

有了反射向量R，现在只要创建好环境贴图后，再根据R在环境贴图中查询出对应的颜色即可。环境贴图就是一个每个面都带有贴图的立方体，六个面的贴图刚好可以并接在一起，看起来就像周围环境一样。

2

Fig2 环境贴图

Fig2展示了一个环境贴图的六个面，在创建环境贴图的时候，只需要将这六个面贴到立方体对应面上即可。要创建环境贴图，可以简单的渲染六个正方形，然后分别贴上不同的贴图。下面是使用环境贴图渲染茶壶的例子。

3Fig3 茶壶的环境贴图

OpenGL的扩展glew中提供了对环境贴图的支持，要开启对环境贴图的支持，使用下面代码即可。

  
  

   
   

    
    

     
     [cpp] 
     
     view plain
     
     copy
     
     

    
    

   
   

   
   
  1. glEnable(GL_TEXTURE_CUBE_MAP);  

当然要在使用环境贴图之间，要创建一个环境贴图。下面给出创建环境贴图的代码。


  
  

   
   

    
    

     
     [cpp] 
     
     view plain
     
     copy
     
     

    
    

   
   

   
   
  1. void LoadCubeMapFromBMP()  
  2. {  
  3.       AUX_RGBImageRec *x_pos_map = auxDIBImageLoad("img/pos_x.bmp");  
  4.       AUX_RGBImageRec *x_neg_map = auxDIBImageLoad("img/neg_x.bmp");  
  5.       AUX_RGBImageRec *y_pos_map = auxDIBImageLoad("img/pos_y.bmp");  
  6.       AUX_RGBImageRec *y_neg_map = auxDIBImageLoad("img/neg_y.bmp");  
  7.       AUX_RGBImageRec *z_pos_map = auxDIBImageLoad("img/pos_z.bmp");  
  8.       AUX_RGBImageRec *z_neg_map = auxDIBImageLoad("img/neg_z.bmp");  
  9.    
  10.       glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X, 0, 3, x_pos_map->sizeX, x_pos_map->sizeY,  
  11.                     0, GL_RGB, GL_UNSIGNED_BYTE, x_pos_map->data);  
  12.    
  13.       glTexImage2D(GL_TEXTURE_CUBE_MAP_NEGATIVE_X, 0, 3, x_neg_map->sizeX, x_neg_map->sizeY,  
  14.            0, GL_RGB, GL_UNSIGNED_BYTE, x_neg_map->data);  
  15.    
  16.       glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_Y, 0, 3, y_pos_map->sizeX, y_pos_map->sizeY,  
  17.            0, GL_RGB, GL_UNSIGNED_BYTE,  y_pos_map->data);  
  18.    
  19.       glTexImage2D(GL_TEXTURE_CUBE_MAP_NEGATIVE_Y, 0, 3, y_neg_map->sizeX, y_neg_map->sizeY,  
  20.            0, GL_RGB, GL_UNSIGNED_BYTE, y_neg_map->data);  
  21.    
  22.       glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_Z, 0, 3, z_pos_map->sizeX, z_pos_map->sizeY,  
  23.            0, GL_RGB, GL_UNSIGNED_BYTE, z_pos_map->data);  
  24.    
  25.       glTexImage2D(GL_TEXTURE_CUBE_MAP_NEGATIVE_Z, 0, 3, z_neg_map->sizeX, z_neg_map->sizeY,  
  26.            0, GL_RGB, GL_UNSIGNED_BYTE, z_neg_map->data);  
  27.    
  28.       glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR);  
  29.       glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);  
  30.       glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);  
  31.       glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);  
  32. }  

从代码中可以看到，首先使用glaux扩展读取六个作为环境贴图的纹理数据。使用glTexImage2D创建纹理的时候使用了

  
  

   
   

    
    

     
     [cpp] 
     
     view plain
     
     copy
     
     

    
    

   
   

   
   
  1. GL_TEXTURE_CUBE_MAP_POSITIVE_X  
  2. .  
  3. .  
  4. .  
  5. GL_TEXTURE_CUBE_MAP_NEGATIVE_Z  

它们分别表示环境贴图的不同方向的纹理，然后glTexParameteri设置贴图参数的时候使用GL_TEXTURE_CUBE_MAP表示对环境贴图设置参数。创建好环境贴图后，就可以直接在openGL中渲染。

  
  

   
   

    
    

     
     [cpp] 
     
     view plain
     
     copy
     
     

    
    

   
   

   
   
  1. glEnable(GL_TEXTURE_CUBE_MAP);  
  2. glBindTexture(GL_TEXTURE_CUBE_MAP, ENVIRONMENT_MAP);  
  3. glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_REPLACE);  
  4.        
  5. glBegin(GL_QUADS);  
  6. for (int i=0; i<4*6; i++)  
  7. {  
  8.       glTexCoord3fv(vertex[i]);  
  9.       glVertex3fv(vertex[i]);  
  10. }  
  11. glEnd();  
  12.    
  13. glDisable(GL_TEXTURE_CUBE_MAP);  

上面的代码就可以渲染整个环境贴图了，vertex表示立方体的顶点，它的定义如下。


  
  

   
   

    
    

     
     [cpp] 
     
     view plain
     
     copy
     
     

    
    

   
   

   
   
  1. static const GLfloat vertex[4*6][3] = {  
  2.       /* Positive X face. */  
  3.       { 1, -1, -1 },  { 1, 1, -1 },  { 1, 1, 1 },  { 1, -1, 1 },  
  4.       /* Negative X face. */  
  5.       { -1, -1, -1 },  { -1, 1, -1 },  { -1, 1, 1 },  { -1, -1, 1 },  
  6.       /* Positive Y face. */  
  7.       { -1, 1, -1 },  { 1, 1, -1 },  { 1, 1, 1 },  { -1, 1, 1 },  
  8.       /* Negative Y face. */  
  9.       { -1, -1, -1 },  { 1, -1, -1 },  { 1, -1, 1 },  { -1, -1, 1 },  
  10.       /* Positive Z face. */  
  11.       { -1, -1, 1 },  { 1, -1, 1 },  { 1, 1, 1 },  { -1, 1, 1 },  
  12.       /* Negative Z face. */  
  13.       { -1, -1, -1 },  { 1, -1, -1 },  { 1, 1, -1 },  { -1, 1, -1 },  
  14. };  

立方体的六个面这里用了24个顶点来表示，这样可以方便的对每个顶点设置纹理坐标。就像下面的代码：

  
  

   
   

    
    

     
     [cpp] 
     
     view plain
     
     copy
     
     

    
    

   
   

   
   
  1. glTexCoord3fv(vertex[i]);  
  2. glVertex3fv(vertex[i]);  

到现在为止，已经做好了渲染环境贴图的准备工作了，下面就是完成shader的内容。利用Cg来进行环境贴图很方便，也很简单。Cg中提供了内置函数来为我们做这些工作，先来看看vertex shader的内容。

vs05.cg


  
  

   
   

    
    

     
     [cpp] 
     
     view plain
     
     copy
     
     

    
    

   
   

   
   
  1. void vs_main(   float4 position : POSITION,     // 顶点坐标  
  2.                   float2 texCoord : TEXCOORD0,   // 纹理坐标  
  3.                   float3 normal   : NORMAL,      // 顶点法线  
  4.                     
  5.                   out float4 oPosition : POSITION,   
  6.                   out float2 oTexCoord : TEXCOORD0,  
  7.                   out float3 R         : TEXCOORD1,  //反射向量R，保存在纹理坐标中  
  8.                     
  9.                   uniform float3   eyePositionW,  
  10.                   uniform float4x4 MVP)  
  11. {  
  12.       oPosition = mul(MVP, position);  
  13.       oTexCoord = texCoord;  
  14.        
  15.       float3 N = normalize(normal);  
  16.       float3 I = position-eyePositionW;  //计算观察向量  
  17.    
  18.       R = reflect(I,N);  //利用Cg内置函数计算I关于N的反射向量  
  19. }  

可以看到vertex shader的内容很简单，主要就是计算反射向量R，并将它传到fragment shader。 而在fragment shader中，我们要用Cg函数texCUBE(cubemap，R),该函数接受两个参数，一个是刚才我们创建的环境贴图纹理数据，一个是反射向量。该函数会自动根据传入的反射向量，然后计算该反射向量和这个环境贴图的交点，并且插值计算出该点对应的像素颜色并返回。整个fragment shader代码如下。

05fs.cg


  
  

   
   

    
    

     
     [cpp] 
     
     view plain
     
     copy
     
     

    
    

   
   

   
   
  1. void fs_main(   float2 texCoord : TEXCOORD0,  
  2.                   float3 R        : TEXCOORD1,  
  3.                     
  4.                   out float4 color :COLOR,  
  5.                     
  6.                   uniform float reflectivity,  
  7.                   uniform samplerCUBE cubemap)  
  8. {  
  9.       float4 reflectedColor = texCUBE(cubemap, R);  
  10.       color = reflectedColor;  
  11. }  

fragment shader代码很简洁，就是利用函数texCUBE在环境贴图中查询向量R对应的像素颜色。这样就可得到Fig3中的效果。为了真实的模拟反光的物体，有的时候可以对反光的物体再加上纹理，因为在生活中完全反光的物体几乎是没有的，加上其他纹理可以是反光效果真实一些。

3Fig4 环境贴图对比

要让环境反射的颜色和纹理颜色混合，只需要向alpha混合一样即可。如果反射的颜色为Cr,纹理颜色为Ct,那么混合后的颜色C

C = (1 - factor)•Ct + factor•Cr

这里factor就是混合系数了。现在只与需要对fragment进行很少的修改就可以实现这个效果。

05fs.cg


  
  

   
   

    
    

     
     [cpp] 
     
     view plain
     
     copy
     
     

    
    

   
   

   
   
  1. void fs_main(     float2 texCoord : TEXCOORD0,  
  2.                   float3 R        : TEXCOORD1,  
  3.                     
  4.                   out float4 color :COLOR,  
  5.                     
  6.                   uniform float reflectivity,  
  7.                   uniform sampler2D decalMAP, // 只需增加传入一个纹理  
  8.                   uniform samplerCUBE cubemap)  
  9. {  
  10.       float4 reflectedColor = texCUBE(cubemap, R);  //计算反射颜色  
  11.       float4 decalColor = tex2D(decalMAP, texCoord); //计算纹理颜色  
  12.    
  13.       color = lerp(decalColor, reflectedColor, reflectivity); //混合反射颜色和纹理颜色，reflectivity为混合系数  
  14. }  

这里使用了Cg另一个内置函数lerp，该函数根据传入的混合系数，进行线性插值计算。一般混合系数在0和1之间。整个环境贴图还是比较简单，也比较容易实现。但是这中环境贴图也有很多不利的地方，比如模拟环境的贴图一般是静态图片，所以环境不能发生变化。还有如果同时渲染多个物体，每个物体不能其他的物体反射到表面，想要达到这种效果要使用ray tracing(光线跟踪)或 render to texture(渲染到纹理)技术。

ShaderJoy —— 实现 “Environment Mapping 模拟反射和折射”【基于 RenderMonkey】
ShaderJoy 的兴趣技术杂货铺
07-30 2224
1.Bump Map遇到的法线坐标系转换问题 因为法线贴图中读取出的法线是基于Tangent Space的，为了方便某些计算，需要将它们换算到World Space，那么就需要构造一个变换矩阵： mat3 tangentToWorldMat = mat3( v_tangent, v_binormal,
【Unity Shader】 CubeMap（立方体贴图）
热门推荐
赞美月亮的专栏
03-07 4万+
Unity Shader 立方体贴图 一、介绍CubeMap Shader中对CubeMap采样 Unity中如何制作CubeMap 二、Reflect CubeMap（反射立方体纹理用于环境映射） 环境映射原理 反射方向的计算 Unity Shader实现Reflection CubeMap（基于CubeMap的反射效果） 反射CubeMap的Shader代码 反射效果展示 ps:“...
openGL正方体贴图
12-12
实现二维纹理映射，vs2013直接解压打开sln文件配置好环境运行。
openGL CG 系列教程5 – Environment Mapping ( 环境贴图 )
GAIA LABORATORY FOR GRAPHICS
05-08 1万+
*原创教程，转载请注明出处*openGL CG 系列教程5 – Environment Mapping (环境贴图) 利用物体材质specular属性来模拟高反光的物体是不够的。高反光的物体通常可以在表面反射出周围的物体，这样的效果需要通过环境贴图来实现。这篇教程将介绍如何利用Cg进行环境贴图。环境反射的原理很简单，一个光滑的物体表面可以根据我们观察的不同角度反
openGL环境贴图
aoxuestudy的专栏
03-05 1810
openGL系列文章目录 文章目录openGL系列文章目录前言一、代码1.主程序二、着色器程序1.顶点着色器2.片元着色器总结 前言 在照明和材质章节中，我们考虑了物体的“光泽”。然而，我们从未对非常闪亮的物体 进行建模，例如镜子或铬制品。这些物体在有小范围镜面高光的同时，还能够反射出周围 物体的镜像。当我们看向这些物品时，我们会看到房间里的其他东西，有时甚至会看到我 们自己的倒影。ADS 照明模型并没有提供模拟这种效果的方法。 不过，纹理立方体贴图提供了一种相对简单的方法来模拟（至少部分模拟）反射表面。
环境贴图
webdesign-cn
03-29 380
教程：实时环境映射贴图技术实时环境映射贴图技术(Real-time Evironmnet Mapping) 如果你是个赛车游戏的爱好者，你一定玩过风靡全世界的赛车游戏《极品飞车：地下狂飚2 》 (Need For Speed : UnderGround2)。在这款游戏中，玩家扮演了一个靠赛车为生的地下飚 车手，在永远是夜晚的城市中飞驰。这款游戏大量地运用了环境映射技术(R...
Cg Programming in Unity
05-03
在文档的其他部分，可能还会介绍如环境映射（Environment Mapping）和光照变化（Variations on Lighting）等高级主题。环境映射部分可能包括如何模拟如反射镜面（Reflecting Surfaces）、曲面玻璃（Curved Glass）、...
Linux中OpenGL实现凹凸映射技术
2. 环境映射（Environment Mapping）：环境映射技术用于模拟光滑反射表面的反射效果。它通常与凹凸映射结合使用，增强材质的视觉复杂性。 3. 高度贴图（Displacement Mapping）：与法线贴图不同，高度贴图会实际...
【OpenGL】Shader实例分析（十）- 钻石效果
stalendp的专栏
03-01 1万+
好久没有写文章了，赶紧补几篇。最近研究了一个玻璃折射的效果（用在砖石上），虽然没有达到最满意的效果，还是先分享出来，待以后有更好的想法再补充。 先看效果吧： 这里面有两个效果，左边是unity的免费插件Gem Shader，右边的是我自己实现的，我将分别介绍这两个效果的实现方法。 一、知识补充： 两个shader都使用了CubeMap... Shader "FX/Diamond"
opengl实现对地球纹理贴图
06-09
opengl实现纹理贴图，以地球为例子，但是实现得有点粗糙，地球上出现了一条裂缝
OpenGL绘制简单地图
12-01
使用OpenGL绘制简单的地图 https://blog.youkuaiyun.com/ME__WE/article/details/84675155
OpenGL--环境贴图
men_tou的博客
09-09 499
CubeMap 立方体贴图：将多个纹理组合起来映射到一个单一纹理。 这样做可以使用方向向量索引和采样。 Skybox 6张图组成一个cubemap 采样：立方体中心位于坐标系原点，天空盒上的每个位置向量就是立方体这个位置对应的纹理值。 深度测试：把skybox输入位置的z用w替换，使其深度永远为1，然后在绘制时改变深度测试方程GL_LEQUAL，这样深度为1的天空盒也可以通过测试。 Environment mapping 环境映射 反射（Reflect）: 根据观察方向和法线向量，计算出反射向量，使用这个反
计算机图形学(九)-纹理的应用，环境贴图、凹凸贴图、法线贴图、位移贴图
点燃火柴的博客
09-18 3702
纹理可以理解为GPU上的一块内存，内存上有一块区域可以做点查询也可以做范围查询，并且很快，可以认为纹理是一块数据，可以做不同类型的查询，不限于把它理解成图像，纹理可以表示很多东西，比如环境光照（环境光映射/环境贴图）
opengl环境映射，反射贴图
wqdqwass的博客
09-06 1009
注意完整的mesh与shader文件： mesh增加了法线与高度贴图： // render the mesh void Draw(Shader shader) { // bind appropriate textures unsigned int diffuseNr = 1; unsigned int specularNr = 1; unsigned int normalNr = 1; unsigne
【GPU编程】《The Cg Tutorial》学习之环境贴图(Environment Mapping)
mmdev
05-12 327
本例实现了一个基于GPU加速的OpenGL+Cg实现的环境贴图例子。 环境贴图（Environment Mapping）也叫做反射贴图，这项技术由Blinn和Newell于1976年提出，可以用于模拟光滑表面对周围场景的映射效果。生活中有很多这样的例子，比如一个光滑的球体，我们可以在它表面看到周围的环境。图一是维基百科给出的例子： 图一 环境贴图实例 环境贴图基于这样一种假设：物体周...
opengl纹理贴图_Shader快速复习：Cube Mapping(立方环境贴图)
weixin_39907713的博客
11-29 230
Shader快速复习，巩固知识，加强感觉。今天的内容是Cube Mapping(立方环境贴图)。——ZwqXin.com广告：Shader快速复习：Per Pixel Lighting(逐象素光照)本文来源于 ZwqXin (http://www.zwqxin.com/), 转载请注明 原文地址：http://www.zwqxin.com/archives/shaderglsl/revi...
透明光照模型与环境贴图
爱屋及吾
03-30 1943
<br />第11 章 透明光照模型与环境贴图<br />Snell 定律与Fresnel 定律<br />光在真空中的速度c 与在透明介质中的速度v 之比，如公式（11-1）所示，称之为该介质的绝对折射率，简称折射率。光在真空中的折射率等于1，通常我们认为光在空气中的折射率也近视为1。<br />Snell 定律描述光线从一个介质传播到另一个介质时，入射角、折射角和介质折射率的关系。<br /><br />需要注意：折射率和下面将要阐述的fresnel 折射系数并不是同样的东西。折射率本质上反映的是光在介
OpenGL通过贴图显示一张图片
qq_30396367的博客
07-20 7953
找了一段时间的资料才整出来的简单的可以跑的通的，不需要太多头文件的代码，可算调通了，为了节省大家的时间，特意贴出代码，有不正确的直接留言， 配置说明（不说配置环境的代码都是流氓小说）： 包含：GLEW库，SOIL库,GL库（最好freeglut） 还有你的环境 链接：glew32.lib SOIL.lib opengl32.lib freeglut.lib 啥都不说了，直接上干货： #...
MFC环境下OpenGL实现BMP图片Tone Mapping算法
这个项目旨在让学生通过实践来学习如何在MFC环境下结合OpenGL实现tone mapping算法。通过阅读源代码和文档，学生能够了解如何将MFC与OpenGL结合使用，以及如何在图形渲染中应用tone mapping算法。 七、开发环境和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值