01-第一段shaderToy代碼.glsl

準(zhǔn)備好了環(huán)境以后(未安裝請(qǐng)移步http://www.reibang.com/p/fdf87797e5ba)蠢涝,新建一個(gè)文件名為01-第一段shaderToy代碼.glsl刃永,并用vscode工具打開(kāi)爆捞,輸入如下代碼

//他是一個(gè)內(nèi)置的函數(shù),函數(shù)名是固定的,不能修改
//iTime是一個(gè)內(nèi)置的全局變量籍铁,表示時(shí)間,是一個(gè)float類型的變量,表示從程序開(kāi)始運(yùn)行到當(dāng)前時(shí)間的秒數(shù)

vec2 ClipCoord(in vec2 fragCoord) {
    //偏移歸一化坐標(biāo)

    //fragCoord是片元坐標(biāo),iResolution.xy是屏幕分辨率癌幕,
    //這里fragCoord / iResolution.xy是將屏幕坐標(biāo)轉(zhuǎn)換為[0,1]的歸一化坐標(biāo)
    //然后減去0.5,是將坐標(biāo)系原點(diǎn)從左上角移動(dòng)到中心
    //為什么能夠減去0.5呢昧穿?因?yàn)闅w一化坐標(biāo)是[0,1]勺远,所以坐標(biāo)系的中心是0.5
    //但是為什么iResolution.xy可以減去0.5,因?yàn)閤y是vec2類型时鸵,是一個(gè)二維向量胶逢,所以可以直接減去0.5
    //向量減去一個(gè)數(shù),是將向量的每個(gè)分量都減去這個(gè)數(shù)饰潜,
    //最終返回的是一個(gè)以中心為原點(diǎn)的歸一化坐標(biāo)
  return 2. * (fragCoord / iResolution.xy - 0.5);
}

// vec2 ClipCoord2(in vec2 fragCoord) {
//     //偏移歸一化坐標(biāo)
//   return 2. * (fragCoord - 0.5 * iResolution.xy) / iResolution.x;
// }

struct bg_color {
  vec3 color;
  float time;
};

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  //片元著色器代碼,入?yún)槠鴺?biāo)初坠,出參為片元顏色

  //bg_color是一個(gè)結(jié)構(gòu)體,包含了一個(gè)vec3類型的color和一個(gè)float類型的time
  //這里bg是一個(gè)bg_color類型的變量彭雾,初始化了一個(gè)vec3類型的顏色和一個(gè)時(shí)間
  bg_color bg = bg_color(vec3(1., 1.0, 0.0), iTime);

  vec2 uv = ClipCoord(fragCoord);
  // vec2 uv = ClipCoord2(fragCoord);
  //length函數(shù)是一個(gè)內(nèi)置函數(shù)碟刺,用來(lái)計(jì)算向量的長(zhǎng)度,這里是計(jì)算uv向量的長(zhǎng)度
  float coordlen = length(uv);
  float iTimeYS = bg.time - floor(bg.time);
  //先來(lái)一個(gè)純色背景
  fragColor = vec4(bg.color, 1);

  // //如何在shader toy中取余數(shù)呢:iTime % 1.0這樣是不對(duì)的冠跷,因?yàn)椴恢С诌@樣的寫法南誊,正確的寫法是iTime - floor(iTime)
  // //這里的iTimeYS會(huì)突然變成0,這樣會(huì)導(dǎo)致顏色跳動(dòng)蜜托,所以我們需要他是一個(gè)0-1然后再1-0的過(guò)程
  // //這樣的話抄囚,顏色就會(huì)平滑的變化
  // //我們可以通過(guò)cos函數(shù)來(lái)實(shí)現(xiàn)這樣的效果,iTimeYS是一個(gè)0-1的過(guò)程橄务,cos(iTimeYS * 3.1415926)是一個(gè)1-0-1的過(guò)程
  // fragColor = vec4(cos(bg.time), bg.color.y, 1. - cos(bg.time), 1);
  // //如果長(zhǎng)度小于0.5(相當(dāng)于以屏幕中心為原點(diǎn)幔托,半徑在0.5以內(nèi)),那么將顏色設(shè)置為紅色
  if(coordlen <= 0.5) {
    fragColor = vec4(coordlen * 2., 1, 1, 1);
  }
  // fragColor = vec4(coordlen, 0, 0, 1);
}


保存代碼蜂挪,右鍵Shader Toy:Show GLSL Preview你將會(huì)看到如下界面:


image.png

接下來(lái)重挑,我們將一行行的解釋代碼,以便于新手了解我們的程序如何運(yùn)作:

首先shader toy提供一個(gè)入口函數(shù)mainImage棠涮,和一個(gè)內(nèi)置變量iTime:
mainImage是片元著色器代碼的函數(shù)名(這個(gè)名稱不能改變谬哀,shader toy會(huì)調(diào)用這個(gè)函數(shù),如果你改了就找不到了)严肪,入?yún)槠鴺?biāo)史煎,出參為片元顏色
iTime是浮點(diǎn)數(shù)時(shí)間谦屑,從程序運(yùn)行開(kāi)始計(jì)數(shù),單位為秒

1.我們新建一個(gè)ClipCoord函數(shù)

為何先要新建函數(shù)呢篇梭?因?yàn)檫@里沒(méi)有變量提升的概念氢橙,我們要用之前都需要先新建好。
ClipCoord函數(shù)的意義是偏移并歸一化坐標(biāo)恬偷,它把以左上角為原點(diǎn)的屏幕坐標(biāo)系悍手,轉(zhuǎn)化為以屏幕中心為原點(diǎn)的歸一化坐標(biāo)系,”fragCoord / iResolution.xy“ 是歸一化屏幕坐標(biāo)袍患,歸一化以后再”-0.5“是為了再XY軸上偏移一半的距離坦康,這樣原點(diǎn)就由左上角移動(dòng)到了中心,但是為了不讓單條軸的范圍是(-0.5,0.5),我們給他乘以2(這里可以理解為縮放)协怒,讓它變成(-1,1)這樣方便我們觀察涝焙,也能緩解強(qiáng)迫癥

2.新建一個(gè)構(gòu)造體bg_color

入?yún)関ec3初始背景色,外加一個(gè)時(shí)間參數(shù)(為了后續(xù)做動(dòng)畫使用)孕暇,這個(gè)構(gòu)造體僅僅只是為了把需要用到的參數(shù)集中管理,實(shí)際上不用構(gòu)造體赤兴,僅用普通的變量也可以實(shí)現(xiàn)

3.新建一個(gè)mainImage函數(shù)(該函數(shù)名稱不能修改妖滔,它是shader toy內(nèi)置入口函數(shù))

函數(shù)內(nèi)依次:
創(chuàng)建背景構(gòu)造體,


image.png

獲取半徑(后續(xù)用于判斷圖像范圍)


image.png

給背景賦值背景色(給整個(gè)畫布繪制顏色)


image.png

判斷圓形范圍(處于半徑內(nèi)的任何片元都是圓形區(qū)域)


image.png

在圓形區(qū)域內(nèi)用圓的顏色覆蓋背景色(由于之前已經(jīng)繪制過(guò)背景色桶良,此時(shí)的繪制實(shí)際上相當(dāng)于在背景色之上覆蓋圓形的顏色)


image.png

大工告成座舍,代碼重還有一些通過(guò)時(shí)間變量來(lái)改變顏色的代碼段,可以讓圖像動(dòng)起來(lái)陨帆,各位可以自行研究


image.png
總結(jié):

背景和圓形都是通過(guò)計(jì)算的每一個(gè)片元的顏色來(lái)繪制的曲秉,片元著色器的意義就是根據(jù)你給定的邏輯給屏幕上色,而在編寫邏輯的時(shí)候常常運(yùn)用到一些數(shù)學(xué)知識(shí)比如繪制圓和三角函數(shù)計(jì)算疲牵,不過(guò)不用擔(dān)心只要有高中數(shù)學(xué)水平就能夠?qū)崿F(xiàn)大部分的效果

要點(diǎn):

1.浮點(diǎn)數(shù)必須和浮點(diǎn)數(shù)計(jì)算承二,所以代碼中有“1.”、“.5”這樣的寫法
2.沒(méi)有變量提升纲爸,要使用的變量與函數(shù)都需要提前聲明
3.要認(rèn)識(shí)shader toy的內(nèi)置函數(shù)和內(nèi)置變量

留下兩個(gè)問(wèn)題:

1.為什么繪制的圓有一些拉伸變形亥鸠?
2.為什么下面這個(gè)計(jì)算公式的對(duì)象有xy兩個(gè)值卻能直接減去0.5?fragCoord / iResolution.xy - 0.5

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末识啦,一起剝皮案震驚了整個(gè)濱河市负蚊,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌颓哮,老刑警劉巖家妆,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異冕茅,居然都是意外死亡伤极,警方通過(guò)查閱死者的電腦和手機(jī)蛹找,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)塑荒,“玉大人熄赡,你說(shuō)我怎么就攤上這事〕菟埃” “怎么了彼硫?”我有些...
    開(kāi)封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)凌箕。 經(jīng)常有香客問(wèn)我拧篮,道長(zhǎng),這世上最難降的妖魔是什么牵舱? 我笑而不...
    開(kāi)封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任串绩,我火速辦了婚禮,結(jié)果婚禮上芜壁,老公的妹妹穿的比我還像新娘礁凡。我一直安慰自己,他們只是感情好慧妄,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布顷牌。 她就那樣靜靜地躺著,像睡著了一般塞淹。 火紅的嫁衣襯著肌膚如雪窟蓝。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天饱普,我揣著相機(jī)與錄音运挫,去河邊找鬼。 笑死套耕,一個(gè)胖子當(dāng)著我的面吹牛谁帕,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播箍铲,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼雇卷,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了颠猴?” 一聲冷哼從身側(cè)響起关划,我...
    開(kāi)封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎翘瓮,沒(méi)想到半個(gè)月后贮折,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡资盅,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年调榄,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了踊赠。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出吃靠,到底是詐尸還是另有隱情租副,我是刑警寧澤妒御,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏帖鸦。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一胚嘲、第九天 我趴在偏房一處隱蔽的房頂上張望作儿。 院中可真熱鬧,春花似錦馋劈、人聲如沸攻锰。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)口注。三九已至,卻和暖如春君珠,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背娇斑。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工策添, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人毫缆。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓唯竹,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親苦丁。 傳聞我的和親對(duì)象是個(gè)殘疾皇子浸颓,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361