hellkite 日記と雑記とメモ。

Shiki Kazamaの駄文と音楽と、時々技術な感じ

openFrameworksで流行のフラグメントシェーダを試す


スポンサーリンク


興味はあったけど、なかなか手が出せなかったフラグメントシェーダによるお絵かき。これまでもシェーダに挑戦しようとしてみると環境の整備に時間がかかってしまい、絵を出すまでがつらかった。
それが、openFrameworksなら、すぐにできる!


ofApp.h

		ofShader shader;		// シェーダオブジェクト

ofApp.cpp

void ofApp::setup(){
	ofSetWindowShape( 600, 600 );
	ofSetFrameRate(60);
}

void ofApp::draw(){
	shader.load("", "shader.frag");

	shader.begin();				// beginからendまでShaderが有効になる
	shader.setUniform1f("time", ofGetElapsedTimef());
	shader.setUniform2f("resolution", ofGetWidth(), ofGetHeight());
	ofRect(0, 0, ofGetWidth(), ofGetHeight());		// このRectがshaderの色で塗られる
	shader.end();

	ofSetColor(255, 0, 0);
	string fpsStr = "frame rate: "+ofToString(ofGetFrameRate(), 2);
	ofDrawBitmapString(fpsStr, 30,30);
}

これだけ。後は、shader.fragにシェーダを描けばいい。シェーダファイルは、bin/dataの中に入れておけばいい。ちなみに、この書き方だとフレームが更新されるたびにシェーダをコンパイルする。負荷になるかと思ったけど、簡単なシェーダならフレームレートに影響しない。それより、シェーダを更新すると次の瞬間には画面に反映されることの方が重要。試行錯誤がストレスなくできる。
とっかかりとして、このチュートリアルをやってみる。
tau_medialab150623.pdf - Google ドライブ


こんな絵が描けた。実際には、グネグネ波が動く。


しかも、ちゃんとグラボが載っていれば60fpsで動くし。やっぱ動画で出力したいよなぁ、これ。。