WebGL + GLSLで作ったレトロPC風グラフィックス画面で、キャラグラで人物の動画表示を行う - WebGLでレトロPCグラフィックスを楽しむ(18)

公開:2016-04-23 23:10
更新:2017-09-22 05:40
カテゴリ:PCグラフィックス,javascript,webgl,html5,glsl,WebGLでレトロPCグラフィックスを楽しむ

40x25の8色キャラ画面で、チェッカーキャラクターを使った動画表示を行ってみた。

https://68.media.tumblr.com/328eabbf89f34fcf965c9b2e050febde/tumblr_o6dtpqnLkJ1s44dwzo1_540.png

動画の素材は以下のサイトのものを使用した。

http://movietips.websozai.jp/movietips_pre/

当然そのままでは使えないので、ffmpegを使って顔部分をアップにし、40x25px、20FPSのpngファイルに落とし、nodeで8色チェッカーのキャラクタと色データを作って表示している。ffmpegは便利だし、nodeもpngのライブラリとかも普通あってとても便利だ。こういうコンソールでの作業にnodeはもってこいだ。

一応チェッカーキャラクタと背景色・文字色で27色の表現が可能だ。RGB各3階調の能力はあるのだが、やはりそれでは人物は難しく、時間方向のディザリングを施し、各色9階調、729色までの色表現を可能にしたつもりだ。ほんまかいな。

この時間方向のディザリングという手法は、以下の記事を参考にしてみた。MZ-700を極限まで使いこなして動画再生を行っている。アイマスというのはよくわからないが・・。

http://homepage3.nifty.com/takeda-toshiya/mz700/imas.html

がしかし時間方向のディザリングは見づらいな。やっぱり。かなりチラつくな。バグっているかもしれないけど。

40x25では粗すぎて、近くで見るとかなりきついが、目を細めたりして意図的にピントを外すというかぼやけさせるとちゃんと女性のカラー動画であるということがわかる。画面から1.5mくらい離れるとかなりよくわかる。

音は一応4bitサンプリングで、同期して流すようにしている。が、結構ノイズが載っている。無音部分はカットしたが。

動作サンプル

新しいウィンドウで開く

ソースコード・リソース

/dev/graphics/devver/20160423/css/sfstyle.css

/dev/graphics/devver/20160423/index.html

/dev/graphics/devver/20160423/js/bundle.js

/dev/graphics/devver/20160423/test.html