웹어셈블리(wasm)을 이용한 c언어 공부하기

어차피 웹의 세상에서 자바스크립트만 공부하면 만사형통(?) 이지만,

반골기질인 저는 항상 시대에 거부하기 때문에 -ㅅ-;;

 

나의 소울 언어인 c언의 활용을 위해 웹어셈블리를 이용해서 c언어를 이용해 웹클라이언트를 짜봅시다.

 

이론적인건 패스 -ㅠ-;

 

엠스크립튼을 이용해서 c언어 프로그램을 html과 js로 변경할 수 있습니다. 

 

공식사이트의 how-to를 통해서 설치 해줍니다.

https://emscripten.org/docs/getting_started/downloads.html

Download and install — Emscripten 3.1.70-git (dev) documentation

 

macOS에서 실습했는데, 윈도우에서도 잘 된다고(?) 합니다.

 

방법은 간단합니다. git소스 가져온 후, 환경설정만 하면 끝납니다.

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
# 실행할때 마다 환경설정을 실행해야함! 아니면 .profile에 넣어서 자동실행으로!
source ./emsdk_env.sh

 

설정이 끝나면, emcc -v 로 실행확인 및 버전 확인을 합니다. 현재 버전은 

3.1.69 입니다.

 

간단한 hello.c 를 저장하고,

#include <stdio.h>

int main() {
  printf("hello, world!\n");
  return 0;
}

 

컴파일 및 output 설정

emcc hello.c -o hello.html
# 실행!
emrun hello.html

잘 보입니다!  이제 c언어도 브라우저로!!

 

## 추가!

SDL도 기본으로 라이브러리가 들어가 있어서, 실행하면 브라우저에서 canvas를 사용하는 형식으로 출력됩니다.

#include <stdio.h>
#include <SDL/SDL.h>

#ifdef __EMSCRIPTEN__
#include <emscripten.h>
#endif

int main(int argc, char** argv) {
  printf("hello, world!\n");

  SDL_Init(SDL_INIT_VIDEO);
  SDL_Surface *screen = SDL_SetVideoMode(256, 256, 32, SDL_SWSURFACE);

#ifdef TEST_SDL_LOCK_OPTS
  EM_ASM("SDL.defaults.copyOnLock = false; SDL.defaults.discardOnLock = true; SDL.defaults.opaqueFrontBuffer = false;");
#endif

  if (SDL_MUSTLOCK(screen)) SDL_LockSurface(screen);
  for (int i = 0; i < 256; i++) {
    for (int j = 0; j < 256; j++) {
#ifdef TEST_SDL_LOCK_OPTS
      // Alpha behaves like in the browser, so write proper opaque pixels.
      int alpha = 255;
#else
      // To emulate native behavior with blitting to screen, alpha component is ignored. Test that it is so by outputting
      // data (and testing that it does get discarded)
      int alpha = (i+j) % 255;
#endif
      *((Uint32*)screen->pixels + i * 256 + j) = SDL_MapRGBA(screen->format, i, j, 255-i, alpha);
    }
  }
  if (SDL_MUSTLOCK(screen)) SDL_UnlockSurface(screen);
  SDL_Flip(screen);

  printf("you should see a smoothly-colored square - no sharp lines but the square borders!\n");
  printf("and here is some text that should be HTML-friendly: amp: |&| double-quote: |\"| quote: |'| less-than, greater-than, html-like tags: |<cheez></cheez>|\nanother line.\n");

  SDL_Quit();

  return 0;
}