GLSLの練習をしようかなと。
主にVertexShaderとFragmentShaderを編集・実行できるようにして、個人的な課題が出来たらシェーダーを追加するみたいな感じでやっていこうかなと。
uniform float frame;- 経過フレーム数。一応整数だがfloatでくる。
uniform vec2 mouse;- マウス座標が帰ってくる。
- 値の範囲は縦横共に0～1
uniform vec2 resolution;- 解像度。Canvasの大きさが入っている。
- 最初の状態での初期値は縦横共に512だがサイズ変更すると変わる。
uniform sampler2D backbuffer;- 前の描画内容。
思いついたらメモ。
- 炎（挑戦中）
- 旅の扉
- ドラクエの旅の扉っぽいものもできるような気がするのでやってみたい。
- 任意テクスチャが必要
- 円のくり抜き
- マリオの何かで見た、指定座標を中心とした円がどんどん小さくなって、画面が黒くなる演出。
- ゲームオーバーとかステージ移動のやつ。
バックバッファを使いたいため、以下のようにやっている。
- まずバックバッファに真っ黒な状態を描画する
- バックバッファをシェーダーに転送し、フロントバッファに描画するようにする
- フロントバッファに描画結果が入るので、それを実際のCanvasに描画する
- バッファを入れ替える
- 上から2番目に戻る
この仕様上、勉強のために書いているシェーダーはバッファへの描画となり、実際の描画は全く別のシェーダーが必要になる。 バッファはテクスチャとして取得可能なので、完全にその中身を転写するシェーダーとなる。
拡大時のアンチエイリアスについてはCanvasの拡大縮小によって発生するので、CSSの image-rendering 指定の変更で実現している。
そのため、対応していないブラウザには効果がない。
- テクスチャの指定
- 何かに対するエフェクトとかフィルタの練習になるので。
- プリセット設定
- 大きさとか諸々設定できないか。
- optionに値でも入れておくか。
- ヘルプとか