WebGL
GLSL

glsl 出来ること出来ないこと

glsl 出来ること出来ないこと

画面出力に関しては、画面解像度の最小単位、1ドット毎の出力コントロールが出来るので、理論上は出来ないことはないと言える。但し、その処理が重いかどうかは別問題。そこで、この記事では、glslの得意なことと不得意なことを挙げていく、尚、バーテックスシェーダーとフラグメントシェーダーでそれぞれ、glslの得意なことと不得意が変わってくるので、それじれの項目で挙げていく

フラグメントシェーダー

不得意なこと

文字の表示

ベジエ曲線での描画が困難。glslでのシェイプ描画方法であるディスタンスフィールドと互換性がない。文字については、頑張ってディスタンスフィールドで作って、ASCII文字(A-Z 0~9)を表示できるようにしたものがある。すべての漢字に対応したものは見たことがない。フラグメントシェーダーしか使えないshadertoyやglslsandbox上で漢字を表示するのは困難である。

ベジエ曲線の表示

ベジエ曲線での描画が困難。glslでのシェイプ描画方法であるディスタンスフィールドと互換性がない。
ベジエ曲線のディスタンスフィールドは実装が存在するが、複数パスを持つベジエ曲線は、塗りの問題があったり、大量の頂点を配列の扱うのが難しい為、なかなか実装が難しい。バーテックスシェーダーでベジエ曲線を描く方法は割と多く見かけることが出来、頑張れば実装できる。

タイムライン処理

状態の保存が出来ないため、常にすべてのタイムラインを演算する必要がある。それも、毎フレーム毎、全ピクセル分でプログラムが実行されるため、とても効率がが悪い。タイムラインが長くなればなる程に重くなる。if文による条件分岐で少しは軽くすることが出来るが、そもそも、glslは条件分岐も得意じゃない。glslsandboxやshadertoyに投稿するのでなければ、タイムライン処理はJavaScriptに任せた方がいい。

得意なこと

フィルター処理

After EffectsやPhotoshopにあるようなフィルターを簡単に書くことができる。
但し、After EffectsやPhotoshopのフィルターの仕組みを知っている必要がある。

塗り

ポリゴンの影を付ける言語ゆえに、塗りの自由度は極めて高い。
PhotoshopやIllustratorで1つの操作で出来ない塗りも楽々こなす。
但し、PhotoshopやIllustratorの塗りの仕組みを自分で作る必要がある。

バーテックスシェーダー

不得意なこと

塗り

バーテックスシェーダー単体で塗りを行うのは厳しい。頂点に色を付け、それを群体として、点や線、面を使って塗りのようなものを再現することは出来る。その場合でも少なくとも色の出力をフラグメントシェーダーで表示できるようにしておく必要がある。逆にこれを利用して、画像を分解して飛び散らせる処理などはバーテックスシェーダーの方が向いている。

得意なこと

パーティクルの描画

頂点情報をパーティクルの情報として扱えば、高速なパーティクルの描画が可能になる。但し、glslは情報の保存が出来ないので、パーティクルの情報をテクスチャーに焼き込んで使用する必要がある。

文字の表示

Three.js等のライブラリを利用することで文字を表示するのは比較的簡単かつ、低負荷である。
尚、コード自体は複雑なので、ライブラリを用いず自分でバーテックスシェーダーを書こうとすると大変である。
テッセレーションを用いて実現しているので、曲面が角張り易いという問題がある。

ラインアート、ドットアート

座標によって大きさや幅が変わらない点や線によるアートを作ることができる。
だが、実際には円を線状に伸ばしたものが使われたりするので、あまり、活用できる事例はなかったりする。大量に線と点を扱う場合には有効。また、最初から、角ばった表現を利用したいときなど