时隔将近一年了，再次拾起了还未学完的OpenGL，这一年工作生活学习状态都不好，希望这一次能重新好好的把OpenGL学好，把图形渲染的基础知识掌握好 — 游戏梦

参考书籍：
《OpenGL Programming Guide 8th Edition》 — Addison Wesley
《Fundamentals of Computer Graphics (3rd Edition)》 — Peter Shirley, Steve Marschnner
《Real-Time Rendering, Third Edition》 — Tomas Akenine-Moller, Eric Haines, Naty Hoffman

旧博客地址

渲染相关概念学习

OpenGL

Introdction to OpenGL

What is OpenGL?

1. OpenGL is an application programming interface – “API” for short – which is merely a software library for accessing features in graphics hardware.(访问图形硬件设备功能的API)
2. OpenGL is a “C” language library(OpenGL是一个C语言库)

History

It was first developed at Silicon Graphics Computer Systems with Version 1,0 released in July of 1994(wiki)

Next Generation OpenGL

Vulkan

OpenGL relative knowledge

OpenGL render pipeline

1. Vertex Data
   Sending Data to OpenGL

2. Vertex Shader
   Process the data associated with that vertex

3. Tessellation Shader
   Tessellation uses patchs to describe an object’s shape, and allows relatively simple collections of patch geometry to be tessellated to increase the number of geometric primitives providing better-looking models (eg: LOD)

4. Geometry Shader
   Allows additional processing of individual geometric primitives, including creating new ones, before rasterization

5. Primitive Assembly
   Organizes the vertices into their associated geometric primitives in preparation for clipping and rasterization

6. Clipping
   Clip the vertex and pixels are outside of the viewport – this operation is handled automatically by OpenGL

7. Rasterization
   Fragment generation. Pixels have a home in the framebuffer, while a fragment still can be rejected and never update its associated pixel location.

8. Fragment Shading
   Use a fragment shading to determine the fragment’s final color, and potentially its depth value

9. Per-Fragment Operations
   If a fragment successfully makes it through all of the enabled tests (eg: depth testing, stencil testing), it may be written directly to the framebuffer, updating the color of its pixel, or if blending is enabled, the fragment’s color will be combined with the pixel’s current color to generate a new color that is written into the framebuffer

Note:
Fragment’s visibility is determined using depth testing and stencil testing
Pixel data is usually stored in texture map for use with texture mapping, which allows any texture stage to look up data values from one or more texture maps.

OpenGL Shader Language (GLSL)

GLSL - OpenGL Shading Language 也称作 GLslang，是一个以C语言为基础的高阶着色语言。它是由 OpenGL ARB 所建立，提供开发者对绘图管线更多的直接控制，而无需使用汇编语言或硬件规格语言。

编译和执行
GLSL 着色器不是独立的应用程式；其需要使用 OpenGL API 的应用程式。C、C++、C#、Delphi 和 Java 皆支援 OpenGL API，且支援 OpenGL 着色语言。
GLSL 着色器本身只是简单的字串集，这些字串集会传送到硬件厂商的驱动程式，并从程式内部的 OpenGL API 进入点编译。着色器可从程式内部或读入纯文字档来即时建立，但必须以字串形式传送到驱动程式。

工具
GLSL 着色器可以事先建立和测试，现有以下 GLSL 开发工具：
RenderMonkey - 这个软件是由 ATI 制作的，提供界面用以建立、编译和除错 GLSL 着色器，和 DirectX 着色器一样。仅能在 Windows 平台上执行。
GLSLEditorSample - 在 Mac OS X 上，它是目前唯一可用的程式，其提供着色器的建立和编译，但不能除错。它是 cocoa 应用程式，仅能在 Mac OS X 上执行。
Lumina - Lumina 是新的 GLSL 开发工具。其使用 QT 界面，可以跨平台。

The color space in OpenGL

In OpenGL, colors are represented in what’s called the RGB color space

.obj and .mtl file format

参考文章:
obj文件基本结构及读取 - 计算机图形学
3D模型-OBJ材质文件 MTL格式分析
.mtl文件格式解析 - [建模]

“OBJ文件不包含面的颜色定义信息，不过可以引用材质库，材质库信息储存在一个后缀是”.mtl”的独立文件中。关键字”mtllib”即材质库的意思。 材质库中包含材质的漫射(diffuse)，环境(ambient)，光泽(specular)的RGB(红绿蓝)的定义值，以及反射(specularity)，折射(refraction)，透明度(transparency)等其它特征。 “usemtl”指定了材质之后，以后的面都是使用这一材质，直到遇到下一个”usemtl”来指定新的材质。”

.obj的一些基本内容格式描述：

'#' 这个就相当于C++代码里面的//，如果一行开始时#，那么就可以理解为这一行完全是注释，解析的时候可以无视

g 这个应该是geometry的缩写，代表一个网格，后面的是网格的名字。

v v是Vertex的缩写，很简单，代表一个顶点的局部坐标系中的坐标，可以有三个到四个分量。我之分析了三个分量，因为对于正常的三角形的网格来说，第四个分量是1，可以作为默认情况忽略。如果不是1，那可能这个顶点是自由曲面的参数顶点，这个我们这里就不分析了，因为大部分的程序都是用三角形的。

vn 这个是Vertex Normal，就是代表法线，这些向量都是单位的，我们可以默认为生成这个obj文件的软件帮我们做了单位化。

vt  这个是Vertex Texture Coordinate，就是纹理坐标了，一般是两个，当然也可能是一个或者三个，这里我之分析两个的情况。

mtllib <matFileName> 这个代表后面的名字是一个材质描述文件的名字，可以根据后面的名字去找相应的文件然后解析材质。

usemtl <matName> 这里是说应用名字为matName的材质，后面所有描述的面都是用这个材质，直到下一个usemtl。

f 这里就是face了，真正描述面的关键字。后面会跟一些索引。一般索引的数量是三个，也可能是四个（OpenGL里面可以直接渲染四边形，Dx的话只能分成两个三角形来渲染了）。每个索引数据中可能会有顶点索引，法线索引，纹理坐标索引，以/分隔。

.mtl文件（Material Library File）是材质库文件，描述的是物体的材质信息，ASCII存储，任何文本编辑器可以将其打开和编辑。一个.mtl文件可以包含一个或多个材质定义，对于每个材质都有其颜色，纹理和反射贴图的描述，应用于物体的表面和顶点。”
.mtl的一些基本内容格式描述：

以下是一个材质库文件的基本结构：
newmtl mymtl_1
材质颜色光照定义
纹理贴图定义
反射贴图定义
……

注释：每个材质库可含多个材质定义，每个材质都有一个材质名。用newmtl mtlName来定义一个材质。对于每个材质，可定义它的颜色光照纹理反射等描述特征。主要的定义格式如下文所示：

////////////////////////////////////////////////
材质颜色光照
1。环境反射有以下三种描述格式，三者是互斥的，不能同时使用。
Ka r g b ——用RGB颜色值来表示，g和b两参数是可选的，如果只指定了r的值，则g和b的值都等于r的值。三个参数一般取值范围为0.0~1.0，在此范围外的值则相应的增加或减少反射率;
Ka spectral file.rfl factor ——用一个rfl文件来表示。factor是一个可选参数，表示.rfl文件中值的乘数，默认为1.0;
Ka xyz x y z ——用CIEXYZ值来表示，x，y，z是CIEXYZ颜色空间的各分量值。y和z两参数是可选的，如果只指定了x的值，则y和z的值都等于r的值。三个参数一般取值范围为0~1。

2。漫反射描述的三种格式：
Kd r g b
Kd spectral file.rfl factor
Kd xyz x y z

3。镜反射描述的三种格式:
Ks r g b
Ks spectral file.rfl factor
Ks xyz x y z

4。滤光透射率描述的三种格式：
Tf r g b
Tf spectral file.rfl factor
Tf xyz x y z

5。光照模型描述格式：

illum illum_#
指定材质的光照模型。illum后面可接0~10范围内的数字参数。各个参数代表的光照模

从上面的内容可以看出，.obj是描述关于顶点，法线，面，纹理坐标和材质引用等相关的数据的集合，而.mtl是用于定义实际材质信息的文件。

了解了.obj和.mtl文件里面的内容描述方式，让我们来看看在实际中.obj和.mtl文件内容来学习理解一下，以下内容来源于Modern OpenGL Tutorials — 3D Picking 的spider.obj和spider.mtl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

spider.obj
# Wavefront OBJ exported by MilkShape 3D
mtllib spider.mtl

v 1.160379 4.512684 6.449167
.....
# 762 vertices

vt 0.186192 0.222718
.....
# 302 texture coordinates

vn -0.537588 -0.071798 0.840146
......
# 747 normals

g HLeib01
usemtl HLeibTex
s 1
f 1/1/1 2/2/2 3/3/3
......
# 80 triangles in group

......

# 1368 triangles total

从第二行mtllib spider.mtl可以看出spider.obj指定了纹理材质的描述文件是spider.mtl。
后续的v, vn, vt, f, g描述了所有的关于顶点，顶点法线，顶点纹理坐标，face， geometry相关的数据信息。
而紧跟着g后面usemtl Augentex则描述了该geometry所使用的材质名字是Augentex（这里的材质的具体信息在前面指定的spider.mtl文件中）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

#
# spider.mtl
#

newmtl Skin
Ka 0.200000 0.200000 0.200000
Kd 0.827451 0.792157 0.772549
Ks 0.000000 0.000000 0.000000
Ns 0.000000
map_Kd .\wal67ar_small.jpg

newmtl Brusttex
Ka 0.200000 0.200000 0.200000
Kd 0.800000 0.800000 0.800000
Ks 0.000000 0.000000 0.000000
Ns 0.000000
map_Kd .\wal69ar_small.jpg

newmtl HLeibTex
Ka 0.200000 0.200000 0.200000
Kd 0.690196 0.639216 0.615686
Ks 0.000000 0.000000 0.000000
Ns 0.000000
map_Kd .\SpiderTex.jpg

newmtl BeinTex
Ka 0.200000 0.200000 0.200000
Kd 0.800000 0.800000 0.800000
Ks 0.000000 0.000000 0.000000
Ns 0.000000
map_Kd .\drkwood2.jpg

newmtl Augentex
Ka 0.200000 0.200000 0.200000
Kd 0.800000 0.800000 0.800000
Ks 0.000000 0.000000 0.000000
Ns 0.000000
map_Kd .\engineflare1.jpg

第五行newmtl Skin定义了一个材质的名字，后面Ka, Kd, Ks, Ns， map_Kd分别是对该材质的环境反射，漫反射，镜面反射，高光系数，纹理图片的配置。

综合上述的理解，可以看出，当我们通过assimp引用加载spider.obj这个文件的时候，我们会去使用spider.mtl作为材质配置文件去作为读取到的材质相关的信息，从而我们知道了我们需要spider.obj,spider.mtl,wal67ar_small.jpg,wal69ar_small.jpg,SpiderTex.jpg,drkwood2.jpg,engineflare1.jpg这些文件提供我们完整的mesh渲染相关的数据。

OpenGL learning journal

API

1. 查看哪些错误标志位被设置
   了解：
   OpenGL在内部保留了一组错误标志位(共4个),其中每一个标志位代表一种不同类型的错误。当错误一个发生时，与这个错误对应的标志就会被设置。如果被设置的标志不止一个，glGetError仍然只返回一个唯一的值。当glGetError函数被调用时，这个值随后被清除，然后在glGetError再次被调用时将返回一个错误标志或GL_NO_ERROR为止
   函数：
   Glenum glGetError(void);

2. 查询OpenGL的渲染引擎（OpenGL驱动程序）的生产商和版本号
   了解：
   OpenGL允许提供商通过它的扩展机制进行创新。为了使用特定供应商所提供的一些特定扩展功能，我们希望限制这个特定供应商所提供驱动程序的最低版本号。
   函数：
   const Glubyte *glGetString(GLenum name);

3. 设置和查询管线的状态
   了解：
   OpenGL使用状态模型来跟踪所有的OpenGL状态变量来实现对OpenGL渲染状态的控制
   函数：
   void glEnable(GLenum capability);
   void glDisable(GLenum capability);
   void glGet(Type)v(GLenum pname, GLboolean params);

4. 查询program的一些相关信息和一些错误信息
   了解：
   OpenGL的pragram链接可能由于GLSL里面的一些错误导致出错，我们需要知道关于program object的一些相关错误信息，同时我们也想知道我们现有的program相关的一些信息
   函数：
   void glGetProgramiv(GLuint program, GLenum pname, GLint *params);

5. 得到shader链接出错的log信息
   了解：
   OpenGL的shader object可能链接失败，我们需要知道shader里面出错的信息
   函数：
   void glGetProgramInfoLog(GLuint program, GLsizei maxLength, GLsizei length, GLchar infoLog);

注意:
可以通过glGetProgramiv()去得到program的一些log相关信息，比如GL_INFO_LOG_LENGTH

OpenGL Knowledge:

1. “OpenGL Execute Model:
   The model for interpretation of OpenGL commands is client-server. An application (the client) issues commands, which are interpreted and processed by OpenGL (the server). The server may or may not operate on the same computer as the client. In this sense, OpenGL is network-transparent. “

2. “client-server 模式:
   OpenGL 是一种 client-server 模式，当你的应用程序调用 OpenGL 函数时， 它将告诉OpenGL client， 然后 client 将渲染命令传送给 server. 这里client 和 server可能是不同的计算机，或是同一台计算机上的不同进程。一般来说 server 是在 GPU上处理的， 而 client 是在 CPU 上处理的，这样分担了 CPU 的负担， 同时高效利用了GPU.”

但如果Client和Server没在同一个机器上，我们就需要一种一种网络传输协议框架来实现他们之间的交流：
X Window System

但X Window System里的client和server与传统的C/S模式相反，client是负责运算的，server是负责显示的。
但OpenGL的client和server的交流原理是与X Window System相似的

OpenGL Practice

Check supported OpenGL version

1. Install the appropriate graphic driver which enables usage of the functionality provided.
   check the graphic drive update.(更新显卡驱动获得最新的OpenGL版本支持)
2. Using OpenGL extensions viewer to check which OpenGL version is supported(查看当前硬件所支持的OpenGL版本)
   download website

从上图可以看出我当前的电脑和显卡驱动支持最高4.4，所以在使用学习OpenGL之前一定要确认好自己电脑所能支持的版本，避免后续不必要的问题。

检查完所支持的OpenGL版本后，下面我们需要介绍两个在学习OpenGL时为了帮助快速学习使用OpenGL的两个重要库（Glut & Glew）

Know what Glut and Glew are, and how to use them

1. Glut (OpenGL Utility Toolkit)
   GLUT（英文全写：OpenGL Utility Toolkit）是一个处理OpenGL程式的工具库，负责处理和底层操作系统的呼叫以及I/O，并包括了以下常见的功能：

   1. 定义以及控制视窗
   2. 侦测并处理键盘及鼠标的事件
   3. 以一个函数呼叫绘制某些常用的立体图形，例如长方体、球、以及犹他茶壶（实心或只有骨架，如glutWireTeapot()）

   4. 提供了简单选单列的实现

      GLUT是由Mark J. Kilgard在Silicon Graphics工作时所写，此人同时也是OpenGL Programming for the X Window System以及The Cg Tutorial: The Definitive Guide to Programmable Real-Time Graphics两书的作者。

      GLUT的两个主要目的是建立一个跨平台的函式库（事实上GLUT就是跨平台的），以及简化学习OpenGL的条件。透过GLUT编写OpenGL通常只需要增加几行额外GLUT的程式码，而且不需要知道每个不同操作系统处理视窗的API。

      所有的GLUT函数都以glut作为开头，例如glutPostRedisplay()。

2. Glew ( OpenGL Extension Wrangler Library)
   The OpenGL Extension Wrangler Library (GLEW) is a cross-platform C/C++ library that helps in querying and loading OpenGL extensions. GLEW provides efficient run-time mechanisms for determining which OpenGL extensions are supported on the target platform. All OpenGL extensions are exposed in a single header file, which is machine-generated from the official extension list.(Glew是一个支持跨平台的C/C++库，用于运行时鉴别OpenGL扩展所支持的版本)
   more info for extention tools

   How to use Glu & Glew?

   1. add glu.lib & glew.lib into additional dependencies
   2. add the directory that includes glu.h & glew.h into include dirctory

   3. Include GL/freeglut.h & GL/glew.h in source file
      Note:
      if you use static link, #define FREEGLUT_STATIC before you include GL/freeglut.h, otherwise it will look for freeglut.lib. #define GLEW_STATIC for Glew.

      include GL/glew.h before GL/freeglut.h, otherwise, it will through “fatal error C1189: #error : gl.h included before glew.h”

Note:
后续的学习都是基于Modern OpenGL Tutorials,后续提到的一些库的源码从该网站下载

Open a Window

IncludeFiles.h

1
2
3
4
5
6
7
8

#include <iostream>

using namespace std;

#define FREEGLUT_STATIC

//Glut part
#include <GL/freeglut.h>

OpenGLWindow.h

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

#include "IncludeFiles.h"

static void RenderCallback()
{
	glClear(GL_COLOR_BUFFER_BIT);
	//Swap buffer
	glutSwapBuffers();
}

static void InitializeGlutCallback()
{
	//sets the display callback for the current window
	glutDisplayFunc(&RenderCallback);
}

int main(int argc, char** argv)
{
	//Initializes GLUT
	glutInit(&argc, argv);

	//GLUT_DOUBLE -- double buffer rendering
	glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA);

	//Initializa Windows info
	glutInitWindowSize(1024, 768);
	glutInitWindowPosition(100,100);
	glutCreateWindow("OpenGLWindow");

	InitializeGlutCallback();

	//Clear framebuffer before new draw call
	glClearColor(0.0f,0.0f,0.0f,0.0f);

	//enable program to enter the window event loop
	glutMainLoop();

	return 0;
}

final result:

从上面可以看出我们主要是通过调用glut来初始化创建windows窗口
通过glut里的API我们可以去设置回调，去实现我们在渲染时期需要设置的OpenGL状态
上述主要有四个重要的glut API：

1. glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA) — GLUT_DOULBE开启了双buffer渲染，这样效率更高，一个buffer用于渲染，一个buffer用于填充下一帧数据
2. glutDisplayFunc — 设置glut里的渲染回调
3. glutMainLoop — 开启glut里的window event监听
4. glutCreateWindow — 设定完相关参数后，通过此方法我们能够创建出我们想要的Windows窗口，同时OpenGL Context也在这时候被创建出来

Glut还提供了更多的关于Window的功能，后续会学习使用到

Using OpenGL

上一章节只是用到了glut去初始化我们最基本的Window窗口，还没真正大量用到OpenGL里API，在使用OpenGL API之前我们需要通过Glew这个工具去检查当前所支持的OpenGL版本，然后才能正确的调用对应的API。

使用Glew的准备工作在How to use Glu & Glew?时已经提到，这里不重述了

因为Glew需要通过context去查找对应所支持的OpenGL版本调用，所以初始化Glew必须在创建OpenGL Context之后。

Note:
Call glewInit after glutCreateWindow call successfully

那这里就不得不先了解一下什么是OpenGL Context了？
“”OpenGL Context””
OpenGL context, which is essentially a state machine that stores all data related to the rendering of your application. When your application closes, the OpenGL context is destroyed and everything is cleaned up.

结合wikiCreating an OpenGL Context (WGL)的介绍，这里我理解的不是很清晰，大概是OpenGL的Context相当于Device Context(DC)相对于Windows的概念一样。Context会设定很多跟渲染相关的状态(比如是否使用双buffer，depthbuffer占多少字节，颜色模式，窗口大小等渲染需要的信息)

这里我们只需要知道初始化Glut和调用glutCreateWindow创建窗口后，我们的OpenGL Context就生成了.

这也就是为什么在初始化glew之前必须先初始化Glut和创建Windows窗口的原因。

进一步了解参考：
Creating an OpenGL Context (WGL)

Using Glew
接下来回到Glew的使用去绘制我们的第一个OpenGL圆点
IncludeFiles.h

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#include <stdio.h>
#include <iostream>

using namespace std;

//Glew part
#define GLEW_STATIC
#include <GL/glew.h>

//Glut part
#define FREEGLUT_STATIC
#include <GL/freeglut.h>

#include "ogldev_math_3d.h"

UsingOpenGL.h

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

#include "IncludeFiles.h"

GLuint VBO;

static void RenderCallback()
{
	glClear(GL_COLOR_BUFFER_BIT);

	glEnableVertexAttribArray(0);

	glBindBuffer(GL_ARRAY_BUFFER, VBO);
	//Tells the how to interpret the data inside the buffer
	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, 0);

	//Draw call
	glDrawArrays(GL_POINTS, 0,1);

	//Disable the vertex that is not used anymore after draw call
	glDisableVertexAttribArray(0);

	//Swap buffer
	glutSwapBuffers();
}

static void InitializeGlutCallback()
{
	//sets the display callback for the current window
	glutDisplayFunc(&RenderCallback);
}

static void CreateVertexBuffer()
{
	Vector3f vertices[1];
	vertices[0] = Vector3f(0.0f,0.0f,0.0f);

	/*
	 / Apply a buffer handles
	 / Bind buffer handle to specific buffer target
	 / Filling the data for buffer target
	*/
	glGenBuffers(1, &VBO);
	glBindBuffer(GL_ARRAY_BUFFER, VBO);
	glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
}

static void InitializeGlutAndWindow(int argc, char** argv, const char* windowsname)
{
	//Initializes GLUT
	glutInit(&argc, argv);

	//GLUT_DOUBLE -- double buffer rendering
	glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA);

	//Initializa Windows info
	glutInitWindowSize(1024, 768);
	glutInitWindowPosition(100,100);
	
	glutCreateWindow(windowsname);

	InitializeGlutCallback();

	//Initialize glew
	GLenum res = glewInit();
	if(res != GLEW_OK)
	{
		cout<<"Error: "<<glewGetErrorString(res)<<endl;
	}

	//Clear framebuffer before new draw call
	glClearColor(0.0f,0.0f,0.0f,0.0f);

	CreateVertexBuffer();

	//enable program to enter the window event loop
	glutMainLoop();
}

int main(int argc, char** argv)
{
	InitializeGlutAndWindow(argc, argv, "UsingOpenGL");	
	return 0;
}

从上面可以看出，我们初始化glew只是调用了glewInit()方法，但主要一定要在OpenGL context创建完成后调用(即glutCreateWindow窗口创建之后)

我们创建并使用vertext buffer主要由5个步骤：

1. glGenBuffers() — 创建一个可用的buffer obejct
2. glBindBuffer() — 绑定buffer object到指定的target类型，target类型代表我们的buffer object包含什么样的数据用于什么样的用途
3. glBufferData() — 填充buffer数据
4. glVertexAttribPointer() — 指明如何去解析buffer里的数据，同时这里也指明了如何在shader里面访问这些数据(至于如何编写，编译，链接和使用Shader，后续会讲到。)
5. glDrawArrays() — 调用draw指明如何使用并绘制buffer里面的数据

Note：
这里需要注意的一点，要想在Shader里访问buffer里面的attribute数据，我们需要在调用draw之前调用glEnableVertexAttribArray()来激活特定的attribute

final result:

Using Shader

In the field of computer graphics, a shader is a computer program that is used to do shading: the production of appropriate levels of color within an image, or, in the modern era, also to produce special effects or do video post-processing.

上述是Wiki上Shader的定义。Shader是在可编程管线出现后，以程序的形式对渲染的各个阶段进行图形图像上的处理，使渲染变得更加灵活，主要作用于GPU上。

Shader作用于渲染的各个阶段：
之前在“Understand OpenGL render pipeline”有讲到各个渲染管线，这里就不再重述。可见Shader作用于大部分管线，比如：Vertex Shader（负责vertex数据处理），Tessellation Shader（负责以图形patch为单位的处理，用于描述物体形状数据，LOD就是在这个阶段实现的），Geometry Shader（以整个图形原件数据作为输入做处理，好比batch rendering可在这个阶段实现），Fragment Shading（以fragment(片元)数据作为输入做处理）

Shader Language在前面的“Understand OpenGL Shader Language”有讲到，这里就不重述了。

从上可见Shader在可编程管线的今天有着多么重要的作用。
接下来让我们看看在OpenGL中如何使用Shader吧。

使用Shader主要有下列几个步骤：

1. Create a shader object – glCreateShader(GLenum type)（创建shader对象）
2. Compile your shader source into the object – glShaderSource(**) glCompileShader(*)（编译shader文件，存储到shader对象中）
3. Verify that your shader compiled successfully – glGetShaderInfoLog(*)（检查shader编译是否成功并获取错误信息）
4. Create a shader program – glCreateProgram(void)（创建shader程序）
5. Attach the appropriate shader objects to the shader program – glAttachShader(GLuint program, Gluint shader)（附加多个shader对象到shader程序中）
6. Link the shader program – glLinkProgram(GLuint program)（链接shader程序）
7. Verify that the shader link phase completed successfully – glGetProgramiv() & glGetProgramInfoLog(**)（检查shader程序链接是否成功并获取错误信息）
8. Use the shader for vertex or fragment processing – glUseProgram(GLuint program)（使用shader程序做顶点处理或片元处理）

Shader出错后因为我们快速退出了程序，所以很难看到console的错误信息，所以最好的方式是把错误信息写入文本文件以供后续查看。Utils.h是关于编译和使用Shader并打印错误信息到文本的实现。
IncludeFiles.h

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#include <iostream>

#include <fstream>

#include <stdio.h>

using namespace std;

//Glew part
#define GLEW_STATIC
#include <GL/glew.h>

//Glut part
#define FREEGLUT_STATIC
#include <GL/freeglut.h>

#include "ogldev_util.h"
#include "ogldev_math_3d.h"

Utils.h

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

#include "IncludeFiles.h"

void serializationShaderCompileLog(GLuint prog, GLuint shader, GLenum type, char *log)
{
	char *stage_name = new char[50];
	char temp[50];
	switch(type)
	{
	case 0x8B31:
		sprintf(temp, "program%d-shader%d-%s", prog, shader, "GL_VERTEX_SHADER");
		strcpy(stage_name,temp);
		break;
	case 0x8DD9:
		sprintf(temp, "program%d-shader%d-%s", prog, shader, "GL_GEOMETRY_SHADER");
		strcpy(stage_name,temp);

		//strcpy(stage_name,"program:" + prog + "shader:" + shader + "stage:" + "GL_GEOMETRY_SHADER");
		break;
	case 0x8B30:
		sprintf(temp, "program%d-shader%d-%s", prog, shader, "GL_FRAGMENT_SHADER");
		strcpy(stage_name,temp);

		//strcpy(stage_name,"program:" + prog + "shader:" + shader + "stage:" + "GL_FRAGMENT_SHADER");
		break;
	}
	cout<<"program:"<<prog<<"-shader:"<<shader<<"-stage:"<<stage_name<<" compile log:"<<endl;
	cout<<log<<endl;

	char *file_name = new char[50];

	strcpy(file_name,stage_name);

	strcat(file_name,".txt");

	ofstream write_to_file;
	write_to_file.open(file_name,ios::out);

	write_to_file<<stage_name;
	write_to_file<<" compiled log info;\n";
	write_to_file<<log;
	write_to_file.close();

	delete []stage_name;
	delete []file_name;

	stage_name = nullptr;
	file_name = nullptr;
}


void program_log_serialization(unsigned int program,char const *program_name,bool is_console_print)
{
	GLchar *program_linked_log = NULL;
	GLint log_length = 0;
	glGetProgramiv(program, GL_INFO_LOG_LENGTH, &log_length);
	program_linked_log = new char[log_length];

	GLsizei program_linked_log_real_length;
	glGetProgramInfoLog(program, log_length, &program_linked_log_real_length, program_linked_log);
	if(is_console_print)
	{
		cout<<program_name<<" linked log info:"<<endl;
		cout<<program_linked_log<<endl;
	}

	const int file_name_length = strlen(program_name);

	char *log_file_whole_name = new char[file_name_length + 10];

	strcpy(log_file_whole_name,const_cast<char*>(program_name));

	strcat(log_file_whole_name,".txt");

	ofstream write_to_file;
	write_to_file.open(log_file_whole_name,ios::out);

	write_to_file<<*program_name + " linked log info;\n";
	write_to_file<<program_linked_log;
	write_to_file.close();

	delete []program_linked_log;
	delete []log_file_whole_name;

	program_linked_log = nullptr;
	log_file_whole_name = nullptr;
}

static void AddShader(GLuint shaderprogram, const char* pshadertext, GLenum shadertype)
{
	GLuint shaderobj = glCreateShader(shadertype);

	if(shaderobj == 0)
	{
		cout<<"Error create shader type "<<shadertype<<endl;
		exit(0);
	}

	const GLchar *p[1];
	p[0] = pshadertext;
	GLint lengths[1];
	lengths[0] = strlen(pshadertext);

	glShaderSource(shaderobj, 1, p, lengths);
	glCompileShader(shaderobj);

	GLint success;
	glGetShaderiv(shaderobj, GL_COMPILE_STATUS, &success);
	if(!success)
	{
		GLchar infolog[1024];
		glGetShaderInfoLog(shaderobj, 1024, NULL, infolog);
		cout<<"Error compiling shader type "<<shadertype<<endl;

		serializationShaderCompileLog(shaderprogram, shaderobj, shadertype, infolog);

		exit(1);
	}

	glAttachShader(shaderprogram, shaderobj);
}

static void CompileShader(GLuint shaderprogram, const char* psfilename, GLenum shadertype)
{
	if(shaderprogram == 0)
	{
		cout<<"Error creating shader program"<<endl;
		exit(1);
	}

	string s;

	if(!ReadFile(psfilename, s))
	{
		cout<<psfilename<<" is not exit"<<endl;
		exit(1);
	}

	switch(shadertype)
	{
	case 0x8B31:
		AddShader(shaderprogram, s.c_str(), GL_VERTEX_SHADER);
		break;
	case 0x8DD9:
		AddShader(shaderprogram, s.c_str(), GL_GEOMETRY_SHADER);
		break;
	case 0x8B30:
		AddShader(shaderprogram, s.c_str(), GL_FRAGMENT_SHADER);
		break;
	}
}

static void LinkAndUseShaderProgram(GLuint shaderprogram)
{
	GLint success = 0;
	GLchar errorlog[1024] = {0};

	glLinkProgram(shaderprogram);

	glGetProgramiv(shaderprogram, GL_LINK_STATUS, &success);

	if(success == 0)
	{
		glGetProgramInfoLog(shaderprogram, sizeof(errorlog), NULL, errorlog);
		cout<<"Error linking shader program "<<errorlog<<endl;
		program_log_serialization(shaderprogram, "LinkStatus", true);
		exit(1);
	}

	glValidateProgram(shaderprogram);
	glGetProgramiv(shaderprogram, GL_VALIDATE_STATUS, &success);
	if(!success)
	{
		glGetProgramInfoLog(shaderprogram, sizeof(errorlog), NULL, errorlog);
		cout<<"Invalid shader program "<<errorlog<<endl;
		exit(1);
	}

	glUseProgram(shaderprogram);
}

UsingShader.cpp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

#include "IncludeFiles.h"

#include "Utils.h"

GLuint VBO;

GLuint ShaderProgram;

const char* pVSFileName = "vsshader.vs";

const char* pFSFileName = "fsshader.fs";

static void RenderCallback()
{
	glClear(GL_COLOR_BUFFER_BIT);

	glEnableVertexAttribArray(0);

	glBindBuffer(GL_ARRAY_BUFFER, VBO);
	//Tells the how to interpret the data inside the buffer
	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, 0);

	//Draw call
	glDrawArrays(GL_TRIANGLES, 0,3);

	//Disable the vertex that is not used anymore after draw call
	glDisableVertexAttribArray(0);

	//Swap buffer
	glutSwapBuffers();
}

static void InitializeGlutCallback()
{
	//sets the display callback for the current window
	glutDisplayFunc(&RenderCallback);
}

static void CreateVertexBuffer()
{
	Vector3f vertices[3];
	vertices[0] = Vector3f(-1.0f,-1.0f,0.0f);
	vertices[1] = Vector3f(1.0f, -1.0f, 0.0f);
	vertices[2] = Vector3f(0.0f, 1.0f, 0.0f);

	/*
	 / Apply a buffer handles
	 / Bind buffer handle to specific buffer target
	 / Filling the data for buffer target
	*/
	glGenBuffers(1, &VBO);
	glBindBuffer(GL_ARRAY_BUFFER, VBO);
	glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
}

static void InitializeGlutAndWindow(int argc, char** argv, const char* windowsname)
{
	//Initializes GLUT
	glutInit(&argc, argv);

	//GLUT_DOUBLE -- double buffer rendering
	glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA);

	//Initializa Windows info
	glutInitWindowSize(1024, 768);
	glutInitWindowPosition(100,100);
	
	glutCreateWindow(windowsname);

	InitializeGlutCallback();

	//Initialize glew
	GLenum res = glewInit();
	if(res != GLEW_OK)
	{
		cout<<"Error: "<<glewGetErrorString(res)<<endl;
	}

	//Clear framebuffer before new draw call
	glClearColor(0.0f,0.0f,0.0f,0.0f);

	CreateVertexBuffer();

	ShaderProgram = glCreateProgram();

	CompileShader(ShaderProgram, pVSFileName, GL_VERTEX_SHADER);

	CompileShader(ShaderProgram, pFSFileName, GL_FRAGMENT_SHADER);

	LinkAndUseShaderProgram(ShaderProgram);

	//enable program to enter the window event loop
	glutMainLoop();
}

int main(int argc, char** argv)
{
	InitializeGlutAndWindow(argc, argv, "UsingOpenGL");	
	return 0;
}

vsshader.vs

1
2
3
4
5
6
7
8

#version 330

layout (location = 0) in vec3 Position;

void main()
{
    gl_Position = vec4(Position.x,Position.y,Position.z, 1.0);
}

fsshader.fs

1
2
3
4
5
6
7
8

#version 330

out vec4 FragColor;

void main()
{
    FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

final effect:

上述只使用到了Vertex Shader和Framgment Shader, 后续还会讲到其他Shader的使用。

Uniform Variables

Uniform variables are used to communicate with your vertex or fragment shader from “outside”.

Uniform variables are read-only and have the same value among all processed vertices. You can only change them within your C++ program.

从上面可以看出Uniform变量主要用于Vertex和Fragment Shader,并且对于所有传入的顶点值都不变，只能通过C++一侧去改变Uniform Variable的值。

接下来我们看看Uniform Variable是如何应用在Shader中的：
使用Uniform Variable主要有以下几个步骤：

1. Obtain uniform variable location after Link Shader Program

   1 2 3

   gScaleLocation = glGetUniformLocation(ShaderProgram, "gScale"); assert(gScaleLocation != 0xFFFFFFFF);

2. Set uniform variable value

   1 2 3

   gScale += 0.01f; glUniform1f(gScaleLocation, sinf(gScale));

3. Define uniform variable in Shader

   1 2 3 4 5 6 7 8 9 10

   #version 330 uniform float gScale; layout (location = 0) in vec3 Position; void main() { gl_Position = vec4(gScale * Position.x,gScale * Position.y,Position.z, 1.0); }

final result:

Interpolation

the interpolation that the rasterizer performs on variables that come out of the vertex shader.

在OpenGL的渲染管线里，在Fragment Shader执行之前会进行rasterizer，rasterizer会计算出各个三角形顶点之间的像素颜色数据，然后我们可以通过Fragment Shader对于光栅化的后颜色数据做进一步的处理。

这一章节主要看看我们是如何在Vertex Shader和Fragment Shader中如何对顶点数据和各像素信息做处理和数据传递的。(这里我们直接在VS中算出颜色信息直接传递到FS中去做处理)
要想从VS传递数据到FS，我们需要在Vertex Shader中定义关键词out的变量，并在Fragment Shader定义对应的关键词in的变量。

vsshader.vs

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#version 330

uniform float gScale;

layout (location = 0) in vec3 Position;

out vec4 Color;

void main()
{
    gl_Position = vec4(gScale * Position.x,gScale * Position.y,Position.z, 1.0);
	
	Color = abs(gl_Position);
}

fsshader.fs

1
2
3
4
5
6
7
8
9
10

#version 330

out vec4 FragColor;

in vec4 Color;

void main()
{
    FragColor = Color;
}

final result:

从上面可以看出在VS中算出颜色信息后，经过光栅化，三角形顶点之间的颜色信息被计算出来，最终传到FS中并作为最终颜色信息输出到屏幕上。

Coordinate Transformations & Perspective Projection

这一章主要是学习矩阵在3D图形中的使用和了解物体时怎样被显示到正确的屏幕位置的。
Note:
下列推导是基于OpenGL的列向量而非DX的行向量

在解释如何使用矩阵去进行向量变换之前，我们先来看看为什么矩阵可以实现向量变换？
下列学习参考《3D 数学基础：图形与游戏开发》
一个3维向量可以解释成3个基向量上平移后的组合(p,q,r为三个基向量)：
V = x × p + y × q + z × r;

当一个向量乘以矩阵的时候：

1
2
3
4
5
6
7
8
9

    [ p ]   [px  py  pz]
M = [ q ] = [qx  qy  qz]
    [ r ]   [rx  ry  rz]

V = [x y z]

                [px  py  pz]
V * M = [x y z] [qx  qy  qz] = [x*px + y*qx + z*rx   x*py + y*qy + z*ry  x*pz + y*qz + z*rz] = x*p + y*q + z*r
                [rx  ry  rz]

“如果把矩阵的行解释为坐标系的基向量，那么乘以该矩阵就相当于执行了一次坐标系转换。若有a*M = b，我们就可以说，M将a转换到b。”

从上面我们可以看出矩阵是如何做到对于向量的坐标系转换的。

那么为什么我们后面用到的矩阵都是4×4而不是3×3的了？
44的矩阵我们叫做齐次矩阵。齐次矩阵出现的原因主要是除了记法方便，更重要的是因为33的变换矩阵只能表示线性变换，而4*4齐次矩阵能够表示线性变换和非线性变换。

那么这里我们来了解下什么是线性变换？
线性变换的满足下列公式：
F(a+b) = F(a) + F(b)
F(ka) = k × F(a)

因为线性变换不包含平移，所以这也是4×4齐次矩阵的出现的原因。

了解了使用矩阵的原因和为什么使用4×4齐次矩阵的原因后，让我们来看看，我们是如何通过矩阵来实现3D图形里的实现物体的坐标系变换的。
M(m-w) — 物体坐标系到世界坐标系
M(w-v) — 世界坐标系到观察坐标系
M(v-p) — 投影变换

V’ = V × M(m-w) × M(w-v) × M(v-p)

因为矩阵乘法满足结合律
N = M(m-w) × M(w-v) × M(v-p)
V’ = V × (M(m-w) × M(w-v) × M(v-p)) = V * N
所以我们只需要求出所有坐标系变换矩阵的乘积后再对V进行操作即可。

因为单个矩阵存储着一系列的变换，而这些变换可以通过多个单个变换组合而成，所以下列式子是成立的
M = S(scale) × R(rotation) × T(translation)

但这里有个比较关键的点，S,R,T直接的乘法顺序，矩阵是不满足交换律的，我们必须按S R T的顺序，原因参考下面：
One reason order is significant is that transformations like rotation and scaling are done with respect to the origin of the coordinate system. Scaling an object that is centered at the origin produces a different result than scaling an object that has been moved away from the origin. Similarly, rotating an object that is centered at the origin produces a different result than rotating an object that has been moved away from the origin.

从上面可以看出，之所必须按S R T的顺序是因为S和R都是针对坐标系原点进行的，一旦先执行T，那么相对于坐标系原点的位置就会有所变化，这之后再做S和R就会出现不一样的表现。

因为OpenGL是列向量是左乘，所以在OpenGL中顺序如下：
V’ = T × R × S × V

DX中顺序如下：
V’ = V × S × R × T

获取最终的M(m-w)的代码实现如下：

1
2
3
4
5
6
7
8
9
10
11

const Matrix4f& Pipeline::GetWorldTrans()
{
    Matrix4f ScaleTrans, RotateTrans, TranslationTrans;

    ScaleTrans.InitScaleTransform(m_scale.x, m_scale.y, m_scale.z);
    RotateTrans.InitRotateTransform(m_rotateInfo.x, m_rotateInfo.y, m_rotateInfo.z);
    TranslationTrans.InitTranslationTransform(m_worldPos.x, m_worldPos.y, m_worldPos.z);

    m_Wtransformation = TranslationTrans * RotateTrans * ScaleTrans;
    return m_Wtransformation;
}

V’ = V × M(m-w) × M(w-v) × M(v-p)
我们知道了M(m-w)是如何计算出来的了，接下来我们要了解M(w-v) — 世界坐标系到观察坐标系
在了解如何从世界坐标系转换到观察坐标系之前我们先来看看摄像机的定义：
位置 — (x,y,z)
N — The vector from the camera to its target.（look at 朝向）
V — When standing upright this is the vector from your head to the sky.(垂直于N向上的向量)
U — This vector points from the camera to its “right” side”.(在N和V定了之后可以算出Camera的向右的向量)

摄像机坐标系和世界坐标系：

要想得到物体从世界坐标系转换到摄像机坐标系，其实就是个坐标系转换的问题。
我们首先把摄像机移动到世界坐标原点(移动摄像机位置即可)：
[ 1 0 0 -x ]
[ 0 1 0 -y ]
[ 0 0 1 -z ]
[ 0 0 0 1 ]

这样一来考虑如何变化坐标系即可：

通过N,V,U，我们已经能够得出X(camera),Y(camera),Z(camera)3个基向量了。
还记得我们之前说的 — “如果把矩阵的行解释为坐标系的基向量，那么乘以该矩阵就相当于执行了一次坐标系转换。若有a*M = b，我们就可以说，M将a转换到b。”
所以：

1
2
3
4

[ Ux Uy Uz 0 ]    [X(world)]    [X(camera)]
[ Vx Vy Vz 0 ]    [Y(world)]    [Y(camera)]
[ Nx Ny Nz 0 ] *  [Z(world)] =  [Z(camera)]
[ 0  0  0  1 ]    [    1   ]    [     1   ]

结合前面提到的先把摄像机移动到世界原点，得出：

1
2
3
4

         [ Ux Uy Uz 0 ]   [ 1 0 0 -x ]
M(w-v) = [ Vx Vy Vz 0 ] * [ 0 1 0 -y ]
         [ Nx Ny Nz 0 ]   [ 0 0 1 -z ]
         [ 0  0  0  1 ]   [ 0 0 0  1 ]

M(w-v)的代码实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

void Matrix4f::InitTranslationTransform(float x, float y, float z)
{
    m[0][0] = 1.0f; m[0][1] = 0.0f; m[0][2] = 0.0f; m[0][3] = x;
    m[1][0] = 0.0f; m[1][1] = 1.0f; m[1][2] = 0.0f; m[1][3] = y;
    m[2][0] = 0.0f; m[2][1] = 0.0f; m[2][2] = 1.0f; m[2][3] = z;
    m[3][0] = 0.0f; m[3][1] = 0.0f; m[3][2] = 0.0f; m[3][3] = 1.0f;
}

void Matrix4f::InitCameraTransform(const Vector3f& Target, const Vector3f& Up)
{
    Vector3f N = Target;
    N.Normalize();
    Vector3f U = Up;
    U.Normalize();
    U = U.Cross(N);
    Vector3f V = N.Cross(U);

    m[0][0] = U.x;   m[0][1] = U.y;   m[0][2] = U.z;   m[0][3] = 0.0f;
    m[1][0] = V.x;   m[1][1] = V.y;   m[1][2] = V.z;   m[1][3] = 0.0f;
    m[2][0] = N.x;   m[2][1] = N.y;   m[2][2] = N.z;   m[2][3] = 0.0f;
    m[3][0] = 0.0f;  m[3][1] = 0.0f;  m[3][2] = 0.0f;  m[3][3] = 1.0f;
}

const Matrix4f& Pipeline::GetViewTrans()
{
    Matrix4f CameraTranslationTrans, CameraRotateTrans;

    CameraTranslationTrans.InitTranslationTransform(-m_camera.Pos.x, -m_camera.Pos.y, -m_camera.Pos.z);
    CameraRotateTrans.InitCameraTransform(m_camera.Target, m_camera.Up);
    
    m_Vtransformation = CameraRotateTrans * CameraTranslationTrans;

    return m_Vtransformation;
}

这样一来M(w-v)也就实现了，接下来让我们看看M(v-p)是如何计算出来的吧。
M(v-p)这的p有多种投影方式，这里我只以Perspective Projection为例。
在转换到Camera坐标系后，我们还需要通过透视投影才能将3D物体映射到2D平面上。
Perspective Projection主要由下列四部分决定：

1. The aspect ratio - the ratio between the width and the height of the rectangular area which will be the target of projection.
2. The vertical field of view.
3. The location of the near Z plane.
4. The location of the far Z plane.

这一章的推导可以参考透视投影详解
一开始推导过程中不明白的一点是：

1
2
3

           1
Z'' = a * --- + b
           Pz

后来看了《Mathematics for 3D Game Programming and Computer Grahpics 3rd section》的5.4.1 Depth Interpolation后明白了，光栅化的时候对于深度的运算证明了是对Z的倒数进行插值来得到Z的值的。
所以上述公式是成立的。

经过一系列推导后，我们得出了：

Note:
上述推导是针对DX而言的，DX和OpenGL在透视投影矩阵推导上面有一个很重要的不同，那就是DX变换后z坐标范围是[0,1]，而OpenGL的z坐标范围是[-1,1]

所以如果我们把z坐标[-1,1]带入下式推导：

1
2
3

           1
Z'' = a * --- + b
           Pz

我们将得出OpenGL的透视投影矩阵如下(下面的θ = FOV/2)：

1
2
3
4

    [cotθ/Aspect        0               0                  0     ]
    [    0            cotθ              0                  0     ]
M = [    0              0          (-n-f)/(n-f)       2*f*n/(n-f)]
    [    0              0               1                  0     ]

所以OpenGL里M(v-p)的代码实现如下：

1
2
3
4
5
6
7
8
9
10
11

void Matrix4f::InitPersProjTransform(const PersProjInfo& p)
{
    const float ar         = p.Width / p.Height;
    const float zRange     = p.zNear - p.zFar;
    const float tanHalfFOV = tanf(ToRadian(p.FOV / 2.0f));

    m[0][0] = 1.0f/(tanHalfFOV * ar); m[0][1] = 0.0f;            m[0][2] = 0.0f;            m[0][3] = 0.0;
    m[1][0] = 0.0f;                   m[1][1] = 1.0f/tanHalfFOV; m[1][2] = 0.0f;            m[1][3] = 0.0;
    m[2][0] = 0.0f;                   m[2][1] = 0.0f;            m[2][2] = (-p.zNear - p.zFar)/zRange ; m[2][3] = 2.0f*p.zFar*p.zNear/zRange;
    m[3][0] = 0.0f;                   m[3][1] = 0.0f;            m[3][2] = 1.0f;            m[3][3] = 0.0;    
}

Keyboard && Mouse Control

这一章节主要是讲通过Glut提供的API如何去响应键盘和鼠标的控制。
本章节里面主要用到了两个类：

1. Pipeline
2. Camera

Pipeline主要是针对上一章节我们对于如何通过矩阵变化把物体显示到2D平面上的抽象：
M(m-w) — 物体坐标系到世界坐标系
M(w-v) — 世界坐标系到观察坐标系
M(v-p) — 投影变换

N = M(m-w) × M(w-v) × M(v-p)
V’ = V × M(m-w) × M(w-v) × M(v-p) = V × N

Pipeline只要知道了物体S,R,T信息就可以得出M(m-w)，知道了Camera信息就可以得出M(w-v),知道了透视投影信息就可以得出M(v-p)。

我们通过修改摄像机的相关信息得出在移动摄像机后的N,并作用于物体，这样一来就能使物体显示在正确位置了。

而Camera类是对摄像机的抽象。

Pipeline和Camera的源代码可在Modern OpenGL Tutorials下载

这里我只关心针对键盘和鼠标的响应的相关代码：
Glut里针对键盘和鼠标的API主要是下列几个：

1. glutSpecialFunc() — 主要是针对特殊按键比如F1
2. glutKeyboardFunc() — 主要是针对普通按键比如A,B,C……
3. glutPassiveMotionFunc() — 主要是针对在没有鼠标按键被按下的情况下，鼠标在窗口内移动的情况
4. glutMotionFunc() — 主要是针对在鼠标按键被按下的情况下，鼠标在窗口内移动的情况

相关代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

static void SpecialKeyboardCB(int Key, int x, int y)
{
    OGLDEV_KEY OgldevKey = GLUTKeyToOGLDEVKey(Key);
    pGameCamera->OnKeyboard(OgldevKey);
}

static void KeyboardCB(unsigned char Key, int x, int y)
{
    switch (Key) {
        case 'q':
            glutLeaveMainLoop();
    }
}

static void PassiveMouseCB(int x, int y)
{
    pGameCamera->OnMouse(x, y);
}

static void InitializeGlutCallbacks()
{
	......
    glutSpecialFunc(SpecialKeyboardCB);
    glutPassiveMotionFunc(PassiveMouseCB);
    glutKeyboardFunc(KeyboardCB);
}

final result:

Texture Mapping

“Textures are composed of texels, which often contain color values.”

“Textures are bound to the OpenGL context via texture units, which are represented as binding points named GL_TEXTURE0 through GL_TEXTUREi where i is one less than the number of texture units supported by the implementation.”

The textures are accessed via sampler variables which were declared with dimensionality that matches the texture in shader

在真正接触Texutre之前，让我们理解下下列几个重要的概念：

1. Texture object – contains the data of the texture image itself, i.e. the texels（可以看出Texture object才是含有原始数据信息的对象）

2. Texture unit – texture object bind to a ‘texture unit’ whose index is passed to the shader. So the shader reaches the texture object by going through the texture unit.（我们访问texture数据信息并不是通过texture object，而是在shader里通过访问特定索引的texture unit去访问texture object里的数据）

3. Sampler Object – configure it with a sampling state and bind it to the texture unit. When you do that the sampler object will override any sampling state defined in the texture object.（Sampler Object一些sampling的配置信息，当用于texture object时会覆盖texture object里的原始sampler设定）

4. Sampler uniform – corresponding to handle of texture unit(用于在Shader里访问texture unit，texture unit和texture object绑定，也就间接的访问了texture的原始数据)

Relationship between texture object, texture unit, sampler object and sampler uniform

因为OpenGL没有提供从图片加载texture的API，所以这里我们需要使用第三方库来完成这项工作，这里教程上使用的是ImageMagick。
ImageMagick主要是为了从多种格式的资源文件中读取原始数据，在我们指定glTexImage2D()的原始数据的时候提供所在内存地址。

Steps to use texture mapping:

1. Create a texture object and load texel data into it
   glGenTextures() — gen texture object
   glBindTexture() — Tells OpenGL the texture object we refer to in all the following texture related calls, until a new texture object is bound.
   glTexImage2D() — load texel data into texture object

2. Include texture coordinates with your vertices

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   Vertex Vertices[4] = { Vertex(Vector3f(-1.0f, -1.0f, 0.5773f), Vector2f(0.0f, 0.0f)), Vertex(Vector3f(0.0f, -1.0f, -1.15475f), Vector2f(0.0f, 0.0f)), Vertex(Vector3f(1.0f, -1.0f, 0.5773f), Vector2f(0.0f, 0.0f)), Vertex(Vector3f(0.0f, 1.0f, 0.0f), Vector2f(0.5f, 1.0f)) }; glGenBuffers(1, &VBO); glBindBuffer(GL_ARRAY_BUFFER, VBO); glBufferData(GL_ARRAY_BUFFER, sizeof(Vertices), Vertices, GL_STATIC_DRAW); //我们把顶点对应的纹理坐标信息写到vertex数据里 //说道纹理坐标就不得不提一下Texture UV纹理坐标了，Texture的图片被映射到0-1的二维坐标，图见后面： glEnableVertexAttribArray(0); glEnableVertexAttribArray(1); glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), 0); glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)12); //然后通过指定如何解析顶点数据里面的的数据在Shader里访问vertex的texture纹理坐标信息去sample出texture数据信息

3. Associate a texture sampler with each texture map you intend to use in your shader
   glTexParameterf() — Texture采样方式的配置
   还记得我们之前讲到的Sampler object吗？这里的配置就好比我们在sampler object里配置后再作用于特定的texture object
   这里我就不说关于采样方式配置相关的内容了（采样方式会决定最终像素的计算方式），这里值得一提的是mipmap的概念。
   mipmap主要是由于物体在场景中因为距离的缘故会在屏幕显示的大小有变化，如果我们在物体很远，只需要显示很小一块的时候还依然采用很大的纹理贴图，最终显示在屏幕上的纹理会很不清晰（失真）。为了解决这个问题，mipmap应运而生，通过事先生成或指定多个级别的同一纹理贴图，然后在程序运作的过程中通过计算算出应该使用哪一个等级的纹理贴图来避免大纹理小色块失真的问题。
   我们可以手动通过：
   glTexStorage2D() && glTexSubImage2D() 去手动指定各级纹理贴图
   也可以通过：
   glGenerateMipmap() — 自动去生成对应的mipmap纹理贴图
   而程序在实际运作过程中如何去计算Mipmap Level这里就不做介绍了，详细参考《OpenGL Programming Guide 8th Edition》的Calculating the Mipmap章节
   相关函数：
   textureLod()
   textureGrad()

4. Active texture unit and bind texture object to it
   glActiveTexture() — 激活特定的texture unit然后绑定特定texture object到特定texture unit上
   glBindTexture() — 绑定特定的texture object到texture unit上

5. Retrieve the texel values through the texture sampler from your shader
   首先我们在程序中指定了我们即将访问的Texture unit

   1 2 3 4

   gSampler = glGetUniformLocation(ShaderProgram, "gSampler"); assert(gSampler != 0xFFFFFFFF); glUniform1i(gSampler, 0);

Note:
“The important thing to note here is that the actual index of the texture unit is used here, and not the OpenGL enum GL_TEXTURE0 (which has a different value).”

vsshader.vs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#version 330

uniform mat4 gWVP;

layout (location = 0) in vec3 Position;
layout (location = 1) in vec2 TexCoord;

out vec2 TexCoord0;

void main()
{
    gl_Position = gWVP * vec4(Position, 1.0);
	
	TexCoord0 = TexCoord;
}

fsshader.fs

1
2
3
4
5
6
7
8
9
10
11
12

#version 330

in vec2 TexCoord0;

out vec4 FragColor;

uniform sampler2D gSampler;

void main()
{
    FragColor = texture2D(gSampler, TexCoord0.xy);
}

从上面可以看出我们在fragment shader里，通过传入的gSampler确认了使用哪一个texture unit，通过传入的TexCoord0确认了对应的纹理坐标信息去获取对应的texture信息，然后最终通过texture2D从texture里取得了特定的颜色信息作为输出，就这样纹理图片的信息就作用在了三角形上并显示出来。

final result:

下面我简单测试了下两个Texture计算出最终纹理信息：
TextureStudy.cpp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

static void InitializeTextureInfo()
{
	gSampler = glGetUniformLocation(ShaderProgram, "gSampler");
	assert(gSampler != 0xFFFFFFFF);

	gSampler2 = glGetUniformLocation(ShaderProgram, "gSampler2");
	assert(gSampler2 != 0xFFFFFFFF);

	//Specify the inder of texture unit we will use in shader
	glUniform1i(gSampler, 0);

	glUniform1i(gSampler2, 1);

	pTexture = new Texture(GL_TEXTURE_2D, "../Content/texture1.png");

	if(!pTexture->Load())
	{
		return ;
	}

	pTexture2 = new Texture(GL_TEXTURE_2D, "../Content/texture2.jpg");

	if(!pTexture2->Load())
	{
		return ;
	}
}

static void RenderCallbackCB()
{
	......

	pTexture->Bind(GL_TEXTURE0);

	pTexture2->Bind(GL_TEXTURE1);

    ......
}

fsshader.fs

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#version 330

in vec2 TexCoord0;

out vec4 FragColor;

uniform sampler2D gSampler;

uniform sampler2D gSampler2;

void main()
{
    FragColor = 0.5 * texture2D(gSampler, TexCoord0.xy) + 0.5 * texture2D(gSampler2, TexCoord0.xy);
}

原始图片分别为：

final result:

Point Sprites:
待理解学习……

Rendering to Texture Maps:
待理解学习……

Sumary：

1. Use immutable texture storage for textures wherever possible – When a texture is marked as immutable, the OpenGL implementation can make certain assumptions about the validity of a texture object （尽量使用不可变的texture storage， 这样OpenGL可以确保texture的有效性）

2. Create and initialize the mipmap chain for textures unless you have a good reason not to – improve the image quality of your program’s rendering, but also will make more efficient use of the caches in the graphics processor （为了渲染效率，减轻GPU负担，尽可能为texture创建mipmap）

3. Use an integer sampler in your shader when your texture data is an unnormalized integer and you intend to use the integer values it contains directly in the shader （尽量在shader里使用integer类型的sampler）

Note:
“The maximum number of texture units supported by OpenGL
can be determined by retrieving the value of the GLMAX_COMBINED
TEXTURE_IMAGE_UNITS constant, which is guaranteed to be at least 80 as
of OpenGL 4.0.”

Proxy texture – used to test the capabilities of the OpenGL implementation when certain limits are used in combination with each other.

Light and Shadow

光源类型：

1. Ambient Light (环境光) — 环境光只影响ambient
2. Directional Light (方向光) — 方向光会影响diffuse & specular
3. Point Light (点光源) — 与方向光的区别是有attenuation(衰弱)而且点光源照射物体的表面的方向不一样，同样会影响diffuse & specular

传统的光照组成：
Ambient (环境光) — 与光照的方向无关

1
2
3

FragColor = texture2D(gSampler, TexCoord0.xy) *
        vec4(gDirectionalLight.Color, 1.0f) *
        gDirectionalLight.AmbientIntensity;

因为环境光与光照方向无关，只需考虑方向光的颜色和方向光所占比重，所以基本上主要计算归结于上述运算。

final effect:

Note:
这里源代码里有个错误，在子类重写虚函数的KeyboardCB的时候，由于参数写的不对，没能正确重写该虚函数而没有被调到。
错误：
virtual void KeyboardCB(OGLDEV_KEY OgldevKey);
正确：
virtual void KeyboardCB(OGLDEV_KEY OgldevKey, OGLDEV_KEY_STATE OgldevKeyState = OGLDEV_KEY_STATE_PRESS)

Diffuse (漫反射光) — 与光照的方向和顶点normal有关
因为漫反射光要考虑光照的方向和物体的顶点法线，所以我们需要在shader里进行计算之前要把顶点的法线算出来然后传入Shader进行计算。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

void CalcNormals(const unsigned int* pIndices, unsigned int IndexCount, Vertex* pVertices, unsigned int VertexCount)
{
    for (unsigned int i = 0 ; i < IndexCount ; i += 3) {
        unsigned int Index0 = pIndices[i];
        unsigned int Index1 = pIndices[i + 1];
        unsigned int Index2 = pIndices[i + 2];
        Vector3f v1 = pVertices[Index1].m_pos - pVertices[Index0].m_pos;
        Vector3f v2 = pVertices[Index2].m_pos - pVertices[Index0].m_pos;
        Vector3f Normal = v1.Cross(v2);
        Normal.Normalize();

        pVertices[Index0].m_normal += Normal;
        pVertices[Index1].m_normal += Normal;
        pVertices[Index2].m_normal += Normal;
    }

    for (unsigned int i = 0 ; i < VertexCount ; i++) {
        pVertices[i].m_normal.Normalize();
    }
}

vsshader.vs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#version 330

layout (location = 0) in vec3 Position;
layout (location = 1) in vec2 TexCoord;
layout (location = 2) in vec3 Normal;

uniform mat4 gWVP;
uniform mat4 gWorld;

out vec2 TexCoord0;
out vec3 Normal0;

void main()
{
    gl_Position = gWVP * vec4(Position, 1.0);
    TexCoord0 = TexCoord;
    Normal0 = (gWorld * vec4(Normal, 0.0)).xyz;
}

注意“Normal0 = (gWorld * vec4(Normal, 0.0)).xyz;” — 因为我们对于顶点法线的计算是基于物体没有移动变化之前的，所以我们真正计算所用的顶点法线需要通过世界坐标系矩阵的转换。

fsshader.fs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

#version 330

in vec2 TexCoord0;
in vec3 Normal0;                                                                    
                                                                                    
out vec4 FragColor;                                                                 
                                                                                    
struct DirectionalLight                                                             
{                                                                                   
    vec3 Color;                                                                     
    float AmbientIntensity;                                                         
    float DiffuseIntensity;                                                         
    vec3 Direction;                                                                 
};                                                                                  
                                                                                    
uniform DirectionalLight gDirectionalLight;                                         
uniform sampler2D gSampler;                                                         
                                                                                    
void main()                                                                         
{                                                                                   
    vec4 AmbientColor = vec4(gDirectionalLight.Color, 1.0f) *                       
                        gDirectionalLight.AmbientIntensity;                         
                                                                                    
    float DiffuseFactor = dot(normalize(Normal0), -gDirectionalLight.Direction);    
                                                                                    
    vec4 DiffuseColor;                                                              
                                                                                    
    if (DiffuseFactor > 0) {                                                        
        DiffuseColor = vec4(gDirectionalLight.Color, 1.0f) *                        
                       gDirectionalLight.DiffuseIntensity *                         
                       DiffuseFactor;                                               
    }                                                                               
    else {                                                                          
        DiffuseColor = vec4(0, 0, 0, 0);                                            
    }                                                                               
                                                                                    
    FragColor = texture2D(gSampler, TexCoord0.xy) *                                 
                (AmbientColor + DiffuseColor);                                      
}

从“float DiffuseFactor = dot(normalize(Normal0), -gDirectionalLight.Direction);”可以看出，光照的方向和顶点法线之间的角度直接决定了漫反射光所占的比重。
参见Lambert’s cosine law

final effect:

Note:
这里我按照官网和源代码的方式按自己的方式写了，但不知道为何DiffuseFactor得出的值当我去做if else判断等，无论是>0,<0,==0都不会进去，都只会进入最终的else。
我通过gDEBugger查看了uniform的值没有问题，C++那一侧所有的相关计算的值也都正确，这里弄了半天也没有解决，本来准备用Nsight调试GLSL的，发现我的笔记本好像不被支持。
个人最终认为是顶点的法线在传递给Shader的时候出问题了，导致dot之后计算DiffuseFactor出问题，虽然在VS一侧下的断点查看normal是正确的，但不确定为什么shader一侧获得的值会有问题。（这一结论主要是因为同样的shader代码在加载现有模型的时候起作用发现的）

Specular (镜面反射光) — 与光照的方向和eye观察还有顶点normal有关
Specular在Diffuse的基础上，还要多考虑一个因素（观察者所在位置，如果观察者正好在反光处，那么该观察点就会比在其他位置的观察点观察同一位置的看起来更亮）。但现实中并不是所有物体都有这一特性，所以Specular更针对物体材质而言而非光线本身。

看一下下图：

I是光线入射方向
N是平面法线
R是完美反射后的光线
V是观察者观察方向
a是观察者方向与完美反射光线的夹角
从上图可以看出当观察者所在观察角度V与R越接近时，我们可以理解为观察者观察该点会达到最大量值

我们计算出R主要是通过I和N和-N之间的计算：
详情见下图：

R = I + V
V = 2 N dot(-N,I)
这里值得一提的是OpenGL里提供了reflect方法，通过光线和平面法线就能直接算出反射R

让我们直接看一下Specular的计算公式：

M — 是跟物体材质有关的，材质决定了specular的反光系数
p
(R.V) — 是指观察者所在位置和完美反射光线之间夹角的P次方，P是shininess factor（発光系数之类的）
上述换成代码如下:

1
2
3
4
5
6
7
8
9
10

vec3 VertexToEye = normalize(gEyeWorldPos - WorldPos0);                     
vec3 LightReflect = normalize(reflect(gDirectionalLight.Direction, Normal));
float SpecularFactor = dot(VertexToEye, LightReflect);                      
if (SpecularFactor > 0) {                                                   
    SpecularFactor = pow(SpecularFactor, gSpecularPower);
    SpecularColor = vec4(gDirectionalLight.Color * gMatSpecularIntensity * SpecularFactor, 1.0f);
}    

FragColor = texture2D(gSampler, TexCoord0.xy) *                                 
            (AmbientColor + DiffuseColor + SpecularColor);

Limitations of the Classic Lighting Model: （传统光源的不足之处）
Big Missing:

1. Assume no other objects blocking the path of the lights to the surface （假设光不会被物体遮挡）
2. Accurate ambient lighting （统一固定精确的环境光，现实中是由削弱的（attenuation））

了解了光源的三个组成，也了解了传统光源的不足，让我们来看看另一种光照Point Light：
Point Light是有伴随距离而削弱（attenuation）的光源
公式如下：

在实现Point Light的计算的时候，我们只需要把光照的方向根据Point Light位置算一下，并在最后除以根据物体位置与Point Light的光源位置算出的attenuation即可、

1
2
3
4
5
6
7
8
9
10
11
12
13

vec4 CalcPointLight(int Index, vec3 Normal)                                                 
{                                                                                           
    vec3 LightDirection = WorldPos0 - gPointLights[Index].Position;                         
    float Distance = length(LightDirection);                                                
    LightDirection = normalize(LightDirection);                                             
                                                                                            
    vec4 Color = CalcLightInternal(gPointLights[Index].Base, LightDirection, Normal);       
    float Attenuation =  gPointLights[Index].Atten.Constant +                               
                         gPointLights[Index].Atten.Linear * Distance +                      
                         gPointLights[Index].Atten.Exp * Distance * Distance;               
                                                                                            
    return Color / Attenuation;                                                             
}

接下来我们看一下Spot Light:
Spot Light和Point Light的主要区别在于，Spot Light定义了一个可影响的范围Cone和其垂直照射的方向。
而这个Cone通过Cutoff来定义：
Cutoff — “ The cutoff value represents the maximum angle between the light direction and the light to pixel vector for pixels that are under the influence of the spot light.”
见下图：

通过计算出所在点是否在Spot Light的Cone里去决定是否影响该颜色值。
这里需要关注的一点是关于如何映射Cutoff值到[0，1]，因为一般来说Cutoff的值不可能设置到0（即90度），所以我们要想计算边缘化削弱效果，我们需要对Cutoff的值进行线性插值。
推导见如下（来源之OpenGL Tutorial 21）：

知道了怎么确认是否影响该点颜色，以及如何插值获取影响值，那么最终归结代码见如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

vec4 CalcSpotLight(struct SpotLight l, vec3 Normal)
{
    vec3 LightToPixel = normalize(WorldPos0 - l.Base.Position);
    float SpotFactor = dot(LightToPixel, l.Direction);
    //计算所在点是否在Spot Light的Cone里去决定是否影响该颜色值。
    if (SpotFactor > l.Cutoff) {
        vec4 Color = CalcPointLight(l.Base, Normal);
        //插值计算影响值
        return Color * (1.0 - (1.0 - SpotFactor) * 1.0/(1.0 - l.Cutoff));
    }
    else {
        return vec4(0,0,0,0);
    }
}

More Advanced Lighting Model:
Hemisphere Lighting:
The idea behind hemisphere lighting is that we model the illumination as two hemispheres. The upper hemisphere represents the sky and the lower hemisphere represents the ground

Imaged-Based Lighting:
“It is often easier and much more efficient to sample the lighting in such environments and store the results in one or more environment maps”

Lighting with Spherical Harmonics:
“This method reproduces accurate diffuse reflection, based on the content of a light probe image, without accessing the light probe image at runtime”

详情参考

总结:
Ambient (环境光) — 与光照的方向无关
环境光不会削弱不考虑方向，所以只需考虑光照颜色和平面颜色即可
Diffuse (漫反射光) — 与光照的方向和顶点normal有关
光照的方向和顶点法线之间的角度直接决定了漫反射光所占的比重。
Specular (镜面反射光) — 与光照的方向和eye观察还有顶点normal有关
观察者所在位置和光照方向和法线会决定观察者所在位置的Specular反射比例，物体材质会决定Specular反射系数。
最终通过计算环境中所有光源对物体的ambient, diffuse, specular影响计算出物体的最终color

接下来我们看一个真实渲染过程中比较重要的技术 — Shadow Mapping
Shadow Mapping — Uses a depth texture to determine whether a point is lit or not.

Shadow mapping is a multipass technique that uses depth textures to provide a solution to rendering shadows (核心思想是通过比较通过光源点观察保存的深度信息（depth texture）和从观察点观察的深度信息来判断哪些点是shadowed，哪些是unshadowed — 注意比较的是通过映射到2D depth texture后的信息)
A key pass is to view the scene from the shadow-casting light source rather than from the final viewpoint
Two passes:

• First Pass
  Shadow map — by rendering the scene’s depth from the point of the light into a depth texture, we can obtain a map of the shadowed and unshadowed points in the scene
  在第一个pass中，我按照事例代码中写了，但发现最后显示的是纯白色的图像。
  后来就不断去查问题。
  
  首先，我怀疑depth texture是不是没有生成成功？

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

  // Create the FBO glGenFramebuffers(1, &m_fbo); // Create the depth buffer glGenTextures(1, &m_shadowMap); glBindTexture(GL_TEXTURE_2D, m_shadowMap); glTexImage2D(GL_TEXTURE_2D, 0, GL_DEPTH_COMPONENT, WindowWidth, WindowHeight, 0, GL_DEPTH_COMPONENT, GL_FLOAT, NULL); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); glBindFramebuffer(GL_FRAMEBUFFER, m_fbo); glFramebufferTexture2D(GL_DRAW_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_TEXTURE_2D, m_shadowMap, 0); // Disable writes to the color buffer glDrawBuffer(GL_NONE); glReadBuffer(GL_NONE); GLenum Status = glCheckFramebufferStatus(GL_FRAMEBUFFER); if (Status != GL_FRAMEBUFFER_COMPLETE) { printf("FB error, status: 0x%x\n", Status); return false; }

但上述代码没有报任何错误，通过gDebugger查看Texture的时候发现depth texture是生成成功了的。

从上图仔细看，模型的深度信息时被生成到了FBO 1所绑定的Depth Texture中了的。

那么接下来，我就怀疑是不是我激活的Texture unit有错误？
以下是将Depth Texture渲染到一个平面上的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

void ShadowMapFBO::BindForReading(GLenum TextureUnit)
{
    glActiveTexture(TextureUnit);
    glBindTexture(GL_TEXTURE_2D, m_shadowMap);
}

static void RenderPass()
{
	glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

	glUniform1i(gTextureLocation, 0);

	gShadowMapFBO.BindForReading(GL_TEXTURE0);

	Pipeline p;
	p.Scale(5.0f, 5.0f, 5.0f);
	p.WorldPos(0.0f, 0.0f, 10.0f);
	p.SetCamera(pGameCamera->GetPos(), pGameCamera->GetTarget(), pGameCamera->GetUp());
	p.SetPerspectiveProj(gPersProjInfo);

	glUniformMatrix4fv(gWVPLocation, 1, GL_TRUE, (const GLfloat*)p.GetWVPTrans());

	gPQuade->Render();
}

通过上图，我发现我自己的代码有三个Texture被生成，但Demo只有两个，并且我自己写的代码Enable的并非FBO 1绑定生成的Texture而是第三个Texture，所以这是我怀疑我在加载Mesh的时候加载了第三个Texture并将其绑定在了Texture unit 0，而我碰巧激活了这一个Texture unit。

由于我的mesh.cpp是沿用上一个tutorial的代码，所以我没有更新到最新教程的mesh代码。
下面是我所用的mesh.cpp的一个加载Texture的方法和Texture源代码加载的时候的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

bool Mesh::InitMaterials(const aiScene* pScene, const std::string& Filename)
{
    ......

    // Load a white texture in case the model does not include its own texture
    if (!m_Textures[i]) {
        m_Textures[i] = new Texture(GL_TEXTURE_2D, "../Content/white.png");

        Ret = m_Textures[i]->Load();
    }

    ......
}


void Mesh::Render()
{
	.....

    if (MaterialIndex < m_Textures.size() && m_Textures[MaterialIndex]) {
        m_Textures[MaterialIndex]->Bind(GL_TEXTURE0);
    }

    .......
}
bool Texture::Load()
{
    try {
        m_image.read(m_fileName);
        m_image.write(&m_blob, "RGBA");
    }
    catch (Magick::Error& Error) {
        std::cout << "Error loading texture '" << m_fileName << "': " << Error.what() << std::endl;
        return false;
    }

    glGenTextures(1, &m_textureObj);
    glBindTexture(m_textureTarget, m_textureObj);
    glTexImage2D(m_textureTarget, 0, GL_RGBA, m_image.columns(), m_image.rows(), 0, GL_RGBA, GL_UNSIGNED_BYTE, m_blob.data());
    glTexParameterf(m_textureTarget, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameterf(m_textureTarget, GL_TEXTURE_MAG_FILTER, GL_LINEAR);    
    glBindTexture(m_textureTarget, 0);
    
    return true;
}

void Texture::Bind(GLenum TextureUnit)
{
    glActiveTexture(TextureUnit);
    glBindTexture(m_textureTarget, m_textureObj);
}

从上面可以看出如果我加载的mesh没有含有贴图的话，我会指定他去默认加载white.png作为贴图，并且渲染的时候激活Texture unit 0并将该纹理绑定到Texture unit 0

这也就是为什么我后来调用下列代码出现了Active错误的texture的原因。

1
2
3

glUniform1i(gTextureLocation, 0);

gShadowMapFBO.BindForReading(GL_TEXTURE0);

所以在不改Texture和Mesh源代码的情况下，我只需要将生成的Texture unit绑定到GL_TEXTURE2并指定Shader去访问Texture unit 2即可。
将上述代码改为如下即可：

1
2
3

glUniform1i(gTextureLocation, 2);

gShadowMapFBO.BindForReading(GL_TEXTURE2);

在渲染到Depth Texture的时候，主要是通过以下步骤：

1. 创建新的FBO和Texture object

   1 2 3 4 5 6 7 8 9 10 11

   // Create the FBO glGenFramebuffers(1, &m_fbo); // Create the depth texture glGenTextures(1, &m_shadowMap); glBindTexture(GL_TEXTURE_2D, m_shadowMap); glTexImage2D(GL_TEXTURE_2D, 0, GL_DEPTH_COMPONENT, WindowWidth, WindowHeight, 0, GL_DEPTH_COMPONENT, GL_FLOAT, NULL); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

2. 激活新的FBO并绑定Texture object到FBO的Depth buffer上

   1 2	glBindFramebuffer(GL_FRAMEBUFFER, m_fbo); glFramebufferTexture2D(GL_DRAW_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_TEXTURE_2D, m_shadowMap, 0);

3. 关闭颜色写入到新的FBO。因为我们只需要Depth信息，所以我们不需要写入颜色信息到新的FBO里。

   1	glDrawBuffer(GL_NONE);

4. 检查新的FBO的状态是否完整

   1 2 3 4 5 6

   GLenum Status = glCheckFramebufferStatus(GL_FRAMEBUFFER); if (Status != GL_FRAMEBUFFER_COMPLETE) { printf("FB error, status: 0x%x\n", Status); return false; }

5. 激活新的FBO并清除Depth信息后以光线来源的角度draw call写入depth信息到新的FBO和绑定的depth texture里

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

   static void ShadowMapPass() { gShadowMapFBO.BindForWriting(); glClear(GL_DEPTH_BUFFER_BIT); Pipeline p; p.Scale(0.1f, 0.1f, 0.1f); p.Rotate(0.0f, gScale, 0.0f); p.WorldPos(0.0f, 0.0f, 5.0f); p.SetCamera(gSpotLight.Position, gSpotLight.Direction, Vector3f(0.0f, 1.0f, 0.0f)); p.SetPerspectiveProj(gPersProjInfo); //Set uniform variable value glUniformMatrix4fv(gWVPLocation, 1, GL_TRUE, (const GLfloat*)p.GetWVPTrans()); gPTank->Render(); glBindFramebuffer(GL_FRAMEBUFFER, 0); }

• Second Pass
  Rendering the scene from the point of view of the viewer. Project the surface coordinates into the light’s reference frame and compare their depths to the depth recorded into the light’s depth texture. Fragments that are further from the light than the recorded depth value were not visible to the light, and hence in shadow

第二个pass的关键有下列几个点：

1. 正常方式渲染时，通过传递Light的MVP去计算每一个顶点在光源角度观察时的投影位置信息。

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

   void RenderPass() { glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); m_pLightingEffect->Enable(); m_pLightingEffect->SetEyeWorldPos(m_pGameCamera->GetPos()); m_shadowMapFBO.BindForReading(GL_TEXTURE1); Pipeline p; p.SetPerspectiveProj(m_persProjInfo); p.Scale(10.0f, 10.0f, 10.0f); p.WorldPos(0.0f, 0.0f, 1.0f); p.Rotate(90.0f, 0.0f, 0.0f); p.SetCamera(m_pGameCamera->GetPos(), m_pGameCamera->GetTarget(), m_pGameCamera->GetUp()); m_pLightingEffect->SetWVP(p.GetWVPTrans()); m_pLightingEffect->SetWorldMatrix(p.GetWorldTrans()); p.SetCamera(m_spotLight.Position, m_spotLight.Direction, Vector3f(0.0f, 1.0f, 0.0f)); m_pLightingEffect->SetLightWVP(p.GetWVPTrans()); m_pGroundTex->Bind(GL_TEXTURE0); m_pQuad->Render(); p.Scale(0.1f, 0.1f, 0.1f); p.Rotate(0.0f, m_scale, 0.0f); p.WorldPos(0.0f, 0.0f, 3.0f); p.SetCamera(m_pGameCamera->GetPos(), m_pGameCamera->GetTarget(), m_pGameCamera->GetUp()); m_pLightingEffect->SetWVP(p.GetWVPTrans()); m_pLightingEffect->SetWorldMatrix(p.GetWorldTrans()); p.SetCamera(m_spotLight.Position, m_spotLight.Direction, Vector3f(0.0f, 1.0f, 0.0f)); m_pLightingEffect->SetLightWVP(p.GetWVPTrans()); m_pMesh->Render(); } lighting.vs #version 330 layout (location = 0) in vec3 Position; layout (location = 1) in vec2 TexCoord; layout (location = 2) in vec3 Normal; uniform mat4 gWVP; uniform mat4 gLightWVP; uniform mat4 gWorld; out vec4 LightSpacePos; out vec2 TexCoord0; out vec3 Normal0; out vec3 WorldPos0; void main() { ...... //这里就是转换到以光源为摄像机角度的透视投影后的坐标信息 LightSpacePos = gLightWVP * vec4(Position, 1.0); ...... }

2. 然后通过把光源角度下投影的位置信息转换到NDC space(设备坐标系，光栅化后xyz都映射到[-1,1])，这时就得到了顶点在光源角度下NDC的坐标信息。

   1 2 3 4 5 6 7

   //lighting.fs float CalcShadowFactor(vec4 LightSpacePos) { //通过除以w我们可以得到NDC space的信息 vec3 ProjCoords = LightSpacePos.xyz / LightSpacePos.w; ...... }

3. 最后通过转换纹理坐标映射到[0,1]去查询Depth texture中的深度信息和自身的z深度信息作比较，如果depth texture中值更小说明改点处于被遮挡区域应该是阴影部分。

   1 2 3 4 5 6 7 8 9 10 11 12 13

   float CalcShadowFactor(vec4 LightSpacePos) { ...... vec2 UVCoords; UVCoords.x = 0.5 * ProjCoords.x + 0.5; UVCoords.y = 0.5 * ProjCoords.y + 0.5; float z = 0.5 * ProjCoords.z + 0.5; float Depth = texture(gShadowMap, UVCoords).x; if (Depth < z + 0.00001) return 0.5; else return 1.0 }

因为原本x，y，z在NDC space下是[-1,1]，为了映射到[0,1]，我们只需要按上述方法即可。
这样一来就得到NDC space下的纹理坐标信息和深度z信息，然后通过查询depth texture获取光源角度的深度信息和现有顶点在光源角度的深度信息做比较得出是否处于阴影的结论。

这里实现相当复杂就没有自己再去写一遍，具体参考Tutorial 24的源代码。
最终效果：

Skybox

A skybox is a method of creating backgrounds to make a computer and video games level look bigger than it really is. When a skybox is used, the level is enclosed in a cuboid. (From wiki)

在OpenGL中实现Skybox是通过Cubemap。

In order to sample from the cubemap we will use a 3D texture coordinate instead of the 2D coordinate

Skydome — A skybox which uses a sphere is sometimes called a skydome.

实现skybox主要有下列几点需要注意：

1. 生成Cubemap texture,分别指定6个对应skybox的六个面类型的纹理数据

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

   static const GLenum types[6] = { GL_TEXTURE_CUBE_MAP_POSITIVE_X, GL_TEXTURE_CUBE_MAP_NEGATIVE_X, GL_TEXTURE_CUBE_MAP_POSITIVE_Y, GL_TEXTURE_CUBE_MAP_NEGATIVE_Y, GL_TEXTURE_CUBE_MAP_POSITIVE_Z, GL_TEXTURE_CUBE_MAP_NEGATIVE_Z }; bool CubemapTexture::Load() { //生成cubemap texture glGenTextures(1, &m_textureObj); glBindTexture(GL_TEXTURE_CUBE_MAP, m_textureObj); ...... //指定对应skybox六个面类型的纹理数据 glTexImage2D(types[i], 0, GL_RGB, pImage->columns(), pImage->rows(), 0, GL_RGBA, GL_UNSIGNED_BYTE, blob.data()); ...... }

2. 渲染skybox的时候，需要把glCullFace和glDepthFunc设置成GL_FRONT和GL_LEQUAL（因为camera是放在skybox sphere内部的，而sphere的triangle是front face, 所以针对skybox sphere我们需要cull的是front而非back。为了使得skybox永远不会被clip掉，我们需要修改默认的glDepthFunc到GL_LEQUAL来确保在Z = 1的far平面也不会被clip。）

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

   void SkyBox::Render() { m_pSkyboxTechnique->Enable(); GLint OldCullFaceMode; glGetIntegerv(GL_CULL_FACE_MODE, &OldCullFaceMode); GLint OldDepthFuncMode; glGetIntegerv(GL_DEPTH_FUNC, &OldDepthFuncMode); //确保skybox sphere不被clip掉并且显示出正确的一面 glCullFace(GL_FRONT); glDepthFunc(GL_LEQUAL); ....... m_pMesh->Render(); glCullFace(OldCullFaceMode); glDepthFunc(OldDepthFuncMode); }

3. 确保skybox深度检测时值永远在Z = 1的far平面（这样一来确保skybox深度检测永远失败，因为我们吧glDepthFunc设置成了GL_LEQUAL）

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   skybox.vs #version 330 layout (location = 0) in vec3 Position; uniform mat4 gWVP; out vec3 TexCoord0; void main() { vec4 WVP_Pos = gWVP * vec4(Position, 1.0); //通过把gl_Position的z设置成w，在光栅化进入fragment shader之前，skybox的z值会永远映射到1(即远平面)，确保skybox深度检测永远fail但永远不被clip（因为我们吧glDepthFunc设置成了GL_LEQUAL） gl_Position = WVP_Pos.xyww; TexCoord0 = Position; }

4. 把object space的3D坐标当做3D texture坐标的索引值去查询纹理信息

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

   skybox.vs #version 330 layout (location = 0) in vec3 Position; uniform mat4 gWVP; out vec3 TexCoord0; void main() { ...... //因为cubemap这里默认cube和sphere都是以自身中心作为基准（个人认为这里的基准是可变的（建模工具可设定）），这样一来把object space的坐标信息通过光栅化后传递到fs中就可以作为texture coordinate来查询纹理信息 TexCoord0 = Position; } skybox.fs #version 330 in vec3 TexCoord0; out vec4 FragColor; uniform samplerCube gCubemapTexture; void main() { //这里的TexCoord0是经过光栅化后映射到了[-1,1] FragColor = texture(gCubemapTexture, TexCoord0); }

Note:
“An interesting performance tip is to always render the skybox last (after all the other models). The reason is that we know that it will always be behind the other objects in the scene.”

Normal Mapping

在了解Normal Mapping之前不得不提Bump Mapping
下列关于Bump Mapping大部分内容来源:
OpenGL 法线贴图 切线空间 整理
Bump mapping
关于法线贴图, 法线, 副法线, 切线 的东东,看了很容易理解

What is Bump Mapping?
Bump mapping[1] is a technique in computer graphics for simulating bumps and wrinkles on the surface of an object. This is achieved by perturbing the surface normals of the object and using the perturbed normal during lighting calculations.

可以看出Bump Mapping是通过改变物体顶点法线来影响光照的效果，最终看起来有凹凸的效果（而非顶点之间真实的深度差），是一种欺骗眼睛的技术。

“Jim Blinn在1978发表了一篇名为：“Simulation of Wrinkled Surfaces”，提出了Bump Mapping这个东东。Bump Mapping通过一张Height Map记录各象素点的高度信息，有了高度信息，就可以计算HeightMap中当前象素与周围象素的高度差，这个高度差就代表了各象素的坡度，用这个坡度信息去绕动法向量，得到最终法向量，用于光照计算。坡度越陡，绕动就越大。”

Why Bump Mapping?
“如果要在几何体表面表现出凹凸不平的细节，那么在建模的时候就会需要很多的三角面，如果用这样的模型去实时渲染，出来的效果是非常好，只是性能上很有可能无法忍受。Bump Mapping不需要增加额外的几何信息,就可以达到增强被渲染物体的表面细节的效果，可以大大地提高渲染速度，因此得到了广泛的应用。”

What is Normal Mapping?
“Normal Mapping也叫做Dot3 Bump Mapping,它也是Bump Mapping的一种，区别在于Normal Mapping技术直接把Normal存到一张NormalMap里面，从NormalMap里面采回来的值就是Normal，不需要像HeightMap那样再经过额外的计算。”

“值得注意的是，NormalMap存的Normal是基于切线空间的，因此要进行光照计算时，需要把Normal,Light Direction,View direction统一到同一坐标空间中。”

这里不得不提的一个点就是切线空间(tangent space)
What is tangent space?
“ Tangent Space与World Space，View Space其实是同样的概念，均代表三维坐标系。在这个坐标系中，X轴对应纹理坐标的U方向，沿着该轴纹理坐标U线性增大。Y轴对应纹理坐标的V方向，沿着该轴纹理坐标V线性增大。Z轴则是UXV，垂直于纹理平面。”

Why do we need tangent space?
“为什么normal map里面存的法线信息是基于tangent sapce而不是基于local space呢?基于local space理论上也是可以的，但是这样的normal map只能用于一个模型，不同把这个normal map用于其他模型。比如说建模了一个人，并且生成了该模型基于local space的normal map， 如果我们建模同一个人，但是放的位置和角度和之前的不一样，那么之前的normal map就不能用了，因为local Space并不一样，但如果我们normal map里存的是tangent space的normal的话，就不存在这个问题，因为只要模型一样，模型上每个点的tangent space就是一样的，所谓以不变应万变。”

可以看出tangent space是针对顶点而言的。

How to get tangent space?
让我们看一下下图：

以下推导来源于:
Tutorial 26:Normal Mapping


从上面而已看出通过三角形的顶点和纹理信息可以算出T和B

Note:
在实际开发中我们并非一定要手动写代码运算，比如”Open Asset Import Library就支持flag called ‘aiProcess_CalcTangentSpace’ which does exactly that and calculates the tangent vectors for us”

Normal Map也通过工具可以生成，比如3D Max， Maya， 教程里用的GNU Image Manipulation Program (GIMP)…….

当我们通过Normap Map获取得到normal值时，因为该normal值时位于tangent space下，所以我们必须对其进行坐标系转换，必须转换到world space后才参与光照计算。

而这个变换到世界坐标系的矩阵，可以通过tangent这个向量和顶点法线信息推导出来。

1. 加载mesh时生成tangent数据，渲染时指定tangent数据位置

   1 2 3 4 5 6 7 8 9 10 11 12

   bool Mesh::LoadMesh(const std::string& Filename) { ...... Assimp::Importer Importer; //aiProcess_CalcTangentSpace指定生成tangent数据 const aiScene* pScene = Importer.ReadFile(Filename.c_str(), aiProcess_Triangulate | aiProcess_GenSmoothNormals | aiProcess_FlipUVs | aiProcess_CalcTangentSpace); ...... }

1
2
3
4
5
6
7
8

void Mesh::Render()
{
	......
    //指定tangent数据读取方式
    glVertexAttribPointer(3, 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)32); // tangent
     
    ......
}

1. 将tangent和顶点法线转换到世界坐标系

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

   layout (location = 0) in vec3 Position; layout (location = 1) in vec2 TexCoord; layout (location = 2) in vec3 Normal; layout (location = 3) in vec3 Tangent; uniform mat4 gWVP; uniform mat4 gLightWVP; uniform mat4 gWorld; out vec4 LightSpacePos; out vec2 TexCoord0; out vec3 Normal0; out vec3 WorldPos0; out vec3 Tangent0; void main() { ...... //将tangent和顶点法线转换到世界坐标系 Normal0 = (gWorld * vec4(Normal, 0.0)).xyz; Tangent0 = (gWorld * vec4(Tangent, 0.0)).xyz; ...... }

2. 通过转换到世界坐标系的tangent和normal计算出bitangent（转换到世界坐标系后的B）（下面T代表tangent， N代表normal， B代表bitangent）

3. 逆算出tangent space下normal map里的顶点法线值

4. 通过算出的位于世界坐标系的TBN去转换tangent space下逆算后的normal map的顶点法线值，最终得到位于世界坐标的顶点法线

5. 算出位于世界坐标系的顶点法线后，最后正常参与diffuse光照计算即可

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

   (lighting.fs:132) vec3 CalcBumpedNormal() { vec3 Normal = normalize(Normal0); vec3 Tangent = normalize(Tangent0); //得到位于TN平面且垂直于N的向量 Tangent = normalize(Tangent - dot(Tangent, Normal) * Normal); //通过叉乘得出垂直于T和N的B vec3 Bitangent = cross(Tangent, Normal); vec3 BumpMapNormal = texture(gNormalMap, TexCoord0).xyz; //这里需要注意一点： //"我们在描述色彩的时候，RGB三个通道的取值范围都是从零开始的。可是当我们尝试把一个任意的法线保存在一张纹理中的时候，会面临取负值的问题。因此我们要把法线做压缩。方法很简单，把XYZ每个轴上的法线投影长度进行N＋1/2的运算。这样就把所有的法线压缩到了0和1的范围里。" //所以这里通过列方法算回原有的顶点法线值 BumpMapNormal = 2.0 * BumpMapNormal - vec3(1.0, 1.0, 1.0); vec3 NewNormal; //由于位于世界坐标系的T,N,B都算出来了，所以可以构建一个TBN的矩阵去把normal map里的法线值转换到世界坐标系 mat3 TBN = mat3(Tangent, Bitangent, Normal); NewNormal = TBN * BumpMapNormal; //最后归一化算出来的顶点法线既得到了我们需要的位于世界坐标系的顶点法线，最后正常参与diffuse光照计算即可 NewNormal = normalize(NewNormal); return NewNormal; }

让我们看看Normal Map Texture

See Normal Mapping(left) and Regular Mapping(right)

Note:
A common use of this(normal mapping) technique is to greatly enhance the appearance and details of a low polygon model by generating a normal map from a high polygon model or height map.

高模normal map用于低模模型上，即不增加渲染负担又能增加渲染细节。

More：
下面内容来源
Parallax Mapping
当使用Normal Mapping技术时，并没有把视线方向考滤进去。在真实世界中，如果物体表面高低不平，当视线方向不同时，看到的效果也不相同。Parallax Mapping就是为了解决此问题而提出的。

Parallax Mapping首先在一篇名为“Detailed Shape Representation with Parallax Mapping”的文章中提出。它的基本思想如下图示（本图来自Parallax Mapping with Offset Limiting: A PerPixel Approximation of Uneven Surfaces）。在图示的视线方向，如果表面是真正的凹凸不平的，如real surfacer所示，那么能看到的是B点，因此用于采样法线的正确纹理坐是TB而不是TA。

因此，我们需要对纹理坐标作偏移，为了满足实时渲染的要求，采用了取近似偏移的方法（如下图示），这种近似的算法已经可以达到比较好的效果。具体的offset计算可以参考：“Parallax Mapping with Offset Limiting: A PerPixel Approximation of Uneven Surface”，里面有详细的讲解。

Parallax Occlusion Mapping
Parallax Occlusion Mapping是对Parallax Mapping的改进，DirectX SDK中有个Sample专门讲这个，相关细节可以参看此Sample. Parallax Occlusion Mapping中实现了Self Shadow，还计算了比较精确的offset，复杂度比Parallax Mapping大，但是实现效果更好。

BillBoard And Geometry Shader

Geometry shader(Optional)
“The geometry shader sits logically right before primitive assembly and fragment shading.”

Receives as its input complete primitives as a collection of vertices, and these inputs are represented as array (Geometry shader接收完整图形的顶点集合，这些顶点集合在geometry shader中通过gl_in[]数组的方式访问)

gl_in的声明：

1
2
3
4
5

in gl_PerVertex {
vec4 gl_Position;
float gl_PointSize;
float gl_ClipDistance[];
}gl_in[];

Geometry Features:

1. Producing Primitives
   They can have a different primitive type for their output than they do for their input. (EG: wireframe rendering, billboards and even interesting instancing effects)(Billboard效果见后面)

2. Culling Geometry
   Selective culling （geometry shader通过对特定的gl_PrimitiveIDIn进行生成特定的primitive实现selective culling）
   “gl_PrimitiveIDIn is a geometry language input variable that holds the number of primitives processed by the shader since the current set of rendering primitives was started.”

3. Geometry Amplification
   Produces more primitives on its output than it accepts on its input
   (can be used to implement fur shells or moderate tessellation — 因为可以对传入的primitive数据进行处理并生成多个primitive，所以能通过复制并改变primitive的信息数据来实现毛发等效果)
   Gl_MaxGeometryOutputVertices & glGetIntegerv(GL_MAX_GEOMETRY_OUTPUT_VERTICES)
   毛发效果(来源OpenGL红宝书第八版)：
   

4. Geometry Shader Instance
   Only runs the geometry shader and subsequent stages (rasterization) multiple times, rather than the whole pipeline (Geometry shader instancing draw call是通过运行多次geometry和rasterization和fragment来实现的)
   Geometry shader instancing is enabled in the shader by specifying the invocations layout qualifier

   1 2	//gl_InvocationID identifies the invocation number assigned to the geometry shader invocation. layout (triangles, invocations = 4) in; //invocations = 4 indicates that the geometry shader will be called 4 times for each input primitives

5. Multiple Viewport Rendering
   gl_ViewportIndex (output variables available in the geometry shader that can redirect rendering into different regions of the framebuffer)
   gl_ViewportIndex is used to specify which set of viewport parameters will be used to perform the viewport transformation by OpenGL
   “ (Multiple viewport concept （多个视图窗口） — 这里主要是通过gl_ViewportIndex访问多个viewport，然后在geometry shader中通过指定primitive输出到特定的viewport来实现多个视图窗口)
   glViewportIndexedf() or glViewportIndexedfv() – specify how window x and y coordinates are generated from clip coordinates
   glDepthRangeIndexed() – specify how the window z coordinate is generated
   效果展示(这里展示的OpenGL红宝书第八版的例子)：
   

6. Layer Rendering
   It is also possible to use a 2D array texture as a color attachment and render into the slices of the array using a geometry shader (传入2D的纹理数组数据当做color attachment，通过geometry shader把传入的2D纹理数组信息去渲染多个slices)
   A restriction exits when using layered attachments to framebuffer: (使用layered attachment到framebuffer的规则):
   All the attachments of that framebuffer must be layered (framebuffer的所有attachment都必须是layered)
   Also, all attachments of a layered framebuffer must be of the same type (所有attach到layered framebuffer的attachment必须是同样类型)
   gl_Layer – built in variable in geometry shader – that is used to specify the zero-based index of the layer into which rendering will be directed
   可实现的效果好比:
   Cube-Map
   添加cube_map texture为color attachment到framebuffer中
   cube-map texture(2D texture)这里会被划分成六个layer的array texture
   通过instanced geometry shader生成六个faces（对应六个layer），通过gl_InvocationID和gl_Layer访问六个faces并做相应的projection matrices运算实现Cube_Map Face的效果

7. Advanced Transform Feedback
   这里首先要了解下什么是Transform Feeback？
   Transform feedback can be considered a stage of the OpenGL pipeline that sits after all of the vertex-processing stages and directly before primitive assembly and rasterization. Transform feedback captures vertices as they are assembled into primitives and allow some or all of their attributes to be recorded into buffer objects. (Transform feedback发生在所有顶点运算阶段之后（所以如果geometry shader打开了，transform feedback就发生在geometry shader之后，相反是在vertex shader之后），在primitive assembly和光栅化之前。Transform feedback可以保存顶点的一些属性信息用于下一次的运算。)

Why do we need transform feedback?
“DirectX10 introduced a new feature known as Stream Output that is very useful for implementing particle systems. OpenGL followed in version 3.0 with the same feature and named it Transform Feedback. The idea behind this feature is that we can connect a special type of buffer (called Transform Feedback Buffer right after the GS (or the VS if the GS is absent) and send our transformed primitives to it. In addition, we can decide whether the primitives will also continue on their regular route to the rasterizer. The same buffer can be connected as a vertex buffer in the next draw and provide the vertices that were output in the previous draw as input into the next draw. This loop enables the two steps above to take place entirely on the GPU with no application involvement (other than connecting the proper buffers for each draw and setting up some state).”

从上面可以看出，transform feedback可以帮助我们在构建primitive之前保存顶点相关的一些信息参与到下一次draw的运算且不用参与到Clipping，rasterizer和FS。最重要的是所有这一切都发生在GPU上，不需要从GPU上copy数据到CPU上做运算。

大致情况如下图：

了解一些相关概念：
Transform Feedback Objects:
“The state required to represent transform feedback is encapsulated into a
transform feedback object.”(transform feedback objects主要是存储跟transform feedback相关的一些状态。比如：哪一个buffer绑定到了transform feedback buffer的binding point)

Transform Feedback Buffer:
vertex shader或geometry shader中获取来的信息，这里的TFB是指通过glBindBufferBase之类方法后被绑定到Tansform Feedback Objects上的buffer

glBindBufferBase调用的时候需要指定index作为binding point，如果我们想要把Transform Feedback Buffer的数据存储在多个buffer的时候我们可以把多个buffer绑定到不同的binding point上，然后通过glTransformFeedbackVaryings传入的参数格式决定我们生成的数据是如何写入到各个buffer里的。

具体的glTransformFeedbackVaryings如何配置决定数据是如何写入到各个buffer的参见OpenGL红宝书Configuring Transform Feedback Varyings

因为粒子效果用到了Billboard来展示，所以在了解Particle System之前，我们先来看看Billboard是如何通过GS实现的：
Billboard - “A billboard is a quad which always faces the camera. “

1. Before a geometry shader may be linked, the input primitive type, output primitive type, and the maximum number of vertices that is might produce must be specified (在链接geometry shader之前，我们必须先定义geometry shader的输入输出类型)

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   version 330 //指明GS中传入的数据是以点为单位 layout(points) in; //指明GS将输出的primitive是triangle_strip layout(triangle_strip) out; //指明GS生成的最大顶点数量是4，因为这里我们只需4个顶点组成一个quad即可 layout(max_vertices = 4) out; ...... void main() { ...... } //e.g: //layout (input primitive type) in; //layout (output primitive type, max_vertices = number) out; (这里的max_//vertices会遇到一个硬件限制所支持的max_vertices的最大值--超出最大值后program //link会出错，通过在program link后调用glGetProgramiv() with GL_INFO_LOG_LENGTH //parameter可以得program link的出错信息，shader compile的log同理)

2. 利用传递进来的顶点primitive数据生成新的面向camera的primitive数据

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

   #version 330 layout(points) in; layout(triangle_strip) out; layout(max_vertices = 4) out; uniform mat4 gVP; uniform vec3 gCameraPos; out vec2 TexCoord; void main() { //通过gl_in我们可以在GS中访问传入的primitive的顶点数据，这里因为我们指定了传入的layout(points) in，所以这里只需访问gl_in[0]即可 //通过计算出面向camera时quad所在的物体坐标系信息，我们在这基础上对顶点数据做偏移，这样算出来的顶点数据生成的primitive始终面向Camera vec3 Pos = gl_in[0].gl_Position.xyz; vec3 toCamera = normalize(gCameraPos - Pos); vec3 up = vec3(0.0, 1.0, 0.0); vec3 right = cross(toCamera, up); Pos -= (right * 0.5); //这里之所以只传gVP而非gMVP是因为我们在创建顶点数据的时候就是传递的世界坐标信息 gl_Position = gVP * vec4(Pos, 1.0); TexCoord = vec2(0.0, 0.0); EmitVertex(); Pos.y += 1.0; gl_Position = gVP * vec4(Pos, 1.0); TexCoord = vec2(0.0, 1.0); //通过调用EmitVertex指定利用上面的数据生成新的vertex加入到最终的primitive构造中 EmitVertex(); Pos.y -= 1.0; Pos += right; gl_Position = gVP * vec4(Pos, 1.0); TexCoord = vec2(1.0, 0.0); EmitVertex(); Pos.y += 1.0; gl_Position = gVP * vec4(Pos, 1.0); TexCoord = vec2(1.0, 1.0); EmitVertex(); //通过调用EndPrimitive指定前面生成的顶点数据作为一个新的primitive EndPrimitive(); } void BillboardList::CreatePositionBuffer() { Vector3f Positions[NUM_ROWS * NUM_COLUMNS]; //创建顶点数据的时候即传递的世界坐标 for (unsigned int j = 0 ; j < NUM_ROWS ; j++) { for (unsigned int i = 0 ; i < NUM_COLUMNS ; i++) { Vector3f Pos((float)i, 0.0f, (float)j); Positions[j * NUM_COLUMNS + i] = Pos; } } ...... }

   EmitVertex() - produces a new vertex at the output of the geometry shader. Each time it is called, a vertex is appended to the end of the current strip (将新的vertex加入到primitive的队列)
   EndPrimitive() - breaks the current strip and signals OpenGL that a new strip should be started the next time EmitVertex() is called (将之前所加入的vertex算作一个primitive的信息，通知OpenGL开始下一个primitive的构造)
   Note:
   When the geometry shader exits, the current primitive is ended implicitly (如果geometry shader结束了，那么当前还没有调用EndPrimitive()的primitive将视作结束)
   When EndPrimitive() is called, any incomplete primitives will simply be discarded (当EndPrimitive()被调用的时候，数据不完全的primitive将被抛弃 — 不调用这个方法的primitive相当于culling掉)

3. 在FS中利用GS中生成的纹理坐标映射纹理信息并Cull掉纹理图片中黑色的部分

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   #version 330 uniform sampler2D gColorMap; in vec2 TexCoord; out vec4 FragColor; void main() { FragColor = texture2D(gColorMap, TexCoord); //Cull掉纹理图片中黑色的部分 if (FragColor.r == 0 && FragColor.g == 0 && FragColor.b == 0) { discard; } }