webgl （原生）基礎入門指南【二 】

本章介紹一些三維圖形學中的基本概念爲後文的繪圖作個科普
本文重點參考了《交互式計算機圖形學-第七版》第2章的內容。想要更深刻學習的同窗能夠本身去翻一翻

座標系

在咱們現實世界中，每一個東西都有它的長、寬、高等度量份量，那麼咱們對它進行建模的時候會使用到一個對象座標系。將這個對象放入現實世界，那麼它就存在於現實世界中的世界座標系。咱們將它顯示在咱們的系統設備上，則它存在於應用程序座標系。

咱們把應用程序中度量頂點位置的數值稱爲頂點座標。

用顯示器上單位度量出的數值起初叫作物理設備座標或者叫設備座標。對於光柵設備，咱們使用的術語是窗口座標或者屏幕座標。屏幕座標老是用某種整數類型來表示，由於幀緩存中任何像素中心都必須位於固定的網格點上。

看了這麼多的座標是否是有點懵逼了 ！哈哈哈=。= 沒有懵逼嗎？很聰明，那咱們繼續~

基本圖元

在webgl中，全部的幾何圖元都是由點、線段和三角形這樣的基本圖元組成。
webgl 提供了多種點和線段圖元，相應的type參數以下

1. 點（gl.POINTS）:每一個頂點被顯示的大小至少是一個像素。

2. 線段（gl.LINES）:這種圖元把相繼的頂點配對後解釋爲線段的兩個端點（兩兩配對）。

3. 折線（gl.LINE_STRIP,gl.LINE_LOOP）想要讓相繼的頂點相連，可使用折線圖元。曲線能夠經過合適的折線來近似。若是但願折線閉合，能夠吧最後一個頂點設置與第一個頂點重合，也可使用gl.LINE_LOOP類型，它會在最後一個頂點和第一個頂點之間畫一條線，獲得一個環路。

4. 三角形（gl.TRIANGLE）:相繼的三個頂點組合在一塊兒，

5. 三角形條帶和三角形扇（gl.TRIANGLE_STRIP,gl.TRIANGEL_FAN）
   ......

着色器

着色器使用一種相似C語言的OpenGL ES 着色語音（GLSL）編寫。在js中，咱們能夠寫成字符串交由底層處理。一樣使用script標籤保存這些代碼字符也是可行的。

頂點着色器

頂點緩衝區對象中存儲的惟一信息就是每一個點的位置。當執行gl.drawArrays()函數的時候頂點就會通過咱們編寫的着色器處理。它必須完成的最低限度的任務是把頂點的位置發送到光柵化的模塊中去。初學者爲了避免饒進這些理論去，能夠先理解爲決定點的位置。咱們看一下簡單的案例：

<script id="shader-vs" type="x-shader/x-vertex">
    attribute vec4 vPosition;
    
    void main(void) {
      gl_Position = vPosition;
    }
</script>

這裏咱們定義了一個變量 vPosition，頂點位置即變量位置。 下篇咱們會詳細介紹這個變量的使用。

片元着色器

上文講述了頂點，由頂點構成了圖元。那麼處理圖元中的每一個片元都須要咱們片元着色器的處理。做爲菜鳥的咱們能夠理解爲每一個像素點。

片元着色器經過Webgl的內置變量gl_FragColor爲每一個片元指定一個思惟的RGBA顏色。注意：這裏的rgba值爲[0.0,1.0]而不是咱們網頁所使用的[0,255]。
着色器示例：

<script id="shader-fs" type="x-shader/x-fragment">
    void main(void) {
      gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
    }
  </script>