引子
JavaScript WebGL 使用圖片之後產生了一些疑問。
為什麼紋理座標取幾個點就可以獲取圖片內容？
WebGL 中影像的座標系原點位於左下角，水平正方向向右，垂直正方向向上。紋理座標是表示影像中位置的兩個分量。第一個分量 s 是距離影像左側的百分比。第二個分量 t 是距離影像底部的百分比。WebGL 中幾何體最終都是由三角形構成，使用圖片的時候不一定都是三角形，需要使用紋理座標指定對應分解的三角形頂點在影像中的位置。為了讓紋理座標適用任何影像，使用百分比指定位置。
根據上面的資訊可知，紋理座標跟繪製的頂點有關聯，繪製頂點的方式，同樣影響到獲取紋理。
紋理座標跟頂點座標一定要一一對應？
嘗試了一下，例如 4 個頂點，但只提供了 3 個頂點對應的紋理座標，出現下面提示：
WebGL warning: drawElementsInstanced: Indexed vertex fetch requires 4 vertices, but attribs only supply 3.
但多餘頂點座標數倒是沒有影響。
啟用紋理和繫結紋理目標的順序是否有要求？
不使用預設的紋理單元 gl.TEXTURE0 比較好看到區分：
可以發現紋理需要先啟用後繫結。
這裡還需要注意的是建立紋理的時候會 bindTexture 一次，但這個不一定最終生效，在使用的時候保險起見最好再繫結一次，看到一些示例都是把建立和使用紋理的邏輯區分開。
相同位置多個紋理會怎麼樣？
在前面我們知道紋理都有所屬的紋理單元，繪製的時候，需要啟用對應的紋理單元。那麼就有下面的情況：
- 一套頂點，但關聯多次紋理單元
- 兩套相同位置頂點，關聯各自紋理單元
一套頂點，但關聯多次紋理單元
這種情況比較容易預見，畢竟最終指定了單一的紋理單元，最後指定的將會繪製出來，這是示例。
但如果其中有一張包含透明區域的圖片會如何？這是示例，先使用的是貓圖片紋理，然後使用犬圖片紋理，而且犬圖片背景是透明的，最終還是隻顯示了犬的圖片。
兩套相同位置頂點，關聯各自紋理單元
這是示例，結果只看到最後一套頂點對應的紋理圖片。
針對包含透明區域的圖片示例， 結果也是隻看到最後一套頂點對應的紋理圖片。
小結
由上面的測試推測：預設情況下，相同頂點的紋理圖片不會保留歷史使用的紋理圖片資料。
為了再次證實一下，看下兩個紋理有部分交集的情況示例，發現有交集的地方是犬圖片紋理透明的地方，直接看到了 Canvas 父元素的背景色，也是不會有歷史紋理資料。