開始使用 WebGL

使用 WebGL 建立極快速的圖形。

WebGL 基本知識

使用 WebGL API 建立高效能 2D 與 3D 圖形的方法,是直接透過程式設計來控制電腦的圖形處理器 (GPU)。WebGL 在 Canvas 元素上以非常類似 2D 內容的繪圖內容進行轉譯,但以極低階的方式存取電腦 GPU。

WebGL 與傳統的網頁程式設計有些微差異,因為您要使用兩種語言來撰寫每個應用程式。若要使用 WebGL,一部分的程式碼要以 JavaScript 撰寫,而其他部分則要以 GLSL (OpenGL 著色語言) 撰寫,這是一種低階的類 C 語言。JavaScript 部分是用來載入影像、設定色彩以及描述物件;而 GLSL 程式碼則透過「著色器」程式轉譯影像、色彩和向量以在 GPU 上執行。這兩者結合就能讓 WebGL 建立極快速的圖形。

我們使用的範例不包含任何 WebGL 程式庫。在實務上,像是矩陣數學或建立基本的幾何形狀這類困難與重複性的工作,大部分開發人員會使用程式庫。例如,WebGL 不提供像是縮放或旋轉等矩陣函式。做為使用 WebGL 建立 3D 圖形的一個重要部分,glMatrix 程式庫提供標準的矩陣轉換。而另一個範例中,您將 3D 圖形中的形狀以一系列三角形來描述。至於圓球,則需要為每個頂點建立一個座標陣列來描述三角形,使用三角函數來計算每個點。使用 Three.js 程式庫之類的一般用途程式庫 (幾乎一半的 WebGL 網頁都會用到),只需指定要使用的半徑及三角形數量,即可建立圓球。

許多開發人員都會使用程式庫,而且只撰寫程式庫不提供的特殊著色器程式碼。如需程式庫、教學課程及其他資訊的連結,請參閱 WebGL 示範、參考及資源一節。

「變形」範例

我們要深入討論的範例稱為「變形」。「變形」會顯示您匯入的相片,根據滑鼠或觸控的輸入來延展和壓擠影像。這個範例很好玩,而且程式碼還提供您使用 WebGL 的基本知識。

「變形」範例可讓您了解:

  • 應用程式中的基本 WebGL 設定。
  • 如何建立代表三角形與線條的向量點陣列,以及將色彩或相片套用到表面。
  • 如何使用滑鼠事件與一些三角函數,在延展和壓擠相片時做出酷炫特效。
雖然 WebGL 可以模擬 3D 物件,但為了讓此範例更簡單易懂,因此只使用 2D 物件。

WebGL 利用頂點或座標陣列來描述形狀,該陣列代表一個物件可以分解成一組不同的三角形。

由 40x40 三角形組成正方形的影像

從簡單的 2D 幾何形狀到複雜的影像呈現 (例如汽車、摩天高樓或解剖表面的實際影像) 都在 WebGL 圖形的範圍內。物件的表面可以使用少量或大量三角形來轉譯,三角形越多就越細緻。 差別只在於三角形的大小與數目。「變形」範例使用 800 個三角形,或是以 20 x 20 格線方式排列的 400 個正方形。大小可以提供良好的失真解析度,卻又不會太複雜。使用格線大小進行實驗,看看產生的效果。

「變形」套用相片做為紋理。在 WebGL 中,紋理定義為用來覆蓋所建立向量物件表面的影像、色彩或圖樣。

開始撰寫 WebGL 應用程式

應用程式傳遞形狀給 GPU 做為向量陣列,這通常代表一組三角形集合。向 GPU 描述三角形的方法包括:

  • 使用個別三角形的三個頂點
  • 三角形寬帶,在第一個三角形之後,每個三角形只新增一個頂點
您也可以向 GPU 描述線條、帶狀線或點。 將向量陣列傳送給 GPU 時,您可以指定讀取陣列的方式,例如個別三角形、線條或寬帶。

若要描述三角形和其他形狀,可以使用 x、y 和 z 座標設定每個點的頂點。不論畫布的大小為何,GPU 都會使用浮點數介於 -1 與 1 之間的慣用右手 3D 笛卡兒座標系統。 零是顯示區域原點或中心,還有 x、y 及 z 三個軸。慣用右手座標系統是指正 X 值向右,正 Y 值向上,而正 Z 值朝向檢視者。因為右手大拇指可朝正 X 軸,食指朝向正 Y 軸,打開其餘手指可朝正 Z 軸 (朝向檢視者),所以稱為慣用右手系統。

此圖顯示笛卡兒座標系統:

笛卡兒座標系統圖表

WebGL 轉譯管線

現代 GPU 使用可程式化的轉譯管線。早期的圖形卡有旋轉和縮放物件的內建功能,但不能讓您變更。可程式化的轉譯管線讓您能夠撰寫自己的函式,使用頂點和片段著色器來控制形狀和影像的轉譯方式。頂點著色器控制形狀上的點或頂點。旋轉空間中的物件時,頂點著色器要負責套用您提供的矩陣來旋轉座標。為了新增影像到形狀,片段著色器或像素著色器以相對於從頂點著色器取得影像的資訊,控制將影像套用到形狀的方式。 GPU 提供可讓資料路由進出著色器的管線,並執行畫面上的最終轉譯。基本的轉譯管線外觀如下:

WebGL 轉譯管線

轉譯管線使用以下一般步驟:

  • 應用程式使用指向向量緩衝區的向量陣列傳入座標。系統一次處理一個向量座標給頂點著色器。
  • 頂點著色器會以相對於其他頂點的方式處理該頂點、移動座標、增加色彩參考及其他動作。
  • 將所有三角形組合起來,然後傳送到轉譯器,以便在三角形的各頂點間插入像素。
  • 深度測試操作會確認像素是否可檢視。像素 (與物件) 可能會位在檢視區域外、位置太前面或太後面(根據其 Z 座標),或是被另一物件擋住。如果看不到,就會被忽略。
  • 片段著色器將像素填上色彩。您可以將色彩或影像參考從頂點著色器傳送至片段著色器,或是在片段著色器內設定色彩。
  • 最後會將像素傳送到 framebuffer,這裡它會顯示在畫面上。
這是所有 GPU 功能的簡化版本,但是讓您對於建立圖形程序有個概略了解。

下篇預告

WebGL 內容與設定中,您將看到如何從畫布元素取得 WebGLRenderingContext,以及轉譯圖形所需的基本設定。

相關主題

WebGL 內容與設定
著色器程式
將相片載入紋理
UI 支援
WebGL 示範、參考及資源

 

 

顯示:
© 2015 Microsoft