虛擬展廳中所運用的WebGL技術原理簡單介紹

Jyadmin — Wed, 23 Dec 2020 07:45:03 +0000

虛擬展廳中所運用的WebGL技術原理簡單介紹 Jyadmin 周三, 12/23/2020 - 15:45

WebGL是什么，用它能做什么？

WebGL（Web Graphics Library）是一種3D繪圖協議，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0（OpenGL 的嵌入式平臺版本）結合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定來實現，WebGL可以為HTML5 Canvas提供硬件3D加速渲染。

開發者就可以借助系統顯卡來在瀏覽器里更流暢地展示3D場景和模型，還能創建復雜的導航和數據視覺化。WebGL技術標準免去了開發網頁專用渲染插件的麻煩，可被用于創建具有復雜3D結構的網站頁面，甚至可以用來設計3D網頁游戲等等。

這項技術還應用了一個繪制所需的專用語言 GLSL：

OpenGL著色語言（OpenGL Shading Language）是用來在OpenGL中著色編程的語言，他們是在圖形顯卡的GPU （Graphic Processor Unit圖形處理單元）上執行的，一般著色器分為兩部分：Vertex Shader（頂點著色器）和Fragment（片元著色器），GLSL使用C語言作為基礎高階著色語言。

總的來說，WebGL就是通過js獲取Canvas上下文關系，使用JS Api操作GLSL語言進行編程，并最終在Canvas中展示的web圖形繪制能力。

WebGL如何形成指定圖像？

1. WebGL只能繪制點(gl.POINTS)、線(gl.LINES)、三角(gl.TRIANGLES)三種基礎圖形，任何復雜圖形都是由基礎圖形組合形成的，如下圖所示的茶壺（復雜圖形），可被拆解為所示的復數基礎圖形的組合：

2. 繪制的實現，會經過這三個步驟的處理：

① 獲取頂點坐標（即該形狀的可見點陣集）

② 圖元裝配（將頂點繪制成一個一個三角形，拼接成面）

③ 光柵化（將每一個三角形所對應畫布的位置和色值計算出來）

目標圖形繪制的完整流程如下：

3. 目標圖形在實際場景中存在位置、大小、透視關系等影響因素，為了達到符合預期的視覺效果，坐標（X, Y, Z）將經由復數個矩陣變換的計算處理，最終形成指定坐標點（同樣片元也會根據矩陣關系計算著色結果）。

4.完成繪制后，通過JS的上下文操作DOM，將在Canvas上成功渲染“一幀”圖片，即每次計算將得到一組靜態的像素序列，用于鋪滿填充Canvas畫布。

此時一次完整的WebGL繪制流程完成。

WebGL的渲染，就是將三維圖形的坐標點，經過復雜的加工處理（3D建模），再經由上述步驟的繪制流程，即可通過WebGL在前端頁面中完成“一次”繪制操作，此時通過JS將緩存區的圖元信息填充至Canvas，即可在網頁中展示一張靜態繪制圖，受限于篇幅原因，詳細的實現細節建議通過網絡示例進行了解。

標簽

線上展廳

盗墓笔记小说,yy玄幻小说排行榜完本,辰东

虛擬展廳中所運用的WebGL技術原理簡單介紹

WebGL是什么，用它能做什么？

WebGL如何形成指定圖像？