p5.js shader スタート 3 シェーダーとは何か?

本稿は「Why use shaders?」ページを翻訳したものです。

シェーダーとは?

シェーダーはわれわれの身の回りで使われているので、自分で記述したことがなくても、必ず目にしているはずです。シェーダーは、コンピュータゲームからコンサートの視覚効果まで、グラフィックスの高速リアルタイムレンダリングに必要になるものです。

コンピュータゲームをプレーしているとき、そこにあるすべての3Dオブジェクトは、そのマテリアルに割り当てられたシェーダーを持っています。シェーダーはオブジェクトの色を決めるものですが、光がオブジェクトに当たってどう反射するかや、オブジェクトが透明であるかどうかなどを決めるのもシェーダーです。また、視覚効果が音や動きに応答するコンサートに行ったことがあるなら、それらもおそらくシェーダーだったのです。

シェーダーは、そのすべてがグラフィックカード、つまりCPU(中央演算処理装置)ではなくGPU(画像処理装置)で実行される小さなプログラムで、シェーダーによって描画がとんでもなく高速になります。シェーダーの動作の基本さえ理解すれば、その記述は実はさほど難しくなく、p5での実装も容易です。

シェーダーはそれ自体がスクリプトなので、p5 sketch.jsファイルとは別のファイルに記述します。この後すぐ見ていきますが、サウンドやイメージのファイルを読み込むのと同じようにしてロードします。とは言えまず理解すべきなのは、シェーダーが、p5スケッチを記述するときに行う通常のプログラミングと異なる理由です。

シェーダーが行っていること

これまでp5のdraw()関数内でシェイプを描画しているときに行ってきたことはほとんどがCPUに依存しています。

CPUは、すべての計算、つまりピクセルやこれまで描画してきたシェイプの移動を、順番に行うことで動作します。目を近づけて画面を凝視すると、画面を構成する小さなピクセルが見えるでしょう。CPUを使って描画しているとき、コンピュータは指示された1つ1つの操作(たとえば赤を描画する、明るさを小さくする)を1度に1ピクセルを対象に行う必要があります。考えてみてください、1度に1ピクセルですよ! 画面が2,560 × 1,600ピクセルだとすると、操作は1フレームで4,096,000回になり、60fpsのときには、毎秒245,760,000回もの操作になります。4Kならさらに倍です。基本的なプログラムでは問題にならないでしょうが、もっと複雑な描画物の場合には、プログラム全体がスローダウンすることに気づかれた方もおられるでしょう。

GPU(画像処理装置)は対照的に、シェーダーの使用による並列処理が可能です。これは、シェーダーを使ってスケッチに描画するものは1回で全部、つまり4,096,000回分全部が描画されるということを意味しています。シェーダーは、スケッチをスローダウンさせずに、より複雑な描画物を作成する最適化された方法なのです。

シェーダーが行っていることの理解のため、CPUが1つのパイプだと想像してください。キャンバスのすべてのピクセルは1回に1つずつ、自分が何色になるのかを教えてもらうためにそこを通過しなければなりません。GPUは実際の色決めを処理しますが、CPUが処理するのはすべての計算です。では、キャンバスのピクセル1つ1つが自分用のパイプを持っていると想像してください。そこではキャンバスの各ピクセルを何色にするのかを並列で(つまり同時に)計算し、教えることができます。これがシェーダーの機能です。

これは、さまざまな色を仕込んだブラストキャノン砲一発でモナ・リザ象全体を描くようなものです。MythBustersのデモを見てください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA