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

公開:2016-04-19 21:40
更新:2020-02-15 04:37
カテゴリ:PCグラフィックス,javascript,webgl,html5,glsl,WebGLでレトロPCグラフィックスを楽しむ

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

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

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

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

動作サンプル

新しいウィンドウで開く

ソースコード・リソース

/dev/graphics/devver/20160419/css/sfstyle.css

/dev/graphics/devver/20160419/index.html

/dev/graphics/devver/20160419/js/bundle.js

/dev/graphics/devver/20160419/res/bd1_lz.json

/dev/graphics/devver/20160419/res/bd2_lz.json

/dev/graphics/devver/20160419/res/closed_lz.json

/dev/graphics/devver/20160419/res/cowbell_lz.json

/dev/graphics/devver/20160419/res/crash_lz.json

/dev/graphics/devver/20160419/res/handclap_lz.json

/dev/graphics/devver/20160419/res/hitom_lz.json

/dev/graphics/devver/20160419/res/lowtom_lz.json

/dev/graphics/devver/20160419/res/midtom_lz.json

/dev/graphics/devver/20160419/res/open_lz.json

/dev/graphics/devver/20160419/res/ride_lz.json

/dev/graphics/devver/20160419/res/rimshot_lz.json

/dev/graphics/devver/20160419/res/sd10_lz.json

/dev/graphics/devver/20160419/res/sd11_lz.json

/dev/graphics/devver/20160419/res/sd1_lz.json

/dev/graphics/devver/20160419/res/sd2_lz.json

/dev/graphics/devver/20160419/res/tamb_lz.json

/dev/graphics/devver/20160419/test.html