OpenGL+WebGL——绘制三角形

编写C++代码main.cpp实现一个三角形的绘制，该程序中包括创建顶点缓冲区glGenBuffers（） ；创建并编译顶点着色器与片段着色器glCreateShader（）；glCompileShader（）和三角形绘制glDrawArrays（）

#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.0f, 0.5f, 0.5f, -0.5f, -0.5f, -0.5f };

	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);

	loop = [&]
	{
		// move a vertex
		const uint32_t milliseconds_since_start = SDL_GetTicks();
		const uint32_t milliseconds_per_loop = 3000;
		vertices[0] = (milliseconds_since_start % milliseconds_per_loop) / float(milliseconds_per_loop) - 0.5f;
		glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

		// Clear the screen
		if (background_is_black)
			glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
		else
			glClearColor(0.9f, 0.9f, 0.9f, 1.0f);
		glClear(GL_COLOR_BUFFER_BIT);

		// Draw a triangle from the 3 vertices
		glDrawArrays(GL_TRIANGLES, 0, 3);

		SDL_GL_SwapWindow(window);
	};

	emscripten_set_main_loop(main_loop, 0, true);

	return EXIT_SUCCESS;
}

通过命令emcc main.cpp -std=c++11 -s WASM=1 -s USE_SDL=2 -O3 -o index.js来生成index .wasm模块代码与index.js粘合代码。
编写index.html代码，在页面端显示C++程序结果

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

    <!-- Create the canvas that the C++ code will draw into -->
    <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>

    <!-- Allow the C++ to access the canvas element --> 
    <script type='text/javascript'>
        var canv = document.getElementById('canvas');
        var Module = {
            canvas: canv
        };
    </script>
    
    <!-- Call the javascript glue code (index.js) as generated by Emscripten -->
    <script src="index.js"></script>
    
    <!-- Allow the javascript to call C++ functions -->
    <script type='text/javascript'>
        canv.addEventListener('click',    _toggle_background_color, false);
        canv.addEventListener('touchend', _toggle_background_color, false);
    </script>

    <!-- Describe what the user is seeing -->
    <p>Click the canvas to change the background color.</p>
    <hr>
    <p>Minimal example of animating the HTML5 canvas from C++ using OpenGL through WebAssembly.</p>
    <p>Source code: <a href="https://github.com/timhutton/opengl-canvas-wasm">https://github.com/timhutton/opengl-canvas-wasm</a></p>

</body>

</html>

通过命令emrun --no_browser --port 8080 index.html启动页面服务，在页面运行程序。

运行结果如下：

_大太阳_

发布了315 篇原创文章 · 获赞 119 · 访问量 11万+

私信关注

OpenGL+WebGL——绘制三角形

猜你喜欢