【WebGL】GLSLのフラグメントシェーダー(Fragment Shader)とは？わかりやすく解説
WebGL(GLSL)を学習する上で、必ず理解しないといけないものの一つに、フラグメントシェーダー(Fragment Shader)があります。
フラグメントシェーダーとは何かについて、説明します。
Three.jsやWebGLが何？という場合は、WebGLとThree.jsの違いって何？押さえておきたい基本的なことのみ解説を参考にしてみてください。
また、具体的なコードやサンプルのデモが動く形で知りたい場合は、【WebGL&Three.js入門】Three.jsの一番シンプルなサンプルコードのチュートリアルの解説でデモもみれる状態にしているので参考にしてみてください。
フラグメントシェーダー(Fragment Shader)とは
フラグメントシェーダーは、フラグメントの色を決定するためのプログラムです。
フラグメントシェーダーの「フラグメント」は、3Dグラフィクスで色塗りするときの最小単位のことです。
画面、ブラウザでいえば、「ピクセル」のことと思えばいいです。
具体的には、解像度を変更することで、フラグメントとピクセルが1対1にならないこともあるのですが、今は大まかにフラグメント＝ピクセルと思っておいて問題ないです。
ただ違う場合があるので、ピクセルではなく、フラグメントと定義されているという認識でOKです。
各フラグメントごとにプログラムが走るので、膨大な計算が必要です。
そのためGPU上でピクセルごとに並列で実行されます。
GPUの特性について、不明な場合は、WebGLとThree.jsの違いって何？を確認してみてください。
フラグメントシェーダーが実行される領域
フラグメントシェーダーは、「フラグメントの色を決定するためのプログラム」なので、
たとえば三角形であれば、3点の頂点に囲まれた領域に存在するフラグメントごとに、プログラムが実行されます。
gl_FragColor
gl_FragColorという変数に設定した値がそのフラグメント(ピクセル)の色になります。
ポイントは、それぞれのフラグメントに対してプログラムがそれぞれ実行されるという点です。
フラグメントシェーダーのサンプルコード
attribute vec3 position;
void main() {
gl_FragColor = vac4(1.0, 1.0, 0.0, 0.8);
}一点一点でフラグメントシェーダーが実行されてい色が決まります。
vec4の場合、vec4(赤、緑、青、透明度)というRGBaで値が決まります。
vec4は、4つのベクトルを持った一つのオブジェクトみたいなものです。
色の強さは、0~1の値で指定します。
まとめ
- フラグメントシェーダーは、フラグメントの色を決定するためのプログラムのこと
- 点の頂点に囲まれた領域に存在するフラグメントごとに、プログラムが実行される
- gl_FragColorという変数に設定した値がそのフラグメント(ピクセル)の色になる
- vec4の場合、vec4(赤、緑、青、透明度)というRGBaで値が決まる
- 色の強さは、0~1の値で指定
同じく重要なシェーダに、頂点シェーダというものがあります。
もし、頂点シェーダが不明な場合は、頂点シェーダとはを参考にしてみてください。