読者です 読者をやめる 読者になる 読者になる

Shut the fuck up and write some code

グダグダ言わずにコードを書きたいブログ

oFShaderでGLSLを読み込んで表示

openFrameworks

Three.js経由でwebGL触り始めてシェーダーに興味が出てきて、本格的に触り始めたのでoFでも試してみました。

試した環境はopenFrameworks iOS 0.8.4です。

既にoFの中に、GLSLファイルを読み込むサンプルがあるので(iosES2ShaderExample)それをいじる形で。

まず頂点シェーダファイル作ります。

attribute vec4 position;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

void main(){
    
    vec4 pos = projectionMatrix * modelViewMatrix * position;
    gl_Position = pos;

}

これをhoge.vertで保存。

そしてフラグメントシェーダを作ります。 サンプルにこちらをまるっと使わせてもらいます。 http://glsl.herokuapp.com/e#5423.1

これをhoge.fragで保存。

シェーダファイルの置き場所はプロジェクトフォルダ内のbin/data/shadersとしてます。

で、oF側の実装。 ロード処理をsetupに記述。

void ofApp::setup() {
   
    shader.load("shaders/hoge.vert", "shaders/hoge.frag");

}

描画処理をdrawに記述。 ofRectで描画領域を作るのがポイントです。

void ofApp::draw() {
    ofPushStyle();

    shader.begin();
    
    shader.setUniform2f("mouse", mouseX, mouseY);
    shader.setUniform2f("resolution", ofGetWidth(), ofGetHeight());
    shader.setUniform1f("time", ofGetElapsedTimef());
    
    //描画領域
    ofRect(0, 0, ofGetWidth(), ofGetHeight());
    
    shader.end();
        
    ofPopStyle();
}

結果

f:id:very_tired:20150306162245p:plain:w300

openGL ES 2.0 と webGLの互換性がどこまであるのか良くわかってないですが、とりあえず動くっぽいです。

追記 3/10

main.mmでES2のレンダリングを有効にしておかないと動かないですね

int main() {
    ofAppiOSWindow *window = new ofAppiOSWindow();
    window->enableRendererES2();
    
    ofSetupOpenGL(window, 1024, 768, OF_FULLSCREEN);    // setup the GL context
    ofRunApp(new ofApp());                            // run app.
}