OpenGL-5 WebGL与WASM
Dionysen

工作需要,使用wasm技术将OpenGL程序编译成可在网页显示的程序。

先上代码:

#include <functional>

#include <SDL.h>
#include <emscripten.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() {

// Create window and renderer (context)
SDL_Window *window;
SDL_Renderer *renderer;
SDL_CreateWindowAndRenderer(640, 480, 0, &window, &renderer);

// Set attributes
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);

// vertex data
float vertices[] = {0.0f, 0.5f, 0.5f, -0.5f, -0.5f, -0.5f};

// Create a Vertex Buffer Object and copy the vertex data to it
unsigned int vbo, vao;
glGenBuffers(1, &vbo);
glGenVertexArraysOES(1, &vao);

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

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

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

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

// Specify the layout of the vertex data
unsigned int posAttrib = glGetAttribLocation(shaderProgram, "position");

glBindVertexArrayOES(vao);

glVertexAttribPointer(posAttrib, 2, GL_FLOAT, GL_FALSE, 0, 0);
glEnableVertexAttribArray(posAttrib);

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
python -m http.server 8080

image

显示评论