emulatorのwasmを出力してkotlin以外の実行環境で動かす

hmaeta commented 8 months ago

[x] wasmでHello Worldしてお勉強
- Kotlinでhello worldを書いてみる
- https://zenn.dev/itsu_dev/articles/37d8c2318ddc10 をもとにHello Worldをprintlnして、node.js v22 で実行したらconsole.logに出た
[x] Node.js→WASMにROMを渡す方法を見つける
- Node.js (ブラウザ) -> blob -> ArrayBuffer -> UInt8Arrayにより、データを一バイトずつ取得することが可能。ここまでできればWASMに渡すことは可能なはず。
[x] gbem（の一部）をwasm on node.js で実行する（テストROM実行する）
[x] nodejsじゃなくbrowserで実行して、実行結果をDOMなどに反映表示
- WASMで3D gameの高速化、みたいなのはどう描画に反映してるのかを参考にできそう
[x] 高速化
[x] キー入力
[x] gradle multi project
[ ] (Optional) FPSを一定に保つ (Kotlin側でloopCountでなくcycleCountを指定させる)
[ ] WASMの結合テスト

hmaeta commented 2 months ago

plugins {
//    alias(libs.plugins.kotlinMultiplatform)
    kotlin("multiplatform") version "2.0.20"
//    kotlin("jvm")
}
repositories {
    mavenCentral()
}
kotlin {
    wasmJs {
        binaries.executable()
        nodejs()
    }
}

node
Welcome to Node.js v22.7.0.
Type ".help" for more information.
> const wasmModule = await import('./gbem-wasm-wasm-js/kotlin/gbem-wasm-wasm-js.mjs');
const wasmModule = await import('./gbem-wasm-wasm-js/kotlin/gbem-wasm-wasm-js.mjs');
undefined
> const { openAsBlob } = require('node:fs');
const { openAsBlob } = require('node:fs');
undefined
> const blob = await openAsBlob('<WORKSPACE>/gbem/src/main/resources/rom.gb');
const blob = await openAsBlob('<WORKSPACE>/gbem/src/main/resources/rom.gb');
undefined
> const ab = await blob.arrayBuffer();
const ab = await blob.arrayBuffer();
undefined
> ua = new Uint8Array(ab)
ua = new Uint8Array(ab)
Uint8Array(32768) [
    0,   0, 195,  56,   0, 107, 105, 255,  62,   1, 224, 148,
  118,  24, 253, 122,  34,  87,  11, 120, 177,  32, 248, 201,
   26,  34,  19,  13,  32, 250, 201, 255,  34,  13,  32, 252,
  201,  42, 102, 111, 203, 124,  32, 255, 233, 255, 255, 255,
  203, 122, 213, 200, 255, 255, 255, 255, 243,  24, 254,  14,
   19,  24,  29,  34, 245, 240, 151, 224,  66, 195,  91,  26,
  245, 229, 240, 172, 111, 198,   4, 224, 172,  38, 200,  62,
   11,  61,  32, 253,  42, 224,  67,  42, 224,  75,  42, 224,
   64,  42, 224,  69,
  ... 32668 more items
]
> wasmModule.emulate(ua)
wasmModule.emulate(ua)
about to run
0, 0, White
1, 0, White
2, 0, White
3, 0, White
4, 0, White
5, 0, White
6, 0, White

hmaeta commented 2 months ago

https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#%E9%95%B7%E6%96%B9%E5%BD%A2%E3%81%AE%E4%BE%8B

kigh-ota commented 2 months ago

9/10 Express経由でhtml/jsを配布して、CORSは回避ブラウザで実行したが、emultate()がスレッドをブロックしてそうで描画が更新されない（原因不明だが cpu_instrs.gb が03まででwasm内でstacktrace吐いた落ちた）次回→emulate()がブロックしないような設計に変えて、JS側でループを回すようにしてみる

kigh-ota commented 2 months ago

参考になるかも：https://github.com/izo0x90/webAssembly-GraphicsDemo/blob/master/src/main.js

kigh-ota commented 1 month ago

9/17 メモ clock per second, frame per second あたりを計測可能にして、改善の効果を数値化してみたい

kigh-ota commented 1 month ago

軽く設計サマリ

emulationに必要な状態は全てKotlin/WASMに持たせた
JS/BrowserはViewのみ
- 描画のためのbufferもなくていけた

sacchie / gbem

emulatorのwasmを出力してkotlin以外の実行環境で動かす #25