[WebGL] 兩張圖簡單理解WebGL、OpenGL程式基本繪圖流程

簡介

最近突然想學關於網頁美工與動畫設計這方面相關的知識，大家可能會想到像是Photoshop、Flash等等像這樣的動畫美工設計軟體，但文獻找著找著突然想到有沒有辦法可以用程式來做繪圖(離題很多…)，從以前學過的OpenGL開始去找是否網頁程式也有這樣的API，果不其然找到了WebGL!!於是乎就開始去Youtube找教學影片學了。

簡單介紹一下WebGL，WebGL是利用Javascript的低階API，WebGL是基於OpenGL ES 2.0，從HTML中Canvas元素開發出繪製3D圖像並用GLSL作為著色器。
本篇用兩張圖片來簡單理解WebGL或OpenGL程式基本繪製流程，希望可以藉由這樣的流程圖讓自己或讀者更牢記流程以免在編寫程式時漏東漏西出現一些不必要的錯誤!

---

內文

由於WebGL或OpenGL是屬於低階的API，很多設定得自己用程式來編寫，所以簡單整理了一下程式基本的流程圖，如下:

剛開始在學習WebGL或OpenGL時，可能會好奇Vertex Shader和Fragment Shader到底有什麼差異?各別又負責處理什麼事情?所以附上之前在Youtube看教學影片所畫的圖來說明，如下:

其實簡單來說，GLSL的著色順序必須先告知繪製頂點(Vertex)的位置，而這個就是由Vertex Shader來負責，而位置告知之後，就是顏色(RGB)或紋理(Texture)的繪製，而這個就是由Fragment Shader來負責了。

---

參考

1. https://zh.wikipedia.org/wiki/WebGL - WebGL維基百科
2. https://www.youtube.com/channel/UCufDmM2MGQlbfS3luzgVDxw - Youtube上WebGL教學影片(國外講師)
3. https://www.youtube.com/channel/UCda_RJU9-xB0Hswcrjn4SKw - Youtube上OpenGL教學影片(國外講師)