WebGL + GLSLで作ったレトロPC風グラフィックス画面で、キャラグラで円を描く - PCグラフィックスを懐かしむ。楽しむ。(15)

公開:2016-04-19 21:40
更新:2017-07-29 13:18
カテゴリ:pcグラフィックス,javascript,webgl,html5,glsl,古典的グラフィック技術を懐かしむ

そういうわけで流れはキャラグラへ。まず作ってみたのがこれ。円と矩形が交互に描画される。静止画だと「なんだこれ」だけど、動くものを見てもらうと残像の効果によってグラデーションがかかっているように見える。

https://68.media.tumblr.com/e16c2048a070e575b02be56fd2052810/tumblr_o5vs2sDLe51s44dwzo1_540.png

でも矩形はいまいちだなぁ。

https://68.media.tumblr.com/0986116468e9a14467c5a87606ff2358/tumblr_o5wc2ywSq01s44dwzo1_540.png

動くデモ:

https://github.sfpgmr.net/graphics/devver/20160419/

ソースコード:

https://github.com/sfpgmr/graphics/tree/ba973e695625fb69bebaf3c0d1e53c1c42c4ff87

こういうのはシェーダーのサンプルとか,昔のデモとかで見かける。それをキャラグラで実装してみた。チェッカー模様で中間色を作り、それを使ってアニメーションしてみている。 JSから書き込む描画バッファはMZ-700のテキスト、アトリビュートRAMの構成とほぼ同じなので、チェッカー模様を画面一杯に敷き詰め、色だけを変えてアニメーションしている。

色の組み合わせの理屈がよくわかっていなくて、狙った色が出せないのが今のところの課題。