28
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-08-12

はじめに

本記事は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();
}

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

スクリーンショット 2016-08-12 17.10.05.png

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();
}


実行すると...
スクリーンショット 2016-08-12 17.26.44.png

かなりglowっぽい!?笑

終わりに

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

 
 
 
 
 

2016/08/12

28
26
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?