注:文中VS代指顶点着色器,FS代指片段着色器。

准备知识

这个教程和大家展示3d管道中非常重要的部分,即Interpolation(插值)。光栅化程序执行的插值变量由VS产生。正如你已经见到过的,为了在屏幕中显示一些有意义的东西,你需要在vertex shader中指定一个输出变量’gl_Position’。它是一个包含顶点坐标的有4个分量的向量。x/y/z分量会和w分量做除法运算,任何分量超出规范化正方形([-1,1])的部分将会被裁剪。这些值会被转换成屏幕空间坐标系,接着三角形(或者其他指定图形)会被光栅化程序渲染到屏幕上。

光栅化程序在三角形的三个顶点之间进行插值处理,会访问三个顶点之间每一个像素,然后对每个像素点执行fragment shader(片段着色器)。片段着色器將返回一个像素颜色,光栅化程序將该颜色存放到颜色缓冲区中。vertex shader(顶点着色器)输出的其他变量则不经过这些步骤。如果fragment shader没有显式的请求这些变量,驱动程序会进行优化处理,去除VS中这些变量相关的指令。然而,如果FS没有用到光栅化程序光栅化处理时进行插值的变量,每个FS的调用会提供一个插值和指定的location进行匹配。这意味着这些相邻像素的值会略有不同。

两种常见的依赖这种插值的变量是三角形法线和纹理坐标。顶点法线通常通过包含该顶点的所有三角形法线的平均值来计算。如果一个对象不是完全平坦的就意味着每个三角形的三个顶点法线会有所不同。在这种情况下我们依靠插值法计算每个像素的法线。这些法线用于灯光计算上以获得更加逼真的灯光效果。纹理坐标的情况也相似,这些坐标是模型的一部分,由每个顶点提供。为了將纹理覆盖在三角形上,你需要为每个像素执行相同的操作并且为每个像素指定正确的纹理坐标。这些坐标也是通过插值法获得。

在这个教程中我们会看到通过插值法对三角形表面像素插入不同颜色值后的效果。通常我们不在顶点缓冲区中提供颜色,而是提供纹理坐标,颜色从纹理中获取。这些颜色稍后会被光照计算程序处理。

程序代码

清单1.顶点着色器shader.vs代码

#version 330

layout (location = 0) in vec3 Position;

uniform mat4 gWorld;

out vec4 Color;

void main()
{
gl_Position = gWorld * vec4(Position, 1.0);
Color = vec4(clamp(Position, 0.0, 1.0), 1.0);
}

代码解读

主程序代码和上节相比未做改动。

out vec4 Color;

管道的不同阶段传递参数需要使用保留字out并且要定义在shader的全局作用域中,该颜色是个四分量向量,XYZ分量代表RGB,W分量代表透明度。

Color = vec4(clamp(Position, 0.0, 1.0), 1.0);

颜色在图形管道中,通常用在[0.0,1.0]之间的浮点数表示。这个值稍后会被映射成[0,255]的整数。我们设置颜色值随着位置的改变而改变。首先我们使用内置的函数clamp()保证该值不会超过[0.0,1.0]这个范围。由于三角形左下角的顶点X、Y坐标为-1,-1,经过clamp()函数调用会转换为0,所以左下角为黑色。

clamp函数处理的结果是一个三分量向量,我们通过vec4(vec3, W)这种形式将它增加一个W分量,该值为1表明透明度为完全不透明。

运行效果

你将会看到三角形不同部分呈现不同的颜色。

OpenGL编程逐步深入(九)插值处理的更多相关文章

  1. OpenGL编程指南(第七版)

    OpenGL编程指南(第七版) 转自:http://blog.csdn.net/w540982016044/article/details/21287645 在接触OpenGL中,配置显得相当麻烦,特 ...

  2. 编译opengl编程指南第八版示例代码通过

    最近在编译opengl编程指南第八版的示例代码,如下 #include <iostream> #include "vgl.h" #include "LoadS ...

  3. C#编程总结(九)字符编码

    C#编程总结(九)字符编码 相信大家一定遇到过乱码的问题,为什么会乱码呢?输出的数据怎么就跟输入的不一样呢? 最近在总结加密问题,也遇到了同样的困扰.所以今天来集中解决这个问题. 什么是字符? 字符是 ...

  4. 在 Mac OS X Yosemite 10.10.5 上配置 OpenGL 编程环境

    这个教程主要参考了youtube上的视频 Getting Started in OpenGL with GLFW/GLEW in Xcode 6 ,这个视频有点问题,不能照搬.本人通过自己摸(瞎)索( ...

  5. 用MFC实现OpenGL编程

    一.OpenGL简介 众所周知,OpenGL原先是Silicon Graphics Incorporated(SGI公司)在他们的图形工作站上开发高质量图像的接口.但最近几年它成为一个非常优秀的开放式 ...

  6. [转]VS 2012环境下使用MFC进行OpenGL编程

    我就不黏贴复制了,直接给出原文链接:VS 2012环境下使用MFC进行OpenGL编程 其它好文链接: 1.OpenGL系列教程之十二:OpenGL Windows图形界面应用程序

  7. VS15 openGL 编程指南 配置库 triangle例子

    最近去图书馆借了一本书<OpenGL编程指南(原书第八版)>,今天倒腾了一天才把第一个例子运行出来. 所以,给大家分享一下,希望能快速解决配置问题. 一.下载需要的库文件 首先,我们需要去 ...

  8. Win32 OpenGL 编程( 1 ) Win32 下的 OpenGL 编程必须步骤

    http://blog.csdn.net/vagrxie/article/details/4602961 Win32 OpenGL 编程( 1 ) Win32 下的 OpenGL 编程必须步骤 wri ...

  9. OpenGL编程(一)渲染一个指定颜色的背景窗口

    上次已经搭好了OpenGL编程的环境.已经成功运行了第一个程序.可只是照搬书上的代码,并没弄懂其中的原理.这次通过一个小程序来解释使用GLUT库编写OpenGL程序的过程. 程序的入口 与其他程序一样 ...

  10. [转]OpenGL编程指南(第9版)环境搭建--使用VS2017

    1.使用CMake Configure中选择VS2017 Win64 , Finish: 点击Generate. 2.进入build目录 打开GLFW.sln , 生成解决方案. 打开vermilio ...

随机推荐

  1. 通过 KVM+virt-manager配置双屏虚拟机(两套键盘。鼠标)

    感谢朋友支持本博客,欢迎共同探讨交流,因为能力和时间有限,错误之处在所难免,欢迎指正! 假设转载.请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...

  2. 一些.NET 项目中经常使用的类库

    Web自己主动化測试   Watin Selenium  Selenium git .net 集合类扩展实现C5 Subscriber/Publisher 模式 Rx Nats 防御式编程 断言库 流 ...

  3. BZOJ2154: Crash的数字表格 & BZOJ2693: jzptab

    [传送门:BZOJ2154&BZOJ2693] 简要题意: 给出n,m,求$\sum_{i=1}^{n}\sum_{j=1}^{m}LCM(i,j)$ 题解: 莫比乌斯反演(因为BZOJ269 ...

  4. 【转】Android 服务器之SFTP服务器上传下载功能 -- 不错

    原文网址:http://blog.csdn.net/tanghua0809/article/details/47056327 本文主要是讲解Android服务器之SFTP服务器的上传下载功能,也是对之 ...

  5. flex布局下img变形的问题

    flex-shrink  加上:flex-shrink:0:定义了缩小比例,默认为1,即如果空间不足,项目将会缩小所有项目为1时,空间不足,都会缩小,如果你不希望某个容器在任何时候都不被压缩,那设置f ...

  6. App.config配置详解

    经上一篇文章https://www.cnblogs.com/luna-hehe/p/9104701.html发现自己对配置文件很是不了解,同样还是查了半天终于发现另一片宝贵文档https://www. ...

  7. bower 代理

    bower 设置: 修改 .bowerrc 文件(如无则新增): { "proxy": "http://proxy.mysite.com:8080", &quo ...

  8. javascipt入门

    一.javascript简介 javascript:(基于对象的编程语言:内部很多对象,我们只需要使用即可,几乎不需要自己创建对象) ECMAScript DOM BOM 存放位置: 建议代码放到ht ...

  9. swift语言点评五-Function

    一.函数类型 Every function in Swift has a type, consisting of the function’s parameter types and return t ...

  10. 由Request Method:OPTIONS初窥CORS(转)

    刚接触前端的时候,以为HTTP的Request Method只有GET与POST两种,后来才了解到,原来还有HEAD.PUT.DELETE.OPTIONS…… 目前的工作中,HEAD.PUT.DELE ...