Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2019 spring WIP

2019 spring WIP

sksat

July 29, 2019
Tweet

More Decks by sksat

Other Decks in Programming

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. 自作エミュレータ
    ・高2の時に作ったもの
    ・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を1つの関数で表示したかったがために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