openFrameworksで簡単にglow shaderみたいなエフェクトを作る

はじめに

本記事はopenFrameworks初学者がglslなどを書かずに簡単な方法で
いわゆるglow shaderっぽい効果を出すことができるようになるのを目的としています
(* 多分初学者には一番簡単なのではと思ってます)
質問が多かったので記事化しました.

下準備

今回はとりあえずランダムにBoxを幾つか配置したものを

ofApp.h

#include "ofMain.h"

#define NUM 500
#define BOX_SIZE 10

class ofApp : public ofBaseApp{


    ・
    ・
    ・

    ofBoxPrimitive boxes[NUM];
};

ofApp.cpp

void ofApp::setup(){

    ofSetFrameRate(60);
    ofEnableBlendMode(OF_BLENDMODE_ADD);

    for (int i=0; i<NUM; i++) {
        boxes[i].setPosition(ofRandom(-500,500), ofRandom(-500,500), ofRandom(-500,500));
        boxes[i].set(SIZE);
    }


}

void ofApp::draw(){

    ofBackground(0);

    ofPushMatrix();

    ofSetColor(255, 255, 255, 255);
    ofTranslate(ofGetWidth()/2, ofGetHeight()/2);
    ofRotateY(ofGetElapsedTimef());

    for (int i=0; i< NUM; i++) {
        boxes[i].draw();
    }

    ofPopMatrix();
}

これを実行するとこんな感じ

Glow shaderっぽくする

ofApp.h, ofApp.cppともに以下のように書き換えます
今回使ったAddonはofxBlurのみです

ofApp.h

#include "ofMain.h"
#include "ofxBlur.h"

#define NUM 500
#define SIZE 10

class ofApp : public ofBaseApp{

    ・
    ・略
    ・

    ofxBlur blur;    
    ofFbo fbo;
};

ofApp.cpp

void ofApp::setup(){

    ofSetFrameRate(60);
    ofEnableBlendMode(OF_BLENDMODE_ADD);

    for (int i=0; i<NUM; i++) {
        boxes[i].setPosition(ofRandom(-500,500), ofRandom(-500,500), ofRandom(-500,500));
        boxes[i].set(SIZE);
    }

    blur.setup(ofGetWidth(), ofGetHeight(), 32, .2, 1, 0.5);
    fbo.allocate(ofGetWidth(), ofGetHeight());
}


void ofApp::draw(){

    ofBackground(0);

    fbo.begin();
    ofDisableBlendMode();

    ofSetColor(0, 0, 0);
    ofRect(0,0, ofGetWidth(), ofGetHeight());


    //------------------------------
    //↓エフェクトかけたいやつ
    //------------------------------
    ofPushMatrix();

    ofSetColor(255, 255, 255, 255);
    ofTranslate(ofGetWidth()/2, ofGetHeight()/2);
    ofRotateY(ofGetElapsedTimef());

    for (int i=0; i< NUM; i++) {
        boxes[i].draw();
    }

    ofPopMatrix();

    //------------------------------
    //↑エフェクトかけたいやつ
    //------------------------------

    fbo.end();

    blur.begin();
    ofDisableBlendMode();
    ofBackground(0);
    fbo.draw(0,0);
    blur.end();

    blur.draw();
    ofEnableBlendMode(OF_BLENDMODE_ADD);
    fbo.draw(0,0);

    ofPushMatrix();
    ofRotateY(ofGetFrameRate());

    ofPopMatrix();
}

実行すると...

かなりglowっぽい！?笑

終わりに

今回のキモはofxBlurとFboを併用することとAlphaBlendingの設定だと思います.
基本的にBlurとFboで挟んでやるだけで特にGLSLとか書かずにかなりglowっぽくできるので
限られた知識と時間しかない初学者や初学者に教える立場にいる人に使ってもらえればと思います

　

　

　

　
　

2016/08/12