2015.11.13
- 人×技術
openframeworks サウンド篇 tiger3
どうも、TIGER-TANIOKAです。
今回は、fragmentshader挑戦してみます!
1.グラデーション描画に挑戦。
##ofApp.h ============================================================
class ofApp : public ofBaseApp{
public:
...
...
...
ofShader tigerShader;
ofVbo tigerVbo;
ofVec3f verts[4];
ofFloatColor colors[4];
##ofApp.cpp ============================================================
void ofApp::setup(){
tigerShader.load("shader.verts" , "shader.frag");
verts[0] = ofVec3f(0 , 0, 0);
verts[1] = ofVec3f(ofGetWidth() , 0, 0);
verts[2] = ofVec3f(ofGetWidth() , ofGetHeight(), 0);
verts[3] = ofVec3f(0 , ofGetHeight(), 0);
※1color
colors[0] = ofFloatColor(1.0 , 0.0 , 0.0);
colors[1] = ofFloatColor(1.0 , 1.0 , 0.0);
colors[2] = ofFloatColor(0.0 , 0.0 , 1.0);
colors[3] = ofFloatColor(1.0 , 0.0 , 1.0);
tigerVbo.setVertexData(verts , 4 ,GL_DYNAMIC_DRAW);
tigerVbo.setColorData(colors , 4 ,GL_DYNAMIC_DRAW);
}
void ofApp::draw(){
tigerShader.begin();
tigerVbo.draw(GL_QUADS , 0 , 4);
tigerShader.end();
}
##shader.verts ============================================================
void main(){
vec4 pos = gl_ProjectionMatrix * gl_ModelViewMatrix * gl_Vertex;
gl_FrontColor = gl_Color;
gl_Position = pos;
}
##shader.frag ============================================================
void main(){
gl_FragColor = gl_Color;
}
colorの情報は4つしかいれてない※1のですが、 うまく補完してくれるみたいですね。
綺麗です。
2.テクスチャ変形に挑戦。
変形前
変形後
##ofApp.h ============================================================
class ofApp : public ofBaseApp{
public:
...
...
...
ofTexture tigerTexture;
ofImage tigerImg;
ofShader tigerShader;
ofSoundPlayer tigerPlayer;
float* tigerFFT;
##ofApp.cpp ============================================================
void ofApp::setup(){
tigerImg.loadImage("テクスチャファイル");
tigerTexture.allocate(853,480,GL_RGBA,false);
tigerTexture.loadData(tigerImg.getPixelsRef());
tigerShader.load("shader.verts" , "shader.frag");
tigerPlayer.loadSound("サウンドファイル");
tigerPlayer.play();
}
void ofApp::update(){
ofSoundUpdate();
tigerFFT = ofSoundGetSpectrum(2);
}
void ofApp::draw(){
tigerShader.begin();
tigerShader.setUniform2f("winSize" , ofGetWidth() ,ofGetHeight());
tigerShader.setUniformTexture("tigerTexture" , tigerTexture , 2);
tigerShader.setUniform1f("tigerFFT" , tigerFFT[0]);
ofRect(0 , 0 ,ofGetWidth() , ofGetHeight());
tigerShader.end();
}
##shader.verts ============================================================
void main(){
vec4 pos = gl_ProjectionMatrix * gl_ModelViewMatrix * gl_Vertex;
gl_Position = pos;
}
##shader.frag ============================================================
uniform sampler2D tigerTexture;
uniform vec2 winSize;
uniform float tigerFFT;
void main(){
float num = 2.0;
vec2 v = vec2(gl_FragCoord.x / winSize.x , 1.0 - (gl_FragCoord.y/ winSize.y));
float addX = (sin((gl_FragCoord.x - winSize.x / 2.0) * gl_FragCoord.y * (tigerFFT * 10.0) / 10000.0) + 1.0) / 2.0;
addX = (cos((gl_FragCoord.x - winSize.x / 2.0) * gl_FragCoord.y * (tigerFFT * 10.0) / 10000.0) + 1.0) / 2.0;
v+= addX * (tigerFFT / 10.0);
vec4 color = texture2D(tigerTexture , v + vec2(0.0 , 0.0) * num / winSize);
gl_FragColor = color;
}
いろいろと使い道ありそうです。
日々昇進します。
今回はこのへんで。
今回は田所さんのopenFrameworks – Shaderをつかった、GPUプログラミングを参考にさせて頂きました。