Just My Life & My Work

[GLSL] 安裝 ShaderDesigner

工欲善其事,必先利其器!雖然說可以直接在Visual C++上寫GLSL,但必須先寫OpenGL application,接著設定shader和program,經過建立create、來源source、編譯compile、附著attach、連結link、使用use等步驟,才真正能和vertex shader和fragment shader溝通,詳情可見Setup Example。若想要直接來寫shader,跳過OpenGL application的部份,可以安裝ShaderDesigner

到官網TyphoonLabs’ OpenGL Shader Designer下載安裝檔和程式碼,並且進行安裝。

軟體介面官方手冊都有做講解,可以直接參考學習。

接著進入shader的撰寫,建立new shader project,並且設定好路徑。

首先準備好兩張貼圖,我這個firstshader是參考手冊上的例子,不過貼圖用我的大頭照:P

mefour以上兩張texture都為256*256像素,準備將兩張texture混合貼到cube m0del上。

看到介面中間有兩個tab,分別為XXX.vert和XXX.frag(XXX為專案名稱),分別為vertex和fragment shader撰寫處。

先不用瞭解程式碼在做什麼,在XXX.vert打入:

uniform sampler2D TextureUnits0;
uniform sampler2D TextureUnits1;

void main()
{
	gl_TexCoord[0]=gl_MultiTexCoord0;
	gl_TexCoord[1]=gl_MultiTexCoord1;

	gl_Position=gl_ModelViewProjectionMatrix*gl_Vertex;
}

而在XXX.frag打入:

uniform sampler2D TextureUnits0;
uniform sampler2D TextureUnits1;

void main()
{
	vec4 value1=texture2D(TextureUnits0, vec2(gl_TexCoord[0]));
	vec4 value2=texture2D(TextureUnits1, vec2(gl_TexCoord[0]));

	gl_FragColor=(value1+value2)*0.5;
}

註:ShaderDesigner只有提供1組貼圖座標,因此value1和value2都設定同一組座標。

再來設定貼圖,雙擊texture preview白欄,使用兩張貼圖use輸入2,分別在filename匯入貼圖。

記得設定uniform variable,這裡官方手冊忘了寫:
type: int, name:TextureUnits0, value:0
type: int, name:TextureUnits1, value:1

點選cube圖示,最後按F4編譯兩個shader,結果呈現如下:

outcome

若點選teapot圖示,則結果呈現:

outcome

ShaderDesigner的source code還有約10個project範例,若想要瞭解程式碼的意義可參考網路上的tutorial。

隨意留個言吧:)~

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

標籤雲

%d 位部落客按了讚: