文字+レンダラー+ofxBullet

スクリーンショット 2014-10-09 02.37.49

レンダラーで表示する表示オブジェクトはofNodeの継承で、下記の情報を持たせた。

・マテリアル情報(マテリアルシェーダー、テクスチャ:Diffuse,Speclar,Normal,Detail)
・メッシュ(ofMeshから生成できる拡張メッシュ )
・RigidBody(ofBulletのshapeのいずれか)

このオブジェクトをFlashみたいにaddChildでレンダラインスタンスに追加できるようにしてみた。動作はofっぽくnodeで動かせるようになったし、rigidbodyを追加すれば物理空間にぶっこめる。メッシュ形状から衝突形状が生成できるofxBulletCustomShapeを使ったらいい感じになった。

スクリーンショット 2014-10-09 02.58.37

GTX660TIだと文字たくさん出しても60fpsでてたけど、 MBAだと15fpsくらいが限界・・・。

無題

SSLR

スクリーンスペースローカルリフレクション(SSLR)実装してるんですが・・・。なんとなくでるところまではいったけど・・・。
うまくいかないわー。もーいやわー。

スクリーンショット 2014-10-07 10.28.12

 

レイトレースのfragシェーダ。だいぶ簡素化してあります。おかしいと思われる原因がありすぎて・・・ちょっと寝かせよう・・・。


vec4 RayTrace(in vec3 startP,in vec3 endP){

    vec4 startSSP = uProjectionMatrix*vec4(startP,1.0);
    startSSP.xy /= startSSP.w;
    startSSP.xy = startSSP.xy *  0.5 + 0.5; 

    vec4 endSSP = uProjectionMatrix*vec4(endP,1.0);
    endSSP.xy /= endSSP.w;
    endSSP.xy = endSSP.xy *  0.5 + 0.5; 

    vec3 vecSS = (endSSP.xyz - startSSP.xyz);
    vecSS.z=endP.z-startP.z;
    vecSS*=length(texelSize)/length(vecSS.xy);

    vec3 sampleP = vec3(0.0);
    float sampleDepth = 0.0;
    float diffZ = 0.0;
    vec4 color = vec4(0.0);

    for (int i = 1; i < 100 ; i++){
        sampleP.xy = startSSP.xy + vecSS*i;
        sampleP.z = startP.z + vecSS.z*i;

        if(sampleP.x < 0 || sampleP.x > 1 ||
	    sampleP.y < 0 || sampleP.y > 1 ||
	    sampleP.z < 0 || sampleP.z > uNearFar.y ){
	    break;
        }

        sampleDepth =linearizeDepth(texture(depthTexture, sampleP.xy).r, uNear,uFar);
        diffZ = sampleP.z - sampleDepth;
        float error = length(vecSS);

        if (diffZ>=0&& diffZ<error)
        {
            color = texture(colorBufferTexture, sampleP.xy);
            break;
        }
    }
    return color;
}

Source Han Sansで3Dリアルタイムレンダリングはじめます

ようやく仕事がおちついてきたので、openframeworksを弄ります。ここ半年、ASばっかりやってたので、var:とかがなかなか抜けない。あるある。 ofも最新にアップデードしたし、しばらくタイポグラフィとDeferred Renderingで遊んでいこうと思っています。いいタイミングで、Source Han Sansっていうオープンソースの書体がリリースされたので、こちらを主に使わせていただきます!Heavyはいい太さで、3D化しても見応えがありますね。 さっそくレンダリングします。Bulletを組み込んだので、ガチャガチャ動かすぜーとか思ってましたが・・・、 スクリーンショット 2014-09-24 18.38.34 一部おかしくなってますね・・・。法線を表示してみます。 スクリーンショット 2014-09-24 18.38.46 法線が裏返っています・・・。ポリゴンの形状は正しいようです。ofx3DFontっていうライブラリ内部で3D化する際に法線を生成しているのでそのあたりを疑ってみます。表示がおかしくなる文字を取り出してワイヤーフレームを表示。どうやら三角形分割に使っているpoly2triが効いていません。 スクリーンショット 2014-09-24 18.19.55 ポリゴンで表示。あっちでは法線が壊れていたのにちゃんと表示されている(謎)。 スクリーンショット 2014-09-24 18.20.46 フォントのアウトラインを表示。 スクリーンショット 2014-09-24 18.06.50

ひとととりデバッグしてみたところ、表示が崩れるグリフの共通の条件が判明しました。

スクリーンショット-2014-09-24-18.06

ポリゴンのアウトラインに接点がある場合、poly2trでエラーが発生するためバックアップ用途にしているof標準テッセレータでテッセレートされるんですね・・・。poly2triはきれいな3角形分割をしてくれるので気に入ってるんだけど。というわけでpoly2triに渡す際の前処理をこれから書いて見ようと思います・・・。

OpenGL サポート状況続き

前回調べた時にMacBookAirのBootcanp(Windows8)上、 Intel HD Graphic 4000で GLSL4.1 は使えないってことはわかった。調べてみると、どうやらOSXでは4.1まで使えるみたい。これってどうなのよー。Windowsの方もおねがいしますよー。

スクリーンショット-2014-02-10-09.22

こないだ作ったSMAAのサンプルもついでに対応してみた。 相変わらずwindowsでは意味不明な現象になるが、OSXではちゃんと動いた。Openframeworksのやつ、Windowsで動いてたのをOSXに持って行ったら、そのままだとうまく行かなくって、色々読んでたらOpenGLのバージョン指定が必要みたい。

ofSetCurrentRenderer(ofGLProgrammableRenderer::TYPE);

ってやるとOpenGL3.2が指定されてGLSL4.1が使えるようになった。Windowsでは何も言われなくても使えたよ・・・。まぁ最近のGLSL使うならこれ設定しておいたらいいのかな。

いろんな環境で試してみた感想。MacのShaderのコンパイラは結構うるさい。っていうかちゃんとしてる。ちゃんとしていないと動かない。ので、MACで作ればWindowsで基本的には動きそうな気がした。

OpenGLサポート状況(自分用)

GPUカードのドライバがアップデートされたりしてようやくRADEONとかGFORCEではGLSL4.3が実用的になってきてるっぽい。去年の8月くらいには4.2の機能使えねーじゃんとか思ってたのにな・・・。たまたまRADEONのアップデートが来てたので久しぶりにOpenGLのスペックをチェックしてみた。GEFORCE、RADEON共に最新のドライバではOpenGL4.4に入ってきてる。使ってるPCの利用状況調べてみた。

チェックはOpenGL Extensions Viewerでやるよ。
http://www.realtech-vr.com/glview/

メイン機のDell Presision GeForce GTX660ti  4.3まで100%対応済み。

スクリーンショット 2014-02-06 01.44.52

会社のiMacのやつ。RadeonHD6900M  同じく4.3 100%

スクリーンショット 2014-02-06 15.16.17

Macbook Air のIntel HD Graphics 4000
4.0まで100%だが、以降はかなり怪しい。もしかしてMACで見るとちがうのかな。

スクリーンショット 2014-02-06 01.33.01

3機とも開発に使ってるので一個だけグレード低いのが結構きついなぁ。たまに挙動がHD4000だけちがうなと思ってたのはこの辺りが原因なのかも。
それにしても、GeForce,Radeonともにもう4.3の機能サポートが100%ってことは、知らないうちにCOMPUTE SHADERも使えるようになってたんだ・・・。COMPUTE SHADER使ったやつで名前忘れたけどモーションブラーのアルゴリズムとかFoward+レンダリングとかいろいろ事例あったのでそのうちためしてみたいな。

SMAA、FXAAのofExample

前回の続き。SMAAの実装の紹介。

ソースは最新のこっちにした。
https://github.com/iryoku/smaa

SMAAで3回分のシェーダが必要なんだけど、shader3つも作るのはナンセンスだから1つにまとめてみた。でも、これだと1passはrgチャンネルしか使わないのでbit数の最適化ができてない。まぁいいか・・・。

バーテックスシェーダ

#include "../common/version.glsl"

/* uStep
 * 0:Edge Detection
 * 1:Weight Calculation
 * 2:BlendingWeight
*/
uniform int uStep=0;

layout(binding=0) uniform sampler2D uInpTex;
vec2 texSize = vec2(textureSize(uInpTex, 0));
#define SMAA_RT_METRICS vec4(1.0/texSize,texSize)
#define SMAA_INCLUDE_PS 0
#define SMAA_GLSL_4 1
#define SMAA_PRESET_ULTRA 1
#include "SMAA.hlsl"

noperspective out vec2 texcoord;
noperspective out vec2 pixcoord;
noperspective out vec4 offset[3];

layout(location=0) in vec3 position;

void main(){
 texcoord = position.xy * 0.5 + 0.5;
 if(uStep==2){
 SMAANeighborhoodBlendingVS(texcoord, offset[0]);
 }else if(uStep==1){
 SMAABlendingWeightCalculationVS(texcoord, pixcoord, offset);
 }else{
 SMAAEdgeDetectionVS(texcoord, offset);
 }
 gl_Position = vec4(position.xy, 0.0, 1.0);
}

ピクセルシェーダ

#include "../common/version.glsl"

/* uStep
 * 0:Edge Detection
 * 1:Weight Calculation
 * 2:BlendingWeight
*/
uniform int uStep=0;

layout(binding=0) uniform sampler2D uInpTex;
layout(binding=1) uniform sampler2D uInpTex2;
layout(binding=2) uniform sampler2D uInpTex3;

vec2 texSize = vec2(textureSize(uInpTex, 0));
#define SMAA_RT_METRICS vec4(1.0/texSize,texSize)
#define SMAA_INCLUDE_VS 0
#define SMAA_GLSL_4 1
#define SMAA_PRESET_ULTRA 1
#include "SMAA.hlsl"

noperspective in vec2 texcoord;
noperspective in vec2 pixcoord;
noperspective in vec4 offset[3];
layout(location = 0) out vec4 fOut;

void main(){
 if(uStep==2){
 fOut = SMAANeighborhoodBlendingPS(texcoord, offset[0], uInpTex, uInpTex2);
 }else if(uStep==1){
 fOut = SMAABlendingWeightCalculationPS(texcoord, pixcoord, offset, uInpTex, uInpTex2, uInpTex3, ivec4(0));
 }else{
 fOut = vec4(SMAAColorEdgeDetectionPS(texcoord, offset, uInpTex),0.0,0.0);
 }
}

多分こんな感じ。GLSLは410以降が必要。
作業用のFBOはアルファチャンネルも使うのでRGBAが必要。あと、テクスチャ用のヘッダファイルがあるのでofTextureとして登録。


ofFbo::Settings defaultSetting;
 defaultSetting.numSamples=0;
 defaultSetting.textureTarget=GL_TEXTURE_2D;
 defaultSetting.height=768;
 defaultSetting.internalformat=GL_RGBA;
 defaultSetting.useDepth=false;
 defaultSetting.useStencil=false;
 defaultSetting.width=1024;
 defaultSetting.wrapModeHorizontal=GL_CLAMP_TO_EDGE;
 defaultSetting.wrapModeVertical=GL_CLAMP_TO_EDGE;
 defaultSetting.numSamples=false;

fboRender_.allocate(defaultSetting); //入力用
 fboAA_.allocate(defaultSetting); // AA結果表示用
 fboSmaaWk_.allocate(defaultSetting); //作業用

//SMAAテクスチャ
 texSmaaArea_.allocate(AREATEX_WIDTH,AREATEX_HEIGHT,GL_RG8,false);
 texSmaaArea_.loadData(areaTexBytes,AREATEX_WIDTH,AREATEX_HEIGHT,GL_RG);
 texSmaaArea_.setTextureMinMagFilter(GL_LINEAR,GL_LINEAR);

texSmaaSearch_.allocate(SEARCHTEX_WIDTH,SEARCHTEX_HEIGHT,GL_R8,false);
 texSmaaSearch_.loadData(searchTexBytes,SEARCHTEX_WIDTH,SEARCHTEX_HEIGHT,GL_RED);
 texSmaaSearch_.setTextureMinMagFilter(GL_NEAREST,GL_NEAREST);

処理はこんな感じ。blendモードとかちゃんときっておかないと動かない。

 glDisable(GL_BLEND);
 glClearColor(0,0,0,0);

shaderSmaa_.begin();
 fboAA_.begin(false);
 glColorMask(GL_TRUE,GL_TRUE,GL_FALSE,GL_FALSE);
 glClear(GL_COLOR_BUFFER_BIT);
 shaderSmaa_.setUniform1i("uStep",0);
 shaderSmaa_.setUniformTexture("uInpTex",fboRender_,0);
 ssObj.draw();
 glColorMask(GL_TRUE,GL_TRUE,GL_TRUE,GL_TRUE);
 fboAA_.end();

 fboSmaaWk_.begin(false);
 glClear(GL_COLOR_BUFFER_BIT);
 shaderSmaa_.setUniform1i("uStep",1);
 shaderSmaa_.setUniformTexture("uInpTex",fboAA_,0);
 shaderSmaa_.setUniformTexture("uInpTex2",texSmaaArea_,1);
 shaderSmaa_.setUniformTexture("uInpTex3",texSmaaSearch_,2);
 ssObj.draw();
 fboSmaaWk_.end();

 fboAA_.begin(false);
 shaderSmaa_.setUniform1i("uStep",2);
 shaderSmaa_.setUniformTexture("uInpTex",fboRender_,0);
 shaderSmaa_.setUniformTexture("uInpTex2",fboSmaaWk_,1);
 ssObj.draw();
 fboAA_.end();
 shaderSmaa_.end();

Openframeworksのサンプルコードはこちら(vs2012のみー)

ちなみにこのなかのofShaderHelperは、#includeとか使うために適当に作ったやつだから信用できないwGLSL4系だと結構モジュール化とかやりやすくなってるから需要あると思うので、ちゃんとしたやつをofShaderの中で強化してもらえるといいなぁ。

サンプルではFBOへの出力を単純にポストプロセスでAAかけてて、汎用的に使えると思う。最適かどうかはおいておいて、FXAA,SMAAを比較することで、メリット、デメリットが見えてくるう。SMAAは画質重視で重い。FXAAはディテールの破壊があるが高速。カメラワーク、オブジェクトの動きが激しいシーンではFXAAにスイッチするとかして使い分けるのもいいかもしれない。てかDofとか入れるとほとんどAA不要な気がする。

スクリーンショット 2014-02-04 12.01.35

ところでSMAAなんだけど、MacbookAir(Intel HD 4000)でどうしてもうまく動いてくれないのだ。なんでだろー。わからーん。

ofx3Dfont使ってみた

レンダリングエンジンに入れてみたところ、ちゃんと表示されてるみたい。ただ、このライブラリはtexcoord作ってくれないので、適当に自前で貼ってみたけど、押し出しの側面のこと考えるの難しいな・・・。下のやつはごまかしで貼ってあるのでカメラが近づくとおかしいのがバレる(前後同じ座標で伸びてるだけ)。”大草原不可避”は最近覚えたての単語w

スクリーンショット-2014-01-25-01.51

ofx3Dfontは去年ひっそり公開したofAddonデス・・・。説明書いてないけど、動的にofMesh作ったり、ofTrueTypeFontみたいに直接文字列をDrawしたりできます。ofTryeTypeFontUL2っていうのも必要。こっちはharfbuzzをincludeしたTypoGraphyの強化モジュール。ほとんどofTrueTypeFontと同じだけど、カーニングペア、リガチャ、フォントスクリプト、日本語プロポーショナル、TextAligmentなど、いろんな拡張ができる。ちゃんとしたTypoGraphyが必要なときは少し役に立つかもしれません・・・。

スクリーンショット 2013-12-03 00.28.38

スクリーンショット 2013-12-03 01.55.07

さぁようやく次はインタラクティブ化だ。

 

ポストプロセスアンチエイリアス実装(FXAA,SMAA)

Defferdの課題の一つ、アンチエイリアスを実装してみた。AAについて小一時間調べた結果、試したのはFXAAとSMAA。調べてみるとこの辺りはOpenGLでの実装実績も多く、思ったよりも簡単に実装ができた。最近の高解像度化でギザギザはあんまり気にならないんだけど。

スクリーンショット 2014-01-23 23.48.10これは拡大しないとわからないけど、No AA

まずはFXAA。

fastというだけあってとにかく高速。1PassだしFPSへの影響は3%ぐらい。下記の出力画像はちょっと例題としては良くないけど、AA自体はかなり綺麗に入ってる。ブラー効果が強いとは色々なとこに書かれていたが、確かに強い。木目のDetailとか、マテリアルの細かい陰影など、特にカメラに近づいたもので、はっきり見えるはずの部分が潰れてしまうことがあった。遠くに細かいオブジェクトをたくさん出すと、Dofっぽくていい感じになってる。

実装については、元ネタはこのあたりのようだけど、Processingに含まれてるコードが簡単に移植できた。ちなみにポストAAってどのタイミングでかければいいのか悩んだけど、とりあえず一番最後すべてのプロセスが終わったあとにRGB8のFboを用意して出力するようにしてみた。MSAAほどではないけど、簡単にできるのでオススメです・・・。

スクリーンショット 2014-01-23 23.47.55FXAA (Fast Approximate Anti-Aliasing)

次に、SMAA。

FXAAはソース読むと理解できたんだけど、SMAAは深く読んでない。けど、3passで出力結果のイメージを見た感じ、pass1 でエッジ抽出(ベクトル)。 pass2で1のエッジのなかでAAやるかどうか判定(強さ)、step3 で2の情報つかって実行みたいなかんじ?読んでないから適当だけど、pass2 の結果をみるとかなりエリアを絞っているので、AAがかかるべきところをより厳密に決定しているようだった。結果は評判通り、画質に関してはすごくいい感じ。ただし、全体の処理コストの中ではそれほど大きくないが、FXAAの倍近く負荷がありそう。

実装についても少し書いておくと、ソースはこれ。HLSLとGLSL両方でつかえるっていう斬新なコードでした・・・。

・・・ちょっと長くなりそうなので、ここらで一旦寝ます・・・w(続き)

スクリーンショット 2014-01-23 23.48.03Subpixel Morphological Antialiasing

結論:

ポストプロセスのAAはいわゆる画像処理なわけだけど、画像処理でここまで出来るということに普通に驚いた。ジャギった画像に対してAAできるわけだから、3Dだけじゃなくていろんな応用ができそう。そういえば、写真を2値化したりエッジ抜いたりするときにジャギるの、綺麗にしたかったんだよなぁ・・・。試してみよう。

最近のメモ

年明けてからほぼコード書いてない。

変化するLight Probeの実装イメージ見たくて探してたらwebGLでやってる。
http://codeflow.org/entries/2012/aug/25/webgl-deferred-irradiance-volumes/
これ、WebGLのDefferd Rendering調べてた時にメモってたやつだけど、なにげにすごいことやってるなぁ。

で、最近出たComputer Graphics Gems JPにもLight Probeが取り上げられてたので買ってみた。


まだ途中までしか読んでないけどGBuffer(MTRコスト)の最適化?みたいな頁もあった。

あと、年末になんか調べてたら出てきたスライド、ずいぶん前に公開されてた資料だけど、すごい良かった。
リンク先の資料とかもいろいろ見て見とこうと思う。

いや、年明けてからほぼコード書いてないわけだけど・・・。

Deffered RenderingとofFbo

現状ではofFboのバグのため、Deffered RenderingのためのG-Bufferを作ることすらできないのでちょっと残念である。(現時点でバグのためのPull Requestは出ている) とはいえofFboの設計思想についてはMTR(Multi Target Rendering)を想定して設計されているようだ。

これは実際に作っているDeffered Renderingのデバッグビュー

一例であるが、下記のようにDeffered RenderingのGbufferが構成できる。

ofFbo::Settings gSetting;
gSetting.textureTarget=GL_TEXTURE_2D;
gSetting.depthStencilAsTexture=true;
gSetting.depthStencilInternalFormat=GL_DEPTH_COMPONENT; //depth
gSetting.height=height;
gSetting.internalformat=GL_RGB;
gSetting.maxFilter=GL_NEAREST;
gSetting.minFilter=GL_NEAREST;
//これが現在バグっている(of0.8.0)↓↓
gSetting.colorFormats.push_back(GL_RGB); //diffuse
gSetting.colorFormats.push_back(GL_RGB); //specular
gSetting.colorFormats.push_back(GL_RGBA);//Normals + SSAO.
gSetting.colorFormats.push_back(GL_RG8); //velocity
gSetting.useDepth=true;
gSetting.useStencil=false;
gSetting.width=width;
gSetting.wrapModeHorizontal=GL_CLAMP_TO_EDGE;
gSetting.wrapModeVertical=GL_CLAMP_TO_EDGE;
gbuffer.allocate(gSetting);	

個人的に加えて欲しいのがMTRのためのテクスチャのアタッチメントだ。ofFboではFboオブジェクトがテクスチャを内包するような設計のため、内部テクスチャを他のFBOにアタッチすることができない。いや、実際は下記のようにすればできるわけだから、窓口が用意されていないだけか。

//bind a velocity buffer to HDR Buffer
ofTexture &velTex=gbuffer.getTextureReference(3);
mFboHDR.begin(false);
glFramebufferTexture2D(GL_FRAMEBUFFER,GL_COLOR_ATTACHMENT0+1,velTex.texData.textureTarget,velTex.texData.textureID,0);
mFboHDR.end();

例えば、ライティングを必要としない光源や環境マップをHDRレイヤーに直接レンダリングする際、G-Bufferに書き込みはしないが、Velocity bufferを更新する必要がある。このようなケースではGbufferのVelocity textureをHDRレイヤーのFBOにもアタッチしておけば、余計なレンダリングパスを増やさなくてすむことになる。

とまぁ実装しててcoreの色々足りないところが出てきている。
例えばofTextureについてはcube Textureはiblのために必要だし、1D textureも使えた方がいい。これらはofTextureを継承してofxCubeTexture、ofxTexture1Dみたいに実装している。

また、遅延レンダリングをするには、シェーダーを含めたマテリアルの管理システムが必要になってくる。of標準のofMesh,ofMaterialクラスでは限界があるのでこの辺りはもうちょっと拡張していく必要がありそう。assimpも含めてマテリアル情報を正確に取り込み、レンダリングする仕組みを作らなければならないだろう。これは今後の課題。

とまぁいろいろやってみると、どんどんopenframeworksの使いやすさからかけ離れていきそうなので、完全に独立したレンダリングエンジンになっていきそう・・・。