OpenGL超级宝典（第7版）笔记13 前三章实例下个五子棋（上）

本文链接：https://blog.csdn.net/qq_44016525/article/details/114532039

这篇博客详细介绍了如何利用OpenGL的前三章知识，结合C++构建一个五子棋游戏的初步框架。内容涵盖数据结构设计、着色器的编译与链接、棋盘和棋子的绘制，以及程序流程。作者通过细分着色器和几何着色器实现了棋盘的绘制，并探讨了绘制棋子的方法。博客结尾预告了如何处理输入、修改数据和判断输赢将在下篇中讲解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

OpenGL超级宝典（第7版）笔记13 前三章实例下个五子棋（上）

前言

上一篇我们对前三章做了一个知识的梳理（知识图），还提了一下OpenGL扩展的相关内容。

这一篇是对前三章内容的综合应用，其中涉及了很多着色器的细节，会非常精彩，但可能篇幅会比较长，我们会尽量用更多之前学习的知识（有时候是不得已，有时候是更加方便快速）

1 初构建

首先我们要大体把程序的框架定出来，然后再去讨论细枝末节的具体内容。本身五子棋是个小游戏，其并不包含很多的部分，就是一个棋盘，然后两边下棋（同一个电脑操作）最终有人赢了之后重新开始，没有什么其他的模式，所以不需要很复杂的设计。其主要就是四大部分：输入，判断，绘制，数据。流程如下：
在这里插入图片描述
然后是具体的构建四部分内容，我比较喜欢先构建数据，因为程序总是在围绕这数据的修改来运行，所以先敲定数据的结构在对其他的部分进行构建比较好。

2 构建数据结构

首先我们肯定是要观察一下其余部分对数据结构的要求：

首先对输入模块要求我们有一个专门的变量来记录当前的棋子类型（是白子还是黑子）

判断模块需要我们进行是否五子连珠的判断，我们要针对棋盘来设计一个数据结构，要求既能保存棋子的布局，又能方便连珠的判断，这里我们决定用二维数组来解决（一维数组的缺点是在判断斜向的五子连珠时有点麻烦），用二维数组代表棋盘中的每个格子，无棋子为0，有黑子为1，有白子为2。除此以外还需要一个变量来记录当前是否有人获胜。

绘制模块需要我们分别绘制棋盘和棋子，棋盘我们可以用细分的方式来生成（用上了细分着色器、几何着色器），而棋子我们打算用点绘制来生成（将点的大小调大，作为棋子），这就要求我们有两个着色器程序（其实一个也可以但是我们还是想尝试一下新东西）。数据方面我们打算把棋盘的顶点数据直接写入顶点着色器中（用上了gl_VertexID），而棋子的位置我们用顶点属性来传入（用上了顶点属性），如果把上面的棋盘中每个格子都测试一遍就太慢了，尤其是刚开始的时候棋子的数量并不多，所以我们单独弄一个数组来安装顺序存放下的棋子（还可以通过它实现悔棋的功能），同时添加一个记录当前一共下了多少个棋子的变量。

综上暂时需要有：
记录棋子种类的变量
记录是否有人获胜的变量
记录棋盘中棋子情况的二维数组
记录下子顺序的数组（同时实现绘制）
记录一共下了多少子的变量

struct chess{
   
   
	GLchar chesskind=0;
};
chess chessboard[17][17];//二维数组表示棋盘中棋子情况，用于判断五子连珠
GLchar chess_draw_list[17*17][3]={
   
   0}; 
//下子顺序的数组，[0]表示种类[1]表示x[2]表示y，用于绘制
//不要用chessboard来绘制，因为每次绘制都要遍历每个格子，
//		刚开始的时候可能只有一两个格子有棋子
//		而chess_draw_list只需要依次绘制，
//		直到所有棋子绘制完成就行了，减少了判断的次数
GLint chess_number=0;//一共下的棋子数
GLint nowkind = 1;//黑为1白为2
int iswin = 0;//是否有人赢了

3 绘制

3.1 绘制准备

虽然绘制应该位于流程的后半段，但是如果我们不能绘制出棋盘，那么我们的输出就不能确定如何转化为对应的格子位置。而且当前最大的难点还是opengl绘制一块的。

由于这回我们要创建两个着色器程序，一个用于绘制棋盘（将用到细分着色器，几何着色器），另一个用于绘制棋子（就是点的绘制，只用顶点着色器和片段着色器），所以我们要稍微整理一下之前的函数，因为之前的函数只是绘制单一的着色器程序，现在我们可能需要各种各样的着色器，而且着色器可能还会有复用，所以我们把着色器的编译，和着色器程序的链接分成两个函数来进行封装。

因为有很多的着色器，所以我们把着色器对象放到全局变量中：

GLuint vs[3]={
   
   0};
GLuint tcs[3]={
   
   0};
GLuint tes[3]={
   
   0};
GLuint gs[3]={
   
   0};
GLuint fs[3]={
   
   0};
//着色器，我们准备了3个位置，可以放3个同种的着色器
GLuint rendering_program1;
GLuint rendering_program2;
//着色器程序，一共两个
GLuint vertex_array_object;
//当然这里还包含了顶点数组

然后我们要建立着色器的编译函数：

void compile_shader(void) {
   
   

#pragma region 编辑着色器内容
	static const GLchar* vertex_shader_source[] = {
   
   //着色器内容
	};
	static const GLchar* vertex_shader_source2[] = {
   
   //着色器内容
	};
	static const GLchar* fragment_shader_source2[] = {
   
   //着色器内容
	};
#pragma endregion


#pragma region 编译各种着色器并检查情况
	GLint shader_success;
	GLchar infoLog[512];//定义一个整型变量来表示是否成功编译，还定义了一个储存错误消息（如果有的话）的容器。
	
	vs[0] = glCreateShader(GL_VERTEX_SHADER);
	glShaderSource(vs[0], 1, vertex_shader_source, NULL);
	glCompileShader(vs[0]);
	glGetShaderiv(vs[0], GL_COMPILE_STATUS, &shader_success);//检查编译是否成功
	if (!shader_success)
	{
   
   
	    glGetShaderInfoLog(vs[0], 512, NULL, infoLog);
	    std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << std::endl;
	}
	
	vs[1] = glCreateShader(GL_VERTEX_SHADER);
	glShaderSource(vs[1], 1, vertex_shader_source2, NULL);
	glCompileShader(vs[1]);
	glGetShaderiv(vs[1], GL_COMPILE_STATUS, &shader_success);//检查编译是否成功
	if (!shader_success)
	{
   
   
	    glGetShaderInfoLog(vs[1], 512, NULL, infoLog);
	    std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << std::endl;
	}

	fs[0] = glCreateShader(GL_FRAGMENT_SHADER);
	glShaderSource(fs[0], 1, fragment_shader_source