Three.js可視化企業(yè)實戰(zhàn)WEBGL課（23年7月升級版45章）

學習地址1：https://pan.baidu.com/s/1RZudq7dvkncu2Hvc1f-RTg 提取碼: zut5

學習地址2：https://share.weiyun.com/tglm6bSd 密碼：8gqqpb

渲染管線

Webgl的渲染依賴底層GPU的渲染能力。所以WEBGL 渲染流程和 GPU 內部的渲染管線是相符的。

渲染管線的作用是將3D模型轉換為2維圖像。

在早期，渲染管線是不可編程的，叫做固定渲染管線，工作的細節(jié)流程已經固定，修改的話需要調整一些參數。

現代的 GPU 所包含的渲染管線為可編程渲染管線，可以通過編程 GLSL 著色器語言 來控制一些渲染階段的細節(jié)。

簡單來說： 就是使用shader，我們可以對畫布中每個像素點做處理，然后就可以生成各種酷炫的效果了。

WebGL起源

能不能讓瀏覽器真正實現顯卡級別的能夠通過OpenGL來操作web圖形界面的真正的三維動畫效果，而不是現在的偽三維(逐幀動畫)．這個時候WebGL就應運而生了.

webGL 與canvas的結合使得我們可以在網頁上顯示 和操作三維圖形. 比如開發(fā)三維的用戶界面, 運行三維的網絡游戲或是三維動畫等等,這也是webGL 的優(yōu)勢。

WebGL 解決了用戶在頁面中繪制和渲染 3D 圖形的功能，且使用戶通過頁面與三維圖形交互成為可能，這項技術將在下一代開發(fā)用戶易用直觀界面中發(fā)揮重要的作用。在接下的幾年，WebGL技術將廣泛地應用于電子設備的移動終端，包括平板、手機設備，因此，WebGL 技術的學習顯的特別重要。

我們知道canvas、svg等是2D繪圖的，那么如果想要使用js進行3D繪圖，可以嗎？ 答案是肯定的！實際上主流的3D開發(fā)使用的是c++，但是隨著技術的發(fā)展，JavaScript目前已經是無孔不入了，包括web（vue/react）、移動端（RN/weex）、客戶端（electron/nw）、后端（nw）、人工智能（tensorflow.js），而three.js就是使用JavaScript進行3d繪圖的框架了，而three.js是對webgl進行封裝的，所以，實際上webgl是3D繪圖的基礎，但我們使用three.js開發(fā)會更加高效。