トップページをリニューアルする

S.F.@SFPGMR

2019/5/26 14:20:20

wasm用のプリプロセッサ（mwasm）をnode.jsで作っている｜sfpgmr @SFPGMR｜note（ノート）

wasm用のプリプロセッサ（mwasm）をnode.jsで作っている｜sfpgmr｜note
動機 WASMが出てきて、WASMを吐くコンパイラが作れそうだったので「オレオレ言語」を去年の2月くらいから作っていた。今はちょっとお休みの状態になっている。プリプロセスをどうしようかというところで手が止まってしまったのだ。複雑なプリプロセッサ+メタ・プログラミング機能を追加しようとして実装をどうしようか迷っているうちにモチベーションが萎えてしまった。身の丈に合わない仕様を思いついたんだけど私の実装能力が低いから先が見えなくなったのだ。binaryenの助けを借りながら、WASMバイナリを吐くとことまではできたんだけどね。オレオレ言語を作っている趣味というのは「締め切り

2019/5/31 6:04:08

プリプロセッサで吐いてるwatをwabt.jsでparseしてwasmにしてるんだけど、なんかおかしいんだよなあ。。

GitHub - AssemblyScript/wabt.js: A buildbot for wabt.js, a port of WABT to the Web, with TypeScript support.
A buildbot for wabt.js, a port of WABT to the Web, with TypeScript support. - AssemblyScript/wabt.js

2019/5/31 6:04:08

wat2wasmでバイナリ化する結果と異なるという。。

2019/5/31 7:26:03

凡ミスだった。。
let wasmModule = wabt_.parseWat(args.input, preprocessedSourceText);
wasmModule.resolveNames();//これが足らなかった。。
wasmModule.validate();

2019/5/31 7:29:29

wasmModule.validate();でエラーでまくりでうわぁ。。となってた。wat2wasmだとエラーが出なかったのでなんでかなあと。resolveNames()呼ばないといかんのね。。

2019/5/31 18:01:34

PSGエミュレータは元のCソースを手作業でwatにする作業は終わった。これからデバッグに入る。

2019/5/31 18:04:38

いっぱい不具合はあるだろうねえ。不具合を潰す作業は、プチプチを潰すのと感覚的に似てる感じがして、なんか好きなんだよね。。

2019/5/31 18:06:36

chromeでwasmをステップトレースできるようになってるから、デバッグもなんとかなりそうだね。

2019/5/31 18:08:32

ソースコードはcソースに比べて1.5倍位になっただろうか。

2019/6/1 4:56:18

こんな感じでデバッグできるからね。。 https://t.co/vnPKrXN3LO

2019/6/1 5:17:45

死んだ。。 https://t.co/XpueErSwQu

2019/6/1 8:53:50

とりあえず呼び出しで死ぬようなことはなくなったが、そもそもPSGでどうやって音を鳴らすのかすっかり忘れている（笑）ここで言っているのはPSGのレジスタ操作でどうやって音を鳴らすのかということ。音程はどうやってコントロールするのか、発音・消音はどのような手順の行うのかということ。。

2019/6/1 8:58:14

今のところは適度な大きさのバッファにPSGの音声データをレンダリングして、それをWebAudio APIに渡すことで音を鳴らそうと思ってるとこ。AudioWorklet使ってみたいんだなー。これが。

2019/6/1 8:59:17

このサンプル・コードが参考になりそう。。

web-audio-samples/wasm-worklet-processor.js at master · GoogleChromeLabs/web-audio-samples · GitHub
Web Audio API samples by Chrome WebAudio Team. Contribute to GoogleChromeLabs/web-audio-samples development by creating an account on GitHub.

2019/6/1 9:07:33

このバックで流れているBGMはWebAudioで波形メモリ音源をエミュレートしてみたものだ。この時はPeriodicWaveNodeを使って各チャンネルの音声を4ビット波形データから作ったんだよな。

No Image
Graphics

2019/6/1 9:09:51

4bit波形データ→フーリエ変換で周波数データに変換→PeriodicWaveNodeで再生みたいな感じ。

2019/6/1 9:12:03

PeriodicWaveNodeを使うと複雑な波形を合成することができるんだよな。。倍音加算式音源みたいなもんだよな。知らんけど。。

2019/6/1 9:15:08

AudioBufferSourceNodeだとちょっとコントロールが難しいんだよな。。持続音というか波形を流しっぱなしにするのが難しいというか。loopパラメータはあるけど、ループで戻るときに波形をうまくつなげないとノイズが出るしね。。

2019/6/1 9:17:40

私としてはほんとはWebAudioのような高機能なものではなくてもっと低レベルなものが欲しいんだけどね。ASIOのWeb版のようなやつ。

2019/6/1 17:57:28

これ見たらちょっと思い出したな。。PSGの使い方。。

No Image
Mattel Aquarius programming the AY-3-8910 Sound Chip

2019/6/1 18:00:10

AudiotWorklet内でWASMを使うことはできるけど、バイナリをfetchすることはできんのですわ。なのでメインスレッド側でWASMバイナリをfetchした後ArrayBufferでAudioWorkletに渡せばよいのですな。。渡し方はいろいろあるけど私はコンストラクタで渡すことにした。

2019/6/1 18:09:24

WebAudioAPIの仕様を読むと、AudioWorkletProcessor のコンストラクタの引数にAudioWorkletNodeOptionsオブジェクトが渡されるのですな。

No Image
Web Audio API ( 日本語訳 )

2019/6/1 18:09:24

AudioWorkletNodeOptionsにはprocessorOptions メンバがある。これはAudioWorkletNodeをコンストラクトした時の3番目のオブジェクトのメンバである。

2019/6/1 18:09:25

let node = AudioWorkletNode(audioctx,"PSG",{
processorOptions:{
wasmBinary:psgBin,
sampleRate:audioctx.sampleRate,
clock:3580000
}});
こんな感じでメインスレッドからAudioWorkletにパラメータを引き渡すことができるんですな。。

2019/6/1 18:09:25

パラメータは勝手にシリアル化されるので利用者はオブジェクトも渡すことができるのですわ。。

2019/6/1 18:12:23

そしてこんな感じでコンストラクタでwasmバイナリを有効化して初期化するようにしてる。が今はメソッドが動くようになっただけでまだまだバグが大量発生中。AudioWorkletのコードはChromeではまだステップ実行できないようだ。知らんけど。。 https://t.co/mjChlilAU8

2019/6/1 18:13:28

なのでpostMessageでメインスレッド側にデバッグ情報を渡してconsole.logで表示してチェックするようなことを今はしている。。

2019/6/1 18:15:53

今はPSGレジスタに書いた情報がちゃんと読み込まれるかテストしてるところだが、それすらちゃんと動いとらん（笑）。もうちょっとメインスレッド側でテストを進めてからやらんといかんわな。。

2019/6/1 18:19:56

postMessageとか使ってるとなんかWindows APIを思い出すなあ。。PeekMessageとかGetMassegeとか..

2019/6/1 18:28:12

過去にPeriodicWaveで作った波形メモリ音源はナムコの4bit波形メモリ音源を参考にしてる。つくりはまるで違うけど、波形テーブルは同じものが使える。よってこのようにゼビウスのBGMほぼ「まんま」の音を鳴らすことができる。。

No Image
YouTube
YouTube でお気に入りの動画や音楽を楽しみ、オリジナルのコンテンツをアップロードして友だちや家族、世界中の人たちと共有しましょう。

2019/6/1 18:32:10

このPSGエミュレータがまともに動いたら、ローレゾな画面のシューティングゲームを作りたいなあと思ってるんだよなあ。WASMでね。。このPSGエミュレータを使うかどうかはわからんけど。

2019/6/1 18:32:10

I/Oやゲームシステムなどの低レベルな部分はJSでやって、アプリはWASMで作るというかたち。本来であれば低レベルなレイヤーはWASMで作って、JSがそれを利用するのがふつうだが（笑）。

2019/6/1 18:39:12

リニア・メモリをVRAMに見立ててWASMにアクセスさせて、それをJS側でシェーダーに渡して描画させるようなことをすれば、昔のPCのビット・マップグラフィックをエミュレートすることは容易にできるだろう。

2019/6/1 18:45:45

JSだけだけど、ArrayBufferでRGBプレーンを作ってそれをシェーダで描かせるようなことも過去やってみたんだよね。
ArrayBufferやDataViewのおかげで線形メモリに対する細かなアクセスがJSでできるようになったのを利用してる。

No Image
Graphics

https://t.co/haDwdKGOdA

2019/6/1 18:48:00

アニメーションはパレット・チェンジの手法を使ってる。そのあたりの処理はシェーダーにパラメータを渡してシェーダー側で処理するんですな。

2019/6/1 18:48:00

だけどWebGL 1.0のシェーダーは整数値の扱いにちょっと制約があって。ビット演算とかできないんだよな。そこがちょっと面倒なんだけどね。WebGL 2.0だとその制約はほぼなくなったんだけどね。

2019/6/1 18:52:46

これをさらに応用するとMZ-700のキャラクタVRAMをArrayBufferでエミュレートすることも可能なんですな。。このサンプルはArrayBufferにMZ-700のキャラクタとアトリビュートをまんま再現している。

No Image
Graphics

https://t.co/O8gyJOYZDm

2019/6/1 18:54:41

WASMでZ-80とか周辺チップのエミュレーションコードを書くのは、おそらくJSで書くより簡単にできるのでは..と思ってる。

2019/6/3 14:11:23

PSGエミュレータのデバッグでハマってる私。ただちょっと光明が。。

2019/6/3 14:12:56

使い方も思い出すことができた。ネット上の情報も思いのほか豊富でびっくりした。。

2019/6/3 21:08:27

ちょっと鳴るようになった。

Youtube - 作成中のPSGエミュ

2019/6/6 12:19:47

この実装にあたっては色々驚かされことが多い。昔のチップなんでほとんど乗算使わなくていいし。とはいえ自分で一から実装してるわけじゃないんどけと。

2019/6/6 12:21:25

cソースがお手本としてあって、それをwatで書き直してるんだけどね。スタックマシンだけにメモリのロードストアが頻発するのがちと面倒くさいというか。。

2019/6/7 6:05:15

ようやくEGが動くようになった。。凡ミスもいいとこだけど。。

No Image
PSGエミュレータを作る - YouTube
YouTube でお気に入りの動画や音楽を楽しみ、オリジナルのコンテンツをアップロードして友だちや家族、世界中の人たちと共有しましょう。

2019/6/7 6:05:15

今はpostMessageでAudioWorkletにパラメータを送ってるけど、そろそろparameterDescriptorsでレジスタのラッチと値設定できるようにしよう。a-rateでいいわなあ。あとは128サンプルずつ処理するようにwasm側にコードを追加するか。

2019/6/7 6:05:15

これができたらVRAMやスプライトRAMの実装でもしようかな。160x100か320x200くらいの解像度でね。これは特定のハードウェアのエミュレートをするのではなくオレオレだが。wasm側のメモリでVRAMをエミュレートして、それをWebGLに渡して描かせるのである。

2019/6/7 6:05:16

そしてオリジナル波形メモリ音源のwasm化もやってみよう。。

2019/6/7 6:07:13

画面まわりはWebGL2.0になってシェーダーで整数の取り扱いが改善されたので相当楽に実装できそうな気がする。とはいえ私が実装すると相当時間はかかるけどね。。

2019/6/7 6:08:56

PSGのパラメータからEGや波形を作るところはなんかとても面白いコードなんだよなあ。思ってたのと全然違うんだな。これは矩形波でデューティ比固定、さらにはEGも特殊だからこそできる実装というか。。

2019/6/7 6:13:03

ちなみに今の時点でのPSGエミュレータのWASMバイナリのサイズは2689bytesである。わずか2K..。
#WebAssembly

2019/6/8 5:45:30

AudioWorkletをもうちょっと勉強せんといかんね。。

No Image
Web Audio API ( 日本語訳 )

2019/6/9 6:35:10

PSGエミュレータは音はそこそこ鳴るようになったのでUI作ってテストしてみることにした。不具合はまだありですな。。 https://t.co/PLMuTS7yPi

2019/6/9 6:36:12

こういうUIがHTMLでサクッと書けるなんてすごい時代になったよな。。

2019/6/9 8:45:05

まあまあ動くようになった。

Youtube - WASMでPSGエミュレータを作る

2019/6/9 10:44:17

Chromeのみで動作する。。

No Image
WASMでPSG Emulatorを作る
WASMでPSGエミュレータを作る

2019/6/9 18:01:02

ちょっとVRAMについて思案中。リニアメモリのある一角をVRAMとして、WASMからそこに書き込んだらそれをGPUにデータテクスチャで渡して描こうかなと思っている。橋渡しのコードはJSで書く。

2019/6/9 18:01:02

レトロ風のVRAMの構成を考えると、テキストVRAMとビットマップVRAM、そしてスプライト用RAMの3種類が考えられる。

2019/6/9 18:08:01

テキストRAMもWASM側でASCIIキャラクタを書くとキャラクタのビットパターンをGPUで展開することでエミュレーションする。思案してるのはビットマップ用のVRAMとスプライト用RAMなんだよな。160x100もしくは320x200ピクセルくらいのローレゾなグラフィックでパーティクルをやりたいんだな。

2019/6/9 18:19:11

160x100pxだとこんな感じのグラフィックスになる。

160x100pxでゲームを作る

https://t.co/sI8iuTdPzj

2019/6/9 18:21:48

CRT風のポスト・エフェクトをかけてるけどね。動いてるキャラはポイント・スプライトで書いてる。WASM側では軽いパラメータを渡すだけにして、GPU側でいろいろややこしい計算を受け持たせようという算段である。

2019/6/9 18:28:53

VRAM周りの仕様が固まってWASM+JSで実装できたら、

・JSで作った波形メモリ音源をWASM+JSで書き直す
・JSで作ったゲームシステムをWASM+JSで書き直す
・ゲームシステム上で動く横スクロール・シューティングをWASM+JSで作る

で年内は過ごそうかなと。

2019/6/9 18:30:37

まあ趣味なんでどうなるかはわからんけどね。。

2019/6/10 6:10:46

まずはテキストVRAMからか。フォント・ビットマップは美咲フォントを使わせていただくことにしよう。漢字はどうしようか。。漢字対応するとなるとVRAMは1キャラ当たり最低2バイト必要ですな。

2019/6/10 6:10:46

UTF-8文字コードをJIS X 0208に変換して表示するか、もしくはUTF-16に変換して表示するか。。うむぅ。難しいなあ。。

2019/6/10 6:12:16

美咲フォントとはこれですな。ありがたく使わせていただくことにしよう。

No Image
8×8 ドット日本語フォント「美咲フォント」

2019/6/11 21:35:35

160x100はこれくらいだった。ちょっと間違ってた。。 https://t.co/n467t8oA2M

2019/6/11 21:36:34

ただまあこの解像度でもフルカラーだとかなりの表現力がありそうだな。。

2019/6/14 7:36:22

いま美咲フォントを表示するための仮想テキスト VRAMの設計をしている。ここ数日は美咲フォントをどのようにデータ化するか考えてたんだけどようやく考えがまとまった感じ。

2019/6/14 7:45:49

エンコードはutf-16のリトルエンディアンにする。フォントを調べてたらbdfというフォントのフォーマットのデータがあって、それはUnicodeで定義されてた。そして美咲フォントもコードポイントが0xffffまでにおさまってるしね。複合文字とかサロゲートペアは仮想VRAMのレイヤーでは無いことにする😅

2019/6/14 7:56:09

それでbdfファイルの内容を読み込んで、横256キャラ、縦256キャラのキャラクタ用テクスチャに展開するわけですな。そしてそれを使って文字をレンダリングするのですな。1文字8x8pxなので2048ｘ2048のテクスチャとなる。

2019/6/14 8:00:26

テキスト仮想VRAMは40x25で、1文字あたり4バイト確保する。2バイトはコードポイント指定用で、2バイトはアトリビュート用。ブリンクとか色指定とかそういうやつね。なかなか豪勢な仕様ですな。。

2019/6/14 8:04:47

仮想VRAMにコードポイントとアトリビュートを書き込むと、それをシェーダでテキストビットマップに展開する。GPUで昔のCRTコントローラのエミュレーションみたいなことをするわけ。

2019/6/15 4:51:15

フォントデータを256x256(2048x2048px)のビットマップにレンダリングしてみた。ほとんど空白だけどまあこんなもんですわな。。一応ちゃんと変換できとるな。。 https://t.co/tZiWmTgyGK

2019/6/15 4:53:54

なんかこのドット感がいいねえ。。 https://t.co/cyXJVHGxnw

2019/6/15 5:37:13

実際のデータは1px=1bitとして横8pxを1byteにパックしてる。そしてそれが256x256x8個あるから512Kbyteの容量になる。gzip圧縮すると65kbyteくらいの大きさ。

2019/6/15 5:37:14

16GBくらい普通の時代でも、メインメモリが16kとかそういう時代のPCから触ってると512kbyteは巨大データな感がある。

2019/6/15 5:40:09

空白の部分はある程度のブロック単位で詰めて、コードポイントをビットマップ位置に変換するところで吸収しようかなと思ったりもするけどね。。

2019/6/15 5:40:40

そうすると非圧縮でも256Kbyte前後にはなりそうだよね。

2019/6/15 5:47:46

WebGL側にはフォーマットR8のテクスチャでこのデータを収める。そしてピクセルシェーダーで描画位置のテキストVRAMテクスチャからコードポイントを読み出す。

2019/6/15 5:47:46

読み出したコードポイントを使ってビットマップテクスチャの位置を計算して1byteを読み出す。
さらにその１byteから描画対象のビットを求めてそのビットが立っていたら描画する。

2019/6/15 5:48:40

このあたりの処理はWebGL2.0になって整数のビット演算ができるようになったんでとても楽にできるようになったんだよね。

2019/6/16 20:50:49

160x100pxの仮想画面で仮想テキストVRAMを作り、美咲フォントを表示してみた。テキストVRAMは背景８色、文字色８色というもの。ドットがでかいな。こりゃ。 https://t.co/dIIm2JKB5p

2019/6/16 21:07:14

一応パレットやブリンクもサポートしてるという。。あとはアルファもサポートしとけばいいかなと。。

Youtube - 美咲フォントを表示してみる

2019/6/16 21:10:04

なんかでもusampler2Dの動きが思った通りでなくてちょっと悩んでるところはある。とりあえずsampler2Dでしのいでるけどね。usampler2D使うと符号なし整数値でテクスチャルックアップできるからいいな！と思ってたんだけど、実際得られる値がなんか違うんだよなあ。

2019/6/17 4:58:46

これが動くサンプル。

仮想テキストＶＲＡＭの実装

2019/6/17 6:02:09

透過指定属性を追加した。 https://t.co/o649B8HWlD

2019/6/17 6:05:37

テキストVRAMはDWORD値でそれぞれの属性配置は以下の通り
bit0 ... 15 UNICODEコードポイント（utf-16）
bit16 ... 23bit アルファ値(0 ... 255)
bit24 ... 26bit 背景色(0 ... 7)
bit28 ... 30bit 文字色(0 ... 7)
bit31 ブリンク

2019/6/17 6:10:02

これが一応動くサンプル。。

仮想テキストＶＲＡＭの実装

2019/6/17 18:12:56

いやーしかしusampler2dの挙動が今ひとつ分からないなあ。やっぱりね。。

2019/6/17 21:26:03

と思って色々調べたらやはり凡ミスだった。。ああ、すっきりした。。

2019/6/18 4:42:08

とりあえずCRT風ポストエフェクトを外し透過状況がよくわかるようにしたのがこちら。テクスチャのルックアップもusampler2DつかってtexelFetchで処理してみてる。

仮想テキストＶＲＡＭの実装

https://t.co/OsMRNasRSW

2019/6/18 4:42:08

仮想テキストVRAMの読み取りからピクセルを返す手前までがすべて整数で処理できるようになったのはやっぱりすっきりしていいわ。。

2019/6/18 4:43:03

こんなGPUシェーダの使い方してるの私ぐらいかもしれないね。。
#webgl2

2019/6/18 4:45:09

ただ私が持ってるAndroid 8.0タブで実行するとちょっとチラツキが目立つ。おそらくCRT風ポストエフェクトのせいだろうな。オプションにしてフラグでON・OFFするようにしないといけないね。。

2019/6/18 4:46:45

あとはこの仮想テキストVRAMをwasmのメモリにマップすればよいだけだが。さてどうしようか。

2019/6/18 4:48:34

いまのところの考えとしては、メモリはJSで作ってそれを #webassembly にインポートしようと考えている。仮想的なハードウェアのメモリマップをリニアメモリで表現するわけですな。

2019/6/18 5:05:16

仮想テキストVRAMはまあそのメモリの１区画を使用する。たとえばメモリオフセットの0xE000からマッピングするとなると20桁x12行・１キャラクタあたり4バイトだから960バイト確保することになる。

2019/6/18 5:05:16

でその区画をtexImage2D()でテクスチャに割り当てる。
void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ArrayBufferView srcData, srcOffset);

srcOffsetを0xE000にすればいけると思ってるんだよね。

2019/6/18 5:09:20

もしくは
new TypedArray(buffer [, byteOffset [, length]]);

を使って、メモリに対するビューを新たに作ってそれをsrcDataに割り当ててもよいかなと。

let tvram = new Uint32Array(memoryBuffer,0xe000,240);

こんな感じかなあ。。

2019/6/18 5:12:18

キーボードやゲームコントローラのI/OなんかもJSで情報を取得してメモリに書き込む。それをwasmモジュール側で読み込んで処理を行う。JSでハードウェアに近い低レベルな処理を行って、wasmに引き渡すわけですな。

2019/6/18 5:12:19

高級言語で低レベル処理をして、wasmアセンブリでアプリを作るという。逆転現象。。

2019/6/18 5:16:30

オーディオもWebAudio+JSで仮想波形メモリ音源を作ってそれをメモリ経由でwasmからアクセスできるようにする。これも8音ポリくらいで4bit波形メモリ＋EG+LPFくらいの仕様にしようかなと。

2019/6/18 5:19:21

あとはゲーム・キャラクタを動かすエンジンをどうするかですな。いまはポイント・スプライトを使ったスプライト・エンジンを仮組みしてるけど、ローレゾで３Dキャラを動かしたいという欲求も湧き上がってきてるんだよね。。

2019/6/18 5:20:01

メモリ・マップド I/O方式ですな。まさに。

2019/6/18 5:22:35

ただいつもそうなんだけど、ゲーム・キャラクタのグラフィックを描くところでやる気がなえてしまうんだな。。ドット絵って難しいんだよね。絵心がない私にとってはね。。

2019/6/18 5:28:24

今回はその高いハードルを越えるためにあえて160x100というローレゾでチャレンジしようと思うんだな。。量子化の粒度を粗くすれば私にも何とかなるのではないかと（笑）。

2019/6/18 5:32:18

Blenderではなくもっと簡単にモデリングできるツールはないかなと思って、今MagicaVoxelを試そうとしてるという。。3Dペイントでもいいのかなと思うが。FBXのインポータを作ればいんだよな。。

No Image
MagicaVoxel
MagicaVoxel Official Website

2019/6/18 5:33:20

ローポリでやりたいと思ってるんだよね。

2019/6/18 5:34:54

ふーん。。
これは使えそうな予感。。 https://t.co/mtMCrIBrCF

2019/6/18 5:46:24

まあでもいいかあ。Blenderで。ちょっと頑張るか。。そうなると160x100だとローポリであってもちときつい感がしないでもないね。。

2019/6/18 6:04:57

と思ったがこれはいけそうな予感。。 https://t.co/oXFjuKfxbC

2019/6/18 6:06:28

このフォーマットでそれなりなレンダラを作ればいける気がしてきたな。。

voxel-model/MagicaVoxel-file-format-vox.txt at master · ephtracy/voxel-model · GitHub
Contribute to ephtracy/voxel-model development by creating an account on GitHub.