数学がデジタルアートに！
高速なシェーダで可視化する数学の世界
本日のテーマ
高速なシェーダで可視化する数学の世界 と題してお送りする本日のセッション。
正直なところ、かなり大げさなタイトルになってしまっていますが、堅苦しいことは抜きにして、楽しく聞いていただければと思います。
いつもとちょっと違う雰囲気で緊張します（笑）
はじめに
さて、唐突ですが、みなさんは WebGL や GLSL という言葉をご存知でしょうか。
私は WebGL がとても好きです。
三度の飯より好きです。
はじめに
ただ、WebGL が好きであることと、技術的に優れているだとか、三次元数学に長けているだとかということは、別問題です。
そうです。
はじめに
ただ、WebGL が好きであることと、技術的に優れているだとか、三次元数学に長けているだとかということは、別問題です。
そうです。
別問題なんです！
はじめに
要はなにが言いたいのかというと、必ずしも数学ができなくちゃ WebGL やシェーダが触れないとか、数学を極めなければプログラムを書くのに支障が出るとか、そんなことは全然ないんですね。
なんとなく WebGL というとすごく難しい技術を使うものみたいに思われてしまいがちですが……
はじめに
要はなにが言いたいのかというと、必ずしも数学ができなくちゃ WebGL やシェーダが触れないとか、数学を極めなければプログラムを書くのに支障が出るとか、そんなことは全然ないんですね。
なんとなく WebGL というとすごく難しい技術を使うものみたいに思われてしまいがちですが……
実際難しいです！！
はじめに
でも、楽しく続けていく ことができれば、少しずつでも理解は深まっていき、やがて自分の思ったとおりの表現やシェーダの記述が行えるようになります。
今日は、WebGL やシェーダについて知るというよりは、まずは実際に体験してみて、その楽しさを知ってもらえたらという思いで資料を作成してきました。
ぜひ一緒にシェーダの楽しさを感じてみてください。
予備知識
さて、まずは予備知識を少々、先にお話ししておきましょう。
WebGL は、OpenGL ES の javascript 版です。WebWorkers や WebAudio などと同じように javascript の API としてブラウザ上で利用することができます。ただ、WebAudio などとちょっと違うところがあるとすれば、グラフィックスに特化している API であり、GPU を利用した処理を行うことができることから、ハードウェアの制約を受けやすいという特性があります。
予備知識
現状では、PC であればほぼ全てのモダンブラウザが WebGL を実行でき、OpenGL ES の実行が難しいハードウェアというのはほとんど無いと言っていいでしょう。
モバイルに目を向けてみても、iOS 8 以降の Safari、Android 5 以降の組み込みブラウザなら、まず間違いなく実行が可能です。
さくっと書いたシェーダを、簡単にモバイル端末でプレビューすることもできるというのは、数年前までは考えられなかったですよね。
デバイスの進化ってすごい！
GLSL
今回は、そんな WebGL を使って、GLSL と呼ばれるシェーダ言語を記述してみましょう。
GLSL は、言わば OpenGL 専用のシェーダを書くための言語です。GLSL は WebGL や OpenGL だけでなく、Unity などでも利用することができます。
なぜ数学勉強会に GLSL？
GLSL は、実行環境に搭載されている GPU を利用することで、非常に高速な描画処理を行うことができます。
昔は何時間も掛けてレンダリングしたようなレイトレーシングの 3DCG が、現代では普通にブラウザ上で、しかもリアルタイムに実行できてしまいます。
とても高速な GLSL の特性を活用すれば、数学的な模様やフラクタルなども高速に描画することができます。
なぜ数学勉強会に GLSL？
興味深い数学のアルゴリズムなどをシェーダ内に展開することができれば、そこから生み出される様々な模様や映像を可視化することができます。
今日は、GLSL でちょっとした数学っぽい話もしつつ、デジタルアートのような模様を一緒に描いてみましょう。
きっと、数学に興味をお持ちのみなさんなら、慣れてしまえば私なんかよりもよっぽどすごい映像を生み出すことができますよ！
GLSL エディタ
WebGL は一般的な 3DCG の常識から言えばとても手軽ですが、しかしそれでも環境を用意するのはちょっとした手間です。
今回は手前味噌で恐縮ですが、オンライン GLSL エディタがありますのでこれでシェーダを書いてみましょう。
GLSL editor http://school.souhonzan.org/gem/
GLSL エディタの使い方
- Windows なら Ctrl + s、Mac なら Command + s で実行
- Esc キーで停止（放置危険ｗ
- URL に GLSL のコードを全展開する荒業式
- URL は短縮 URL に変換できるので簡単シェア！
- HTML ファイルとしてダウンロードも可能
- マウス座標も取れるよ
超雑！ GLSL エディタってなに！？
GLSL で フラグメントシェーダ を記述できる WebGL 製のエディタです。
フラグメント（断片）の語からもわかるとおり、シェーダはスクリーンの 全てのピクセル上で実行される というのがポイントです。
つまり、同じコードが全部のピクセル上を走り抜けていきますので、座標ごとにやることを変化させるような処理を記述することで、二次元平面上で模様などを描くことができるという寸法です。
uniform 変数
javascript から動的に値をシェーダへ渡すために使われるのが uniform という接頭語付きの変数です。
GLSL エディタでは以下の情報がリアルタイムにシェーダへ送られてきます。
resolution: スクリーン解像度
mouse : マウスカーソル座標（-1.0 から 1.0）
time : 時間の経過（秒数単位、１秒で 1.0）GLSL 組み込みの変数
GLSL エディタを利用する際には、次のふたつの組み込み変数を覚えましょう。GLSL の組み込み変数自体はたくさん種類がありますが、GLSL エディタを使う上ではこのふたつを理解していれば大丈夫です。
gl_FragCoord: 今から処理しようとしているピクセル座標
gl_FragColor: 最終的に何色を出力するのか RGBA を 0.0 から 1.0 の範囲で出力まとめ
つまり、GLSL エディタではスクリーンの各ピクセルを走査する、フラグメントシェーダのコードが記述できます。
javascript からスクリーンの解像度やマウス座標が送られてきます。GLSL エディタ上で gl_FragCoord を参照すれば、今からどのピクセルの色を塗ろうとしているのかがわかるので、何かしらの色を、gl_FragColor に出力します。
意外と簡単ですね？
やってみよう！
それでは、一緒にシェーダを記述してみましょう！
最後に
WebGL の登場によって、シェーダは非常に身近なものになりました。今や、ブラウザ上で動くシェーダが PC やモバイル問わず、ありとあらゆる端末上で美しい映像を描き出しています。
映画や CG アニメーションの世界のような、ハイエンドな CG をバリバリ動かすのはさすがに難しいですが、簡単なシェーダを気軽に記述して、思い思いに楽しむことは十分にできます。
数学の勉強や、あるいはアルゴリズムの可視化などに、ぜひ GLSL を使ってみてください。数学も CG も、楽しみながらやるのが、やっぱりいちばんです。
おまけ告知
WebGL スクール、第三期の募集をまさに今行っています。
体験会は 4 月 23 日の土曜日に、そして本講義は GW 明けの 5 月 14 日 より開始です。WebGL や GLSL に興味を持っていただけたのなら、ぜひ参加をご検討いただければと思います。
おわり
ありがとうございました！