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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
sksat
July 29, 2019
Programming
160
1
Share
2019 spring WIP
sksat
July 29, 2019
More Decks by sksat
See All by sksat
同時複数機開発・運用のDevOpsサイクル高速化のための取り組み
sksat
0
800
探査機自作ゼミ2025スライド
sksat
3
1.6k
人になにかを教えるときに考えていること(2025-05版 / VRC-LT #18)
sksat
6
2k
人工衛星開発のための C2A フレームワークとその開発体験
sksat
1
530
人工衛星の開発体験向上のために、ソフトウェアからできること
sksat
4
1.1k
3ヶ月でできる! 探査機自作ゼミ教材自作入門
sksat
6
3.7k
セキュリティ・キャンプ全国大会2024 S17 探査機自作ゼミ 事前学習・当日資料
sksat
4
32k
AE Rust 勉強会: github-webhook-rs
sksat
0
310
万国のサーバ管理者よ, 自動化せよ!
sksat
1
8.2k
Other Decks in Programming
See All in Programming
へんな働き方
yusukebe
6
2.9k
実践ハーネスエンジニアリング #MOSHTech
kajitack
7
5.1k
Migration to Signals, Signal Forms, Resource API, and NgRx Signal Store @Angular Days 03/2026 Munich
manfredsteyer
PRO
0
200
AI Assistants for YourAngular Solutions @Angular Graz, March 2026
manfredsteyer
PRO
0
130
年間50登壇、単著出版、雑誌寄稿、Podcast出演、YouTube、CM、カンファレンス主催……全部やってみたので面白さ等を比較してみよう / I’ve tried them all, so let’s compare how interesting they are.
nrslib
4
500
ファインチューニングせずメインコンペを解く方法
pokutuna
0
220
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
830
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
1.2k
車輪の再発明をしよう!PHP で実装して学ぶ、Web サーバーの仕組みと HTTP の正体
h1r0
2
470
Reactive ❤️ Loom: A Forbidden Love Story
franz1981
2
210
CS教育のDX AIによる育成の効率化
niftycorp
PRO
0
170
Xdebug と IDE による デバッグ実行の仕組みを見る / Exploring-How-Debugging-Works-with-Xdebug-and-an-IDE
shin1x1
0
270
Featured
See All Featured
Docker and Python
trallard
47
3.8k
How to Talk to Developers About Accessibility
jct
2
170
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
0
470
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
320
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
118
110k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4k
A designer walks into a library…
pauljervisheath
210
24k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
160
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
370
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
990
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.8k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
330
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