CSharpGL(43)环境映射(Environment Mapping)-天空盒(Skybox)反射(Reflection)和折射(Refraction)

开始

如图所示,本文围绕GLSL里的samplerCube记录天空盒(Skybox)、反射(reflection)、折射(refraction)的实现。

下载

CSharpGL已在GitHub开源,欢迎对OpenGL有兴趣的同学加入(https://github.com/bitzhuwei/CSharpGL

天空盒(Skybox)

samplerCube

想在三维场景里渲染出天空和大地,可以利用一个巨大的立方体,把6个连接的图片分别贴在立方体的6个面上。

这样的立方体就是所谓的天空盒(Skybox)。

OpenGL提供了一个GL_TEXTURE_CUBE_MAP类型的纹理,其本身就是一个立方体,自带6个纹理面。它对应的GLSL里的类型就是samplerCube。SamplerCube正适合做天空盒。

SkyboxNode

渲染天空盒,实际上就是渲染一个巨大的立方体,并且用samplerCube为其上色。

其vertex shader如下:

 #version  core

 layout(location = ) in vec3 inPosition;// 顶点位置

 uniform mat4 mvpMatrix;

 out vec3 texCoord;// 立方体纹理在此顶点处的坐标值

 void main()
{
vec4 position = mvpMatrix * vec4(inPosition, 1.0);
gl_Position = position.xyww;// 保证天空盒的深度始终为最深
texCoord = inPosition;// 立方体纹理的特殊情况
}

注意,这里的gl_Position = position.xyww;,是为了保证天空盒的深度始终为最深。这样就不会遮挡住场景里的其他物体。再注意,texCoord = inPosition;这句,就要求我们的天空盒模型必须是中心在坐标原点的立方体,这样才能保证inPosition在数值上等于此顶点的纹理坐标值。

其fragment shader如下:

 #version  core

 uniform samplerCube skybox;

 in vec3 texCoord;

 out vec4 color;

 void main()
{
color = texture(skybox, texCoord);
}

极其简单,就是从skybox纹理中取出对应位置的颜色,写入Framebuffer。

如果把镜头拉远,你会看到所谓的天空盒是这样的:一个剔除了正面的立方体 

反射(Reflection)

利用samplerCube,可以实现一个反射效果——根据反射原理,把天空盒的纹理贴到模型上,看上去的感觉是,模型像镜子一样反射了周围的东西。此即为环境映射的一种。

GLSL自带了反射函数reflect(,);

实现反射的vertex shader如下:

 #version  core

 layout (location = ) in vec3 inPosition;
layout (location = ) in vec3 inNormal; uniform mat4 projection;
uniform mat4 view;
uniform mat4 model; out vec3 passNormal;
out vec3 passPosition; void main()
{
gl_Position = projection * view * model * vec4(inPosition, 1.0); passNormal = mat3(transpose(inverse(model))) * inNormal;
passPosition = vec3(model * vec4(inPosition, 1.0));
}

此vertex shader做了3件事:1.给gl_Position赋值。2.传递world space里的法线passNormal。3.传递world space里的位置passPosition。

下面根据反射原理为模型上色(fragment shader):

 #version  core

 uniform vec3 cameraPos;
uniform samplerCube skybox; in vec3 passNormal;
in vec3 passPosition; out vec4 FragColor; void main()
{
vec3 I = normalize(passPosition - cameraPos);
vec3 R = reflect(I, normalize(passNormal));
FragColor = vec4(texture(skybox, R).rgb, 1.0);
}

这里利用reflect函数找到反射方向(即纹理坐标),从而找到目标颜色。

折射(Refraction)

折射与反射类似,也是一种环境映射方式。其vertex shader与反射相同,fragment shader也只有一点点不同:利用GLSL内置的refract()函数找到折射方向。

 #version  core

 uniform vec3 cameraPos;
uniform samplerCube skybox; in vec3 passNormal;
in vec3 passPosition; out vec4 FragColor; void main()
{
float ratio = 1.00 / 1.52;
vec3 I = normalize(passPosition - cameraPos);
vec3 R = refract(I, normalize(passNormal), ratio);
FragColor = vec4(texture(skybox, R).rgb, );
}

注意,这里有个ratio是指两种透明物体的折射率。1.52是玻璃对空气的折射率。再注意,这里我们只计算了一个面的折射,然而本文的模型有光线的进入和穿出两次折射。不过一般这样也没关系,最终效果还是不错的。

总结

没什么可总结的。

CSharpGL(43)环境映射(Environment Mapping)-天空盒(Skybox)反射(Reflection)和折射(Refraction)的更多相关文章

  1. 3DShader之立方体环境映射(cubic environment mapping)

    前面讲了球形环境映射,然而目前采用更多的是立方体环境映射.国际惯例:上图先: 1.反射: 2.折射 3.fresnel(反射+折射) 4.色散 好了,大概讲下原理, 立方体纹理我就不多讲了,它以一个3 ...

  2. 《The Cg Tutorial》阅读笔记——环境贴图 Environment Mapping

    本文为大便一箩筐的原创内容,转载请注明出处,谢谢:http://www.cnblogs.com/dbylk/p/4969956.html 环境贴图 Environment Mapping 一.简介 环 ...

  3. Environment Perception: 3D Truss Environment Mapping and Parametric Expression Extraction

    Experiments Preparation roscore rosrun pcl_ros pcd_to_pointcloud ~/.ros/wh2_lg707070_1ms0.01_filtere ...

  4. [经验] Unity3D 里怎么制作天空盒(skybox)

    记载一个简单的  天空盒子  的制作方法 第一步: 在 assets 文件夹下新建一个文件夹, 随便取个名字, 不过最好是用来专门管理场景游戏对象的文件夹,    例如放在这个 Skybox 里:  ...

  5. 立方体贴图(Cubemap)

    http://blog.csdn.net/asdjy123/article/details/51190643 点击打开链接 好东西保存方便查看 立方体贴图(Cubemap) 原文 Cubemaps 作 ...

  6. (转)OpenGL学习——立方体贴图

    转自:https://learnopengl-cn.readthedocs.io/zh/latest/04%20Advanced%20OpenGL/06%20Cubemaps/ 我们之前一直使用的是2 ...

  7. OpenGL 核心技术之立方体贴图

    笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家.特邀编辑,畅销书作者,国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D ...

  8. Grand Theft Auto V (侠盗列车手5)图形研究

    原文地址:http://www.adriancourreges.com/blog/2015/11/02/gta-v-graphics-study/   原文的简介: GTA(侠盗猎车)系列自从1997 ...

  9. DirectX11 With Windows SDK--22 立方体映射:静态天空盒的读取与实现

    前言 这一章我们主要学习由6个纹理所构成的立方体映射,以及用它来实现一个静态天空盒. 但是在此之前先要消除两个误区: 认为这一章的天空盒就是简单的在一个超大立方体的六个面内部贴上天空盒纹理: 认为天空 ...

随机推荐

  1. 关于安卓百度地图SDK报错:Multiple dex files define Lcom/baidu/android/bbalbs/common/a/a;

    1.找到.jar包 2.右键,用WinRAR打开 3.打开com/baidu/ 4.保留location,其他全删掉 5.这样将不会报错,可以运行了!!!

  2. Hadoop和MapReduce初识

    我们生活在大数据时代!!!微博.微信.云存储等大数据的需求,Hadoop由此诞生. 以下面部分数据为例: 1)Facebook存储着约100亿张照片,约1PB存储容量: 2)纽约证券交易所每天产生1T ...

  3. EntityFramework Core映射关系详解

    前言 Hello,开始回归开始每周更新一到两篇博客,本节我们回归下EF Core基础,来讲述EF Core中到底是如何映射的,废话少说,我们开始. One-Many Relationship(一对多关 ...

  4. linux 下用renameTo方法修改java web项目中文件夹名称问题

    经测试,在Linux环境中安装tomcat,然后启动其中的项目,在项目中使用java.io.File.renameTo(File dest)方法可行. 之前在本地运行代码可以修改,然后传到Linux服 ...

  5. python网络爬虫之scrapy 工程创建以及原理介绍

    执行scrapy startproject XXXX的命令,就会在对应的目录下生成工程 在pycharm中打开此工程目录:并在Run中选择Edit Configuration 点击+创建一个Pytho ...

  6. fpm 制作 rpm 包

    支持的 源类型包 ① dir : 将目录打包成所需要的类型, 可用于源码编译安装软件包 ② rpm : 对 rpm 包进行转换 ③ gem : 对 rubygem 包进行转换 ④ python : 将 ...

  7. GitHub:多人协作下的分支处理

    GitHub上的团队协作 远程信息 git remote:查看远程库的信息 git remote -v:查看远程库的详细信息 推送分支 git push origin 要推送的分支:比如git pus ...

  8. Hadoop 笔记1 (原理和HDFS分布式搭建)

    1. hadoop 是什么 以及解决的问题 (自行百度) 2.基本概念的讲解 1. NodeName  master 节点(NN) 主节点 保存了metaData(元数据信息) 包括文件的owener ...

  9. 搭建es6开发与非开发环境babel-browser

    前言 最近打算把es6应用到项目中,但是如何在开发环境(浏览器端)直接运行es6?es6已经发布一段时间了,现在大部分是在node.js环境运行,或者通过babel编译之后运行.babel-brows ...

  10. [leetcode-623-Add One Row to Tree]

    Given the root of a binary tree, then value v and depth d, you need to add a row of nodes with value ...