Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2019 spring WIP
Search
sksat
July 29, 2019
Programming
1
140
2019 spring WIP
sksat
July 29, 2019
Tweet
Share
More Decks by sksat
See All by sksat
人になにかを教えるときに考えていること(2025-05版 / VRC-LT #18)
sksat
4
1.1k
人工衛星開発のための C2A フレームワークとその開発体験
sksat
1
380
人工衛星の開発体験向上のために、ソフトウェアからできること
sksat
4
760
3ヶ月でできる! 探査機自作ゼミ教材自作入門
sksat
6
2.7k
セキュリティ・キャンプ全国大会2024 S17 探査機自作ゼミ 事前学習・当日資料
sksat
3
23k
AE Rust 勉強会: github-webhook-rs
sksat
0
260
万国のサーバ管理者よ, 自動化せよ!
sksat
1
7.7k
teleka.suを支える技術
sksat
1
16k
ふつうのLinuxプログラミング-プロセスとハードウェア
sksat
26
8k
Other Decks in Programming
See All in Programming
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
520
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
200
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
200
新しいモバイルアプリ勉強会(仮)について
uetyo
1
190
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
740
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
160
PHPカンファレンス関西2025 基調講演
sugimotokei
5
1k
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
190
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
290
AI Ramen Fight
yusukebe
0
120
Featured
See All Featured
Bash Introduction
62gerente
613
210k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Making Projects Easy
brettharned
117
6.3k
Unsuck your backbone
ammeep
671
58k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Transcript
Emscriptenを用いたx86エミュレータの ブラウザへの移植 Arch B1 sksat
背景 ・過去にx86エミュレータを作っていた ・WebAssemblyがアツい 2
WebAssemblyとは 3 ・ブラウザ上で走るアセンブリ風(?)言語 ・JavaScriptを置換するわけではない ・大してWebでもAssemblyでもない ・ブラウザ上で高速に計算できる ・LLVM 8.0で正式サポート(2019/03/20)
自作エミュレータ ・高2の時に作ったもの ・https://github.com/sk2sat/emu で公開 ・ターゲットはx86 ・コンピュータの動作原理を知りたい ・はりぼてOS(教育用の小さなOS)が動く ・マルチプラットフォームで動く → ブラウザでも動いたら楽しい!
←今回のモチベーション 4
先行事例 ・JSLinux ・v86 5
Emscriptenとは 6 ・asm.js, WebAssemblyへのコンパイラツールチェーン ・C/C++をブラウザ向けにコンパイルできる(!?)
Emscriptenとは(2) 7
とりあえずやってみる make CC=emcc CXX=emcc ・これだけではうまくいかない ・なぜ?→ファイル読み込みと画面描画ができない 8
エミュレータの構造 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
ブラウザ上では... 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
今回やろうとしたこと 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
進捗どうですか? できませんでした... 12
進捗 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 できた なんもわからん
なぜできなかったのか? ・WebAssemblyでのpthreadがまだproposalだった 14 ・glDrawPixels()が使えなかった glDrawPixels()はOpenGL ES 2.0で削除 WebGLはOpenGL ES 2.0相当
やったこと ・threadが無いなら定期的に描画してしまえばいいじゃない →main()が終了するまでDOMへの操作が反映されない emscripten_sleep()を入れるとそこで更新してくれるらしい →コンパイラが落ちる 15
やったこと(2) ・glDrawPixels()が使えないなら... 元々RGBを1つの関数で表示したかったがためにOpenGLを使っていた シェーダなんもわからん そもそもemscripten_sleep()が使えないから実行中の描画ができない 16
やったこと(3) ・実行中の描画はあきらめた とりあえず終了時の画面が描画できればいい ・RGBを描画する関数が無いならcanvasに直描きすればいいじゃない 17
デモ 18 https://sk2sat.github.io/emu/demo/emu.html
今後 ・新規にx86エミュレータを作りたい https://github.com/sk2sat/eucerca ・キーボード/マウスのエミュレーション ・メモリ保護機能 ・FPGAで自作CPU 19
エミュレータの構造 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