2009年11月1日星期日

鯉魚山親山步道

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


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






















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























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






















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






















再往裏面走~






















小橋流水


































































旁邊有一條路是往鯉魚山






















有下過雨果然有差~水明顯的比較大!





















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





















~~~忍~~~





















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





















這是竹節蟲嗎?
在這裡只要留意小地方,可是處處有驚奇的呢!











































圓覺瀑布





















沾滿水珠的蜘蛛網





















親山又親水的步道





















往鯉魚山的階梯











































往上走還有橋喔~
這在我小時候來的時候是沒有的,也是後來修建的!





















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





















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





















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





















山上的小涼亭




















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

2009年10月26日星期一

立體相機

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

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






















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

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

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

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

這是拍出來的左眼影像:





















這是拍出來的右眼影像:






















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






















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

2009年10月4日星期日

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





















內湖人團○
千里共嬋娟




















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






















座位表





















可愛又有趣的名牌





































專業內!!






















































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




















又是忘了開閃光...orz






















































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


























































我們第六組的幾位正妹~


















以下幾張是去每組偷拍的









































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

























































































































↖煞气a粉腸↘























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























































讓自己也入鏡一下 XD
















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














































2009年9月27日星期日

20090908在墾丁被吉普車玩







































































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




這是一張今年9月初跟朋友去墾丁玩的時候的照片。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);
}



結果如下圖:


2009年9月26日星期六

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