Loading

S.F. Info.

S.F.@SFPGMR

2019/6/27 3:53:06

これすごいな。。

デイリーガジェットさんのツイート: "日本でファミコンやPC-88が圧倒的なパワーを持っていた時代に、欧州や北米市場で人気を博したホビーパソコンのコモドール64復刻版「The C64」が今年12月に登場 小型化でなくフル機能フルキーボード搭載で、素晴らしいことに当時のままプログラミングもできます #コモドール64 https://t.co/jW7SiH8HWR"
“日本でファミコンやPC-88が圧倒的なパワーを持っていた時代に、欧州や北米市場で人気を博したホビーパソコンのコモドール64復刻版「The C64」が今年12月に登場
小型化でなくフル機能フルキーボード搭載で、素晴らしいことに当時のままプログラミングもできます
#コモドール64
https://t.co/jW7SiH8HWR”

しろ@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

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
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を作る

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でゲームを作る
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の実装
仮想テキスト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の実装
仮想テキストVRAMの実装

2019/6/17 18:12:56

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

2019/6/17 21:26:03

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

2019/6/18 4:42:08

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

仮想テキストVRAMの実装
仮想テキスト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

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ファイルの表示
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"
“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”

2019/6/23 18:00:11

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