3D メッシュを動かす方法をみてゆきます。

プロジェクト名は noiseWave3D とします。

noisewave3dplane.png


平面メッシュの変形アニメーション

平面プリミティブからメッシュを取得して、それを変形させてゆきます。


メッシュオブジェクトの作成

ofMesh オブジェクトを使って、平面プリミティブからメッシュを抽出します。

...略...

class ofApp : public ofBaseApp {
    public:
    ...略...
    
    ofMesh mesh;
    ofEasyCam cam;
};

そして、平面プリミティブから抽出されたメッシュをワイヤーフレームで描画します。

void ofApp::setup() {
    ofBackground(0, 0, 0);
    
    // 平面プリミティブからメッシュを抽出
    ofPlanePrimitive plane;
    plane.set(1024, 1024, 128, 128);
    mesh = plane.getMesh();
}

void ofApp::draw() {
    cam.begin();
    ofRotateXDeg(-60);
    mesh.drawWireframe();
    cam.end();
}

メッシュをランダムに変形させる

メッシュをランダムに変形させることでアニメーションさせます。

void ofApp::setup() {
    ofBackground(0, 0, 0);
    
    // 平面プリミティブからメッシュを抽出
    ofPlanePrimitive plane;
    plane.set(1024, 1024, 128, 128);
    mesh = plane.getMesh();
}

void ofApp::update() {
    // ランダムに変形
    for(int i=0; i<mesh.getVertices().size(); i++) {
        glm::vec3 pos = mesh.getVertices()[i];    // i番目の頂点位置座標を取得
        pos.z = ofRandom(-16, 16);                // z座標をランダムな値にする
        mesh.setVertex(i, pos);                   // ↑をi番目の頂点位置とする
    }
}

void ofApp::draw() {
    cam.begin();
    ofRotateXDeg(-60);
    mesh.drawWireframe();
    cam.end();
}

サイン波でメッシュを波っぽくアニメーション

ランダムではなく、サイン波を使ってアニメーションさせてみます。

void ofApp::update() {
    // // ランダムに変形
    // for(int i=0; i<mesh.getVertices().size(); i++) {
    //     glm::vec3 pos = mesh.getVertices()[i];    // i番目の頂点位置座標を取得
    //     pos.z = ofRandom(-16, 16);                // z座標をランダムな値にする
    //     mesh.setVertex(i, pos);                   // ↑をi番目の頂点位置とする
    // }
    
    // サイン波
    for(int i=0; i<mesh.getVertices().size(); i++) {
        glm::vec3 pos = mesh.getVertices()[i];                           // i番目の頂点位置座標を取得
        float z = sin(pos.x * 0.02 + ofGetElapsedTimef() * 0.5) * 50;    // 頂点のx座標と経過時間を使ってアニメーション
        // z += sin(pos.y * 0.01 + ofGetElapsedTimef() * 0.7) * 30;      // ↑に加えて、頂点のy座標も使う。コメントを外してみよう
        pos.z = z;                                                       // 頂点位置座標を更新
        mesh.setVertex(i, pos);                                          // ↑をi番目の頂点位置とする
    }
}