openFrameworksでofShader(GLSL)を使用してみる

はじめに

openFrameworksでは、openGLの機能であるGLSLというプログラム言語を使用することができます。
そこで今回、GLSLをopenFrameworksで使う方法を「マウスに追従するオーブのようなもの」を描画して簡単にご紹介いたします。

実行環境
・Xcode 8.3.3
・openFrameworks 0.9.8
・GLSL version 150

ポイントとして
・vertexShaderとfragmentShaderの2つのソースファイルを用意します。
・openFrameworksでGLSLを扱うのに、ofShaderオブジェクトを使用します。

Shaderソースの実装

・shader.vert

・shader.frag

fragmentShaderでは、openFrameworksから値を受け取る時にUniform変数で宣言します。
gl_FragCoordにはピクセルの位置が入っており、これをshader側で扱いやすくするために、resolutionを使い、shaderの画面座標を-1.0~1.0の値に正規化します。
mouseの値は、openFrameworksの画面座標が送られてくるため、こちらも先ほど正規化したshaderの座標と同様に-1.0~1.0の値に正規化します。
最終的に、outputColorで1ピクセル毎の色を指定しています。

openFrameworksの実装

今回のポイントでも挙げたように、openFrameworksでGLSLを扱うには、ofShaderを使用します。
shaderソースの置き場所は、プロジェクトフォルダ配下のbin/data/以下に置きます。

・main.cpp

GLSL version 150を使用できるようにするため、main.cppにて設定を行なっています。
(defaultの設定の場合は、GLSL version 120を使用する必要があります。)

・ofApp.h

・ofApp.cpp

ofApp.cppでは、draw()の中で、shader側に渡す処理と描画したい領域をbegin()とend()の中に記述します。
また、setUniformを使うことで、timeやresolution(画面サイズ)、mouseの値をshaderに渡しています。

実行結果

shader_2017_08

●この記事を書いた人