自作WASMプリプロセッサとWeb要素技術を使ってレトロ・シューティングを作る
-
- いいね！0
S.F.
@SFPGMR
MagicaVoxelのデータをレンダリングするライブラリ。 私もパーサ部分を使わせていただいてる。 github.dev7.jp/vox.js/
2019-06-25 20:14:21
S.F.
@SFPGMR
ボクセルを立方体でレンダリングするとちょっとコストが気になるんでね。また、この方法でレンダリングするとちょっと面白い表現になるかなと思ってるんだよね。
2019-06-25 20:13:14
S.F.
@SFPGMR
ボクセルは小さな立方体なのだから、各面の法線も簡単に求めることができるよなあ。あとは隣接面によって無効となる法線をあらかじめ調べておいて、ボクセルが視点から見てどの面を向いているか判定できればなんとか所望のものができそうな気がしている。
2019-06-25 20:09:43
S.F.
@SFPGMR
ここではボクセルを立方体として扱うのではなく、ピクセルの拡縮で表そうとしている。1x1pxのビルボードですな。そのピクセルのライティングをどうするかの話。内部的には立方体として取り扱って、その点のライティング処理をそれなりに行おうとしてるんだな。。
2019-06-25 20:08:44
S.F.
@SFPGMR
やっぱり「なんちゃって法線」はもう少し工夫しないと「らしく」見えませんな。こりゃちょっとおかしいわ。。 youtu.be/axs2AsDIq08
2019-06-25 05:28:19
S.F.
@SFPGMR
さてボクセルで作られたオブジェクトを１キャラとして、複数キャラを同時表示する部分を作ろうか。たぶんこれくらいの解像度（160×100px）であればよっぽどひどいコードを書かない限りパフォーマンスで足を引っ張ることはないだろう。。
2019-06-24 06:23:43
S.F.
@SFPGMR
ボクセルデータのなんちゃってライティングのいまいまの状況。40x40のボクセルで試してみた動画。なんか点光源のライティングみたいな感じになってる。自分としては平行光源＋環境光でライティングしてるつもりなんだけどね。。 youtu.be/JCccDjscqX4
2019-06-23 16:43:26
S.F.
@SFPGMR
と思ったが、立方体を回してみるとやっぱり法線に変わりのベクトルの処理がいい加減だから、立方体に見えん。これはちょっとな。。 youtu.be/JMnYjYdXnBo
2019-06-22 16:35:23
S.F.
@SFPGMR
あとはボクセルで構成された複数キャラクタを同時表示できるようにすればとりあえずは完成かな。。ピクセルを粗くすることによっていい加減でもそれなりに見えるという目標は自分の中では達成したかなと。。
2019-06-22 09:53:33
S.F.
@SFPGMR
フレームバッファのサイズは160x100pxという小さなもの。そこに描画するからピクセルが際立つ画像になるわけですな。当然アンチエイリアスはなし。
2019-06-22 09:41:56
S.F.
@SFPGMR
ちなみにキャラはボクセルのメッシュを作ってそれを組み合わせて面を作るのではなく、各ボクセル=1ピクセル（Z=0）として表示してる。ピクセルはZ座標に応じて拡縮させてる。
2019-06-22 09:40:02
S.F.
@SFPGMR
並行光源＋「ライティングしてる風見えるいい加減ベクトル」によるライティングを実装してみた。これくらいで十分かもな。ピクセルサイズはZ座標に適当にバイアスをかけて算出するようにしてる。 youtu.be/pNCJycnLDUY
2019-06-22 09:13:09