2019 spring WIP - Speaker Deck

Slide 1

Slide 1 text

Emscriptenを用いたx86エミュレータのブラウザへの移植 Arch B1 sksat

Slide 2

Slide 2 text

背景・過去にx86エミュレータを作っていた・WebAssemblyがアツい 2

Slide 3

Slide 3 text

WebAssemblyとは 3 ・ブラウザ上で走るアセンブリ風(？)言語・JavaScriptを置換するわけではない・大してWebでもAssemblyでもない・ブラウザ上で高速に計算できる・LLVM 8.0で正式サポート(2019/03/20)

Slide 4

Slide 4 text

自作エミュレータ・高２の時に作ったもの・https://github.com/sk2sat/emu で公開・ターゲットはx86 ・コンピュータの動作原理を知りたい・はりぼてOS(教育用の小さなOS)が動く・マルチプラットフォームで動く → ブラウザでも動いたら楽しい！ ←今回のモチベーション 4

Slide 5

Slide 5 text

先行事例・JSLinux ・v86 5

Slide 6

Slide 6 text

Emscriptenとは 6 ・asm.js, WebAssemblyへのコンパイラツールチェーン・C/C++をブラウザ向けにコンパイルできる(！？)

Slide 7

Slide 7 text

Emscriptenとは(2) 7

Slide 8

Slide 8 text

とりあえずやってみる make CC=emcc CXX=emcc ・これだけではうまくいかない・なぜ？→ファイル読み込みと画面描画ができない 8

Slide 9

Slide 9 text

エミュレータの構造 9 CPU G U I V G A G L F W memory glDrawPixels fetch, read set palette read VRAM O S s t d li b flo pp y B I O S write int 0x13 read disk load “haribote.img” fread

Slide 10

Slide 10 text

ブラウザ上では... 10 CPU G U I V G A G L F W memory glDrawPixels fetch, read set palette read VRAM O S s t d li b flo pp y B I O S write int 0x13 read disk load “haribote.img” fread

Slide 11

Slide 11 text

今回やろうとしたこと 11 CPU G U I V G A G L F W memory glDrawPixels fetch, read set palette read VRAM O S s t d li b flo pp y B I O S write int 0x13 read disk load “haribote.img” fread

Slide 12

Slide 12 text

進捗どうですか？できませんでした... 12

Slide 13

Slide 13 text

進捗 13 CPU G U I V G A G L F W memory glDrawPixels fetch, read set palette read VRAM O S s t d li b flo pp y B I O S write int 0x13 read disk load “haribote.img” fread できたなんもわからん

Slide 14

Slide 14 text

なぜできなかったのか？・WebAssemblyでのpthreadがまだproposalだった 14 ・glDrawPixels()が使えなかった glDrawPixels()はOpenGL ES 2.0で削除 WebGLはOpenGL ES 2.0相当

Slide 15

Slide 15 text

やったこと・threadが無いなら定期的に描画してしまえばいいじゃない →main()が終了するまでDOMへの操作が反映されない emscripten_sleep()を入れるとそこで更新してくれるらしい →コンパイラが落ちる 15

Slide 16

Slide 16 text

やったこと(2) ・glDrawPixels()が使えないなら... 元々RGBを１つの関数で表示したかったがためにOpenGLを使っていたシェーダなんもわからんそもそもemscripten_sleep()が使えないから実行中の描画ができない 16

Slide 17

Slide 17 text

やったこと(3) ・実行中の描画はあきらめたとりあえず終了時の画面が描画できればいい・RGBを描画する関数が無いならcanvasに直描きすればいいじゃない 17

Slide 18

Slide 18 text

デモ 18 https://sk2sat.github.io/emu/demo/emu.html

Slide 19

Slide 19 text

今後・新規にx86エミュレータを作りたい https://github.com/sk2sat/eucerca ・キーボード/マウスのエミュレーション・メモリ保護機能・FPGAで自作CPU 19

Slide 20

Slide 20 text

エミュレータの構造 20 CPU G U I V G A G L F W memory glDrawPixels fetch, read set palette read VRAM O S s t d l i b f l op p y B I O S write int 0x13 read disk load “haribote.img” fread