Loading

S.F. Info.

しろ@siro700

2019/6/25 21:41:00

木曽駒ヶ岳から見下ろす夜の街、夜、こっそり山小屋から出て徘徊するの面白いですよ https://t.co/43JMONZF31

S.F.@SFPGMR

2019/6/26 20:25:14

おお、ボクセル・モデラをまた発見。

No Image
MOG3D 紹介

S.F.@SFPGMR

2019/6/26 18:11:38

うーむ。クォータニオン使えばジンバルロックを回避できるのか。。

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なので2048x2048のテクスチャとなる。

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を読み出す。
さらにその1byteから描画対象のビットを求めてそのビットが立っていたら描画する。

2019/6/15 5:48:40

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

2019/6/16 20:50:49

160x100pxの仮想画面で仮想テキストVRAMを作り、美咲フォントを表示してみた。テキストVRAMは背景8色、文字色8色というもの。ドットがでかいな。こりゃ。 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

これが動くサンプル。

仮想テキストVRAMの実装

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

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

仮想テキストVRAMの実装

2019/6/17 18:12:56

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

2019/6/17 21:26:03

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

2019/6/18 4:42:08

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

仮想テキストVRAMの実装
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はまあそのメモリの1区画を使用する。たとえばメモリオフセットの0xE000からマッピングするとなると20桁x12行・1キャラクタあたり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

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

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.

2019/6/18 6:07:27

1ピクセル=1ボックスみたいな感じでできんやろか。。

2019/6/18 6:08:35

これはやる気がちょっと出てきたよ。。

2019/6/18 6:35:36

9x9くらいがよさそうですなあ。。 https://t.co/YxpbBOrvQO

2019/6/18 6:53:37

.voxファイルのフォーマットって、RIFFですがな。。

2019/6/18 6:54:43

wavファイル読むときに書いたよな。RIFF読むやつ。。

2019/6/18 7:27:13

あれだなあ。ジオメトリシェーダとかテッセレータとかあれば一点から指定された正方形のボクセルを生成できるような気もするが、その手はwebgl2では使えんしなあ。。

2019/6/18 7:30:32

今考えてるのは各ボックスの座標をポイントスプライトの頂点として渡してあとはゴニョゴニョしてできんかなという感じ。

2019/6/18 7:37:30

あとはトランスフォームフィードバックとか頂点シェーダでのテクスチャサンプルあたりを使ってなんとかできんかな。。

2019/6/20 18:31:07

ポイントリストでどんな感じになるか試そうとしてる。もうすぐコードはできる。

2019/6/21 5:42:55

一応表示できたけど、微妙に違う気が。。 https://t.co/VBZ2mZFalh

2019/6/21 6:16:38

2倍に引き伸ばして回してみた。ギリギリX軸回転しとるのがわかる。。ライティングが適当すぎるのでちゃんとやらんといかんな。。

Youtube - 160x100でボクセルデータをレンダリング

2019/6/21 6:20:48

でもいけそうですな160x100pxでボクセルデータ表示は。これでキャラ作成はなんとかいけそうだ。。

2019/6/22 6:20:27

ライティングちゃんとやろうと思ったら、法線ベクトルは必要ですわな。法線のことすっかり忘れてた。。

2019/6/22 6:23:28

うまいこと法線を計算で求める方法はないだろうかの。。

2019/6/22 9:13:09

並行光源+「ライティングしてる風見えるいい加減ベクトル」によるライティングを実装してみた。これくらいで十分かもな。ピクセルサイズはZ座標に適当にバイアスをかけて算出するようにしてる。

Youtube - voxファイルの表示

2019/6/22 9:13:53

こんないい加減でもそれなりに3Dに見えるのが不思議ですわな。。

2019/6/22 9:40:02

11X11ボクセルのキャラを表示してみる。うむ。まあまあそれらしく表示されるね。

Youtube - Voxデータの表示

2019/6/22 9:40:02

ちなみにキャラはボクセルのメッシュを作ってそれを組み合わせて面を作るのではなく、各ボクセル=1ピクセル(Z=0)として表示してる。ピクセルはZ座標に応じて拡縮させてる。

2019/6/22 9:41:56

フレームバッファのサイズは160x100pxという小さなもの。そこに描画するからピクセルが際立つ画像になるわけですな。当然アンチエイリアスはなし。

2019/6/22 9:53:33

あとはボクセルで構成された複数キャラクタを同時表示できるようにすればとりあえずは完成かな。。ピクセルを粗くすることによっていい加減でもそれなりに見えるという目標は自分の中では達成したかなと。。

2019/6/22 16:35:23

と思ったが、立方体を回してみるとやっぱり法線に変わりのベクトルの処理がいい加減だから、立方体に見えん。これはちょっとな。。

Youtube - ボクセルで作った立法体を回す

2019/6/23 16:43:26

ボクセルデータのなんちゃってライティングのいまいまの状況。40x40のボクセルで試してみた動画。なんか点光源のライティングみたいな感じになってる。自分としては平行光源+環境光でライティングしてるつもりなんだけどね。。

Youtube - Voxelデータの表示ーなんちゃってライティング

2019/6/23 16:45:09

なんか粗いポリゴンっぽい感じだけど、これはボクセル=ピクセルとしてレンダリングしてるからね。

2019/6/23 17:18:48

なのでピクセル単位で動かすなんちゅうのもできるわけですな。。

Youtube - Voxelデータの表示-ポイント単位で動かす

2019/6/24 6:23:43

さてボクセルで作られたオブジェクトを1キャラとして、複数キャラを同時表示する部分を作ろうか。たぶんこれくらいの解像度(160×100px)であればよっぽどひどいコードを書かない限りパフォーマンスで足を引っ張ることはないだろう。。

2019/6/24 6:24:19

ライティングはまだまだ改良の余地はあるけど、先に進めようと思う。

2019/6/24 7:58:29

と思ったらライティング用の逆行列の計算間違っとる。。

2019/6/24 7:59:29

こりゃ思ったとおりにならないはずだ。またしても凡ミスですな。。

2019/6/25 5:28:19

やっぱり「なんちゃって法線」はもう少し工夫しないと「らしく」見えませんな。こりゃちょっとおかしいわ。。

Youtube - Voxelデータの表示

2019/6/25 6:09:29

これが今のところの成果物。。

voxファイルの表示

S.F.@SFPGMR

2019/6/24 21:46:24

あかん。今日はフワフワしためまいのような感じがすごくて気持ちが悪いなあ。。

2019/6/25 5:29:47

ここ2-3日の気温の乱高下は体にこたえるな。ものすごく疲れている。。

S.F.@SFPGMR

2019/6/23 20:08:42

Youtube - ADAMSKI - Killer

2019/6/23 20:12:12

Youtube - Adamski, N-R-G - 1990

2019/6/23 20:15:39

TR909が持てはやされた1980年後半〜1990年あたりの曲。909のシャカシャカハイハットが全面にでてるという。。

Youtube - ADAMSKI 'LIVEANDIRECT' (full album) 1989

2019/6/23 20:18:20

LFOの「LFO」。シャカシャカ言ってるこの曲も繰り返し聴いたね。何がいいんだか。。

Youtube - LFO - LFO (Leeds warehouse mix)

S.F.@SFPGMR

2019/6/23 20:06:46

Youtube - 向井太一 / I Like It (Official Music Video)

ベレッタ@雛厄@beretta8989

2019/6/22 18:10:15

奈良県民の私が、天理周辺の古墳散策の仕方を教えるね。
・池があったら古墳ある
・柿畑や墓地にしか見えなくても古墳
・小高い森や林はほぼ古墳
・それが神社だったとしても境内に古墳ある
・SHARPの工場だったとしても中に古墳ある
・怪しいと思ったら案内板が無くても大抵古墳

S.F.@SFPGMR

2019/6/23 17:56:08

おお、このアセンブラニーモニックは68000ですな。。

Yuji Naka / 中 裕司さんのツイート: "Happy Birthday Sonic 28th. This is a 1990 photo of Sonic 1 under development. And Sonic 1 is a program to examine the ground. 誕生日おめでとうソニック!28回目だね。これはソニック1開発中の1990年の私の写真とソニック1の地面を調べるプログラムです。 #Sonic28th… https://t.co/ZcDke4Zl1x"

2019/6/23 18:00:11

ソニック・ザ・ヘッジホッグの初版はメガドラだからそりゃそうか。。

S.F.@SFPGMR

2019/6/22 16:38:13

Shadow Of The Tomb RaiderがSteamで安くなってたのでつい購入してしまった。。

Youtube - シャドウ オブ ザ トゥームレイダー ”Launch"トレーラー 日本語吹き替え版

Ken Nishimura / 西村賢@knsmr

2019/6/21 9:09:45

全ての球は同じ色だそうです。しかも、その色というのは、、、茶色! はあ?

そんなん分かるわけないやんw 拡大しても分からない。ならピクセル単位で確認だ。直感か計測か。両方大事に決まってるけど、これを見ると直感はアテにならんと思いますよね(というのも、たぶん一種の錯覚) https://t.co/ZXbxKO7DAG

S.F.@SFPGMR

2019/6/21 7:24:06

夏の組み合わせ決まったか。。
chibanippo.co.jp/news/sports/60…

2019/6/21 7:27:49

習志野は順当に勝てばベスト8で成田、ベスト4で木更津総合と対戦か。。やはり厳しい道のりですな。でもし決勝までいけばあの専松と再戦か。まあわからんけど。

2019/6/21 7:34:48

専松、木総はエース級が2人いるからね。習志野は飯塚くん以外は今ひとつピリッとしないところがあるもんな。。打力においても2校に比べて劣る気もするしね。。

2019/6/21 7:34:49

専松、木総との夏の決勝の観戦結果は過去全敗なので、今年こそ行ってほしいところだけどね。。

S.F.@SFPGMR

2019/6/19 10:23:15

自作のWASMプリプロセッサを使ってPSGエミュレータを作った。|sfpgmr @SFPGMR|note(ノート)

自作のWASMプリプロセッサを使ってPSGエミュレータを作った。|sfpgmr|note
mwasmという自作のプリプロセッサ拡張がわりと使えるようになったので何か書いてみようと思った。PSGが興味の対象となっていたので、Cで書かれたエミュレータ・ソースコードを移植してみることにした。 元のソースコードはem2149.cというもので、Cで書かれた短いものである。psgのエミュレータのソースコードはたくさんあって、おそらくmameのものが一番有名じゃないかなと思うんだけど、このコードは短くてすっきりしていたので、移植のターゲットにはもってこいだと考えた。これをwasmテキスト・フォーマットでハンドで移植することにした。以下がそのソースコードである。 sfpgmr/

S.F.@SFPGMR

2019/6/13 18:58:29

こんなに種類があったのですね。。魂斗羅って。。

なるおさんのツイート: "KONAMI 50周年記念シリーズ「アニバーサリーコレクション」!往年のアーケード・家庭用ゲームが最新ハードで復活! https://t.co/0gcyfeVp8C #レトロゲーム #KONAMI50th トレーラー映像で次々に紹介される作品名が「魂斗羅」「魂斗羅」「CONTORA」「コントラ」って冗談みたいに続く感じがエモ"

Takafumi Ikeda@ikeike443

2019/6/12 7:46:08

まさにこれを日本企業の人にもお伝えしてるのですが、あまりピンとは来ないみたい。日本ではこういう変化はまだ起こってない。(起こってる現実をまだ認識できてない) / “米国企業のデジタルトランスフォメーションとはソフトウェア企業になること | On Off and Beyond” htn.to/2TR4GAdhUY

Sushi on fire📛@Harage_Gohan

2019/6/11 11:41:26

俺は左のことをポン酢って呼んでるんだがよう、世間的には右がポン酢らしいじゃねえか…!
ムカつくゼェ!右はポン酢醤油だろうが!お前らは左をなんて呼んでんだよ!
「ポン酢買ってきて」で左買ってったら何これって言われるんだよあぁ!?自分の世間知らずを棚に上げやがってぇ!ムカつくゼェ!!! https://t.co/S7qIdvvmQG

S.F.@SFPGMR

2019/6/11 18:04:08

リアルタイムレイトレーシングがPCでできるようになるとはすごい時代になりましたな。。

PC Watchさんのツイート: "AMD、リアルタイムレイトレーシングを次世代RDNAでサポート~Windows 10 May 2019 UpdateでCPUが高クロックへ復帰する時間が20倍高速に https://t.co/SL4SoPtBEF… "

えぬおう@enuou1000

2019/6/10 0:12:14

テトリスとシューティングを混ぜたらどうなるか実験
#petitcom #プチコン4 #NintendoSwitch https://t.co/uwTlCDrWoK

herumi@herumi

2019/6/8 18:13:20

IntelがMKL-DNNの中でXbyakを独自拡張してAVX512_BF16に対応させてるけどバグってるぽいから、(既にサポート済みの)本家を使ってみてはと提案してみた。
github.com/intel/mkl-dnn/…
... 結構貢献してるし、第二世代Xeon SPマシンとか寄付してもらえないかな(まだAVX-512マシンン持ってない 笑)。

S.F.@SFPGMR

2019/6/8 16:57:34

まあ若いお方の曲を聴いたらなぜかヨーロッパ特急が無性に聴きたくなって。この振り幅のおおきさよ。。

Youtube - Trans Europe Express (2009 Remastered Version)

2019/6/8 16:57:35

この曲は無機質な演奏をパーカッション以外人力でやってるところがこの時代らしいところなのですな。とはいえ手癖は出てて、ドラムも微妙にハネてるような気がするし、ベースも少し音がずれてるしね。。

2019/6/8 16:57:35

ストリングスはオーケストロンというメロトロンとは違うアナログ・サンプリングキーボードを使ってるということを最近知りましたが。

S.F.@SFPGMR

2019/6/8 15:53:31

かっこいい。。私のようなおっさんはホンダのCMでしか知ることはできん。。

Youtube - SIRUP - Do Well (Official Music Video)

2019/6/8 15:56:36

正直、私は日本のR&Bはちょっと。。と思うとこがあったんだけど、サチモスあたりからその考えは改めることにした。。

2019/6/8 15:58:11

少なくとも20年前はこんなかっこいいR&Bの曲を作るアーティストはいなかったね。。

2019/6/8 16:05:19

日本語がやっぱりノリにくいのかなあとか思ったりしてたんだけど、それを見事に乗り越えたよな。今のひとたちは。。

2019/6/8 16:05:19

私が20代のころだと、オリジナル・ラブの初期あたりがいいなあと思ってはいたけど、やっぱりなんかちょっと違うなあ。。とも思ってた。。ものすごいいい曲なんだけどちょっとやっぱり日本人的というかね。それが悪いということではないのだが。。

Youtube - 01 SCANDAL-Sunny Side of Original Love

2019/6/8 16:05:19

海外では受け入れられんだろうなあ。。みたいな感覚かなあ。もちろん言語的な壁はあるんだけど、それ以外のなんかですな。。

2019/6/8 16:08:32

R&Bが何なのかはっきりわかってなくて言っているけど。R&Bやソウル、アシッド・ジャズあたりの範疇の話といえば多少は正確になるのだろうか。。

2019/6/8 16:17:03

ちょっとジャンルは違うかもだけど、このボーカルも洋楽に日本語をうまく載せてるなあ..と思う。すごくフィットしてる感じがする。すごい進化だと。

Youtube - 平井 大 / Life is Beautiful (Music Video)

2019/6/8 16:19:17

サチモスも今聴くとその点少しものたりないかもしれんなあとか偉そうに思ったりとか。この曲はベースがすごすぎるけどね。。

Youtube - Suchmos - STAY TUNE [Official Music Video]

2019/6/8 16:23:18

「ろっかまいべいびい」。もちろん名曲だけど、これを平井さんが歌唱をするとどうなるだろうかとちょっと思う。ただ歌詞がもつ韻だとか、そういうのも歌唱に影響するから、あんなかっこよく歌えるのかというとわからんけどね。。

Youtube - 細野晴臣 - ろっか・ばい・まい・べいびい

2019/6/8 16:23:18

細野さんのボーカルもいいんだけどね。もちろん。。

2019/6/8 16:26:49

歌詞の構成だとか韻の踏み方だとか英歌詞の入れ方だとか歌唱法だとかの組み合わせ方が進化したのだろうな。あとは海外の曲がすぐ聴ける今の環境も進化に寄与したのだろうな。。

Tierney Cyren@bitandbang

2019/6/6 17:24:33

Top-level Await is now Stage 3 💛

github.com/tc39/proposal-…

S.F.@SFPGMR

2019/6/7 17:52:12

なんだこのむしむしした感じは。。

S.F.@SFPGMR

2019/5/30 20:14:53

無性に都こんぶが食べたくなってファミマで購入。。

S.F.@SFPGMR

2019/5/28 20:39:47

宮っ子ラーメン食べたいなあ。。