WebGL 是什么？

WebGL（全稱Web Graphics Library）是一種?3D 繪圖協(xié)議，這種繪圖技術(shù)標(biāo)準(zhǔn)允許把?JavaScript 和 OpenGL ES 2.0（OpenGL 是最常用的跨平臺(tái)圖形庫）結(jié)合在一起，通過增加 OpenGL ES 2.0?的一個(gè)?JavaScript 綁定，WebGL 可以為?HTML5 Canvas?提供硬件?3D 加速渲染，這樣 Web 開發(fā)人員就可以借助系統(tǒng)顯卡來在瀏覽器里更流暢地展示 3D 場景和模型了，還能創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺化。

顯然，WebGL 技術(shù)標(biāo)準(zhǔn)免去了開發(fā)網(wǎng)頁專用渲染插件的麻煩，可被用于創(chuàng)建具有復(fù)雜 3D 結(jié)構(gòu)的網(wǎng)站頁面，甚至可以用來設(shè)計(jì) 3D 網(wǎng)頁游戲等等。

OpenGL 和 WebGL 均帶有可編程的著色器。如頂點(diǎn)著色器(Vertex Shader)、片元著色器(Fragment Shader)，著色器的編寫語言均為 GLSL。如果要說它們的主要區(qū)別：

• 首先 WebGL 相對 OpenGL 功能被削減了，例如刪除了混合、反走樣、霧化、緩存設(shè)置等高級(jí)場景設(shè)置函數(shù)，保留了簡單、效能的函數(shù)；

• 其次是安全問題，它使得顯卡硬件直接暴露在惡性代碼或者 web 程序面前；

• 最后 WebGL 只是 OpenGL的簡易版，性能上比桌面應(yīng)用還是有一定差距。

Threejs是什么？

threejs 與 webgl 類似 vue 與 html 關(guān)系；Three.js是一個(gè)跨瀏覽器的腳本，使用 JavaScript 函數(shù)庫或 API 來在網(wǎng)頁瀏覽器中創(chuàng)建和展示動(dòng)畫的三維計(jì)算機(jī)圖形，Three.js 使用了 WebGL。

Three.js是使用MIT開源協(xié)議的JavaScript庫，底層使用WebGL API來工作。這個(gè)庫由Ricardo Cabello創(chuàng)造，現(xiàn)在有一個(gè)龐大的社區(qū)組織來維護(hù)更新，幾乎每個(gè)月都會(huì)更新，在使用的時(shí)候，我們應(yīng)該注意教程和Three.js庫當(dāng)前的發(fā)行版本號(hào)。

這個(gè)庫最大的目標(biāo)是簡化處理我們使用WebGL的難點(diǎn)，我們只需幾行代碼就可以繪制帶有動(dòng)畫的3D場景，而不必去了解著色器、矩陣算法等晦澀的知識(shí)點(diǎn)。

Three.js目前仍是最受歡迎的WebGL庫，相關(guān)的資料和社區(qū)，以及案例都非常豐富

推薦 WebGL、Threejs 學(xué)習(xí)教程：

• ThreeJS 官方文檔：https://threejs.org/docs/index.html

• ThreeJS fundamentals：https://threejs.org/manual/#en/fundamentals

• Threejs 學(xué)習(xí)教程：https://discoverthreejs.com/tips-and-tricks/

• WebGL fundamentals（有中文）：https://webglfundamentals.org/

• WebGL 編程指南

• glsl shader ：https://www.shadertoy.com/