webgl核心要素

WebGL是一種3D繪圖標準，這種繪圖技術標準容許把JavaScript和OpenGL ES 2.0結合在一塊兒，經過增長OpenGL ES 2.0的一個JavaScript綁定，提供硬件3D加速渲染，這樣Web開發人員就能夠藉助系統顯卡來在瀏覽器裏更流暢地展現3D場景和模型了，還能建立複雜的導航和數據視覺化。顯然，WebGL技術標準免去了開發網頁專用渲染插件的麻煩，可被用於建立具備複雜3D結構的網站頁面，甚至能夠用來設計3D網頁遊戲等等。

渲染流水線設計以下：應用程序層 -> 硬件抽象層 -> 硬件層

 

 

 

爲何要選擇GPU

 

 

CPU: 它的優勢在於調度、管理、協調能力強，計算能力則位於其次，對同一數據作許多事。

GPU：至關於一個接受CPU調度的「擁有大量計算能力」的員工，對大量數據作同同樣事，圖形處理，矩陣運算，機器學習

 

Webgl核心要素

 

 

 

1. 頂點着色器，片元着色器
2. 座標轉換
3. 申請緩存區 像素傳遞
4. 光照（光源和反射）
5. 紋理（座標轉換和像素映射）
6. 觀察者的視圖矩陣 透視矩陣與正射矩陣
7. 圖形變換，平移，縮放，旋轉
8. 模型
9. 遊戲引擎Babylon.js，3D渲染引擎three.js

 

 

 

兩大着色器

 

 

 

頂點着色器（Vertex shader）：描述頂點（像素）特性好比的大小和位置，

 

片斷着色器（Fragment shader）：描述頂點點的顏色信息，處理像素點，使其顯示在屏幕上

座標系

 

webgl座標系：中心原點在canvas座標系的中心，右手定則座標，範圍從0到1，紋理座標系：左下角爲原點，範圍從0到1，

canvas座標系：左上角爲原點

本地座標系：模型被設計時的座標系

世界座標系：模型被放入到場景中時，場景的座標系

 

 

光照

 

每一個物體的光照由兩個因素決定：

發出光線的光源的類型，平行光（太陽光）；點光源（人造燈）聚光燈

物體表面如何反射光線，漫反射和環境反射

三維圖形學術語着色：根據光照條件重建‘物體各表面明暗不一的效果’

 

視角投影

1. 正射投影

也稱盒狀空間投影，物體看上去的大小與所在位置沒有關係，適用於建築模型等

1. 透視投影

 也稱金字塔可視投影。近大遠小，符合人眼觀察

圖形變換

 

縮放：gl_Position.w中的w值表明縮放比，齊次線性方程裏的w

數學表達式：

 

平移：這個一個逐頂點操做，發生在頂點着色器上，用原始座標的每一個份量加上偏移量， 將聲明的Tx,Ty,Tz偏移數值賦值給gl_Position,

數學表達式：

 

旋轉：須要對頂點座標進行三個步驟考慮：

旋轉軸：你要指明經過哪一個軸進行旋轉；

旋轉方向：逆時針仍是順時針旋轉；

旋轉的角度

 

 

利用數學的兩角和公式：

 

更科學的方式是使用變換矩陣