2019 spring WIP

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. 先行事例
   ・JSLinux
   ・v86
   5
   

   View Slide

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

   View Slide

7. Emscriptenとは(2)
   7
   

   View Slide

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

   View Slide

9. エミュレータの構造
   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
   

   View Slide

10. ブラウザ上では...
    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
    

    View Slide

11. 今回やろうとしたこと
    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
    

    View Slide

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

    View Slide

13. 進捗
    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
    できた
    なんもわからん
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. エミュレータの構造
    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
    

    View Slide