HTML and CSS Reference
In-Depth Information
The Emscripten Toolchain
Emscripten consists of three parts: the compiler from LLVM to JavaScript, a set of library implementations that make
it convenient to port existing codebases, and helpful tools and scripts for managing the entire compile process.
One of those tools, emcc, behaves much like gcc and can be dropped into most existing build systems. (For C++,
em++ is the Emscripten replacement of g++.) Rather than producing native object files, emcc and em++ produce
LLVM IR files. When linking, instead of generating a native executable, the final executable target is either an HTML
page or a single JavaScript file, depending on whether the program stands alone or will be integrated into an existing
web application.
Thus, compiling a simple Hello World program with Emscripten is as simple as Listing 18-6.
Listing 18-6.
Compiling Hello World with emcc
$ cat helloworld.c
#include <stdio.h>
int main() {
printf(“Hello world!\n”);
}
$ emcc -o helloworld.html helloworld.c
emcc and em++ offer dozens of Emscripten-specific options, including custom optimizations and output format
adjustments. They are not in scope for this chapter, but it's worth reading through
emcc --help
.
Graphics Support
C++ programs in Emscripten have access to the entire range of browser capabilities by making direct calls to
JavaScript with
embind
, which we explore in the “Audio Support” section below. Most programs, however, would take
advantage of Emscripten's convenient access to WebGL for 3D graphics or HTML5 Canvas for 2D graphics.
WebGL
Emscripten exposes WebGL to programs through one of two OpenGL modes: OpenGL ES 2 and OpenGL Legacy
Emulation. By default, your code only has access to the OpenGL ES 2 functions, which are translated almost directly
to WebGL calls, as WebGL is based on the OpenGL ES 2 specification. However, if your code uses legacy fixed function
calls, you can enable the
LEGACY_GL_EMULATION
option which attempts to translate those calls into WebGL calls with
some degree of accuracy.
For very basic OpenGL applications, LEGACY_GL_EMULATION will likely come close to the original OpenGL
semantics, but for anything more complicated than a few textures and vertex buffers, the LEGACY_GL_EMULATION
mode is likely inadequate. At the time of this writing, there is talk of replacing LEGACY_GL_EMULATION with
a maintained and supported OpenGL emulation layer such as Regal (
https://github.com/p3/regal
)
, but I
recommend limiting your games to the OpenGL ES 2 subset and not using an OpenGL emulation layer. Plus, if your
game targets OpenGL ES 2, it can run natively on mobile platforms too!
Canvas
For games that only use 2D graphics, WebGL is not necessary. 2D games can render with the HTML5 Canvas API
either through SDL or embind to access the 2D canvas context directly. To see an example of how to use embind,
see the audio example in Listing 18-7.
