OpenGL ES2.0で波紋を作る#1　前提知識１

Pocket

OpenGL ES 2.0で波紋を作る#1　前提知識１

前提知識１では、OpenGL ES 2.0の特徴でもあるシェーダについて、その初期化手順を解説します。

ポイント

　・シェーダ

　・頂点シェーダ

　・フラグメントシェーダ

　・頂点シェーダとフラグメントシェーダのリンク

シェーダとは

OpenGLは、オープンソースなグラフィックライブラリです。

その特徴は、GPU（グラフィックに必要な計算処理を得意とする演算装置）を利用して高速な描画が行える点です。

OpenGLを組み込み専用のライブラリにしたのがOpenGL ES（以降、OpenGLと呼ぶ）です。バージョン2.0（※1）からシェーダを記述できるようになり、高度な描画処理が実現できるようになりました。

「シェーダ」をネットで調べると難しい説明ばかりで理解するのが難しいのですが、著者なりにひとことで表現すると「シェーダとは、OpenGL専用言語を使って、GPUに命令を送るためのプログラミングの集まり」だと言えます。

シェーダの初期化

シェーダは、頂点シェーダとフラグメントシェーダの２種類のシェーダがあります。

頂点シェーダによって絵を描き、フラグメントシェーダによって色を塗るイメージです。

以下は、シェーダを初期化するまでの基本的な流れです。

　1. ソース作成

　2. シェーダ

　3. オブジェクト作成

　4. コンパイル

　5. プログラマブルシェーダ作成

　6. アタッチ

　7. リンク

1〜3.において、頂点シェーダ、フラグメントシェーダをそれぞれ作成し、

4〜6.で２つのシェーダオブジェクトをプログラマブルシェーダにアタッチし、その後、リンク付けをします。

これで、頂点シェーダとフラグメントシェーダーはプログラマブルシェーダから利用できるようになり、シェーダの初期化が完了します。

頂点シェーダ

□ ソース作成

シェーダの中身は、GLSL ES(OpenGL Shader Language ES)(※2)言語に従って記述します。

それ以外のOpenGLの呼び出し部分は、Objective-C（または、Swift）にて記述します。

以下のコードは、外部（レンダリングするに頂点情報を渡す）から受け取った頂点の位置をOpenGLに連携するプログラムです。

attribute mediump vec4 attr_pos;
void main() {
	gl_Position = attr_pos;
}

attribute mediump vec4 attr_pos;

void main() {

gl_Position = attr_pos;

}

□ シェーダオブジェクト作成とコンパイル

作成したシェーダのソースは、コンパイルしなければ動かすことはできません。

ソースを読み込んだ後、オブジェクト化し、コンパイルします。

シェーダは、直接ソースに文字列として記述したり、別ファイルに記述し、そのファイルを読み込むことでロードすることもできます。

どちらでも構いません。どちらであっても、文字列としてOpenGLに渡す必要があります。

シェーダのオブジェクト化には、「glShaderSource」を利用します。

glShaderSourceの第３パラメータには、ソースのポインタを渡すことに注意してください。(※3)

const GLint shader = glCreateShader(vertex_shader_sources);
glShaderSource(shader, 1, &vertex_shader_sources, NULL);

1 2	const GLint shader = glCreateShader(vertex_shader_sources); glShaderSource(shader, 1, &vertex_shader_sources, NULL);

シェーダのコンパイルは、「glCompileShader」を利用します。

glCompileShader(shader);

1	glCompileShader(shader);

フラグメントシェーダ

基本的には、頂点シェーダと同じです。

異なるのは、シェーダの内容がカラーをメインに記述することになる点です。

以下のコードは、白色で画面を塗りつぶすことをOpenGLに連携するプログラムです。

void main() {
	gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}

void main() {

gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);

}

※オブジェクト作成、コンパイルは、頂点シェーダと同じです。

頂点シェーダとフラグメントシェーダのリンク

□ プログラマブルシェーダへのリンク

OpenGLがシェーダを利用するためには、プログラマブルシェーダが必要になります。

作成したプログラマブルシェーダに、コンパイルした頂点シェーダとフラグメントシェーダをアタッチし、その後、プログラマブルシェーダをOpenGLにリンク付けます。

これで、OpenGLが頂点シェーダ、フラグメントシェーダを利用できるようになります。

プログラマブルシェーダの作成は、「glCreateProgram」を利用します。

シェーダのアタッチは、「glAttachShader」を利用します。

glAttachShader(program, vertex_shader);

1	glAttachShader(program, vertex_shader);

glAttachShader(program, fragment_shader);

1	glAttachShader(program, fragment_shader);

最後に、OpenGLにプログラマブルシェーダを関連付けるため、リンクを貼ります。

glLinkProgram(program);

1	glLinkProgram(program);

□ シェーダ削除

glLinkProgramを利用しリンク済みにした後、頂点シェーダ、フラグメントシェーダーは削除してください。

シェーダの削除は、「glDeleteShader」を利用します。

glDeleteShader(vertex_shader);
glDeleteShader(fragment_shader);

1 2	glDeleteShader(vertex_shader); glDeleteShader(fragment_shader);

【参考】

※1･･･「OpenGL ES 2.0」については、OpenGL ES 2.0 Reference Pagesを参照してください。

※2･･･「GLSL ES」については、OpenGL ES Shading Languageを参照してください。

※3･･･説明ポイントを絞り込むため、エラー処理を記述に含めておりません。本来は、OpenGL ESのAPIを呼び出した後にエラー処理を記述し、デバッグできるようにします。

バックナンバー

OpenGL ES2.0で波紋を作る#1　前提知識１

OpenGL ES2.0で波紋を作る#2　前提知識２