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プログラミングを参考にさせて頂きました。

この記事を書いた人 :
TIGER-TANIOKA

この記事をシェアする

すべての記事