JavaScript: Emscripten unter OS X installieren

Der letze Beitrag hat es schön gezeigt, wie schnell man in die Tiefen der Technik abdriften kann ;-) Um an diesen anzuknüpfen geht es nun darum Emscripten auf Mac OS X zu installieren.

In der Tutorial Sektion ist ein Gist enthalten mit dem es wirklich sehr einfach ist Emscripten zu installieren.

# Based on https://github.com/kripken/emscripten/wiki/Tutorial

# prerequisites
cd ~/
brew install node
sudo ln -s /usr/bin/python2.7 /usr/bin/python2
curl http://llvm.org/releases/3.2/clang+llvm-3.2-x86_64-apple-darwin11.tar.gz > llvm.tgz
tar xzvf llvm.tgz
ln -s clang+llvm-3.2-x86_64-apple-darwin11 llvm

# emscripten
git clone git://github.com/kripken/emscripten.git
cd emscripten
LLVM=~/llvm/bin ./emcc
LLVM=~/llvm/bin ./emcc tests/hello_world.cpp -o hello.html
open hello.html

Ein kleiner Blocker ist auch hier enthalten, da git nicht auf OS X vorhanden ist. Also bevor der Gist funktioniert vorher noch schnell den git-osx-installer herunterladen und installieren.

Wird das Gistfile über die Konsole mit sh gistfile1.sh aufgerufen ist dann ungefähr folgendes zu sehen. Am Schluß wird dann noch eine hello.html Seite geöffnet.

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 67.8M  100 67.8M    0     0   632k      0  0:01:49  0:01:49 --:--:--  639k
x clang+llvm-3.2-x86_64-apple-darwin11/
x clang+llvm-3.2-x86_64-apple-darwin11/bin/
...
...
...
...
...
x clang+llvm-3.2-x86_64-apple-darwin11/share/man/man1/
x clang+llvm-3.2-x86_64-apple-darwin11/share/man/man1/clang.1
Cloning into 'emscripten'...
remote: Finding bitmap roots...
remote: Counting objects: 46622, done.
remote: Compressing objects: 100% (15932/15932), done.
remote: Total 46622 (delta 30419), reused 46395 (delta 30205)
Receiving objects: 100% (46622/46622), 87.13 MiB | 641.00 KiB/s, done.
Resolving deltas: 100% (30419/30419), done.
Checking connectivity... done

==============================================================================
Welcome to Emscripten!

This is the first time any of the Emscripten tools has been run.

A settings file has been copied to ~/.emscripten, at absolute path: /Users/csg/.emscripten

It contains our best guesses for the important paths, which are:

  LLVM_ROOT       = /usr/bin
  PYTHON          = /usr/bin/python2
  NODE_JS         = /usr/local/bin/node
  EMSCRIPTEN_ROOT = /Users/csg/emscripten

Please edit the file if any of those are incorrect.

This command will now exit. When you are done editing those paths, re-run it.
==============================================================================

INFO     root: (Emscripten: Running sanity checks)

Emscript sollte nun erfolgreich installiert sein. Der nächste Beitrag erscheint Asap.

JavaScript: Emscripten erste Versuche unter OS X

Wahnsinn! Was man nicht alles ausprobieren muss ;-) Als ich mal wieder Lust hatte an meinem Cangaja Framework weiter zu arbeiten, kam mir die Idee eine neuere Box2D Version einzubinden.

Aktuell ist Box2DWeb, ein Port der Box2dFlash Version 2.1a in Cangaja in Verwendung. Die Version der original C++ Version von Box2D ist aber mittlerweile schon bei Version 2.2.1 2.3.0. Eine der nennenswerten Neuerungen seit der Version 2.2 (Version ohne Gewähr ;-) sind Chain Shapes mit denen man viele Eckpunkte verbinden kann um statische Objekte zu erzeugen.

Auf der Suche nach einer aktuelleren Box2D Version für Javascript bin ich auf ‚Port of Box2D to JavaScript using Emscripten‚ gestoßen. Dieses nutzt Emscripten um C/C++ Code über LLVM nach JavaScript zu kompilieren. Eine genauere Erklärung und die Vorteile davon werden hier erläutert -> Asm.js: The JavaScript Compile Target.

Gesagt getan wurde von mir die Emscripten Version von Box2D herunter geladen. Wie sich aber heraus stellte war diese nicht so einfach zu implementieren wie naiverweise Gedacht ;-) Nach einigen Recherchieren bin ich auf diesen Blogeintrag „Playing with the Emscripten port of Box2D“ gestoßen, der die Eigenheiten vom Emscripten kompilierten Box2D JavaScript Code genauer unter die Lupe nimmt.

Nachdem diese Hürden umschifft waren ging es weiter bei der Implementierung. Nach den ersten kleinen Erfolgen mit Circle Shape und Polygon Shape tauchten die nächsten Schwierigkeiten auf, die nicht genauer eroiert werden konnten da in der Konsole keine Fehlermeldung ausgegeben wurde.

Um besser nachvollziehen zu können was dort eigentlich passiert, wollte ich DebugDraw einbauen, aber das sollte auch nicht so leicht von statten gehen. Zumindest wird hier aber der Fehler ‚Finished up all reserved function pointers. Use a higher value for RESERVED_FUNCTION_POINTERS.‘ ausgegeben.

Nach etwas stöbern über Google in der Issues List von kripken’s / box2d.js kam heraus dass es eventuell nötig ist box2d.js neu zu kompilieren, schock schwere Not ;-)

Dazu muss aber zuerst Emscripten unter OS X installiert sein. Wie es weiter geht ist im nächsten Beitrag nach zu lesen