Ubuntu 18.04 下 emscripten SDK 的安装

Ubuntu 18.04 下 emscripten SDK 的安装
http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html#installation-instructions

需要环境
清华安装源 https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu
$ sudo apt update
$ sudo apt install vim openssh-server git curl wget tar unzip
$ sudo apt install build-essential python cmake default-jre

下载源
$ cd ~
$ git clone https://github.com/juj/emsdk.git
$ cd emsdk
更新最新版本
$ ./emsdk update

安装最新的SDK
安装期间会检查并自动下载缺失的llvm、clang、node、emscripten和sdk等，根据提示会显示下载的压缩包网址和本地的目录，
如果下载期间发生错误，无法下载到本地，可以用wget等工具手动下载，放到提示的本地目录（emsdk/zips）里，再次运行这条命令
（
当然手动下载好，然后复制到zips也是可以的
$ mkdir ~/emsdk/zips
$ mv ~/clang-e1.38.4.tar.gz ~/emsdk/zips/
$ mv ~/llvm-e1.38.4.tar.gz ~/emsdk/zips/
$ mv ~/node-v8.9.1-linux-x64.tar.xz ~/emsdk/zips/
$ mv ~/emscripten-llvm-e1.38.4.tar.gz ~/emsdk/zips/
$ mv ~/1.38.4.tar.gz ~/emsdk/zips/
$ ./emsdk install latest
$ rm ~/emsdk/zips/*
）
$ ./emsdk install latest
请耐心等待编译完成。
为当前用户配置~/.emscripten文件
$ ./emsdk activate latest

查看安装列表，安装binaryen
$ ./emsdk list
./emsdk install binaryen-tag-1.38.4-64bit
./emsdk activate binaryen-tag-1.38.4-64bit

为当前会话配置环境变量
$ cd ~/emsdk
$ source ./emsdk_env.sh
$ cd ~/emsdk
$ ./emsdk list

查看版本
$ emcc --version
$ em++ --version

备份
$ cd ~
$ tar cvzf emsdk.tar.gz emsdk

卸载
$ ./emsdk uninstall <tool/sdk name>
完全卸载，删除这个目录即可。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
官方教程的例子
http://kripken.github.io/emscripten-site/docs/getting_started/Tutorial.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

emcc 用于编译c/c++源程序，简单格式如下：
$ emcc -O2 hello_world.cpp -s WASM=1 -o hello_world.html
（1）优化方案：详细见 http://kripken.github.io/emscripten-site/docs/tools_reference/emcc.html#emcc-o2
指定 -O0 或者不指定优化方案，即不优化。
指定 -O1 简单优化，优化asm.js，LLVM -O1，移除掉运行时输出和异常捕获等，如printf、puts等代码。
指定 -O2 类似O1，然后会压缩js，LLVM -O3，适合release
指定 -O3 类似O2，进一步压缩js，推荐release
指定 -Os 类似O3，进一步优化bitcode生成和js代码尺寸
指定 -Oz 类似Os，更进一步优化代码
（2）键值开关：-s OPTION=value
默认WASM=1，如果纯js，请设置WASM=0
（3）-o xxx.html
会输出xxx.html，否则会输出a.out.js和a.out.wasm
（4）更详细的指令见 emcc --help 和 http://kripken.github.io/emscripten-site/docs/tools_reference/emcc.html

---------------------------
例子1：编译hello, world程序
---------------------------
$ source ~/emsdk/emsdk_env.sh
$ mkdir ~/tests
$ cd ~/tests
$ vim hello_world.c

#include <stdio.h>

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

$ emcc hello_world.c
耐心等待，会生成a.out.js，如果发生错误，可以用-v选项编译，输出更多的调试信息。
$ ls -al
total 160
drwxrwxr-x 2 bob bob 4096 6月 1 14:37 .
drwxr-xr-x 19 bob bob 4096 6月 1 14:38 ..
-rw-rw-r-- 1 bob bob 101699 6月 1 14:37 a.out.js
-rw-rw-r-- 1 bob bob 45389 6月 1 14:37 a.out.wasm
-rw-rw-r-- 1 bob bob 75 6月 1 14:35 hello_world.c
$ node a.out.js
hello, world!

通过上面的生成文件，会发现同时生成了wasm，但是有的浏览器不支持wasm，需要指定 -s WASM=0
接下来分别生成支持wasm和不支持wasm的情况，同时生成html
$ emcc hello_world.c -o hello.html
$ emcc hello_world.c -s WASM=0 -o hello_nowasm.html
$ ls -al
total 816K
drwxrwxr-x 2 bob bob 4.0K 6月 1 14:54 .
drwxr-xr-x 19 bob bob 4.0K 6月 1 14:54 ..
-rw-rw-r-- 1 bob bob 100K 6月 1 14:37 a.out.js
-rw-rw-r-- 1 bob bob 45K 6月 1 14:37 a.out.wasm
-rw-rw-r-- 1 bob bob 101K 6月 1 14:54 hello.html
-rw-rw-r-- 1 bob bob 100K 6月 1 14:54 hello.js
-rw-rw-r-- 1 bob bob 101K 6月 1 14:54 hello_nowasm.html
-rw-rw-r-- 1 bob bob 298K 6月 1 14:54 hello_nowasm.js
-rw-rw-r-- 1 bob bob 45K 6月 1 14:54 hello.wasm
-rw-rw-r-- 1 bob bob 75 6月 1 14:35 hello_world.c
分别生成了：
第一组：hello.html, hello.js, hello.wasm
第二组：hello_nowasm.html, hello_nowasm.js
可以用一个httpserver启动，然后用浏览器测试两个页面的效果
$ python -m SimpleHTTPServer 8080
注：wasm的是不支持file:///方式直接打开。

附：wasm的浏览器支持情况
https://caniuse.com/#search=wasm

----------------------------
例子2：SDL API显示到<canvas>
----------------------------
$ cd ~/tests
$ vim hello_world_sdl.cpp

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

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

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

  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!
");
  printf("and here is some text that should be HTML-friendly: amp: |&| double-quote: |"| quote: |'| less-than, greater-than, html-like tags: |<cheez></cheez>|
another line.
");

  SDL_Quit();

  return 0;
}

保存后，可删除其他多余的文件
$ rm `ls|grep -v hello_world_sdl.cpp`
编译
$ emcc hello_world_sdl.cpp -o hello_sdl.html
$ ls -al
total 396
drwxrwxr-x 2 bob bob 4096 6月 1 15:40 .
drwxr-xr-x 19 bob bob 4096 6月 1 15:41 ..
-rw-rw-r-- 1 bob bob 102842 6月 1 15:40 hello_sdl.html
-rw-rw-r-- 1 bob bob 233934 6月 1 15:40 hello_sdl.js
-rw-rw-r-- 1 bob bob 46133 6月 1 15:40 hello_sdl.wasm
-rw-rw-r-- 1 bob bob 1385 6月 1 15:33 hello_world_sdl.cpp

-------------------
例子3：文件打开操作
-------------------
$ cd ~/tests
$ rm *
$ vim hello_world_file.cpp

#include <stdio.h>
int main() {
  FILE *file = fopen("hello_world_file.txt", "rb");
  if (!file) {
    printf("cannot open file
");
    return 1;
  }
  while (!feof(file)) {
    char c = fgetc(file);
    if (c != EOF) {
      putchar(c);
    }
  }
  fclose (file);
  return 0;
}

$ cat<<EOF>hello_world_file.txt
==
This data has been read from a file.
The file is readable as if it were at the same location in the filesystem, including directories, as in the local filesystem where you compiled the source.
==
EOF
$ emcc hello_world_file.cpp -o hello_file.html --preload-file hello_world_file.txt
$ ls -al
total 408
drwxrwxr-x 2 bob bob 4096 6月 1 15:53 .
drwxr-xr-x 19 bob bob 4096 6月 1 15:53 ..
-rw-rw-r-- 1 bob bob 199 6月 1 15:53 hello_file.data
-rw-rw-r-- 1 bob bob 102843 6月 1 15:53 hello_file.html
-rw-rw-r-- 1 bob bob 234871 6月 1 15:53 hello_file.js
-rw-rw-r-- 1 bob bob 50317 6月 1 15:53 hello_file.wasm
-rw-rw-r-- 1 bob bob 280 6月 1 15:52 hello_world_file.cpp
-rw-rw-r-- 1 bob bob 199 6月 1 15:53 hello_world_file.txt
注意那个.data文件，查看文件内容就是hello_world_file.txt的内容
$ cat hello_file.data
==
This data has been read from a file.
The file is readable as if it were at the same location in the filesystem, including directories, as in the local filesystem where you compiled the source.
==