6.7 KiB
イントロダクション
この文書はPatricio Gonzalez Vivoの The Book of Shader の日本語訳です。 技術的な内容はできる限り正確に伝えるように心がけていますが、その他の部分ではざっくり簡略化したり言葉を補ったり、表現を変えている部分もあります。英語が得意な方はぜひ原文も読んでみてください。翻訳って難しいですね。 フィードバックにはgithubのレポジトリをご利用ください。
上の2枚の画像は全く異なる方法で作られたものです。1枚目の画像はゴッホが時間をかけて絵の具を塗り重ねて描いたものです。2枚目はシアン、マゼンタ、イエロー、ブラックの4色の網点の組み合わせでほんの短い時間で生み出されました。2枚目の画像は手順を重ねるのではなく、すべての点が同時に描かれているというのが大きな違いです。
この本はデジタルな画像生成を次の次元に押し上げる、フラグメントシェーダーというグーテンベルグの活版印刷にも匹敵する画期的な技術についての本です。
フラグメントシェーダーを使うと画面に表示されるピクセルを非常に高速かつ自由にコントロールすることができます。そのためフラグメントシェーダーはスマートフォンで映像にフィルターをかけることから、驚くようなクオリティの3Dゲームまで、様々な用途に使われています。
この後につづく章ではフラグメントシェーダーがどれだけ高速でパワフルな技術かについて、またシェーダーを仕事や個人的なプロジェクトで使う方法について説明します。
想定される読者
この本はプログラムの経験と基本的な線形代数や三角関数の知識があり、ワンランク上のグラフィックを目指すクリエイティブコーダー、ゲームデベロッパーなどの開発者に向けて書かれています。もしコーディングについて学びたい場合はProcessingをまず勉強して戻ってくることをお勧めします。
この本ではフラグメントシェーダーをプロジェクトに組み込む方法、パフォーマンスやグラフィックのクオリティを改善する方法を学ぶことができます。GLSL (OpenGL Shading Language, OpenGLシェーダー言語)は様々なプラットフォーム上でコンパイルして走らせることができるので、ここで学習したことはOpenGL、OpenGL ESまたはWebGLが使えるのできるどんな環境でも生かすことができます。
たとえば、Processingのスケッチ、 openFrameworksで作ったアプリケーション、 Cinderで作ったインスタレーション、 Three.jsを用いたウェブサイトやiOS/Androidのゲームなどが対象です。
この本で取り上げること
この本では主にGLSLのフラグメントシェーダーについて説明します。シェーダーとは何かの定義から始まり、プログラムを用いて形や模様、質感や動きを作る方法を学びます。シェーダー言語の基礎とともに、畳み込み、ぼかし、カラーフィルター、ルックアップテーブルなどの画像処理技術、コンウェイのライフゲーム、グレイ=スコットの反応拡散系、水の波紋、水彩、ボロノイ図のようなシミュレーションなど、より実践的に活用する方法についても学習します。さらにレイマーチングに基づく高度なテクニックにも触れます。
どの章にも実際に動かせるサンプルがついています。サンプルのコードを書き換えれば結果をその場で見ることもできます。抽象的でわかりにくいコンセプトも、実際に試してみることでよりスムーズに理解できるでしょう。
この本で取り上げないこと
-
この本はOpenGLやWebGLの本ではありません。OpenGL、WebGLはGLSLやフラグメントシェーダーを含むより広範なトピックです。もしOpenGL、WebGLについてもっと学びたい場合は下記のページや本をお勧めします。
-
この本は数学の本ではありません。代数や三角関数が必要なアルゴリズムやテクニックもとりあげますが、数学についての詳しい説明は省略します。数学的な概念について知りたい場合は下記の本を手元に置いておくと良いでしょう。
必要なもの
Chrome、FirefoxやSafariなどWebGLの使える今時のブラウザーとインターネットさえあれば始められます。ページの最後にある「Next」をクリックして先に進みましょう。
もし必要な場合は下記もご覧ください（訳注：いまのところ英語のみです。そのうち翻訳するかもしれません）。
-
Use the on-line repository to help resolve issues and share code.