鯉魚山親山步道

今天睡到下午才起床～想說上午下過一場雨，不知道鯉魚山親山步道會不會有什麼新奇好玩的東西出現，就跑去逛了一下，也當作是週末的運動囉！


從大湖街走到底的入口進去，可以看到刻著"清景大湖"的石頭～

沿著旁邊的階梯走上去，可以看到這樣的景色～感覺心曠神怡:)

再沿著階梯走下去....有著小溪一條(記得是叫"大溝溪")

人可以在溪兩旁的石頭上面走，感覺很有趣內！

再往裏面走～

小橋流水

旁邊有一條路是往鯉魚山

有下過雨果然有差～水明顯的比較大！

上次有帶幾個同學這裡泡腳

～～～忍～～～

十幾年前來這裡時，是沒有這座橋的喔！
是有一次颱風把這段路給沖走了，才又加蓋這座橋的！

這是竹節蟲嗎？
在這裡只要留意小地方，可是處處有驚奇的呢！

圓覺瀑布

沾滿水珠的蜘蛛網

親山又親水的步道

往鯉魚山的階梯

往上走還有橋喔～
這在我小時候來的時候是沒有的，也是後來修建的！

幾乎每次來都會看到的－－－－人面蜘蛛　(可愛內～～>/////<)

鯉魚山上面還有小人國喔！不知道這裡在半夜會不會很熱鬧　XD

山上所看到的台北盆地～但今天的天氣狀況不好....

山上的小涼亭

內湖真是個好山好水的地方呢！

立體相機

在現在這間公司，除了3D動畫的技術&知識外，我想另一個不小的收穫就是stereo的部份吧！(當然最大的收穫還是~認識很多非常nice的同事！！)

某次RD meeting時，我們的頭頭--Drake--帶了台朋友借他的stereo相機(富士的FinePix REAL3D)，當下就有幾個同事把玩了起來。






















想說在離職前，也寫一篇跟stereo攀的上邊的東西，當作個小小的紀念囉~

立體影像的原理很簡單。從早期用的紅藍眼鏡(讓左右眼分別接收不同色系的影像來達到立體的效果)，到現在一般戲院戲院用的偏光眼鏡(讓左右眼分別接收不同頻率的影像來達到立體成像)，都是一樣的目的---左右眼分別接收不同的影像。

但是要把畫面做的協調好看，又不會讓觀眾看到頭暈看到吐，可是非常需要技術&經驗的累積~不過....不再這篇討論的範圍 ~XD

這篇只是單純的想秀一下用那台stereo相機拍出來的效果。

這是拍出來的左眼影像：





















這是拍出來的右眼影像：






















這是麻煩同事--柏納--幫我用Nuke合出來的影像，戴上紅藍眼鏡就可以看出stereo效果。(新版的Nuke已經可以做出用紅藍眼鏡就能看出立體效果的功能，很有趣吶~)






















當然，還是用偏光眼鏡看到的stereo效果會比較好~但現在一般螢幕只能看紅藍的......

PTT內湖鄉民中秋烤肉版聚[趴兔](20091004)

內湖人團○
千里共嬋娟




















眼尖的版友在玻璃上發現趴了隻青蛙(kero~kero~~)






















座位表





















可愛又有趣的名牌





































專業內！！






















































忘了開閃光...整個黑掉 @@




















又是忘了開閃光...orz






















































最右邊那位的表情...
good job！ XD


























































我們第六組的幾位正妹~


















以下幾張是去每組偷拍的









































我們第六組的David和S.H.E.(我亂取的啦 XD)

























































































































↖煞气a粉腸↘























粉腸跟David烤的香腸超讚的呢！！！
在內湖開一間鐵定會賺~























































讓自己也入鏡一下 XD

PTT內湖鄉民中秋烤肉版聚(20091004)

20090908在墾丁被吉普車玩

(6)在GLSL中，利用sobel描輪廓線

這是一張今年９月初跟朋友去墾丁玩的時候的照片。sobel就是一個把一張灰階的圖片，描出其輪廓線的演算法。

以下就來用GLSL實做一下sobel。

這裡只有用到fragment shader！

流程很簡單，就是先用OpenGL API做出2D貼圖，再用GLSL將其轉成灰階，再將其用sobel瞄出輪廓線。

先來看一下要set shader的function:(也就只是把之前的例子的vertex shader的部分去掉而已)

void setShaders() {



    char *vs = NULL,*fs = NULL,*fs2 = NULL;



    f = glCreateShaderObjectARB(GL_FRAGMENT_SHADER_ARB);



    fs = textFileRead("sobel.frag");



    const char * ff = fs;



    glShaderSourceARB(f, 1, &ff,NULL);



    free(fs);



    glCompileShaderARB(f);



    p = glCreateProgramObjectARB();



    glAttachObjectARB(p,f);



    glLinkProgramARB(p);



    glUseProgramObjectARB(p);



}

再來是先看怎麼在fragment shader中，將其轉成灰階:

uniform sampler2D tex;
float intensity(vec4 color){
    return 0.299*color.r + 0.587*color.g + 0.114*color.b;
}
void main(){
    vec4 a, p;
    p.s=gl_TexCoord[0].s;
    p.t=gl_TexCoord[0].t;
    a=texture2D(tex,p.st);
    float i = intensity(a);
    gl_FragColor = vec4(i, i, i, 1);
}

結果如下:

最後來看怎麼在fragment shader中，將其利用sobel瞄出輪廓:

uniform sampler2D tex;

float intensity(vec4 color){   
    return 0.299*color.r + 0.587*color.g + 0.114*color.b;
}

float sobel(vec4 a1,vec4 a2,vec4 a3,vec4 a4,vec4 a5,vec4 a6,vec4 a7,vec4 a8,vec4 a9)
{   
    float X,Y;  
    vec3 y=vec3(a6.r-a4.r, a3.r-a1.r, a9.r-a7.r);  
    vec3 z=vec3(a2.r-a8.r, a3.r-a9.r, a1.r-a7.r);   
    X=2*y.x+y.y+y.z;    
    Y=2*z.x+z.y+z.z;   
    return (float)sqrt(X*X+Y*Y);
}

void main(){     
    vec4 a1,a2,a3,a4,a5,a6,a7,a8,a9;    
    vec4 p1,p2,p3,p4,p5,p6,p7,p8,p9;    
    vec2 c=vec2(1, 1);
    
    p5.s=gl_TexCoord[0].s;    
    p5.t=gl_TexCoord[0].t;

    a5=texture2D(tex,p5.st);    
    float i = intensity(a5);        
 
    p1.s=p5.s-c.s/(256);   
    p1.t=p5.t-c.t/(256);

    p2.s=p5.s;   
    p2.t=p5.t-c.t/(256);
    p3.s=p5.s+c.s/(256);   
    p3.t=p5.t-c.t/(256);
    p4.s=p5.s-c.s/(256);   
    p4.t=p5.t;
    p6.s=p5.s+c.s/(256);   
    p6.t=p5.t;
    p7.s=p5.s-c.s/(256);   
    p7.t=p5.t+c.t/(256);
    p8.s=p5.s;   
    p8.t=p5.t-c.t/(256);
    p9.s=p5.s+c.s/(256);   
    p9.t=p5.t+c.t/(256);

    a5=texture2D(tex,p5.st);   
    a1=texture2D(tex,p1.st);   
    a2=texture2D(tex,p2.st);   
    a3=texture2D(tex,p3.st);   
    a4=texture2D(tex,p4.st);   
    a6=texture2D(tex,p6.st);   
    a7=texture2D(tex,p7.st);   
    a8=texture2D(tex,p8.st);   
    a9=texture2D(tex,p9.st);

    float j=sobel(a1,a2,a3,a4,a5,a6,a7,a8,a9);   
    gl_FragColor = vec4(j, j, j, 1); 
}

結果如下圖:

(5)多重貼圖{multi-texture}

上次聽同事(ypcat)分享他去siggraph的收穫後，才知道OpenGL 3.2已經變成shader base programmig了，也就是不再用以往的glBegin() & glEnd()之類的來建構出geometry primitive，而是會將其寫在vertex buffer object裡。


感覺挺酷的!!


不過這篇還是用老舊的方式，也就是使用glBegin() & glEnd()來建構出geometry primitive。


是改自從這個網站 http://www.lighthouse3d.com/ 下載來的project；而使用貼圖所用到的function，是從OpenGL超級手冊的範例中拿來用的。
-------------------------------------------------------------------------------------------------

目的是要將下面這兩張圖:

經由GLSL合併成下圖的樣子:

先來看一下要怎麼透過OpenGL API，傳遞貼圖給GLSL:

glBegin(GL_POLYGON); 
    //
   /*下面這綠色這兩行，作用是同時將GL_TEXTURE0和GL_TEXTURE1，assign給vertex*/
   glMultiTexCoord3fARB(GL_TEXTURE0_ARB, 0.0, 1.0, 0.0);
   glMultiTexCoord3fARB(GL_TEXTURE1_ARB, 0.0, 1.0, 0.0);
   glVertex3f(1*size,1*size,1*size);




   //
   glMultiTexCoord3fARB(GL_TEXTURE0_ARB, 0.0, 0.0, 0.0);
   glMultiTexCoord3fARB(GL_TEXTURE1_ARB, 0.0, 0.0, 0.0);
   glVertex3f(1*size,-1*size,1*size);

   // 
    glMultiTexCoord3fARB(GL_TEXTURE0_ARB, 1.0, 0.0, 0.0); 
    glMultiTexCoord3fARB(GL_TEXTURE1_ARB, 1.0, 0.0, 0.0);
   glVertex3f(-1*size,-1*size,1*size);
 
　　//


 
    glMultiTexCoord3fARB(GL_TEXTURE0_ARB, 1.0, 1.0, 0.0); 
    glMultiTexCoord3fARB(GL_TEXTURE1_ARB, 1.0, 1.0, 0.0); 
    glVertex3f(-1*size,1*size,1*size); 
glEnd();

而texture的資訊，是透過下面的OpenGL API function，assign給GLSL的uniform variable。

void renderScene(void) {
   glClear(GL_COLOR_BUFFER_BIT GL_DEPTH_BUFFER_BIT);
   glUseProgram(p);
   //tex1 & tex2 是在 fragment shader中宣告的uniform variable
   //透過loc1 & loc2 來將讀取到的texture資訊，分別assign給tex1 & tex2
   loc1 = glGetUniformLocation(p, "tex1");
   loc2 = glGetUniformLocation(p, "tex2");

   //下面這段，就是先讀取texture資訊，再透過loc1&loc2分別assign給tex1 & tex2
   //其中TextureLoad是從openGL超級手冊的範例拿來用的function
   //(懶的解釋每個fuction的用途 XD)
   glActiveTexture(GL_TEXTURE0_ARB);
   text1=TextureLoad("crate.bmp", GL_FALSE, GL_LINEAR, GL_LINEAR, GL_REPEAT);
   glBindTexture(GL_TEXTURE_2D, text1);
   glEnable(GL_TEXTURE_2D);
   glTexEnvf (GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE_EXT);
   glTexEnvf (GL_TEXTURE_ENV, GL_COMBINE_RGB_EXT, GL_REPLACE);
   glUniform1i(loc1, 0);
    glDisable(GL_TEXTURE_2D);

   glActiveTexture(GL_TEXTURE1_ARB);
   text2 = TextureLoad("GodTaiwan.bmp", GL_FALSE, GL_LINEAR, GL_LINEAR, GL_CLAMP);
   glBindTexture(GL_TEXTURE_2D, text2);
   glEnable(GL_TEXTURE_2D);
   glTexEnvf (GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE_EXT);
   glTexEnvf (GL_TEXTURE_ENV, GL_COMBINE_RGB_EXT, GL_INCR);
   glUniform1i(loc2, 1);
    glLoadIdentity();
   gluLookAt(5.0,0.0,0.0,
             0.0,0.0,0.0,
             0.0f,1.0f,0.0f);
   glLightfv(GL_LIGHT0, GL_POSITION, lpos);
   glRotatef(a,0,1,1);
   drawBox(1);
   a+=0.1;
   glutSwapBuffers();
}

最後，來看一下Vertex & Fragment shader裡是怎麼寫的吧~

Vertex Shader:

void main(void)
{
//用來使用貼圖的內建array
gl_TexCoord[0] = gl_MultiTexCoord0;
gl_TexCoord[1] = gl_MultiTexCoord1;
gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
}

Fragment Shader

//用來讀取從外部傳入的texture的資訊的變數
uniform sampler2D tex1;
uniform sampler2D tex2;
void main (void)
{
//這....看也知道吧 XD........不然就咕狗囉
vec4 texval1 = texture2D(tex1, vec2(gl_TexCoord[0]));
vec4 texval2 = texture2D(tex2, vec2(gl_TexCoord[1]));
gl_FragColor = 0.5*(1.0*texval1 + 1.0*texval2);
}

//用來讀取從外部傳入的texture的資訊的變數

uniform sampler2D tex1;

uniform sampler2D tex2;

void main (void)

{

//這....看也知道吧 XD........不然就咕狗囉

vec4 texval1 = texture2D(tex1, vec2(gl_TexCoord[0]));

vec4 texval2 = texture2D(tex2, vec2(gl_TexCoord[1]));

gl_FragColor = 0.5*(1.0*texval1 + 1.0*texval2);

}