OpenGL+WebGL——绘制立方体

• 编写C++程序main.cpp，在程序中定义立方体的八个顶点坐标vertex_list数组和顶点序号数组index_list，通过函数glVertex3fv来实现立方体的线条绘制

#include<GL/glut.h>

// 绘制立方体


// 将立方体的八个顶点保存到一个数组里面 

static const float vertex_list[][3] =
{
	-0.5f, -0.5f, -0.5f,
	0.5f, -0.5f, -0.5f,
	-0.5f, 0.5f, -0.5f,
	0.5f, 0.5f, -0.5f,
	-0.5f, -0.5f, 0.5f,
	0.5f, -0.5f, 0.5f,
	-0.5f, 0.5f, 0.5f,
	0.5f, 0.5f, 0.5f,
};

// 将要使用的顶点的序号保存到一个数组里面 

static const GLint index_list[][2] =
{
	{ 0, 1 },
	{ 2, 3 },
	{ 4, 5 },
	{ 6, 7 },
	{ 0, 2 },
	{ 1, 3 },
	{ 4, 6 },
	{ 5, 7 },
	{ 0, 4 },
	{ 1, 5 },
	{ 7, 3 },
	{ 2, 6 }
};

// 绘制立方体

void DrawCube(void)
{
	int i, j;

	glBegin(GL_LINES);
	for (i = 0; i<12; ++i) // 12 条线段

	{
		for (j = 0; j<2; ++j) // 每条线段 2个顶点

		{
			glVertex3fv(vertex_list[index_list[i][j]]);
		}
	}
	glEnd();
}

static float rotate = 0;
static int times = 0;

void renderScene(void)
{
	glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

	glMatrixMode(GL_MODELVIEW);
	glLoadIdentity();
	glPushMatrix();


	times++;
	if (times > 100)
	{
		times = 0;
	}

	if (times % 5 == 0)
	{
		rotate += 1;
	}

	glRotatef(rotate, 0, 1, 0);
	glRotatef(rotate, 1, 0, 0);
	glRotatef(rotate, 0, 0, 1);

	DrawCube();

	glPopMatrix();
	glutSwapBuffers();
}

int main(int argc, char **argv)
{
	glutInit(&argc, argv);
	glutInitDisplayMode(GLUT_DEPTH | GLUT_DOUBLE | GLUT_RGBA);
	glutInitWindowPosition(100, 100);
	glutInitWindowSize(500, 500);
	glutCreateWindow("GLDemo");
	glutDisplayFunc(renderScene);
	glutIdleFunc(renderScene);
	glutMainLoop();
}

• 通过命令emcc main.cpp -s WASM=1 -o index.html进行编译时一直报错（图一），错误提示glColor3f等函数未定义，查阅各种资料，最后emscripten官网上发现解释（图二）：如果使用旧版本的桌面OpenGL API，在链接项目时必须加上-s LEGACY_GL_EMULATION=1

图一 报错信息

图二 解决方案

• 通过命令emrun --no_browser --port 8080 index.html在浏览器上查看绘制的立方体效果图

运行结果如下：