Emscriptenと不思議のダンジョンC++/Everywhere - おおっと！ … SEGV!!

札幌C++勉強会 #82 0 1 4 - 1 2 - 2 7 T 1 6 : 0 0 + 0 9 : 0 0 / 2 0 1 4 - 1 2 - 2 7 T 1 6 : 3 0 + 0 9 : 0 0U s a g i I t o < u s a g i @ W o n d e r R a b b i t P r o j e c t . n e t >

お知らせ:(C)ATLUS (C)SEGA Allrights reserved. // スクリーンショット引用元はそれぞれのオフィシャルウェブサイトです。

• 発売されます:

• 世界樹と不思議のダンジョン

• 世界樹の迷宮V

お疲れ様でした。

• 続きは余談です。

• I: Emscripten の紹介

• 1: Emscripten のはじめ方

• リポジトリーは？ドキュメントは？ほかの情報源は？

• 開発環境の準備の仕方

• 2: Emscripten で Hello, World!

• ソースを書いて翻訳: C++ --> LLVM-IR --> JS

• 実行: node.js, spidermonkey / Firefox, etc.

• II: Emscripten の迷宮へようこそ！

• 1: Emscripten 仕組みと構造

• 2: C++ ソースコードにおける翻訳器 em++ への特殊化

• 3: キミはこの奥へ進んでもいいし、一旦街へ引き返して万全を期してもいい

• 事例紹介 a: cross-platform mainloop の書き方

• 事例紹介 b: cross-platform std::future による非同期URLダウンローダーの書き方

わたしは誰？

• 伊藤 兎

• Facebook でいつでも会えます。 → https://www.facebook.com/usagi.wrp

• Twitter にも居ます。 → https://twitter.com/usagi_wrp

• GitHub で語り合いましょう。 → https://github.com/usagi

• OSS

• Emscripten の Authors のひとり。（いっぱいいる。いっしょにつくりましょう (*´∀｀*) ）

• おしごと

• さいきんは地球を作っています。（EmscriptenやClang++やMSVC++で。）

• くわしくは、うまくいったらまた来年☆（ゝω・）vｷｬﾋﾟ

わたしは誰？

• 伊藤 兎

• Facebook でいつでも会えます。 → https://www.facebook.com/usagi.wrp

• Twitter にも居ます。 → https://twitter.com/usagi_wrp

• GitHub で語り合いましょう。 → https://github.com/usagi

• 贈り物はこちらです。 → http://www.amazon.co.jp/registry/wishlist/2ZTSIH6FEUAV0

• お茶が好きです。

• 青茶は大禹嶺・阿里山あたりの金萱、武夷岩茶、紅茶は阿薩姆、緑茶は八女が喜ばれます。

• 辛いものが好きです。

• 激辛というのはブレアーズ・サドンデスソースやアカハチ・辛すぎホットソースくらいの事を言います。

I: Emscripten の紹介その始め方と"Hello, World!"にいたるまで

Emscripten とは？

C++

• .hxx

• .cxx

em++

• LLVM-IR

• js-runtime

JS

• .js (asm.js)

• .html

• C++のソースコードを

• somthing.hxx

• something.cxx

• em++ (≈g++, clang++, cl++)

• LLVMバックエンド（≈技術魔法）を利用して

• jsの実行時ライブラリーと結合しつつ

• JavaScriptへ

• 翻訳☆（ゝω・）vｷｬﾋﾟ

• std, boost, etc. → おおよそ使えます！

• glDrawArrays, etc. → WebGL1 へ！

• SDL2, GLFW3, → いろいろあるけど使えます！

Emscripten の何が嬉しいことか？

C++

• 強力な翻訳器

• さいきょークラスの自動最適化

• 呪文: -O3 -arch=native

• 高い可搬性

• + Emscripten/Web

• 強力なライブラリー

• 超兵器（あーてぃふぁくと）

• マ・ク・ロ, メモリー操作, テンプレート

JavaScript

• 10年間も進化できなかった可哀想な言語仕様• 悲しみのECMA4

• ムズカシイ言語機能

• ダック・タイピング

• this コンテキスト問題

• 普及しなかったレアなOOP機構

• プロトタイプベースのOOP

• 基本的にシングルファイル

• インタープリター風味

• 氾濫した Web API

I.1: Emscripten の始め方

• ドキュメント（≈新オフィシャルウェブサイト）

• http://kripken.github.io/emscripten-site/

• いまのところ完全に英語

• ちょっと余裕できたら個人的に → emscripten.jp とかやろうかとは考えています。

• だいたいの表向きの事はここにしっかりと書いてある

• よほど深い階層へ潜ろうとしなければアンドキュメント仕様やAPIの心配は不要

• ・・・たまにドキュメントが最近の仕様変更に追い付いて居ない罠はあります。

• <emscripten/emscripten.h>読みましょう。そうしましょう (*´∀｀*)

• github （≈ソースコードとTiDD開発のオンライン拠点）

• https://github.com/kripken/emscripten

• wiki（≈旧オフィシャルウェブサイト＆ドキュメンテーション）

• ほかに新標準の翻訳器の repos などもある

kripkenことAlon ZakaiはMozilla の ResearcherでEmscripten開発のボス

MIT License

I.1: Emscripten の始め方

• 開発環境の準備

• NG

• Ubuntu-14.10: emscripten/utopic-1.10.0

• GOOD

• arch-AUR: emscripten, emscripten-git

• Homebrew: Emscripten

• Better(Official Method)

• The Emscripten SDK

• Windows, OSX, GNU/Linux

• Building Emscripten from Source

• 開発者向け・いますぐ最新版を試したい方向け

旧過ぎ！仕様変更・バグ修正

たくさん

通常はこの方法で！

まあまあ保守されていそう

素人にはおすすめしないけど、それほど難しくないよ！

I.1: Emscripten の始め方

Web Installer ならドキュメントが未更新で

1.25.0とか書いてあってもその時点での最新版を

インストールしてくれます。

I.1: Emscripten の始め方<Win-key>

"Emscripten Command Prompt"emsdkemcc --version

すでに使えます！

emccが invalid syntax とか言ったら、emsdkとは別にpython3が居る可能性を疑いましょう。

I.2: Emscripten で Hello, World!

• mkdir hello

• cd hello

• vim hello.cxx

• em++ -o hello.js hello.cxx

• node hello.js

• em++ -o hello.html hello.cxx

• ( access to "hello.html" with modern graphical web browser as you like )

標準出力はここへ。標準エラー出力だと

js-console へ。

II: Emscripten の迷宮へようこそ！Emscriptenの迷宮の入り口を少しだけ歩いてみましょう

II.1: Emscripten の仕組みと構造

• emscripten // .cxx --> .js

• 実行時にリンクされているライブラリーはどこにある？

• emscripten/system

• bin, include, lib, local/include

• emscripten/emscripten.h

• libcxx/array

• GLFW/glfw3.h

• GL

• emscripten/src

• library_gl.js

• library_glfw3.js

C++コードレベルから直接扱うのはここらへんに

翻訳された .jsにリンクされるのはここらへんに

ライブラリーが挙動不審な時は疑う余地アリ

II.1: Emscripten の仕組みと構造

• もっと濃ゆい仕組みについて

• asm.js への最適化

• LLVM-backend

• emscripten-fastcomp

• 実行時のARM風OPコードと仮想マシン

• x86ではない（メモリーアライメントに触れるような低レベル処理は落ちる可能性がある）

• emscripten-ports （パッケージ管理システム）

• SDL2はこの仕組みで対応を実験中の最初の例

• <thread> と WebWorker と 共有メモリー と 例外ポインター

• Firefox との協調、 Chromium/pNaCl の成果の取り込み

次回もお楽しみに♡

II.2: C++ ソースコードにおける翻訳器 em++ への特殊化

• #ifndef EMSCRIPTEN

• em++ を使うと自動的に定義される CPP マクロ

• em++ と他のツールチェインや非Webプラットフォーム向けとの実装分岐に使う

• 可搬性を損なわない為にはこれが必要となる機能は独立したライブラリーとして実装詳細を隠蔽する方針を個人的にはおすすめします

• embind // ref.

• C++ の関数やクラスのシンボルを JavaScript からシームレスにそれらしく扱うためのFFI 機構

• EM_ASM & emscripten_run_script // ref.

• インライン・アセンブラーを模して .cxx 内で JS コードを em++ にとっての機械語と見做して実行する最終手段的な機能。戻り値を C++ コードへ得ることも可能

II.3: 事例紹介

• 事例紹介

• a: cross-platform mainloop の書き方

• ref: wonderland.subsystem の 一部構造

• b: cross-platform std::future による非同期URLダウンローダーの書き方

• wonderland.loader

• ref: https://github.com/usagi/wonderland.loader

• c: cross-platform read/write 可能な簡易ストレージの書き方

• wonderland.storage

• ref: https://github.com/usagi/wonderland.storage

• ほか、時間があれば

• GLFW3 等の高級ラッパーライブラリー wonderland.subsystem

• ref: https://github.com/usagi/wonderland.subsystem

おしまい

つづく