Emscripten 가지고 놀기 3. (feat. event.c)

이전 글 

Emscripten 가지고 놀기 1. (feat. CodeLite)

Emscripten 가지고 놀기 2. (feat. GLFW, ZLib) 

이제 1편에서 만들었던 예제에 2편의 라이브러리들을 링크 해 보자. 

CodeLight 의 Project Settings 창을 열어 다음과 같이 설정해준다. 

타겟	Linker Options	Libraries
Debug, Release	-framework OpenGL	glfw;z
Web	-s USE_GLFW=3;-s FULL_ES2=1	z

main.cpp 는 다음과 같이 만들어준다. 

#include <GLFW/glfw3.h>

#include <zlib.h>

#include <stdio.h>

int main(int argc, char **argv)

{

    printf("ZLib version: %s\n", zlibVersion());

    

    int major, minor, rev;

    glfwGetVersion(&major, &minor, &rev);

    printf("GLFW version: %d.%d.%d\n", major, minor, rev);

    

    return 0; 

}

실행시킨 결과는 다음과 같다. 

타겟을 Web 으로 바꿔서 빌드한 결과

GLFW의 event.c 는 베이스로 삼기에 참 좋은 예제라고 생각한다. 일부를 발췌해서 아래와 같이 만들어 보자. 

event.c 의 내용과 비교해 신경써야 할 부분은 다음 두가지이다. 

1. 윈도 생성시 OpenGL ES 2.0 을 지정. 

2 루프문 처리에 emscripten_set_main_loop() 함수를 사용. 

이렇게 Emscripten에서 다르게 처리해야 하는 부분은 "#ifdef EMSCRIPTEN" 으로 묶여있으니 참고하자. 

main.cpp

#include <GLFW/glfw3.h>

#include <stdio.h>

#include <stdlib.h>

#include <getopt.h>

#include <zlib.h>

#ifdef EMSCRIPTEN

  #include <emscripten/emscripten.h>

#endif // EMSCRIPTEN

extern unsigned int counter;

GLFWwindow* window = NULL;

extern void error_callback(int error, const char* description);

extern void mouse_button_callback(GLFWwindow* window, int button, int action, int mods);

extern void cursor_position_callback(GLFWwindow* window, double x, double y);

extern void scroll_callback(GLFWwindow* window, double x, double y);

void LoopProc()

{

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    glfwPollEvents();

    // Workaround for an issue with msvcrt and mintty

    fflush(stdout);

    

    glfwSwapBuffers(window);

}

int main(int argc, char **argv)

{

    printf("GLFW Test\n");

    printf("ZLib version: %s\n", zlibVersion());

    

    int width, height;

    

    glfwSetErrorCallback(error_callback);

    if (!glfwInit())

        exit(EXIT_FAILURE);

    printf("Library initialized\n");

#ifdef EMSCRIPTEN

    // Emscripten 에서는 OpenGL ES 2.0 사용. 

    glfwWindowHint(GLFW_CLIENT_API, GLFW_OPENGL_ES_API);

    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 2);

    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 0);

#endif // EMSCRIPTEN

    window = glfwCreateWindow(320, 240, "GLFW Test", NULL, NULL);

    if (!window)

    {

        glfwTerminate();

        exit(EXIT_FAILURE);

    }

    printf("Window opened\n");

    glfwSetMouseButtonCallback(window, mouse_button_callback);

    glfwSetCursorPosCallback(window, cursor_position_callback);

    glfwSetScrollCallback(window, scroll_callback);

    glfwMakeContextCurrent(window);

    glfwSwapInterval(1);

    glfwGetWindowSize(window, &width, &height);

    printf("Window size %ix%i\n", width, height);

    // render_start();

    printf("Main loop starting\n");

    glClearColor(0.5f, 0.5f, 1.0f, 1.0f);

    

#ifdef EMSCRIPTEN

    emscripten_set_main_loop (LoopProc, 0, 1);

#else

    while (!glfwWindowShouldClose(window)) {

        LoopProc();

    }

#endif // EMSCRIPTEN

    return 0;

}

Func.cpp

#include <GLFW/glfw3.h>

#include <stdio.h>

#include <stdlib.h>

#include <string.h>

// Event index

unsigned int counter = 0;

void error_callback(int error, const char* description)

{

    fprintf(stderr, "Error: %s\n", description);

}

static const char* get_button_name(int button)

{

    switch (button)

    {

        case GLFW_MOUSE_BUTTON_LEFT:

            return "left";

        case GLFW_MOUSE_BUTTON_RIGHT:

            return "right";

        case GLFW_MOUSE_BUTTON_MIDDLE:

            return "middle";

    }

    return NULL;

}

static const char* get_mods_name(int mods)

{

    static char name[512];

    name[0] = '\0';

    if (mods & GLFW_MOD_SHIFT)

        strcat(name, " shift");

    if (mods & GLFW_MOD_CONTROL)

        strcat(name, " control");

    if (mods & GLFW_MOD_ALT)

        strcat(name, " alt");

    if (mods & GLFW_MOD_SUPER)

        strcat(name, " super");

    return name;

}

static const char* get_action_name(int action)

{

    switch (action)

    {

        case GLFW_PRESS:

            return "pressed";

        case GLFW_RELEASE:

            return "released";

        case GLFW_REPEAT:

            return "repeated";

    }

    return "caused unknown action";

}

void mouse_button_callback(GLFWwindow* window, int button, int action, int mods)

{

    const char* name = get_button_name(button);

    double xpos, ypos;

    glfwGetCursorPos(window, &xpos, &ypos);

    printf("%08x at %0.3f: Mouse Pos %.0f %.0f button %i", counter++, glfwGetTime(), xpos, ypos, button);

    if (name)

        printf(" (%s)", name);

    if (mods)

        printf(" (with%s)", get_mods_name(mods));

    printf(" was %s\n", get_action_name(action));

}

void cursor_position_callback(GLFWwindow* window, double x, double y)

{

    //printf("%08x at %0.3f: Cursor position: %f %f\n", counter++, glfwGetTime(), x, y);

}

void scroll_callback(GLFWwindow* window, double x, double y)

{

    printf("%08x at %0.3f: Scroll: %0.3f %0.3f\n", counter++, glfwGetTime(), x, y);

}

Debug 빌드 테스트

Web 빌드 테스트

---

Emscripten 에 대해 수박 겉핥기로 간단히 가지고 놀아 보았다. 

생성된 JS 파일을 열어보면 그럭저럭 읽을만 하다. 

여기까지는 로컬파일에서도 테스트가 되지만 "-O2" 이상의 최적화 옵션을 주면 asm.js 로 빌드되고 웹서버가 필요하다. 

(파이썬의 SimpleHTTPServer 추천)

"-s WASM=1" 을 추가해 요즈음 핫한 웹어셈블리도 만들어 볼 수 있으니... 모쪼록 즐거운 삽질이 되시기를...

---

2019.6.12.

$emcc --show-ports

Available ports:

zlib (USE_ZLIB=1; zlib license)

libpng (USE_LIBPNG=1; zlib license)

SDL2 (USE_SDL=2; zlib license)

SDL2_image (USE_SDL_IMAGE=2; zlib license)

ogg (USE_OGG=1; zlib license)

vorbis (USE_VORBIS=1; zlib license)

bullet (USE_BULLET=1; zlib license)

freetype (USE_FREETYPE=1; freetype license)

......

zlib 같은 유명한 엔진은 이미 emscripten 로 포팅되어 있음.
저 삽질은 기본 지원하지 않는 라이브러리 적용시에나 유효할 듯.