Calenderで@doxasさんがまとめていますので、ここでは要点のみまとめています。詳細について知りたい方は去年の@doxasさんの記事を見ると良いでしょう。分量が多いので一旦投稿してしまいます。間違え等あればご指摘ください。glslとはglslをものすごくザックリ言うと、3Dグラフィックの規格であるOpenGLの規格の中で、GPUでポリゴンの影の色や頂点の位置の計算を行うためのshaderと言われる言語です。2.0をWebで扱えるようにしたものですので、WebGLで使えるshader言語はglslと言ってもいいでしょう。glslの扱う基本的なシェーダーの種類は、バーテックスシェーダーとフラグメントシェーダーの2種類あり、バーテックスシェーダーはポリゴンの頂点の計算を行うシェーダーで、フラグメントシェーダーはポリゴンの影の計算(着色)するシェーダーになります。本来の用途と異なる使い方glslの最大の特徴は、GPUを直接操作する事が出来ることに尽きます。3Dだけではなく2Dについても高速に描画出来る可能性を秘めています。gpu.jsといったグラフィック以外の用途にも用いられています。sandboxや、Shadertoyで良く出てくるレイトレーシングの一種である『レイマーチング』は、バーテックスシェーダーでは、三角形2枚で板だけ作り、フラグメントシェーダーでその板に3Dを描画することによって3D描画を実現している方法ですので、本来のポリゴンで3Dを描画する方法とは全く異なります。レイマーチングで使用されている距離関数を使ったシェイプの描画(2D)も、本来の用途と異なっています。本来、フラグメントシェーダーはポリゴンの影を計算するところであって、シェイプを描画するところじゃない。sandboxや、Shadertoyの世界です。氏の作品カタツムリがどんどん描かれていくyoutubeの動画が流れていると思いますが、このカタツムリ、glslのコードだけで出来ているんです。toyでglslのコードとライブプレビューを見ることができます。カタツムリglslは世界を創造する言語と言っても過言ではありません。Toyは非常にGPUに高負荷な作品が多いサイトです。GPUで暖に取るには最適なサイトですが、高確率でブラウザもフリーズさせます。Sandboxの方を見に行くと良いでしょう。Toyを見に行くのは辞めた方がいいでしょう。高性能なPCでもブラウザがフリーズするときにはフリーズします。Sandboxという名の通り、glslのテストのコードを書くにはうってつけのサイトです。基本的に劣化コピーだらけになるので、『parent』ボタンで大本のソースを参照した方がいいでしょう。元のソースから素晴らしい進化を遂げることがあります。shadertoyからの移植が多いですが、稀に素晴らしい作品に出合えることがあります。いった素晴らしい作品に出合った場合、ブックマークしておきましょう。glslsandboxは検索性があまりよくないので、あとから探そうとすると大変です。複数のバッファ(複数のシェーダープログラムを実行)を持てる為、より複雑なシェーダーのプログラムを作ることが出来ます。シェーダー中級以上になってくるとウェブサイトを検索して解説があるサイトを見つけるのが難しくなってきます。そんなときはShadertoyで英単語で検索しましょう。実現している人が見つかるはずです。ソースコードにリファレンスのurlを載せてくださっている方もいるので、ソースコードのコメントも読んでみましょう。Sandboxや、Shadertoyがフラグメントシェーダーに特化したウェブサイトだとすると、こちらは、バーテックスシェーダーに特化したウェブサイトになります。線や点といった頂点を使ったパーティクルなどが中心です。Sandboxや、Shadertoyからの転載が多いが中にはオリジナルもある。Formatglslで世界を創ってみよう上記glslのプログラミングコード投稿サイトの、オンラインエディターで作品を直接いじってみるのが一番手っ取り早いのですが、そもそも、どこをどういじればいいか分からないと思います。以下の@doxasさんのqiitaの記事を見て、オンラインエディターで作品を作ってみましょう。Shadersを見てみましょう。Shadersこちらも、オンラインエディターを使って、色々試して勉強できるので覚えやすいと思います。Galleryのコーナーにこれから教科書に書かれる内容のギャラリーが並んでいます。詳細な説明はありませんが、チェックしておくといいでしょう。クリエイティブコーディングをしよう!【その1】GLSLで遊ぶ東京工業大学デジタル創作同好会さんのサイトです。こちらでは、glslのフラグメントシェーダーで2Dの星を描く方法が載っています。sminについて書かれているので必見です。パースペクティブ変換と様々なテクニックが一通り紹介されています。よる画像フィルタを色々試してみた@cx20さんによるフィルターまとめ。jsdo.itの方にはもっと投稿されています。3D系レイマーチングで球体を描く@doxasさんのウェブサイトです。2Dはフラクタルと難しいところから入っているので、qiitaの先の記事を読んだ後、こちらからレイマーチング(3D)の学習を進めていくと捗ると思います。氏のウェブサイトでレイマーチングで使う基本図形の一覧を作ってくださっています。@doxasさんのウェブサイトでレイマーチングを学んだら、色々な図形を試してみましょう。記事中、length8とかlength2といった関数はこの記事には用意されていないので注意してください。自分で用意しろってことです。length8やlength2はこちらに乗っています。lengthが円だとすると、lengthNはNが大きくなればなるほど正方形に近づく図形の距離を測る関数になります。invert(m)やprimitve(p)といった関数もありません。ここは、invertの行列を用意しろという意味と各primitveの関数をここに入れるという意味です。GLSLレイマーチング研究_距離関数について勉強してみた上記サイトと合わせて@muripo_lifeさんの『GLSLレイマーチング研究_距離関数について勉強してみた』のシリーズはお勧めです。iqさんの上記サイトにならって図形を実装されていっています。Calendarを見てみましょう。チカラが欲しいか......です。toyの世界を読み解いてみてください。ここまで来れば、レイマーチングなどの基本の部分はどれも変わりがないので、もうコードが読めるようになっている筈です。色々な発見がありますよ。並列にプログラムが実行される他のプログラミング言語と違って、1つのglslプログラムについて、バーテックスシェーダーであれば、頂点数だけ、フラグメントシェーダーであれば、画素数分、同時にプログラムが実行されるところが大きく異なります。浮動小数点の精度のバラつきGLSLの規格で、ざっくり浮動小数点の最低の精度が決まっていますが、実際の端末で使われる浮動小数点の精度が環境によってバラバラで特にモバイル環境で動作しない場合が多いです。影響を受けるのがノイズ関数で、ちゃんと意図した通り表示されない場合は大抵これが原因です。sandboxでiPhoneで意図したとおりに見えないのは大抵これが原因です。c);}に書き換えてあげることで動作するようになります。モバイル環境用にノイズ関数を書くには他注意点for文のループ回数を動的に出来ない。if文はあまり使わない方がいいらしい基本bit演算は使えない。将来のために予約はされている。gamesglslsandboxで作品を作っていく過程が記事になっています。非常に参考になります。Blogこのサイトでしかないようなglslの技法が載っています。Baldwin氏のウェブサイト恐らく最初にglslでrandam関数を考案した人、最近は、modでリプリケーションしたオブジェクトを別々の動きをつけてパーティクルのように見せる手法を紹介している。requestStockLike57@7CITglslでフルシェーダーでゲームのエフェクトを作っています。