學習webgl 開發理解渲染關系是必須的，也非常重要，很多人忽視了這個過程。
我這里先簡單寫一下，后面盡量用通俗易懂的方式，舉例講解。
WebGL，全稱Web Graphics Library，是一種在網頁上渲染3D圖形的技術。它允許開發者使用JavaScript和HTML5的Canvas元素來創建和渲染3D圖形。WebGL渲染管線可以想象成一個工廠流水線，它將3D模型轉換為2D圖像，供我們的眼睛欣賞。這個流水線分為幾個主要階段，每個階段都對最終圖像的生成起著至關重要的作用。
-
模型階段(Modeling)：
- 想象一下，你有一個3D的玩具模型，你想要把它展示在屏幕上。在這個階段，你需要定義玩具模型的形狀、大小和位置。
-
頂點著色器(Vertex Shader)：
- 頂點著色器是流水線的第一個環節。它處理3D模型的頂點（模型的角和邊）。它會告訴每個頂點在屏幕上的大概位置。
-
圖元裝配(Primitive Assembly)：
- 這個階段將頂點組裝成基本圖形，比如三角形或四邊形。這就像是把玩具的各個部分拼湊起來。
-
光柵化(Rasterization)：
- 光柵化階段將圖元轉換成像素。這就像是用相機拍攝玩具，把3D模型轉換成2D圖像。
-
片段著色器(Fragment Shader)：
- 片段著色器處理每個像素的顏色和特性。它決定了每個像素的顏色、透明度等，就像是給玩具上色。
-
深度測試(Depth Test)：
- 在3D世界中，物體的前后關系很重要。深度測試確保物體按照正確的前后順序顯示，避免出現“穿模”現象。
-
模板測試(Stencil Test)：
- 模板測試用于控制像素的可見性，它可以幫助實現一些特殊的視覺效果，比如遮擋和裁剪。
-
混合(Blending)：
- 混合階段調整像素的顏色，以實現透明效果或者混合不同顏色的像素，讓圖像看起來更加自然。
-
輸出到幀緩沖區(Frame Buffer)：
- 最后，經過所有處理的像素被輸出到幀緩沖區，這是一個臨時存儲圖像的地方。當一切準備就緒后，這些圖像就會被顯示在屏幕上。
整個WebGL渲染管線就像是一個精心設計的工廠，每個階段都有其特定的任務，確保最終的圖像既美觀又符合3D世界的規則。通過這個流水線，我們能夠在網頁上享受到生動的3D圖形效果。
后面我會詳細的講解，放到 http://www.threelab.cn 中作為專項梳理，以為渲染關系，不是一句話兩句話就可以講明白的。
