OpenGL+WebGL——绘制矩形

编写C++程序main.cpp，该程序在上一篇文章绘制三角形的基础上进行修改

#include <functional>

#include <emscripten.h>
#include <SDL.h>

#define GL_GLEXT_PROTOTYPES 1
#include <SDL_opengles2.h>

// Shader sources
const GLchar* vertexSource =
"attribute vec4 position;                     \n"
"void main()                                  \n"
"{                                            \n"
"  gl_Position = vec4(position.xyz, 1.0);     \n"
"}                                            \n";
const GLchar* fragmentSource =
"precision mediump float;\n"
"void main()                                  \n"
"{                                            \n"
"  gl_FragColor[0] = gl_FragCoord.x/640.0;    \n"
"  gl_FragColor[1] = gl_FragCoord.y/480.0;    \n"
"  gl_FragColor[2] = 0.5;                     \n"
"}                                            \n";

// an example of something we will control from the javascript side
bool background_is_black = true;

// the function called by the javascript code
extern "C" void EMSCRIPTEN_KEEPALIVE toggle_background_color() { background_is_black = !background_is_black; }

std::function<void()> loop;
void main_loop() { loop(); }

int main()
{
	SDL_Window *window;
	SDL_CreateWindowAndRenderer(640, 480, 0, &window, nullptr);

	SDL_GL_SetAttribute(SDL_GL_CONTEXT_MAJOR_VERSION, 2);
	SDL_GL_SetAttribute(SDL_GL_CONTEXT_MINOR_VERSION, 0);
	SDL_GL_SetAttribute(SDL_GL_DOUBLEBUFFER, 1);
	SDL_GL_SetAttribute(SDL_GL_DEPTH_SIZE, 24);

	// Create a Vertex Buffer Object and copy the vertex data to it
	GLuint vbo;
	glGenBuffers(1, &vbo);
	//GLfloat vertices[] = { -0.5f, 0.5f, 0.5f, -0.5f, -0.5f, -0.5f, -0.5f, 0.5f, 0.5f, 0.5f,0.5f, -0.5f};
	//GLfloat vertices[] = { -0.5f, 0.5f, 0.5f, 0.5f, 0.5f, -0.5f, -0.5f, -0.5f };
	GLfloat vertices[] = {	0.5,  0.5,   // top right
							0.5, -0.5,   // bottom right
							-0.5, -0.5,   // bottom left
							-0.5,  0.5,// top left
							0.5, 0.5,// top right
	};

	glBindBuffer(GL_ARRAY_BUFFER, vbo);
	glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

	// Create and compile the vertex shader
	GLuint vertexShader = glCreateShader(GL_VERTEX_SHADER);
	glShaderSource(vertexShader, 1, &vertexSource, nullptr);
	glCompileShader(vertexShader);

	// Create and compile the fragment shader
	GLuint fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
	glShaderSource(fragmentShader, 1, &fragmentSource, nullptr);
	glCompileShader(fragmentShader);

	// Link the vertex and fragment shader into a shader program
	GLuint shaderProgram = glCreateProgram();
	glAttachShader(shaderProgram, vertexShader);
	glAttachShader(shaderProgram, fragmentShader);
	glLinkProgram(shaderProgram);
	glUseProgram(shaderProgram);

	// Specify the layout of the vertex data
	GLint posAttrib = glGetAttribLocation(shaderProgram, "position");
	glEnableVertexAttribArray(posAttrib);
	glVertexAttribPointer(posAttrib, 2, GL_FLOAT, GL_FALSE, 0, 0);



	// Draw a triangle from the 4 vertices
	glDrawArrays(GL_TRIANGLE_STRIP, 0, 5);
	//glDrawElements(GL_TRIANGLES, 6, GL_FLOAT, 0);

	SDL_GL_SwapWindow(window);


	emscripten_set_main_loop(main_loop, 0, true);

	return EXIT_SUCCESS;
}

这里总结一下glDrawArray()函数的用法：

GL_POINTS	单独的将顶点画出来
GL_LINES	单独地将直线画出来。行为和 GL_TRIANGLES 类似
GL_LINE_STRIP	连贯地将直线画出来。行为和 GL_TRIANGLE_STRIP 类似
GL_LINE_LOOP	连贯地将直线画出来。行为和 GL_LINE_STRIP 类似，但是会自动将最后一个顶点和第一个顶点通过直线连接起来
GL_TRIANGLES	这个参数意味着OpenGL使用三个顶点来组成图形。所以，在开始的三个顶点，将用顶点1，顶点2，顶点3来组成一个三角形。完成后，在用下一组的三个顶点(顶点4，5，6)来组成三角形，直到数组结束
GL_TRIANGLE_STRIP	OpenGL的使用将最开始的两个顶点出发，然后遍历每个顶点，这些顶点将使用前2个顶点一起组成一个三角形。也就是说，P0，P1，P2这三个点组成一个三角形，P1，P2，P3这三个点也组成一个三角形

• 通过命令emcc main.cpp -std=c++11 -s WASM=1 -s USE_SDL=2 -O3 -o index.js来生成index .wasm模块代码与index.js粘合代码。
• 编写index.html代码（和上一篇绘制三角形的代码相同，请参考），在页面端显示C++程序结果
• 通过命令emrun --no_browser --port 8080 index.html启动页面服务，在页面运行程序

运行结果如下：