opengl 教程(9) 顶点属性插值

原帖地址:http://ogldev.atspace.co.uk/www/tutorial09/tutorial09.html

 

      本章我们了解3D管线的一个重要特性,在光栅化阶段的顶点属性插值。从前面的教程我们知道,为了在屏幕上输出渲染的物体,我们在顶点shader中输出gl_Position,这是一个四维向量,表示齐次空间的顶点坐标,x,y,z都经过了透视除法,除以了w值,x、y的范围是[-1,1],而z的范围是[0,1],而w则成为了1.0(因为w/w的缘故),接着会进行视口变化,转化到屏幕空间,然后进行光栅化操作。

      光栅化阶段会执行顶点属性插值操作,而三角形内部光栅化后的片元(或者像素)会执行片元shader,片元shader会返回该片元的颜色,然后会进行深度测试、模版测试等操作,如果通过这些测试,那么该片元的颜色将会更新framebuffer中对应像素的颜色。

     顶点shader中的变量如果没有经过上述步骤,可能会被driver优化掉,从而提高程序性能,比如一个顶点属性在顶点shader中存在,但没有被传输到片元shader,就有可能被优化掉,而传到片元shader的顶点属性则会执行插值操作。主要根据三个顶点的属性,比如颜色,执行双线性插值,得到片元(或像素)的颜色, 插值后的三角形通常都是渐变颜色的。

可以参考一下我的另外一篇文章,专门接受顶点属性插值的:http://www.cnblogs.com/mikewolf2002/archive/2012/11/25/2787480.html

     两个常依赖于插值的顶点属性是顶点法向和纹理坐标。对一个三角形来说,常用三个顶点法向平均值做为三角形面的法向值,但当三角形面不是平(flat,意思是说三角形面上的颜色是一样的,没有渐变之类的效果)的时候,我们一般通过插值方法得到三角形上每个像素的法向值。得到插值后的法向值经常在片元shader中用来计算光照颜色,而纹理坐标插值主要是用来采样纹理,得到该纹理上相应的颜色值,然后和光照计算得到的颜色混合,得到像素最终的颜色。

     在这片教程中,我们将会看到颜色插值的效果。

主要代码:

out vec4 Color;
      在管线之间传输的变量,都要被声明为out,out是一个shader保留关键字。颜色变量用了vec4,xyz的值分别表示RGB,w的值为颜色的alpha值。

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

      图形管线中的颜色值,通常用范围在[0.0,1.0]之间的浮点数表示,这个值能够被映射到[0,255]。我们根据顶点位置设定顶点的颜色,并用内建函数clamp把颜色值限定在[0.0,1.0]之间,因为顶点坐标xy值在[-1.0,1.0]之间变化,如果不做clamp操作,颜色可能出现负值,这时就成了为黑色,并不是我们所要的效果。

      在glsl中,clamp函数并没有vec4的版本,所以我们扩展成四维坐标,并设置w=1.0,表示alpha=1.0,即颜色混合操作时,该颜色是透明的。

in vec4 Color;

    在片元shader中,定义输入颜色,该输入颜色是顶点属性插值后像素的颜色。我们用该插值颜色,做为片元shader最终的输出颜色。

FragColor = Color;

程序执行后效果如下,注意左边的图是使用没有clamp函数的颜色,此时部分区域是黑色:

时间: 2024-10-29 04:08:15

opengl 教程(9) 顶点属性插值的相关文章

opengl 教程(16) 纹理映射

原帖地址:http://ogldev.atspace.co.uk/www/tutorial16/tutorial16.html       纹理映射意思就是把图片(或者说纹理)映射到3D模型的一个或多个面上.纹理可以是任何图片,使用纹理映射可以增加3D物体的真实感,我们常见的纹理有砖,植物叶子等等. 下图中是使用纹理映射和没有使用纹理映射四面体的比较.       要使用纹理映射,我们必须做以下三件事情:在OpenGL中装入纹理,为顶点提供纹理坐标(为了把纹理映射到顶点),用纹理坐标在纹理上执行

opengl 教程(2) 在窗口画点

      原文地址:http://ogldev.atspace.co.uk/www/tutorial02/tutorial02.html       通常在写OpenGL程序时候,我们都需要glew库,该库包装了OpenGL的各种扩展,便于我们使用. 我们可以在main函数中调用glew初始化函数,之后就可以查询OpenGL各种扩展能否使用了,对于能够使用的函数,可以动态的加载.       在这篇教程中,我们首先了解一下顶点缓冲对象(VBO,vertex buffer object)的用法.

opengl 教程(22) 用开源库装入模型

原帖地址:http://ogldev.atspace.co.uk/www/tutorial22/tutorial22.html       前面的教程中,我们都是使用手工指定三维模型,渲染一些简单的物体,比如,正方体.四面体金字塔等等.如果要渲染复杂的物体,该物体包含很多的顶点,每个顶点除了位置,还有很多的属性,比如一张人脸,那么通过在程序中指定顶点缓冲来渲染的话,几乎是不可能的事情,因为模型太复杂了.通常在三维游戏或者一些商业三维应用中,都是艺术家通过一些专用的建模软件,比如Blender,

opengl 教程(19) 高光

原帖地址 http://ogldev.atspace.co.uk/www/tutorial19/tutorial19.html       最初我们计算环境光的时候,唯一影响光照的就是光的强度,接着在漫反射光计算时,我们引入了光源的方向以及物体顶点法线的概念,在本篇教程中,我们学习如何计算高光,我们会再次引入一个新的参数视点位置,因为高光会随着视点的移动而改变位置.在一些角度,高光看起来会更亮.金属物体通常都有高光的效果.       下面的高光计算中会引入视点位置,首先看一下下面的光照图: 这

NeHe的OpenGL教程6(Bang翻译Delphi版)-如何用图片进行纹理映射

NeHe的OpenGL教程6(Bang翻译Delphi版)-如何用图片进行纹理映射 在这一课里,我将教会你如何把纹理映射到立方体的六个面,如下图: 将下图放在应用程序data目录下,起名NeHe.bmp program lesson6a; {    OpenGL DelphiXE    出处:根据NeHe代码翻译而来(http://nehe.gamedev.net/)    作者:帅宏军 shuaihj@163.com     注:本单元用到了glaux.dll和glaux.pas,下载地址为:

NeHe的OpenGL教程2(Bang翻译Delphi版)-如何绘制平面图形

NeHe的OpenGL教程2(Bang翻译Delphi版)-如何绘制平面图形 这一课中,我将教您如何创建三角形和四边形.如下图: program lesson2a; {    OpenGL DelphiXE    出处:根据NeHe代码翻译而来(http://nehe.gamedev.net/)    作者:帅宏军 shuaihj@163.com} uses  Windows,  Messages,  OpenGL; // 全局变量var  h_Rc: HGLRC;               

NeHe的OpenGL教程5(Bang翻译Delphi版)-如何绘制立方体

NeHe的OpenGL教程5(Bang翻译Delphi版)-如何绘制立方体 在这一课里,我们把三角形变为立体的金子塔形状,把四边形变为立方体,如下图: program lesson5a; {    OpenGL DelphiXE    出处:根据NeHe代码翻译而来(http://nehe.gamedev.net/)    作者:帅宏军 shuaihj@163.com} uses  Windows,  Messages,  OpenGL; // 全局变量var  h_Rc: HGLRC;    

NeHe的OpenGL教程4(Bang翻译Delphi版)-如何让图形旋转

NeHe的OpenGL教程4(Bang翻译Delphi版)-如何让图形旋转 在这一课里,我将教会你如何旋转三角形和四边形.左图中的三角形沿Y轴旋转,四边形沿着X轴旋转.如下图 program lesson4a; {    OpenGL DelphiXE    出处:根据NeHe代码翻译而来(http://nehe.gamedev.net/)    作者:帅宏军 shuaihj@163.com} uses  Windows,  Messages,  OpenGL; // 全局变量var  h_Rc

OpenGLES 与 WebGL 中顶点属性的组织格式的误解 - 一个不好笑的笑话

OpenGLES 与 WebGL 中顶点属性的组织格式的误解 - 一个不好笑的笑话 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. WebGL 中立方体顶点坐标数组: vertices = [