本篇解釋如何透過P5.js的函式調用Shader,藉此讓WebGL透過GPU所執行的Shader運行一個漸層。

可以前往https://openprocessing.org/sketch/1215268查看原始碼。

由於這些帶著光暈的光點,主要是透過Fragment shader的編碼呈現。前置的部份我就快速帶過:

前置

首先我們在Javascript使用 …


前一篇提到如何實作Shader,但光看步驟流程很難很透徹的理解。

GLSL跟C語言相近,若你熟悉C語言,那你能很快上手。若沒接觸C語言就涉獵Shader,你會需要搞懂GLSL,本篇介紹GLSL中所需理解的基本知識。包含變數、函式以及Variable Qualifiers。

1. 變數

GLSL的變數相當多種,舉凡int, float, bool, vec2, vec3, vec4等。前三個你應該可以猜的出來,就是整數、浮點數、布林值,但後面三個是什麼?它們即是Vector的縮寫,它可以一個數組,可以是二維、三為、四維,依照你的需求而定。

vec2可以裝兩個,vec3可以裝三個,以此類推。如果想像成陣列存取這些可能比較好理解。

這些數組的提取、給定都跟JS不太一樣。下面介紹幾個面相。

A. 存取這些數值的方式

透過以下方式宣告一個vec3:

vec3 color = vec3(0.0, 0.5, 1.0);

你可以透過你宣告的vac3給定一個數值

float redComponent = color.r;

透過這個方式,你可以獲得這個vec3的第一個數值。當你使用color.r時,你在抽取的是第一個數值。

為什麼呢?

B. 如何稱呼向量中不同的數值

是這樣的,vec3可以依照r,g,b三個關鍵字提取三個不同位置的數值,也可以依照x,y,z三個關鍵字提取三個不同位置的數值。無論是透過r,g,b還是透過x,y,z,本質都是一樣的,並沒有變。

你可以透過這方式依序提取三個數值

vec3 colorCopy1 = color.rgb;         // R = 0, G = 0.5, B = 1.0

你也可以透過x, y, z 提取三個數值,這跟前者沒差別。

vec3 colorCopy2 = color.xyz;         // R = 0, G = 0.5, B = 1.0

2. 著色器的函式

函式跟JS的函式很像,但還是有差異,估計你可以直接透過用看的就能看出兩者差異:

vec3 rgb(float r, float g, float b){
return vec3(r / 255.0, g / 255.0, b / 255.0);
}

3. Variable Qualifiers

GLSL的變數有多種不同的Variable Qualifiers,下面介紹幾個常見的幾個:

A. Const or #define @

Const就很像Js ES6的Const。至於Define,則是用來取代文件中提及的所有關鍵字,主要是替換文字,基本上並沒有因此多儲存資料在記憶體,所以會比較有效率。

B. Attributes

  • 依據不同的vertex變化的變數
  • 可用來從外戶獲取資料,例如從js取得資料到着色器中
  • 可轉成其他變數如vec3

C.Uniforms

  • 可以從JS傳值到著色器中。
  • 由於GPU在渲染畫面時,一個螢幕會有很多平行的thread一起渲染,但無論是哪一個thread在渲染,這個數值固定一致,這也是被稱作uniforms的原因。
  • 透過其他套件例如p5.js,我們能夠從js傳值到着色器,如下:
theShader.setUniform("u_resolution", [width, height]); 
// 傳螢幕大小給shader
theShader.setUniform("u_time", millis() / 1000.0);
// 傳時間給shader (millis()是p5的函式)
theShader.setUniform("u_mouse", [mouseX, mouseY]);
// 傳滑鼠的位置給shader

接著在Fragment宣告同名的名稱,即可從Js接收資料並且加以應用。

uniform vec2 u_resolution; 
uniform float u_time;
uniform vec2 u_mouse;

D. Varying

  • 跟uniform不同,uniform在每個像素渲染時保持不變,但在varying則各不相同。
  • 通常用來傳遞texture coordinates通常用來傳遞texture coordinates

理解這些基本常識之後,我們可以開始用shader創造一點不一樣的,下篇將整合前兩篇的知識,操控Shader創造形狀。


WebGL is a library that provides methods to create our 3D effect in our website. It’s beneficial to draw our 3D in GPU.

本篇介紹使用WebGL的API繪製畫面的流程以及實作,透過WebGL,我們能實現很多3D特效,而多數網頁3D套 …


本偏藉助p5.js的力量將粒子資訊傳入至WebGL的Shader工具,真正實現光暈效果程式碼在fragment shader裡面。

本篇內容包含:

  1. 粗淺介紹使用Shader的方法
  2. 粗淺介紹GLSL語言變的數種類以及型別,以利後續程式碼的閱讀
  3. 快速建置Shader。提及每個步驟的任務,並透過註解解釋運作過程
  4. 建立具有光暈的粒子-原理
  5. 建立具有光暈的粒子-實作放 …


SVG濾鏡很多種效果,一個濾鏡(Filter)可以套用一種效果(Filter Primitives),也可以套用很多種效果。

是這樣的,效果在濾鏡裡面吃順序,一般依照標籤出現的順序,或透過特定屬性來修改。有些效果不加特定屬性規定順序就不能套用。

特定屬性就是「in」跟「result」了(有時還有in2,將在下章提及)。

來看看最簡單的濾鏡:

<sv …


本文將介紹SVG濾鏡原理以及應用方式,使設計師們能夠輕易上手濾鏡並製作互動性SVG。包含:feFlood, feBlend, feDisplacementMa, pfeTurbulence, feColorMatrix, feImage, feGaussian​Blur, pattern

濾鏡的使用方法

建立一個標籤<filter>並放在<defs>中,在形狀標籤中 …


看完這篇文你會對SVG圖檔中<path>標籤的形狀資料指令有更深入的了解。讀完本文你能夠知道:d屬性的所有指令以及的運作道理。

d屬性的運作道理

SVG能夠設計向量屬性,其中d屬性儲存形狀的資料,包含形狀的座標與曲線。無論多麼精緻,都能夠重現我們在Illustrator, Photoshop, After Effect製作的鋼筆或是Sketch的形狀。那它怎麼做到的呢?

我分成三步,一先儲存了起點,二儲存形狀中的每一個錨點,三設定封閉終點,就這樣而已。只是它儲存路徑有不同的指令,依據不同指令與數值建立曲線。搞懂那些指令就了解它怎麼記憶所有點。

<path d=”M10,10V37H25L40,51,63,37c18,0,30,11,30,25S82,83,82,83Q60,100,95,95T120,120Z” />

像上面的Path路徑就儲存了一串英文與數字組成的資料,其中英文是指令,數字是座標。英文定義我怎麼畫的,數字定義我畫在哪裡。

一個指令右邊可以配零到七個數字,依照指令類型而定。指令類型分大小寫,大寫代表它接續的數字是圖片上的絕對座標,小寫代表與上個指令相對的座標。

d屬性的第一步-M

M設定起始座標,我們可以這樣寫:

<path d="M0,0">

這代表一個點,一個起始點在XY軸0,0的位置,這樣就做出來了!但圖片中我們什麼都看不到,畢竟只是一個點而已,還不是一個面。

d屬性的第二步-繪製沿途錨點

指令我們分兩大類,一大類是直線,一大類是曲線,先以直線做例子:

指令H指令接一個數字代表X軸平移多少,V指令接一個數字代表Y軸垂直移多少,L代表則是XY軸水平垂直移多少。注意大寫代表絕對座標,小寫是相對座標。舉個例子:

<path d=" M10,10 H20 L10,20 V10 "/>

意思是,M10,10表示建立10,10的起點,H20表示X軸移到座標20,10,接下來L10,20代表Y軸移到座標10,20,V代表Y軸移回到座標10,10,也就是起點。路徑會長這樣:

如果指令是小寫呢?它將成為相對位置,所謂的相對是指該指令前一個點所相對的地方。如果數字不變,將指令變成小寫將變成下圖:

<path d=" M10,10 h20 l10,20 v10 "/>


製作高互動性的SVG一直都是很多設計師的煩惱,本章介紹如何用平易近人的繪圖與動畫製作軟體建立網頁專用的SVG動圖,不僅能與使用者互動、還能依照後端資料變化的圖檔。這尤其對於資料視覺化網頁來說相當實用呢。可是本章並不是介紹將動畫直接從After Effect轉檔喔,After Effect沒辦法直接轉檔SVG,需要插件,但藉由插件所建立的動畫不態好 …


交換學校 Saginaw Valley State University一景

小弟是世新大學畢業生,參加交換學生計畫,對於複雜的程序與經驗談想要記錄起來,希望能幫未來學弟妹或是想出國交換的勇者提供一些線索。有關計畫、申請交換以及出境(含役男)。

其實出國交換在大一剛入學就是一個小小的夢想,大二有機緣認識出國交換的學長之後就開始積極計畫出國交換。

計畫

世新大學提供很多交換專案,日本、韓國、英語系國家以及歐洲,回過頭來看如果有先計畫好,其實成功機會蠻大的,不管英語很差,還是對出國甄選面試很擔心,這些都可以解決,只要有計劃跟時間。

準備語言能力 > 出國甄選 > 出國規劃

準備語言能力

要自己讀?還是報名補習班

去看看學校的出國交換語言門檻是多少,回來規劃讀書計畫,我看我們學校最低至少托福61分,相當於英檢中級與中高級之間。

有些人喜歡自己讀,能自己規劃讀書很好,但如果沒有適當的壓力推你一把,其實會讀的很孤單,也比較沒勁,但我的兩位同行夥伴本身英語系,底子比較好所以不用去補習。

我對自己的英文學習需要有人給點壓力。這不是不好,只是需要有人推你一把,這是我報名英文補習班的原因。我花了兩萬用一年的時間溫習,花了四萬用半年的時間衝刺,其實算一算每堂課每小時250元(多益)或400元(托福),比大學每堂課200元還要貴一些,但絕對有用!

對我來說,補習的技巧就是,越常上課越認真,越認真就越高分。如果不去上課,其實很容易就感到壓力也覺得想放棄。

必備的讀書工具

我在學英文的時候聽很多朋友建議用了一些方法,而我自己認為最好的讀英文工具,絕對是iTalki跟Grammary。

iTalki是語言交換平台,大家互相練習自己的母語口說與寫作,但口說需要花錢(相信我絕對值得)。

我找了法國帥哥用每小時7美金的價格跟他聊天練習,有練習差非常多,慣用詞彙可以增加,常犯的錯誤可以被糾正,我還會錄下來自己看自己是在哪種句型中卡住,並修正。

這個平台還提供作文簿,你可以自己寫作文讓母語者免費改,我必須說很多母語者真的很佛心會幫人改作文,這也讓我常上討論區幫人改中文作文,施比受更有福,互相幫忙互相成長。

Grammary是作文檢查軟體,你可以用他去幫你偵測哪些地方寫錯了,為什麼錯,有哪些文法錯誤藏在其中,免費版可以幫你偵錯錯字、文法錯誤數量、跟更好用的替代字選項。如果你買付費版可以看到文法錯誤在哪裡。它是自己批改作文相當好用的工具,我用這個進步不少,我最後也買了付費版。

報名考試

早早報名考試,等到上完補習班的套餐課程就去考試效果最好,我那時候的經驗是,我知道托福成績通常10天左右就會公告在網路上,十天過後剛好準備甄選備審資料,但不要留太少時間在準備甄選備審資料。越早知道越容易準備填校順序,所以建議不要太靠近截止日,最好給自己緩衝時間,才能準備考甄選。下面我提供我自己的日期給大家參考:

105/ 10 報名英文補習班(一般的那種英檢課)

106 / 10 報名英文補習班托福課程(包含說跟寫,比較難比較貴)

106 / 11 報名托福考試

107 / 02 / 07 簡章公布

107 / 02 / 27 托福考試

107 / 03 / 06 預計托福成績下來(托福考試往後推算10天,其實太晚了)

107/ 03/ 07 甄選截止(離開學才一週)

出國甄選

在世新的甄選遊戲中,備審佔40%,面試佔60%,要分開來準備。

備審雖然只佔40%,但其實面試的時候評審們都是拿它來問你的,所以其實備審是主角。

甄選遊戲的攻略

根據我觀察所有我認識交換生的經歷以及老師給我的悄悄話,評審比較會給「準備畢業再也不能參加交換的同學」像是大四生更多機會,所以你如果是「還沒畢業機會還很多的同學」像是大二生,你的錄取機會會下降,但請不要氣餒,你機會雖然是真的很多,但不要錯過任何一次機會。

備審

好好閱讀評選項目,像在世新外語組甄選中,沒有特定格式,只要有自傳、讀書計畫、成績單、外語能力證明,最差的學校至少要托福61分,相當於英檢中級與中高級之間,這代表你要依照你的語言考試成績選個學校。

早早寫好自傳跟讀書計畫,請見人說人話見鬼說鬼話,你如果申請澳洲學校,就為澳洲學校寫理由、寫動機、寫非澳洲不可的原因。多找學校每年學長姊心得資料,並且到對方學校的官網查閱,只要你越了解越能脫穎而出。寫為什麼要選澳洲學校?澳洲學校有什麼特色?澳洲學校有哪些課你想上?澳洲學校哪個點你非去不可?別小看這些老問題,這些很多都是面試必問的問題

面試

經歷了英文考試跟書審,我的精力差不多都耗完了,面試反而比較無力。盡量多多自己模擬面試,或是請益主任教授們(通常評審是主任教授),會對自己相當有幫助。這個時期最好多問認識的學長姊他們被問的問題,而這些問題其實很基本也很重要。像我的話我被問三個問題:

請自我介紹。

為什麼要選Saginaw Valley State University?

這學校有什麼特色?

我那時候早點來等候面試,結果聽到很多剛結束的同學跟他朋友聊面試題目,他們說他們被問到「自我介紹」、「學校有什麼特色」、「為什麼非這學校不可」,我偷偷聽偷偷準備,我面試的時候這些問題都有出來,他們笨死了,哈哈哈哈哈哈。

出國準備

三週之後名單出來,幾家歡樂幾家愁,但我真的相信機會都留給有準備的人。

加上了需要當兵的役男的身分,對面那些繁瑣的出國程序總是很頭痛。但主要就是申請簽證、檢查護照更新、申請役男出境、購買機票四項。不同國家其程序有所不同,下面介紹我自己前往美國交換的經驗給大家分享。

申請入境(美國)

在去之前會遇到你多奇奇怪怪的單子,還要經歷面試,我一一來解釋。

總共這些文件:護照、簽證(J1或F1等)、資格證明(DS-2019)、簽證的DS-160確認頁、簽證的繳費收據(中華郵政)、資格證明的費用I-901、I-94出入境記錄說明。

這些關係是什麼?

護照像是在國外的身分證,簽證(J1或F1等)想像成「入境的批准」就可以了,資格證明(DS-2019)想像成「你可以得到批准的原因」,簽證的DS-160確認頁就是確認你繳了簽證手續費,簽證的繳費收據(中華郵政)就是你手續費的收據,資格證明的費用I-901就是確認你繳了資格證明申請的手續費。I-94是出入境記錄說明,無紙化之後你應該不會碰到,但它在簽證辦好之後可以上網查詢。

1.處理護照

辦理護照,可以自己辦理也可以旅行社辦理,辦理過的請確認有效期限是沒有過期且回國也不會過期的。

2.資格證明(DS-2019)

非移民身份資格證明(Certificate of Eligibility for Nonimmigrant Status),想像成「你可以得到批准的原因」就好了。

在國際事物處送走名單給對方美國學校之後,美國學校會向美國政府申請交換生的入境手續,並且弄到資格證明,並且寄到世新。所以我們不需要申請,只要等資格證明寄過來就可以做下一步了。

3.簽證(J1或F1等)

不是所有人都要簽證,觀光就不需要,但我們交換生需要。學生簽證的核發,大概來說,主要分F1跟J1這兩類,F1是學生自費,J1是學校贊助且不能校外打工,我所屬的簽證是J1。辦理簽證會需要有資格證明(DS-2019)。我們的終極目標拿著資格證明去申請簽證,並且讓護照印上我們的簽證,資格證明去跟簽證兩個都需要繳費,所以才會有下面兩個文件。

4.簽證的費用DS-160確認頁簽證的繳費收據(中華郵政)

為了得到簽證,你要面試才行。這需要錢,你要繳錢而且他們要看到你繳錢,這就是DS-160確認頁存在的原因。除此之外,你在轉帳繳類的時候,會有中華郵政繳費收據,請不要弄丟,並帶去面試。

繳錢才能得到DS-160確認頁並且預約面試喔,我記得要5000台幣左右吧,網址是http://www.ustraveldocs.com/

5.資格證明的費用I-901

這個很奇葩,我是進去面試之前因為忘記申請這個被攔下來。好險這東西可以趕快繳費然後請人員幫我註記有繳,我才能進去的。

為了申請資格證明,你需要到https://www.fmjfee.com/i901fee/index.html去繳費,我記得也是差不多5000台幣左右吧。

6.I-94出入境記錄說明

不太會碰到,無紙化之後不需要它,但你可以上網查詢自己的出入境記錄。

面試

把1,2,3,4,5全部都帶去面試,面試又是一段故事了,下次再撰文討論。面試成功才能把護照拿去給他們收走,並在過一陣子之後得到印有簽證的護照。

役男出境許可

役男出境需要申請,買機票前一定要等待役男出境與返國日期出來。學校處理役男出境之後會給一張地方政府的核准公文,公文會記錄返國期限,照這個返國期限回國就對了。除此之外還要將這張表格拿去各地區公所,讓他們幫你的護照蓋個章,代表批准出境。這個章只能用一次,所以也請役男在交換期間不要出國。

總結

完成出國準備,就可以出國交換了,手續相當複雜但也是成長。提昇你的語文能力、重新檢視一下備審中自己的成就等等,當回想到這些複雜的手續與流程就會苦盡甘來。希望這篇文章能夠讓之後想要交換的勇者們有更多的幫助,如果有任何地方有錯誤,麻煩請糾正我,如果喜歡這篇文的話也幫忙拍拍手給予鼓勵。

蘇桓晨

Umas Sunavan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store