拓幻图形学工程师教学手册(第一讲)|一字一字敲出OpenGL学习教程

  • 动机
    首先申明,我是拓幻科技图形处理工程师,自己接触OpenGL,图形图像等方面也有六年多了,很多人其实并不了解这方面,也不了解如何系统地去学,我觉得基于我硕士时期的课程和经验给大家。这些资料和经验也得感谢我的老师,来自普渡大学的终生教授迈克 贝利(Mike Bailey). 以此连载OpenGL学习教程,给大家讲解,一起学习一下,不对之处,欢迎大家指出讨论。
  • 所有渲染工作都离不开OpenGL, 着色器(Shader)这些,如果你和我一样对图形处理比较感兴趣的话,可能你和当初的我有着同样的困惑:如何开始?OpenGL有一些官方的手册和文档,但是一来内容比较分散,二来学习阶梯稍微陡峭了些而且晦涩难懂。这对于之前完全没有接触过有关内容的新人来说是相当不友好的。这些内容说是教程,倒不如说是一份我对于图形学课程或者项目的经验总结,希望能够帮到有需要的人。

    所以,本“教程”的对象是

    总的来说是新接触图形学OpenGL开发的人:也许你知道什么是OpenGL,什么是Shader,也会使用别人的Shader,但是仅限于知道一些基本的名词。
    想要系统性学习OpenGL,Shader开发的开发者,但是之前并没有图形学开发的经验。

    1. 计算机图形学简史
      1.1 1950s
      在1950s,刚出现笔式绘图仪和计算机示波器。

      1.2 1960s
      在1960s,出现最初代的矢量显示器和一些最初的交互式设备。

      在1960s,还有一个很著名的项目,计算机图形学之父 Ivan的SketchPad Project.感兴趣的同学可以搜一下伊凡·苏泽兰去了解一下,他的伟大就不多说了。

    1.3 1970s
    在1970s,出现直视存储管,彩色光栅显示器等,并且召开了SIGGRAPH大会。

    1.4 1980s
    在1980s,出现模拟飞行渲染技术。著名动画厂商皮克斯(Pixar)成立。1984年英伟达的创始人从我的母校毕业,?,感谢他为我的母校计算机学院捐的楼和实验室。

    1.5 1990s
    在1980s,在硬件上可以进行纹理映射,并且OpenGL也出现。侏罗纪公园,玩具总动员也是这个年代的产物。


    1.6 2000s
    在2000s,图形学发展尤为重要,出现了着色器shaders和OpenGL-ES。这是下面一切的基础。

    1. 图形处理和图形渲染管线技术
      2.1 图形处理
      图形处理分为几何造型(3D Geometric Models),动画,光照,纹理,表面信息,图像存储和显示几大块。关系如下图所示。

      其中3D几何模型经过一些映射方法,应用材质性质等处理后可以进行渲染。

    3D动画是进行一些物体运动的设计,捕捉和计算。

    纹理信息包括扫描图像纹理,程序计算所得纹理和手绘纹理等。

    表面信息包括Alpha-Blended透明效果,反射,折射和散射信息的计算。下图是这四种状态。


    光照包含光源种类(点光源point,方向光源directional和聚光灯光源spot),光源位置信息,光源颜色,强度信息。

    2.2 图形渲染管线
    图形渲染管线可以大致理解为定点数据经过定点变换后进入图元装配,并进行纹理映射、片元处理、光照等操作后,进行光栅化并输出倒帧缓冲里。

    具体在顶点变换时其实过程还是比较复杂的,不能一笔带过。

    比如最初送进来的是模型坐标系(Model Coodinates)坐标信息,经过模型变换(Model Transform)后变为世界坐标(World Coodinates)。模型变换通过对模型执行平移(translation)、缩放(scale)、旋转(rotation)、镜像(reflection)、错切(shear)等操作,来调整模型的过程。通过模型变换,我们可以按照合理方式指定场景中物体的位置等信息。

    这里插一段对模型变换的解释。我们为什么需要模型变换?我们在OpenGL中通过定义一组顶点来定义一个模型,或者通过其他3D建模软件事先建好模型然后导入到OpenGL中。顶点属性定义了模型。那么如果我们要在一个场景中不同位置、不同的比例、不同角度显示同一个模型怎么办?如果继续以类似的顶点属性数据定义同一个模型,调整它满足上述需求的话,不仅浪费显卡内存,而且效率很低。所以,我们定义的模型根据需要可以进行放大、缩小等操作来不同比例显示,可以通过平移来放在不同位置,可以通过旋转来按不同角度显示。这种方式就是执行模型变换。

    世界坐标(World Coodinates)经过视变换(View Transform)后得到眼坐标系(Eye Coodinates)。OpenGL成像采用的是虚拟相机模型,但这个相机并不存在。在现实生活中,我们通过移动相机来拍照,而在OpenGL中我们通过以相反方式调整物体,让物体以适当方式呈现出来。

    在世界坐标系中,对于顶点进行顶点光照处理(Per-vertex Lighting)后,进行投影变换(Projection Transform),得到裁剪坐标系(Clip Coodinates)。这部分内容后期再着重介绍。

    之后经过透视除法或者也可以叫做(Homegeneous Division)得到规范化设备坐标系(Noramlized Deviced Coodinates)坐标信息。这些坐标信息经过视口变换(Viewport Transform)后得到最终屏幕坐标系(Screen Coodinates)坐标信息。视口变换主要是将视景体内投影的物体显示到二维的视口平面上。在计算机图形学中,它的定义是将经过几何变换, 投影变换和裁剪变换后的物体显示于屏幕指定区域内。就好比照片拍好了,要确定照片的大小,放大照片还是缩小照片,也就是把图形画下来,是要占据整个屏幕还是屏幕的一部分。注意和视变换(View Transform)区别开。

    这些过程便是顶点变换全过程。之后继续进行最初我们讲的光栅化,片元处理,纹理处理,片源光照等处理后进行光栅处理,最后输出到帧缓冲(Framebuffer)中去。

    下图为全管线流程图:

    到此为止就已经将前期知识都讲解完毕,请务必记号管线渲染技术流程图,很重要,很重要,很重要,说三遍!

    1. OpenGL图形编程
      我想现在你已经彻底对图形学懵了对吧,各种坐标,各种变换,各种不知道干什么用的名词。没关系,先了解一下,现在进入OpenGL 图形编程。

    3.1 几何 vs. 拓扑
    假设原始图形如下图所示:

    如果改变几何,就是改变顶点位置,比如我们移动顶点3的位置到下图所示位置:

    这个时候图形的几何形状发生改变,但顶点连线顺序却仍然相同,为1-2-3-4-1.

    拓扑变化则是不变化顶点位置,变换连线方式,比如由1-2-3-4-1变为1-2-4-3-1:

    总结来讲,几何就是描述事物在哪儿,比如坐标位置等,拓扑就是这些事物的连接方式是怎样。

    了解了这两个概念,后边在OpenGL编程时会用到。

    3.2 3D坐标系
    3D坐标系分为左手坐标系和右手坐标系,具体情况如下图所示:


    我们后期讲解都是基于右手坐标系的。至于为什么,我的老师当初是这样解释的:


    就是这么任性,辛普森用的,我们也要用,哈哈哈~

    原文地址:https://blog.51cto.com/14528075/2437220

    时间: 2024-12-09 20:08:43

    拓幻图形学工程师教学手册(第一讲)|一字一字敲出OpenGL学习教程的相关文章

    拓幻图形学工程师教学手册(第二讲)|一字一字敲出OpenGL学习教程

    上一节我们提到过模型变换时有旋转操作,那么在坐标系中,旋转的方向是怎样呢?比如旋转90度,到底向左是正还是右是正呢?我们可以用右手法则来进行正方向判断:图中所示就是右手坐标系中旋转正方向. 3.3 3D绘制下面到代码讲解.最基础的图形学,总要先画最基础的图形吧,那么现在来看以下代码: 看到glBegin括号里GL_LINE_STRIP了吗?顾名思义,画的是一条连线.glVertex3f是用来绘制顶点,坐标为括号里的值,这里我们画了v0,v1,v2,v3,v4 四个顶点,并将其按照顺序连接成以v0

    拓幻图形学工程师教学手册(第八讲)|一字一字敲出OpenGL学习教程

    上次教程关于光照,这次内容会比较复杂,关于着色器(Shader),GLSL(OpenGL Shading Language).对于初次接触图形学的童鞋,可能比较晦涩.并且用Mac开发的同学注意,本教程中有关Shader内容,环境均为win下VS,但这并不代表Mac不支持Shader,只是需要配置一些环境,Google可以百度一下. 着色器(Shader)6.1 着色器分类还记得第一讲中的管线图吗?有个词叫光栅化,记得吗?在光栅化之前都是对顶点进行变换,顶点光照和投影变换等,这些都是对顶点进行操作

    拓幻图形学工程师教学手册(第四讲)|一字一字敲出OpenGL学习教程

    上一讲已经介绍了基础的OpenGL知识和绘制方面的内容.示例代码都会在我们公司Github找到.Github请搜索Tillusory可以看到.代码都是有注释的,运行环境是Mac OSX的Xcode.win版本的童鞋可以下下来之后放到VS中跑,环境搭建资料很多,有问题的可私信微信公众号. 纹理映射4.1 基本概念上一讲提到绘制太阳系,那么只是学了上一讲,最多就是画几个球,移动位置,做各种旋转运动等等,这怎么是太阳系.太阳,和各大行星至少要有表面图案吧,那么怎么把这些图案覆盖到球体表面呢? 先来了解

    拓幻图形学工程师教学手册(第六讲)|一字一字敲出OpenGL学习教程

    上一讲已经介绍了的OpenGL纹理部分的内容,今天这讲关于OpenGL光照(Lighting)示例代码也都在公司github共有仓了,不知道各位是不是试着跑过,没跑过也不要紧,继续往下听吧,最后总要实践的,讲再多不如自己上手一试.我记得Dr. Lee当初还做了蛮多不错的示例代码,比如旋转的五彩菊花,回头我让他贡献一下他的五彩菊花,放到我们的Github上给大家参考.后期Dr. Lee也将推出一些他自己的教程,这可是来自美国克莱姆森大学的教程,大家不要错过,关注我们微信公众号,一起来学习吧. 光照

    日更第6期-2015-1-29-如何科学地使用因特网-第一讲-总之先爬墙

    哟哟,我又来日更了啊!O(∩_∩)O哈哈~不过,其实是隔了两天,不过比起上次,是要好了不少. 先说个好消息吧!我1月31日就要放假啦,然后就可以回家啦. 然后,回家之后,我就要正式的日更啦!现在为止我可是一直在隐藏实力哦.我要从几天一更进化为一天几更. 先试试一夜七次...... 恩,说点正经的:我接下来会更新些什么内容. 第一部分,OpenFrameworks的使用,即OpenFrameworks系列教程,里面包括example的解释,tutorial的 翻译,api的详解以及最新例子的展示.

    跟我学《JavaScript高程3》第一讲,课程笔记

    跟我学<JavaScript高程3> 第一讲:第1~3章 课程制作:bling,兴哥,5年Java,3年前端 课程知识:JavaScript.Html.Css 课程目标:前端体系课程,逐步深入,找到一份前端工作    课程大纲:本书目录结构 适合人群:前端初学者,可以0基础,但要认真,踏实 回答几个问题 1.为什么要学习前端?JavaScript有哪些用处?为什么要讲这本书? 移动互联网是未来的趋势,移动设备H5开发带动了前端趋势,今后App基本都是Native+H5实现. 页面效果,数据交互

    html学习第一讲(内容html常规控件的的使用)

    1 <html> 2 <head> 3 <title> 这是网页的标题</title> 4 </head> 5 6 <body> 7 <h2><font color ="blue"> 这是网页的内容!</font></h2> 8 9 <a href="http://www.cnblogs.com/gongxijun">这是一个连接<

    《上古天真论》第一讲文字版

    上古天真论篇第一讲主讲:徐文兵  主持:梁  冬播出时间:2008-12-06  23:00—24:00  经文:昔在黄帝,生而神靈,弱而能言,幼而徇齐,长而敦敏,成而等天.乃问于天师曰:余闻上古之人,春秋皆度百岁,而动作不衰:今时之人,年半百而动作皆衰者,时世异耶?人将失之耶?岐伯对曰:上古之人,其知道者,法于阴阳,和于术数, 梁冬:我是梁冬.梁某人.而做在我对面的是我的在求学中医方面的偶像级的老师徐文兵老师,徐老师你好!徐文兵:梁冬好!听众朋友们大家好!梁冬:啊呀,一看就很有这个电台风范,从

    《大话数据结构》 第一讲.数据结构绪论 (读书笔记)

    大话数据结构 导读笔记 第一讲: 一.基本概念和术语 (1)数据元素:是组成数据的.有一定意义的基本单位,在计算机中通常作为整体处理.也被称为记录.   比如,在人类中,什么是数据元素呀?当然是人了. (2)数据项:一个数据元素可以由若干个数据项组成.   比如人这样的数据元素,可以有眼.耳.鼻.嘴.手.脚这些数据项,也可以有姓名.年龄.性别.出生地址.联系电话等数据项,具体有哪些数据项,要视你做的系统来决定. 数据项是数据不可分割的最小单位.在数据结构这门课程中,我们把数据项定义为最小单位,是