Emscripten 가지고 놀기 2. (feat. GLFW, ZLib)
탐구생활/WEB 관련이전 글 Emscripten 가지고 놀기 1. (feat. CodeLite) 에서 연결됨.
OpenGL은 말 그대로 그래픽 라이브러리에 대한 표준이고 어떤 플랫폼에서건 일관적인 사용을 보장하지만
막상 이 컨텍스트를 띄우려면 윈도에서는 wgl, 모바일에서는 egl 을 써야 하는 등, 플랫폼마다 조금씩 다른 처리가 필요하다.
GLFW는 이런 잔처리를 도와서 손발을 편안하게 해 주는 물건이다.
Emscripten 환경에는 이 GLFW3 이 포팅되어있고 "-s USE_GLFW=3" 링크옵션으로 활성화 시킬 수 있다.
따라서 네이티브 환경에서 GLFW를 사용해 OpenGL 윈도를 생성하고 화면을 그려주면, 큰 변환 없이 웹에서도 동작시킬 수 있게 된다.
문서상에는 셰이더 없이 glBegin() ~ glEnd() 도 지원한다고 되어있기는 한데... 예전 1.25 버전에서 삽질하다가 진작에 포기했다.
그냥 속 편하게 OpenGL ES 2.0 기반으로 작업하는 것을 추천한다.
이번 포스팅에서는 네이티브 환경에 GLFW를, Emscripten 환경에는 zlib 를 추가하는 방법을 정리해 보자.
작업을 편하게 하기 위해 wget을 설치한다. 먼저 rudix 설치.
$ curl -O https://raw.githubusercontent.com/rudix-mac/rpm/2016.12.13/rudix.py
$ sudo python rudix.py install rudix
wrget 설치
$ sudo rudix install wget
glfw 빌드. 소스 다운받고 빌드 디렉토리 준비.
$ wget https://github.com/glfw/glfw/releases/download/3.2.1/glfw-3.2.1.zip --no-check-certificate
$ unzip glfw-3.2.1.zip
$ cd glfw-3.2.1
$ mkdir build
$ cd build
CMAKE를 실행 후 Conrigure 에서 "Unix Make" 선택하고 붉은 마킹이 사라지도록 설정을 아래와 같이 변경 후 Configure 실행.
완료 후 Generate 버튼을 눌러준다.
빌드 시작.
$ make
빌드된 라이브러리는 build/src 에, 예제는 build/examples 에 만들어진다.
$ ls -l src/lib*
-rwxr-xr-x 1 oranke admin 127596 3 25 11:23 src/libglfw.3.2.dylib
lrwxr-xr-x 1 oranke admin 17 3 25 11:23 src/libglfw.3.dylib -> libglfw.3.2.dylib
lrwxr-xr-x 1 oranke admin 15 3 25 11:23 src/libglfw.dylib -> libglfw.3.dylib
그냥 두고 써도 되겠지만, 개발을 편하게 하기 위해 인스톨.
$ sudo make install
........
[100%] Built target events
Install the project...
-- Install configuration: "Release"
-- Up-to-date: /usr/local/include/GLFW
-- Installing: /usr/local/include/GLFW/glfw3.h
-- Installing: /usr/local/include/GLFW/glfw3native.h
-- Installing: /usr/local/lib/cmake/glfw3/glfw3Config.cmake
-- Installing: /usr/local/lib/cmake/glfw3/glfw3ConfigVersion.cmake
-- Installing: /usr/local/lib/cmake/glfw3/glfw3Targets.cmake
-- Installing: /usr/local/lib/cmake/glfw3/glfw3Targets-release.cmake
-- Installing: /usr/local/lib/pkgconfig/glfw3.pc
-- Installing: /usr/local/lib/libglfw.3.2.dylib
-- Installing: /usr/local/lib/libglfw.3.dylib
-- Installing: /usr/local/lib/libglfw.dylib
zlib 빌드
$ git clone https://github.com/madler/zlib.git
$ cd zlib
$ mkdir build
$ cd build
$ emcmake cmake ..
$ make
맥에서 빌드하고 있지만 생성되는 바이너리 파일의 확장자는 *.dylib가 아닌 *.so 이다.
툴체인을 바꿔주는 역할을 emcmake 커맨드가 처리하는 듯 하다.
$ ls -l libz*
-rw-r--r-- 1 oranke admin 208488 3 25 17:39 libz.a
lrwxr-xr-x 1 oranke admin 9 3 25 17:39 libz.so -> libz.so.1
lrwxr-xr-x 1 oranke admin 14 3 25 17:39 libz.so.1 -> libz.so.1.2.11
-rw-r--r-- 1 oranke admin 183196 3 25 17:39 libz.so.1.2.11
이대로 써도 관계 없지만... 아무래도 편한게 좋으니 emscripten 환경에 설치되도록 하자.
CMake-GUI 를 열어서, 설치위치를 /usr/local 이 아닌 /Volumes/Data/emsdk/emscripten/1.37.36/system/local 로 변경하고 다시 생성.
$ make install
......
[100%] Built target minigzip
Install the project...
-- Install configuration: ""
-- Installing: /Volumes/Data/emsdk/emscripten/1.37.36/system/local/lib/libz.so.1.2.11
-- Installing: /Volumes/Data/emsdk/emscripten/1.37.36/system/local/lib/libz.so.1
-- Installing: /Volumes/Data/emsdk/emscripten/1.37.36/system/local/lib/libz.so
-- Installing: /Volumes/Data/emsdk/emscripten/1.37.36/system/local/lib/libz.a
-- Installing: /Volumes/Data/emsdk/emscripten/1.37.36/system/local/include/zconf.h
-- Installing: /Volumes/Data/emsdk/emscripten/1.37.36/system/local/include/zlib.h
-- Installing: /Volumes/Data/emsdk/emscripten/1.37.36/system/local/share/man/man3/zlib.3
-- Installing: /Volumes/Data/emsdk/emscripten/1.37.36/system/local/local/share/pkgconfig/zlib.pc
정리하면...
GLFW 는 이미 Emscripten 환경에 있지만 OSX 에 없으니 OSX 용으로 빌드.
ZLib 는 OSX 에는 있지만 Emscripten 에는 없으므로 Emscripten 용으로 빌드
한 삽질이 되시겠다.