1. Emscripten简介

1.1 诞生背景

Web 技术突飞猛进,但是有一个领域一直无法突破 ---- 游戏。

游戏的性能要求非常高,一些大型游戏连 PC 跑起来都很吃力,更不要提在浏览器的沙盒模型里跑了!但是,尽管很困难,许多开发者始终没放弃,希望让浏览器运行 3D 游戏。

2012年,Mozilla 的工程师 Alon Zakai 在研究 LLVM 编译器时突发奇想:许多 3D 游戏都是用 C / C++ 语言写的,如果能将 C / C++ 语言编译成 JavaScript 代码,它们不就能在浏览器里运行了吗?众所周知,JavaScript 的基本语法与 C 语言高度相似。

于是,他开始研究怎么才能实现这个目标,为此专门做了一个编译器项目 Emscripten。这个编译器可以将 C / C++ 代码编译成 JS 代码,但不是普通的 JS,而是一种叫做 asm.js 的 JavaScript 变体。

1.2 什么是Emscripten

Emscripten 官方是这么描述的:

Emscripten is a toolchain for compiling to asm.js and WebAssembly, built using LLVM, that lets you run C and C++ on the web at near-native speed without plugins.

翻译下来就是:

Emscripten是一个工具链,作用是通过LLVM来编译生成asm.js、WebAssembly字节码,目的是让你能够在网页中接近最快的速度运行C和C++,并且不需要任何插件。

Emscripten 是一种基于LLVM的编译器,理论上能够将任何能够生成LLVM位码的代码编译成javascript的严格子集asm.js,实际上主要用于将C/C++代码编译成asm.js。

2. 安装Emscripten

2.1 前置条件

想要编译成WebAssembly,你首先需要先编译 LLVM。这是运行后续工具的先决条件。

  • Git。Linux 和 OS X 系统中好像已经默认装好了,在 Windows 上需要在这里安装 Git。
  • CMake。在 Linux 和 OS X系统中,你可以使用包管理工具 apt-get 或 brew 来安装。如果是 Windows 系统,你可以点击这里。
  • 系统编译工具。Linux上,安装 GCC。OS X 上,安装 Xcode。Windows 上安装 Visual Studio 2015 Community with Update 3 或更新版本。
  • Python 2.7.x,在 Linux 和 OS X上,很可能已经装好了。看这里。

安装完毕后,确认 git,cmake 和 python 已经在你的环境变量里,可以使用。

2.2 下载安装过程

从源码编译安装十分麻烦,推荐安装核心的Emscripten SDK。

1、Windows环境

  • 先使用如下命令下载emsdk。
# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git

# Enter that directory
cd emsdk
  • 再使用如下命令安装配置Emscripten。
# Fetch the latest registry of available tools.
.\emsdk.bat update

# Download and install the latest SDK tools. Need install Python first. 
.\emsdk.bat install latest

# Make the "latest" SDK "active" for the current user. (writes ~/.emscripten file)
.\emsdk.bat activate latest

# Activate PATH and other environment variables in the current terminal
.\emsdk_env.bat
  • 使用如下命令验证Emscripten是否安装配置正确。
# Enter that directory
cd emsdk

# Activate PATH and other environment variables in the current terminal
.\emsdk_env.bat

# Verifying Emscripten
emcc.bat -v

2、Linux环境

  • 先使用如下命令下载emsdk。
# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git

# Enter that directory
cd emsdk
  • 再使用如下命令安装配置Emscripten。
# Fetch the latest registry of available tools.
./emsdk update

# Download and install the latest SDK tools. Need install Python first. 
./emsdk install latest

# Make the "latest" SDK "active" for the current user. (writes ~/.emscripten file)
./emsdk activate latest

# Activate PATH and other environment variables in the current terminal
./emsdk_env.sh
  • 使用如下命令验证Emscripten是否安装配置正确。
# Enter that directory
cd emsdk

# Activate PATH and other environment variables in the current terminal
./emsdk_env.sh

# Verifying Emscripten
emcc -v

3. 示例

  1. 创建名为 helloworld.cpp 的文件,其内容如下:
#include <stdio.h>

int main() {
  printf("hello, world!\n");
  return 0;
}
  1. 使用如下命令编译:
emcc.bat helloworld.cpp

编译后将生成a.out.jsa.out.wasm两个文件。后者是包含编译后代码的WebAssembly文件,前者是用于加载和执行后者的Javascipt文件。

  • emcc是 Emscripten 的编译命令,它的用法非常简单:
# 生成 a.out.js
emcc.bat helloworld.cpp

# 生成 helloworld.js
emcc.bat helloworld.cpp -o helloworld.js

# 生成 helloworld.html 和 helloworld.js
emcc.bat helloworld.cpp -o helloworld.html
  1. 使用如下命令测试编译后生成的代码,将输出“hello,world!”。
node a.out.js

注:需要本地安装 NodeJS 的运行环境

4. 参考资料

  • asm.js 和 Emscripten 入门教程
    http://www.ruanyifeng.com/blog/2017/09/asmjs_emscripten.html

  • Emscripten教程
    https://huangwang.github.io/2018/07/15/Emscripten%E6%95%99%E7%A8%8B/

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐