OpenGL绘制方式详解

墨蓝 2022-10-05 06:44 375阅读 0赞

# 简述 #

## OpenGL绘制方式 ##

OpenGL可以支持很多不同的图元类型，最基础的为点，线，或三角形。线和三角形可以组合成条带，循环体或者扇面三角形。点，线，或三角形也是大部分图象硬件设备支持的基础图元类型。

### 点绘制 ###

点可以通过单一的顶点来表示，点实际上不存在面积，在OpenGL中它通过屏幕上的一个矩形区域来模拟，在渲染点源的时候，OpenGL会通过光栅化规则类判断点的位置。以点位中心绘制一个四边形区域，四边形区域的边长等于点的大小，它是一个固定的状态，可以调用函数glPointSIze()设置。

void glPointSIze(GLfloat size);
    
    设置固定像素大小，如果没有开启GL_PROGRAM_POINT_SIZE，那么默认用于设置点的大小

OPenGL渲染点的时候，每个点的片元的会执行片元着色器，在本质上都是屏幕上的方形区域，而每个像素都可以使用不同的颜色来着色。OPenGL的片元着色器提供了一种特殊的内置变量来完成，叫gl\_PointCoord,其中包含了当前片元在点区域内的坐标信息，它只能在片元着色器中工作，它的值只对点的渲染游戏

###    线，条带与循环线 ###

OpenGL中的线表示一条线段，一个线可以通过两个顶点来表达，多段线可以使用多个线段链接来表示，首尾闭合的多段线叫循环线，线的宽度可以由glLineWidth()来设置

void glLineWidth(GLfloat width);
    
    width表示线的宽度，默认值位1.0，它必须是一个大于0.0的值，否则会报错

### 三角形，条带和扇面 ###

三角形的方式绘制时每个三角形之间都是互相独立的，如果以三角形的方式绘制一个矩形那么需要绘制两个三角形，提供6个顶点。

条带绘制需要4个顶点，前三个顶点构成第一个三角形，后继的顶点将与之前三角形的后两个顶点一起构成新的三角形。

扇面绘制的时候，第一个顶点会作为一个共享点存在，它作为每一个后继三角形的组成部分，之后的每两个顶点都会与这个共享点组成新的三角形。

## 绘制方式和OpenGL枚举对应关系 ##

<table> 
 <thead> 
 <tr> 
 <th> 图元类型 </th> 
 <th> OpenGL枚举量 </th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td> 点 </td> 
 <td> GL_POINTS </td> 
 </tr> 
 <tr> 
 <td> 线 </td> 
 <td> GL_LINES </td> 
 </tr> 
 <tr> 
 <td> 条带线 </td> 
 <td> GL_LINE_STRIP </td> 
 </tr> 
 <tr> 
 <td> 循环线 </td> 
 <td> GL_LINE_LOOP </td> 
 </tr> 
 <tr> 
 <td> 独立三角形 </td> 
 <td> GL_TRIANGLES </td> 
 </tr> 
 <tr> 
 <td> 三角形条带 </td> 
 <td> GL_TRIANGLE_STRIP </td> 
 </tr> 
 <tr> 
 <td> 三角形扇面 </td> 
 <td> GL_TRIANGLE_FAN </td> 
 </tr> 
 </tbody> 
</table>

# 绘制方式实例 #

先构建一个顶点数组

float points\[\] = \{

\-0.6f, 0.2f, 1.0f, 0.0f, 1.0f,

\-0.6f, -0.2f, 1.0f, 1.0f, 1.0f,

\-0.2f, 0.2f, 0.0f, 0.0f, 1.0f,

\-0.2f, -0.2f, 1.0f, 0.0f, 0.0f,

0.2f, 0.2f, 0.0f, 0.0f, 1.0f,

0.2f, -0.2f, 0.0f, 1.0f, 0.0f,

\};

在空间中的分布位置及顺序

![20171229162114109][]

## 点绘制 ##

设置点的大小

glPointSize(5);

glDrawArrays(GL\_POINTS, 0, 6);

效果

![20171229162135062][]

## 线段绘制 ##

设置线段的宽

glLineWidth(10);

glDrawArrays(GL\_LINES, 0, 6);

效果

![20171229162155018][]

## 多线段绘制 ##

glDrawArrays(GL\_LINES, 0, 6);

效果

![20171229162210027][]

## 循环线绘制 ##

glDrawArrays(GL\_LINE\_LOOP, 0, 6);

效果

![20171229162222001][]

## 独立三角形绘制 ##

一共六个顶点，相当于绘制了两个三角形

glDrawArrays(GL\_TRIANGLES, 0, 6);

效果

![20171229162233143][]

## 三角形条带绘制 ##

绘制了六个三角形，组成了一个矩形

![20171229162259814][]

绘制

glDrawArrays(GL\_TRIANGLE\_STRIP, 0, 6);

效果

![20171229162309220][]

## 三角扇面绘制 ##

以第一个点为共享点，和后续的点组成三角形。

重新构建顶点数组

float points\[\] = \{

0.0f, 0.0f, 1.0f, 0.0f, 0.0f,

0.4f, 0.0f, 0.0f, 1.0f, 0.0f,

0.346f, 0.2f, 0.0f, 0.0f, 1.0f,

0.2f, 0.346f, 0.0f, 0.0f, 1.0f,

0.0f, 0.4f, 1.0f, 0.0f, 1.0f,

\-0.2f, 0.346f, 1.0f, 1.0f, 1.0f,

\};

在空间中的分布位置及顺序

![20171229162324188][]

绘制

glDrawArrays(GL\_TRIANGLE\_FAN, 0, 6);

效果

![20171229162335978][]

# 多边形渲染模式 #

可以将多边形渲染为点集，轮廓线或填充。

可以调用glPolygonMode()函数进行设置

void glPolygonMode(GLenum face, GLenum mode);
    
    参数：face必须设为GL_FRONT_AND_BACK
    
    mode 可以设置为GL_POINT，GL_LINE，GL_FILL，分别对应点集，轮廓线，填充

以上面的扇形为例

## 点集效果 ##

glPolygonMode(GL\_FRONT\_AND\_BACK ,GL\_POINT);

![20171229162407479][]

## 轮廓线效果 ##

glPolygonMode(GL\_FRONT\_AND\_BACK, GL\_LINE);

![20171229162417120][]

## 填充效果 ##

glPolygonMode(GL\_FRONT\_AND\_BACK, GL\_FILL);

![20171229162426473][]

参见：《OpenGL编程指南》第八版第3章

[20171229162114109]: /images/20221005/b41023e1a62241b2a28d7745708dee5d.png
[20171229162135062]: /images/20221005/a782538e34ae4536ba265e567359d364.png
[20171229162155018]: /images/20221005/392e8f67ea724277a6d20918bf4406b3.png
[20171229162210027]: /images/20221005/c6ddd8095f6e46169159a479d2bb702e.png
[20171229162222001]: /images/20221005/d275587f109646bcad47d911a9e1dccf.png
[20171229162233143]: /images/20221005/89522f54b1ed4c18a31d2ba782ffaab3.png
[20171229162259814]: /images/20221005/a46cbea0fdf04bd4ab54d130bdf2c80c.png
[20171229162309220]: /images/20221005/69b03c0698ab4735b677f149a66cb51d.png
[20171229162324188]: /images/20221005/5fb0c94aa9704b368360b208d18a6d2a.png
[20171229162335978]: /images/20221005/9564b45f70f34298a8b2fe7a99ddb16d.png
[20171229162407479]: /images/20221005/7368df7adcfa4e8ba8b15f84f8fea2d2.png
[20171229162417120]: /images/20221005/ebfc1aafcf694a979bc5e5dc4f64a81f.png
[20171229162426473]: /images/20221005/43066ae5a2744e958e7c6a1d5b89742b.png