图形学复习

说明：标题后面括号内容表示页码，
如 C1表示中文版第1页，E33表示英文版第33页, CG09-1表示PPTCG09第1页

charpter1

图形学的基本应用(C1，E33)

• Display of information
• Design
• Simulation and animation

VR & AR
• 虚拟现实（VR），也称灵境技术或人工环境。综合利用计算机图形系统和各种现实及控制等接口设备，在计算机上生成的、可交互的三维环境中提供沉浸感觉的技术。其中，计算机生成的、可交互的三维环境成为虚拟环境（即Virtual Environment，简称VE）。
• 增强现实（AR,Augmented Reality），也称之为混合现实。它通过电脑技术，将虚拟的信息应用到真实世界，真实的环境和虚拟的物体实时地叠加到了同一个画面或空间同时存在。增强现实不仅展现了真实世界的信息，而且将虚拟的信息同时显示出来，两种信息相互补充、叠加。

• User interfaces

光栅图形，相关定义（如像素、真彩色、帧缓存等）与计算(C4,E35)

• Raster 光栅
  Array of pixels

• 光栅图形：光栅图也叫做位图、点阵图、像素图，简单的说，就是最小单位由像素构成的图，只有点的信息，缩放时会失真。每个像素有自己的颜色，类似电脑里的图片都是像素图，把它放很大就会看到点变成小色块了。

• Pixel 象素Picture element

• Resolution 分辨率Number of pixels in frame buffer

• Frame Buffer 帧缓存
  Memory where pixels stored由像素组成的二维数组，每一个存储单元对应屏幕上的一个像素，整个帧缓存对应一帧图像。其中的分辨率表示像素数，深度（或精度）表示每个像素所用的比特数，深度为n bit的帧缓存可以表示2n种颜色。

• true-color 真彩色，RGB每种原色分配8bit，从而每个像素24bit

• Depth 深度 of Frame Buffer
  Number of bits that are used for each pixel (ex. 8-bit-depth 28(=256) colors, 24 or more bits per pixel RGB-color)

• Rasterization 光栅化 (Scan Conversion扫描转换)
  Converting of geometric entities (such as lines, circles, and polygons) to pixel assignment in frame buffer 从几何实体到帧缓存中像素的颜色和位置的转化

  图形与图像：
  图形是矢量图（Vector Drawn），它是根据几何特性来绘制的。图形的元素是一些点、直线、弧线等。矢量图常用于框架结构的图形处理，应用非常广泛，如计算机辅助设计（CAD）系统中常用矢量图来描述十分复杂的几何图形，适用于直线以及其它可以用角度、坐标和距离来表示的图。图形任意放大或者缩小后，清晰依旧。
  图像是位图（Bitmap), 它所包含的信息是用像素来度量的。就像细胞是组成人体的最小单元一样，像素是组成一幅图像的最小单元。对图像的描述与分辨率和色彩的颜色种数有关，分辨率与色彩位数越高，占用存储空间就越大，图像越清晰。
  图形是人们根据客观事物制作生成的，它不是客观存在的；图像是可以直接通过照相、扫描、摄像得到，也可以通过绘制得到。

图形学的历史(CG01)

人类视觉系统(C16)（如光谱(C13)、颜色模型(C49, E98)）

• RGB：加色模型(additive color model)
• CMY(Cyan, Megenta, Yellow) : 减色模型(subtractive color model)，C，M，Y分别是R,G,B的互补色(complementary color), 即白色减去R就是C。应用于商业打印和绘图中。
• color gamut 色域， 一个设备可以生成的颜色集
• color solid 颜色立方体

三维图形的处理流程（如顶点、裁剪、光栅化、片元等）(C25，E65)

1. Vertex Processing

• 顶点包含了拓扑信息(Topology)：邻接和次序关系。几何信息(Geometry): 点的位置坐标
• The two major functions of this block are to carry out coordinate transformation and to compute a color for each vertex.

Projection：
- Perspective透视 projections: all projectors投影线 meet at the center of projection投影中心
- Parallel平行 projection: projectors投影线 are parallel, center of projection is replaced by a direction of projection投影方向

2. Clipping and Primitive Assembly 裁减 与 图元组装

• Clipping must be done on a primitive-by-primitive basis. Thus, within the stage of the pipline, we must assemble sets of vertices into primitives, such as line segments and polygons, before clipping can take place. The output of this stage is a set of primitives whose projections can appear in the iamge.
• 透视投影和平行投影都有一个对应的裁剪体，Objects that are not within this volume are said to be clipped out of the scene

3. Rasterization光栅化

The output of the rasterizer is a set of fragments for each object. A fragment can be thought as a pixel the carryies with its information, including

• Have a location in frame buffer位置信息
• Color attributes颜色属性
• Depth information深度信息

4. Fragment Processing 片元处理

包括光照和明暗绘制(lighting and shading)，纹理映射(texture mapping)，凹凸映射(bump mapping),消隐(Hidden-surface removal)等。

chapter2

OpenGL 与 WebGL简介

• OpenGL（英语：Open Graphics Library，译名：开放图形库或者“开放式图形库”）是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口（API）。这个接口由近350个不同的函数调用组成，用来从简单的图形比特绘制复杂的三维景象
• WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

OpenGL 与WebGL函数的使用

1. OpenGL Libraries

• OpenGL core Library
• OpenGL utility Library(GLU) :Provides functionality in OpenGL core but avoids having to rewrite code
• Links with window system
  • GLX for X window systems (X window窗口扩展库)
  • WGL for Windows (PC window窗口扩展库)
  • AGL for Macintosh (苹果window窗口扩展库)
• OpenGL Utility Toolkit (GLUT) 实用程序工具包: Provides functionality common to all window systems,Code is portable移植 but GLUT lacks the functionality of a good toolkit for a specific platform
• glew : OpenGL扩展库
  

2. features(function format, etc.)

• on the whole
  
• OpenGL Functions format

opengl基本函数分类

函数	说明	例
图元函数	控制绘制图元	glPolygonMode()，glDrawArray()1
属性函数	颜色属性、填充模式	glClearColor()2, glEnable()13
观察函数
变换函数	生成变换矩阵
输入函数	接收输入设备的输入，回调函数
控制函数	初始化程序、与窗口通信	glutInit()3,glutCreateWindow()4, glViewPort()5，…6
查询函数	查询设备参数等
帧缓存	-	glGenBuffers()7, glBbindBuffer()8,glBufferData()9
着色器输入	-	glGetAtrribLocation()10, glEnableVertexArray(), glVertexAttrib()11, glVertexAttribPointer()12

1. glDrawArray

void glDrawArrays(	GLenum mode,
 	GLint first,
 	GLsizei count);

• mode: Symbolic constants GL_POINTS, GL_LINE_STRIP, GL_LINE_LOOP, GL_LINES, GL_LINE_STRIP_ADJACENCY, GL_LINES_ADJACENCY, GL_TRIANGLE_STRIP, GL_TRIANGLE_FAN, GL_TRIANGLES, GL_TRIANGLE_STRIP_ADJACENCY, GL_TRIANGLES_ADJACENCY and GL_PATCHES are accepted.
• first
  Specifies the starting index in the enabled arrays.
• count
  Specifies the number of indices to be rendered.

2. glClearColor(): specify clear values for the color buffers

void glClearColor(	GLfloat red, GLfloat green, GLfloat blue, GLfloat alpha);

3. glutInit(int *agrc, char**argv);
4. glutCreateWindow(char *title);
5. void glViewport( GLint x, GLint y, GLsizei width, GLsizei height);
   左下角为原点
6. glutMainLoop()
   void glutDisplayFunc(void (*func)(void)) 显示回调函数
7. void glGenBuffers( GLsizei n, GLuint * buffers);
8. void glBindBuffer( GLenum target, GLuint buffer);
   • target: Specifies the target to which the buffer object is bound, which must be one of the buffer binding targets in the following table:

9. void glBufferData(GLenum target, GLsizeiptr size, const void * data, GLenum usage);

• example: flBufferData(GL_ARRAY_BUFFER, sizeof(points), points, GL_STATIC_DRAW);
• usage: Specifies the expected usage pattern of the data store. The symbolic constant must be GL_STREAM_DRAW, GL_STREAM_READ, GL_STREAM_COPY, GL_STATIC_DRAW, GL_STATIC_READ, GL_STATIC_COPY, GL_DYNAMIC_DRAW, GL_DYNAMIC_READ, or GL_DYNAMIC_COPY.

10. GLint glGetAttribLocation( GLuint program, const GLchar *name);
    Returns the location of an attribute variable
11. glVertexAttrib — Specifies the value of a generic vertex attribute. including a group of functions. e.g
    void glVertexAttrib1f( GLuint index, GLfloat v0);
12. void glVertexAttribPointer( GLuint index, GLint size, GLenum type, GLboolean normalized, GLsizei stride, const void * pointer);
    define an array of generic vertex attribute data
13. void glEnable( GLenum cap);

• cap: Specifies a symbolic constant indicating a GL capability.

value	explanlation
GL_BLEND	If enabled, blend the computed fragment color values with the values in the color buffers. See glBlendFunc.
GL_CULL_FACE	If enabled, cull polygons based on their winding in window coordinates. See glCullFace.
GL_DEBUG_OUTPUT	If enabled, debug messages are produced by a debug context. When disabled, the debug message log is silenced. Note that in a non-debug context, very few, if any messages might be produced, even when GL_DEBUG_OUTPUT is enabled.
GL_DEPTH_TEST	If enabled, do depth comparisons and update the depth buffer. Note that even if the depth buffer exists and the depth mask is non-zero, the depth buffer is not updated if the depth test is disabled. See glDepthFunc and glDepthRange.
GL_DITHER	If enabled, dither color components or indices before they are written to the color buffer
GL_LINE_SMOOTH	If enabled, draw lines with correct filtering. Otherwise, draw aliased lines. See glLineWidth
GL_POLYGON_SMOOTH	If enabled, draw polygons with proper filtering. Otherwise, draw aliased polygons. For correct antialiased polygons, an alpha buffer is needed and the polygons must be sorted front to back.
GL_SAMPLE_ALPHA_TO_ONE	If enabled, each sample alpha value is replaced by the maximum representable alpha value.
GL_STENCIL_TEST	If enabled, do stencil testing and update the stencil buffer. See glStencilFunc and glStencilOp.
…	https://www.khronos.org/registry/OpenGL-Refpages/gl4//

指定OpenGL窗口的显示模式的函数是什么？并给出互斥参数的比较分析。

• glutInitDisplayMode()

参数：

• 颜色模式：GLUT_RGBA，GLUT_RGB 和 GLUT_INDEX(颜色索引)
• 缓冲区类：GLUT_DOUBLE，GLUT_SINGLE
• 深度缓存：GLUT_DEPTH
• 模板缓存：GLUT_STENCIL

WebGL的绘制流水线

• 如上图所示，主要分为4个步骤，第1步是顶点着色器的处理，主要是一组矩阵变换操作，用来把3D模型（顶点和原型）投影到Viewport上，输出是一个个多边形（比如三角形），第2步是光栅化，也就是把三角形连接区域按一定的粒度逐行转化成片段（fragement），我们可以把这些片段看做是3D空间的像素点，第3步是片段着色器的处理，为每个像素添加颜色，第4步把3D空间的片段合并输出为2D像素数组输出到帧缓存然后显示在屏幕上。

颜色索引(C51)

chapter3

双缓存 C75

物理设备(C7)(多种类型）与逻辑设备(C9)(6种基本类型）

• 物理设备：
  定位设备，键盘设备，鼠标，操纵杆，空间球等eg. mouse, trackball, light pen, data tablet, joy stick, space ball

• 逻辑输入设备：
  Locator（定位设备）: 返回一个位置（鼠标）
  Pick（逻辑拾取设备）: 返回对象的标识ID（鼠标）
  Keyboard: 返回字符串（键盘）
  Stroke:返回一系列位置
  Valuator（定值设备）: 返回浮点数（滑杆）
  Choice（选择设备）: 返回n项中的一项（菜单）

• 物理设备与逻辑设备区别？
  为使应用程序独立于具体使用的物理设备，引入逻辑设备和物理设备两个概念，在应用程序中，用来请求I/O服务而使用的是逻辑设备，系统在实际执行时使用的是物理设备，系统为了实现从逻辑设备到物理设备的映射，设置了一张逻辑设备表。每个表目包括逻辑设备名、物理设备名、设备驱动程序入口。这样做实现了设备独立性，带来两个好处：使设备分配时具有灵活性和易于实现I/O重定向。

三种基本的输入模式（请求、采样、事件）C10

• 请求模式(request mode)：除非设备被触发，否则设备的测量数据不会返回给程序
• 采样模式(sample mode)：输入时即时的，只要在用户程序中遇到了函数调用，就把测量数据返回给程序，因此不需要触发器
• 事件模式(event mode)：有多个设备的输入时，每个输入设备都有它自己的触发器并运行一个测量过程。每当一个设备被触发，就产生了一个事件。设备的测量数据（包括该设备的标志符）被放入一个事件队列中。
  之后应用程序处理事件的方式：1、用户程序检查事件队列中排在前面的事件，或如果队列为空则等待，直到有事件发生检查事件的类型然后决定做什么。2、对每一种特定类型的事件关联一个叫做回调的函数，操作系统定期检查事件队列中的事件，并且针对事件的类型执行相应的回调函数。

GLUT的基本回调函数（显示、鼠标、形变、键盘、空闲等）C57,72

• GlutDisplayFunc(mydisplay) //显示回调
  glutMouseFunc(mymouse) //鼠标左右键和中键摁下的事件
  glutReshapeFunc //形状改变~
  glutKeyboardFunc //键盘~
  glutIdleFunc //空闲~
  glutMotionFunc //当鼠标键摁下时，鼠标拖动的事件。当鼠标拖动时，将每一帧都调用一次这个函数。
  glutPassiveMotionFunc //当没有鼠标键摁下时，鼠标拖动的事件。当鼠标拖动时，…(同上)
• 调用过程：事件循环语句glutMainLoop();使程序进入一个无穷的事件循环，每经过事件循环一次，GLUT即查看事件队列中的事件，如果定义了相应的回调函数即执行，否则忽略该事件。
• 显示回调函数：只要GLUT确定需要刷新窗口（当第一次打开窗口，改变了窗口形状，重新露出窗口，当用户程序决定需要改变显示内容的时候），那么就会执行显示回调函数。（每个GLUT程序都必须有一个显示回调函数，必要时可以设置为空函数）。许多事件都会导致调用显示回调函数，避免一次事件循环过程中多次执行：glutPostRedisplay();（通过设置标志—检查是否设置标志决定是否执行显示回调函数）。

chapter4

标量、向量、点的概念 C82

• point：三维空间中，点是空间中一个位置
• Scalar：服从一组规则的对象，这些规则是从普通的算数运算中抽象出来的。
• Vectors
  • Physical definition: a vector is a quantity with two attributes
  Direction方向
  Magnitude长度

仿射空间

• 定义：仿射空间是点和向量的集合 [1] ，它的定义是：
  • （1）设A为一个点集，A中任意两个有序点P、Q对应于n维矢量空间中的一个矢量a；
  • （2）设P、Q、R为A中任意三点，P、Q对应于矢量a，Q、R对应于矢量b，则P、R对应于矢量a+b。
    具有上面两个性质的点集A就叫做一个仿射空间。
• 运算：定义了两种运算
  • 点加上向量得到点
  • 点点做差得到向量(点与点之间没有加法运算)
• 仿射空间是没有起点只有方向与大小的向量所构成的向量空间。
• 线性变换的几何意义是图像的旋转和变形，而仿射变换的几何意义是旋转和变性再加上位移，所以仿射变换也可以表示为线性变换再加上位移。用矩阵表示的话，线性变换是 y = Ax，而仿射变换是 y = Ax + b。

点积和叉积（图形学意义）C88

维数、基、坐标系与标架 C91

• 维数：In a vector space, the maximum number of linearly independent vectors is fixed and is called the dimension of the space
• 基：In an n-dimensional space, any set of n linearly independent vectors form a basis for the space
• 坐标系：在n维坐标系中，任意n个线性无关的向量v1、v2…vn可定义一个坐标系。
• 标架：原点和基向量决定了一个标架
  Within this frame, every vector can be written as
  $$v=a1v1+a2v2+\dots .+anvn$$and every point can be written as
  $$P=P0+b1v1+b2v2+\dots .+bnvn$$
  Consider the point and the vector.They appear to have the similar representations
  $$p=[b1b2b3]v=[a1a2a3]$$
  which confuses the point with the vector

Homogeneous Coordinates C95

齐次坐标定义：将一个原本是n维的向量用一个n+1维向量来表示，是指一个用于投影几何里的坐标系统。

• definition of Homogeneous Coordinates

  • A Single Representation
    We can write a vector v and a point P as( where P0 is the origin)
    $$v=a1v1+a2v2+a3v3=[a1a2a30][v1v2v3P0{]}^T$$$$P=P0+b1v1+b2v2+b3v3=[b1b2b31][v1v2v3P0{]}^T$$
    Thus we obtain the four-dimensional homogeneous coordinate representation
    $$v=[a1a2a30]T$$$$p=[b1$$