Testing WebAssembly på Linux

WebAssembly (eller wasm) er et nytt binært mellomspråk som vil bli tolket av Javascript-systemer (som Node js) og nettlesere. Språket har også en tekstuell, lesbar (S-syntaks) variant.

Tidligere har man også snakket om asm.js. Asm.js er fremdeles rent Javascript mens målet for WebAssembly er binært kodeformat. Jeg tror behovet for Asm.js blir borte.

Applikasjoner skrevet i andre høynivåspråk (som C/C++, Python) kan etterhvert kompileres til Wasm-format for utførelse i nettlesere og andre Javascript-miljøer.

Artikkel om WebAssembly.
http://www.digi.no/for_utviklere/2016/03/16/webassembly-skal-fa-virkelig...

Asm.js:
http://asmjs.org/

Bra intro om Wasm av Intel ("wasm_intro.pdf").
https://software.intel.com/sites/default/files/managed/6c/e6/wasm_intro....
----------------
Installasjon av Emscripten på Ubuntu-Linux:

Emscripten er en kompilator som tar C/C++ kode og kompilerer den via LLVM til Wasm-format. Altså C/C++ → LLVM → Wasm binærkode eller S-syntaks som kjøres i nettlesere osv.

LLVM produserer et syntakstre (AST) som lager grunnlaget for WebAssembly.

Bli kjent med emscripten ved å lese
http://kripken.github.io/emscripten-site/
Og:
https://github.com/WebAssembly/design/blob/master/FAQ.md

Installasjon av emscripten og LLVM:

Steg 0) Først, oppdater ditt system og installer nødvendige kompileringsverktøy; gcc/g++, cmake og python2.7.
sudo apt-get update
sudo apt-get -y upgrade
sudo apt-get install -y build-essential cmake python2.7

Hent også Node.js, Java-runtime og git.
sudo apt-get install -y nodejs default-jre git-core
-----
Steg 1) EmSDK er den enkleste måten å installere og oppdatere hele emscripten-miljøet.

Last ned emsdk-portable.tar.gz fra http://kripken.github.io/emscripten-site/docs/getting_started/downloads....

Lag først EM katalog i din hjemmefolder og klikk på ovannevnte lenken eller benytt wget slikt jeg viser her. (merk. hele URLn er ikke synlig på denne websiden)

cd
mkdir EM
cd EM
wget https://s3.amazonaws.com/mozilla-games/emscripten/releases/emsdk-portabl...

Pakk ut filene:
tar -xvzf emsdk-portable.tar.gz
-----
Steg 2) Og kjør ./emsdk ... som skal installere og oppdatere resten av utviklingsmiljøet. Cd først til "emsdk_portable" folder. Gjør dette:

cd emsdk_portable

Sjekk folderlokasjon!
pwd
~/EM/emsdk_portable

Og utfør:
./emsdk update
./emsdk install latest
./emsdk activate latest

Kommandoen "./emsdk install latest" kan ta noen minutter.

Til slutt sett Emscripten-PATH på Linux. Kjør kommando:
source ./emsdk_env.sh

! MERK !
Husk å kjøre "source ./emsdk_env.sh" når du åpner et nytt terminalvindu. Det setter PATH-variabelen riktig slik at "emcc" og andre programmer blir funnet. F.eks:

source $HOME/EM/emsdk_portable/emsdk_env.sh
-----
Steg 3)Utfør test.
La oss nå lage et lite C++ program som vi kompilerer til WebAssembly. Vi kan kjøre resultatet (a.out.js) i en nettleser eller i Javascript-miljøet Node.js som vi installerte tidligere.

Node (eller Node.js) benytter Googles Javascript-motor (V8) til å kjøre Javascript-programmer. Node benyttes ofte på servere (server side), men mange lager også flotte klientprogrammer i Javascript (f.eks popcorntime er basert på Node, LOL ;-)

Fortsetter under...

Valg for kommentarvisning

Velg din foretrukket måte å vise kommentarer på og klikk på "Lagre innstillinger" for å aktivere endringene.

moma

La oss nå teste kompilering med Emscripten.
Men først, sjekk versjonsnummeret til emcc og nodejs.
nodejs -v
v4.2.4

$ emcc -v
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 1.36.0
...
INFO:root:(Emscripten: Running sanity checks), OK.
-----
Good to go!

!MERK! Husk å kjøre emsdk_env.sh hver gang du åpner et nytt terminalvindu. Det setter PATH-variabelen slik at emcc og andre programmer blir funnet. F.eks kjør:

source $HOME/EM/emsdk_portable/emsdk_env.sh
-----

EmSDK puttet mange fine eksempler i emsdk_portable/emscripten/master/tests/ katalogen.

Du finner dem også på nettet:
https://github.com/kripken/emscripten/tree/master/tests

Cd til EM katalogen og list eksemplene:
cd ~/EM
pwd
/home/moma/EM

List eksemplene:
ls -l emsdk_portable/emscripten/master/tests/
...
...
Vi kan godt begynne med hello_world* snuttene først.
List:
ls emsdk_portable/emscripten/master/tests/hell*

hello_world.c hello_world.cpp hello_world_fopen.c
...

Kompiler og kjør hello_world.cpp program.
emcc emsdk_portable/emscripten/master/tests/hello_world.c
...

Den lager a.out.js filen i din aktuelle katalog. Kjør a.out.js med nodejs (et Javascript miljø).

nodejs a.out.js
hello, world!

GRATULERER, DETTE VAR DITT FØRSTE WebAssembly PROGRAM!?
----

Test fil-input/output (fopen). Kompiler:
emcc emsdk_portable/emscripten/master/tests/hello_world_fopen.c

Og kjør:
nodejs a.out.js
heheello, world !...

Studer også kildekoden i gedit editoren.
gedit emsdk_portable/emscripten/master/tests/hello_world_fopen.c
----

La oss nå kompilere et lite OpenGL-prog og kjøre det i nettleseren. AFAIK. Node.js har ikke peiling om GUI, vinduer og grafikk, derfor må vi kjøre grafikken i en nettleser med WebGL.

Vi kan instruere emcc til å produsere en .HTML fil som inkluderer våre WebAssembly og andre Javascript moduler.

Aller først installer støtte for OpenGL (freeglut3-dev).

sudo apt install freeglut3-dev

Du må også ha Firefox nightly:
Du må også kjøre nyeste Firefox test (nightly). Hent det fra: https://nightly.mozilla.org/

Pakk ut filene i din hjemmekatalog og kjør ./firefox fra det ståstedet.

Og aktiver WebAssembly i Firefox. Skriv about:config i adressefeltet og søk/sett javascript.options.wasm til "true". OK?!

Omstart ./firefox og test om WebAssembly er aktivert. Prøv å spille demoen på http://webassembly.github.io/demo/

Klikk på [Play WebAssembly] demo (ikke asm.js fallback) og vent...det tar tid å laste inn alle bitene.

[Play WebAssembly]-knappen er aktivert hvis "javascript.options.wasm" er satt til "true" i din FF nightly.

Du kan også teste Wasm i nyeste testversjoner av Chrome og Chromium. I disse nettlesere må du aktivere "chrome://flags/#enable-webassembly" flagget.
-----
La oss se på gl_stride.c fila. Kompiler med emcc:
emcc -s LEGACY_GL_EMULATION=1 emsdk_portable/emscripten/master/tests/gl_stride.c -o test.html

Og vis test.html i din nettleser med Ctrl+o eller Open file... fra menyen. Jeg tester dette både i chromium-browser og Firefox.

Test det i Firefox-nightly:
.../path/til/firefox test.html
-----
Noen av GL eksemplene funker ikke ennå....

Emcc har bra hjelpetekst. Se
https://kripken.github.io/emscripten-site/docs/tools_reference/emcc.html
eller
emcc --help | more

Lykka til!

  • Skriv ut artikkel
  • Abonner med RSS

Siste kommentarer