These instruction will show you how to compile one example project in the openFrameworks distribution, and can be reused whenever you want to translate an openFrameworks sketch to a web page. Assuming that you have downloaded openFrameworks 0.9 (it works only with OF versions >= 0.9) you only have to install emscripten and compile a project with it. Here the instruction steb by step.
The recommended way to install Emscripten is to install directly from the Emscripten repo with git. Open a terminal at the location where you want the emsdk to be installed and run the followings commands:
git clone https://github.com/emscripten-core/emsdk cd emsdk ./emsdk install latest-fastcomp ./emsdk activate latest-fastcomp source ./emsdk_env.sh
If the above doesn't work for any reason. You can try using the incoming SDK which might not be as stable:
git clone https://github.com/emscripten-core/emsdk cd emsdk ./emsdk install sdk-incoming-64bit ./emsdk activate sdk-incoming-64bit source ./emsdk_env.sh
For 32bit systems swap the
Note: Because the current
emsdk script uses Python2, you may get errors if the default
python command on your machine is aliased to Python3. In this case, try explicitly running the above commands with Python2. For example:
python2 ./emsdk update.
The installation will take a while. When it is finished, type
source ./emsdk_env.sh to set the system path to the active version of Emscripten. You can copy the output of this command and add it to your
.profile file, in order to save this variables also for the next sessions.
Note: If you have a previous install of emscripten you will want to delete the compiled code in your OF_FOLDER. Delete any files or
obj folders inside of
OF_FOLDER/libs/openFrameworksCompiled/lib/emscripten/ and any
obj/ folders in your project folders before trying to compile.
Compile an openFrameworks project using emscripten
Open the terminal in in one project in the examples folder, like
examples/3d/3DPrimitivesExample, and compile the project using this command
Once the compilation is finished, there will be a new file in
3DPrimitivesExample.html file. Open this file with the command:
If it does not work, it is probably because you are opening with safari, and safari does not support WebGL. Let's open it with another browser, like chrome
emrun --browser chrome bin/3DPrimitivesExample.html
If everything works, you should see this image
This Tutorial is taken from this blog post by Regine Flores Mir.