只從幾年前阿里云在官網(wǎng)開始使用微軟 3D 風(fēng)格的主視覺以后，國內(nèi)的其它云服務(wù)公司和大量 ?B 端公司都開始“致敬”這個(gè)風(fēng)格。

既然不少大廠做了，中小公司自然會(huì)開始“學(xué)習(xí)”這個(gè)套路，要求設(shè)計(jì)師也使用相同風(fēng)格來制作自家的官網(wǎng)廣告大圖，或者產(chǎn)品的登錄主頁等等。比如在我們的社群或?qū)W員中，就有不少接到參照騰訊云設(shè)計(jì)的需求。

圖形的設(shè)計(jì)雖然需要用到 3D 軟件設(shè)計(jì)，即使當(dāng)前不會(huì)，也可以通過 B 站的針對(duì)性教學(xué)視頻進(jìn)行學(xué)習(xí)，一周內(nèi)完全足夠掌握相關(guān)的建模和輸出。但麻煩的是，騰訊云的這些 3D 圖形，是可以交互的，而且本身處于動(dòng)態(tài)運(yùn)行中。

所以，這樣的效果要怎么實(shí)現(xiàn)呢？

如果我們在網(wǎng)頁中看到運(yùn)行的 3D 動(dòng)畫，有3種方式實(shí)現(xiàn)。

方案1：使用 MP4、GIF 或逐幀動(dòng)畫等方式實(shí)現(xiàn)，本質(zhì)上是其它軟件創(chuàng)建出視頻，然后使用特定格式導(dǎo)出，可以通過部分交互方式綁定動(dòng)畫進(jìn)度，比如動(dòng)畫跟隨頁面的滾動(dòng)。

方案2：使用位圖、矢量素材和一些簡易的空間變換方式，實(shí)現(xiàn) 3D 動(dòng)畫效果。比如在 Protopie 中，你們可以看到一個(gè) 3D 旋轉(zhuǎn)的選項(xiàng)，通過角度傾斜來實(shí)現(xiàn) 3D 透視的效果。在網(wǎng)頁前端特效中，還有遠(yuǎn)比這種翻轉(zhuǎn)更復(fù)雜的效果，但本質(zhì)上都是使用位圖素材來實(shí)現(xiàn)。

方案3：在網(wǎng)頁中直接運(yùn)行 3D 模型和進(jìn)行實(shí)時(shí)渲染，即真正的 3D 效果，而不是通過對(duì)二維圖形添加顯示特效實(shí)現(xiàn)的。

這就是我們主要要講解的對(duì)象 ——?WebGL。

先要強(qiáng)調(diào)，3D 效果的實(shí)現(xiàn)有兩種，一種是叫離線渲染（姑且這么用），另一種叫實(shí)時(shí)渲染。

離線渲染就是通過特定的渲染過程，將 3D 對(duì)象渲染成圖片或者視頻，比如使用 C4D 的 OC 進(jìn)行進(jìn)行渲染。

另一種叫實(shí)時(shí)渲染，實(shí)時(shí)渲染出可見、且可交互的 3D 場景和圖形。最常見的 3D 實(shí)時(shí)渲染應(yīng)用就是游戲了。

你看到的游戲內(nèi)容、人物動(dòng)作都是通過交互實(shí)時(shí)生成出來的，不用經(jīng)過漫長的渲染過程。

而要在設(shè)備中實(shí)現(xiàn) 3D 圖形的實(shí)時(shí)渲染，一方面要應(yīng)用 CPU 或圖形顯卡的計(jì)算，另一方面就是繞不開 OpenGL 這個(gè)圖形庫，任何程序?qū)D形的顯示（其它的忽略不計(jì)），都需要調(diào)用這個(gè)圖形庫的 API，才能讓硬件計(jì)算并生成出來。

Tips：它是一個(gè)比較難解釋的概念，我不打算在這里展開說明，有時(shí)間另外科普，能把它的內(nèi)容吃透就可以去任何大廠報(bào)道。

而瀏覽器是一個(gè)很特殊的平臺(tái)，你可以理解成它是運(yùn)行在你系統(tǒng)里的另外一個(gè)獨(dú)立系統(tǒng)，它無法直接調(diào)用 OpenGL 來實(shí)現(xiàn) 3D 效果。所以，為了滿足網(wǎng)頁中實(shí)現(xiàn) 3D 效果的目標(biāo)，相關(guān)的開發(fā)者做了兩方面的努力，一個(gè)是在 HTML5 中內(nèi)置了 Canvas 標(biāo)簽，另一方面是創(chuàng)建了一個(gè)新的圖形標(biāo)準(zhǔn) WebGL。

WebGL 本質(zhì)上也是 OpenGL，只是根據(jù)瀏覽器的特性做了簡化的 “兼容版本”，而這兩者的結(jié)合，就讓網(wǎng)頁的腳本語言 JavaScript 可以在 Canvas 內(nèi)操作 WebGL 實(shí)現(xiàn) 3D 效果的渲染。比如下面鏈接中的效果。

http://webglsamples.org/aquarium/aquarium.html

但是，直接使用 JavaScript 操控 WebGL 是一件非常蛋疼的事情，因?yàn)?JavaScript 是一個(gè)非?！皢隆?的語言，即使我們想要在 Canvas 畫布中創(chuàng)建一個(gè)立方體，都需要寫幾百行代碼。為了提高編寫效率，一個(gè)叫 Ricardo Cabello 的老外就開發(fā)了一個(gè)叫 Three.js 的前端框架。通過對(duì)語法的簡化和封裝常用的函數(shù)（React、Vue 同理），讓編寫相關(guān)圖形代碼的過程變得更簡易和輕松。

下面是知乎《劍宗專欄》里應(yīng)用的一個(gè) JavaScript 和 Three.js 實(shí)現(xiàn)相同圖形效果的代碼：

Three.js 是目前網(wǎng)頁 3D 圖形效果應(yīng)用的主流的框架，也是最多前端開發(fā)學(xué)習(xí)和使用的語言。但它本質(zhì)上就是 JavaScript，而 WebGL 本質(zhì)上就是 OpenGL。所以總結(jié)起來，網(wǎng)頁 3D 的效果的實(shí)現(xiàn)，就是開發(fā)者使用 Three.js 編寫的 JavaScript 腳本，通過 WebGL 來操作 OpenGL。

這么說聽起來可能很繞，不理解沒關(guān)系，你們只要記住通過 Three.js 來控制 WebGL 就行了。

如果用計(jì)算機(jī)圖形學(xué)的角度來解釋 WebGL 的話，就需要從頂點(diǎn)數(shù)據(jù)講到光柵化的推進(jìn)原理。往可視化方向發(fā)展的話，這些內(nèi)容一定要做深入的探究，在這里不做詳細(xì)介紹，等等會(huì)用到。

我們可以根據(jù) Three.js 結(jié)構(gòu)做一個(gè)分解，就可以很好的了解 WebGL 是如何運(yùn)轉(zhuǎn)的。

Three.js 包含了場景、相機(jī)、渲染器三個(gè)主要模塊，畫面通過它們?nèi)咧g的配合產(chǎn)生。

場景：可以理解成是一個(gè) 3D 的畫布，其中包含了各種 3D 模型，以及 3D 光源。

相機(jī)：即查看 3D 場景的視線位置、方向、可視范圍等要素。

渲染器：決定結(jié)果應(yīng)該顯示在什么元素（HTML 元素），以及怎么繪制出來。

相機(jī)和渲染器暫時(shí)不用操心，先理解場景中的幾何體、材質(zhì)、光照三要素。

幾何體就是 3D 的模型，任何 3D 模型都是由頂點(diǎn)組成，頂點(diǎn)和頂點(diǎn)組成面，面和面構(gòu)成一個(gè)完整的立體圖形。常規(guī)情況下，頂點(diǎn)數(shù)越多，生成的面也就越多，圖形就越清晰和細(xì)膩。

材質(zhì)則是應(yīng)用在模型表面的樣式，可以理解成是設(shè)計(jì)軟件中的圖層填充，你可以設(shè)置填充色、漸變色，也可以使用貼圖，以及調(diào)節(jié)透明度等。比如下圖的立方體，就是通過一張位圖素材作為表面材質(zhì)，實(shí)現(xiàn)最終的效果。

而光照就是在這個(gè) 3D 場景中的光源設(shè)置，通過光照的添加才能保證場景內(nèi)的元素可見而不是一片漆黑，還會(huì)附帶產(chǎn)生投影的效果增加空間感。這是比較基礎(chǔ)的概念就不用多做介紹。

這三者除了位圖素材以外，幾乎全部可以通過代碼來實(shí)現(xiàn)。比如模型本身，可以使用 ?Three.js 自帶的圖形如正方體、柱形、圓錐等，也可以通過精確的設(shè)置圖形頂點(diǎn)的坐標(biāo)，實(shí)現(xiàn)最終圖形。材質(zhì)可以通過制定如填充或漸變色，然后添加對(duì)應(yīng)的十六進(jìn)制代碼。光照同理，指定光源類型并設(shè)置對(duì)應(yīng)的屬性，就能實(shí)現(xiàn)場景的完整定義。

而后續(xù)的相機(jī)設(shè)置就是確認(rèn)用戶查看這個(gè)場景的視窗和視角，渲染器的應(yīng)用約等于是對(duì)場景的效果再添加一層濾鏡將它們最終渲染出來（不同渲染器對(duì)場景渲染的效果有一定的差異）。

這就是 WebGL 運(yùn)行的基本要求，和 3D 軟件中建模渲染的邏輯是一樣的。但是 WebGL 中支持的操作和效果遠(yuǎn)遠(yuǎn)比專業(yè) 3D 軟件少，且并不一樣，所以不能把 3D 軟件的設(shè)置細(xì)節(jié)等同進(jìn) WebGL 中去。

Tips：這就和專業(yè) UI 設(shè)計(jì)、動(dòng)效軟件的差別，UI 軟件所有設(shè)置可以1：1還原到開發(fā)環(huán)境中。

了解完這些，再回到我們最關(guān)心的部分，類似騰訊云這些平臺(tái)做出來的3D場景，全部都是在軟件中建模完成以后，開發(fā)對(duì)照著手寫出來的不成？

理論上可以，但沒有實(shí)踐價(jià)值。即使這些看起來并不復(fù)雜的模型，包含的頂點(diǎn)數(shù)量也不少，要是全靠手寫可能黃花菜都涼了。

所以第一步就要確定，場景中的模型要怎么定義出來。方法有好幾種，比如將建模軟件中的模型導(dǎo)出成代碼（要軟件支持），也可以直接導(dǎo)出特定的模型文件，如 Obj 格式。有了模型，然后再使用 Three.js 對(duì)這些模型進(jìn)行控制，置入到場景中再添加效果、動(dòng)畫等。

雖然聽起來很簡單，但是模型到底應(yīng)該用什么方法導(dǎo)，什么格式能用，是根據(jù)場景判斷的，還要做實(shí)際的測試驗(yàn)證可行性。所以我就不在這里逐一介紹，建議你們在每次項(xiàng)目開始前，先和前端工程師確認(rèn)模型的應(yīng)用方法（技術(shù)選型，涉及到多方面的問題，設(shè)計(jì)師慣用軟件，前端技術(shù)水平等），包括具體軟件和導(dǎo)出方法，再用素材測試一遍可行性，跑得通的話確定下來，跑不通就研究新方法。

然后就是確認(rèn)材質(zhì)和光照的問題了。在 3D 軟件中，可以添加的材質(zhì)、效果、光照的屬性非常多，你可以玩出非常多的花樣。但前面也說了，軟件里的設(shè)置和 WebGL 可以添加的效果并不相關(guān)，你在軟件中玩出花來，前端也大概率實(shí)現(xiàn)不了。

所以在 3D 軟件中，針對(duì)模型材質(zhì)和光照，除了平面貼圖外，只建議使用最基礎(chǔ)的材質(zhì)樣式，如添加純色、漸變看個(gè)大概，具體的效果必須通過前端來實(shí)現(xiàn)。而前端實(shí)現(xiàn)材質(zhì)效果的做法有兩種，一種是使用框架內(nèi)置好的材質(zhì)庫，比如 Three.js 包含的這些：

• MeshBasicMaterial（基礎(chǔ)材質(zhì)）

• MeshDepthMaterial（網(wǎng)格深度材質(zhì)）

• MeshNormalMaterial（網(wǎng)格法向材質(zhì)）

• MeshLambertMaterial（網(wǎng)格 Lambert 材質(zhì)）

• MeshPhongMaterial（網(wǎng)格 Phong 材質(zhì)）

• MeshStandardMaterial（網(wǎng)格標(biāo)準(zhǔn)材質(zhì)）

• MeshPhysicalMaterial（網(wǎng)格物體材質(zhì)）

• MeshToonMaterial（網(wǎng)格卡通材質(zhì)）

• ShadowMaterial（陰影材質(zhì)）

• ShaderMaterial（著色器材質(zhì)）

• LineBasicMaterial（直線基礎(chǔ)材質(zhì)）

• LineDashedMaterial（虛線材質(zhì)）

不同的材質(zhì)有各自的屬性和參數(shù)應(yīng)用效果，為了提高效率，可以在 Three.js 的專用編輯器內(nèi)進(jìn)行設(shè)置，且直接預(yù)覽效果。

騰訊云的的材質(zhì)應(yīng)用就是直接從這些自帶材質(zhì)，原文中介紹：

“開發(fā)使用渲染引擎實(shí)時(shí)生成自帶的材質(zhì)……”

然后應(yīng)用自帶材質(zhì)庫進(jìn)行設(shè)置，創(chuàng)建出五種標(biāo)準(zhǔn)的材質(zhì)球，作為整套視覺方案的材質(zhì)規(guī)范。

另一種定義材質(zhì)的方法，就是前端工程師自己寫材質(zhì)，即自定義著色器。著色器是整個(gè)前端圖形學(xué)中最重要的概念之一，所有特殊的輪廓、材質(zhì)都是由著色器基于原始頂點(diǎn)數(shù)據(jù)生成出來的（第二章第一張圖）。

理論上開發(fā)水平夠高，可以實(shí)現(xiàn)任何的材質(zhì)效果。更多情況下，是引用網(wǎng)上提供的開源著色器代碼，來快速實(shí)現(xiàn)自定義的效果。

如果有游戲行業(yè)從業(yè)經(jīng)驗(yàn)的，可能還知道 PBR 工作流程，也這套流程對(duì)于目前的場景而言過于復(fù)雜，毫無必要，所以可以直接略過。

總之，最終的場景材質(zhì)，是由前端工程師基于框架的特性實(shí)現(xiàn)的，而不是1：1還原設(shè)計(jì)師再軟件中創(chuàng)建的效果。需要設(shè)計(jì)師和前端做大量的溝通和創(chuàng)建不同的材質(zhì)效果，確定最終方案。

最后的光照邏輯和材質(zhì)接近，因?yàn)樵诰W(wǎng)頁中不太需要非常復(fù)雜的光效，所以往往只需要最基礎(chǔ)的環(huán)境光再加上一個(gè)平行光即可。

完成這些工作后，再下一步就是針對(duì)動(dòng)畫和交互的設(shè)置了?；A(chǔ)動(dòng)畫的效果是可以和軟件保持一致的，比如位移、旋轉(zhuǎn)、縮放等屬性的應(yīng)用，而那些特殊的類似爆炸、壓縮、粒子特效就無法實(shí)現(xiàn)。

在軟件中制作的動(dòng)畫可以由 Three.js 設(shè)置，也可以在軟件中制作出模型的動(dòng)畫，然后通過特定格式導(dǎo)出（類似 Lottie 的 jason 文件）引用到 WebGL 中。

但如果需要添加交互效果，就必然要使用 Three.js 來設(shè)置動(dòng)畫效果，只是這個(gè)動(dòng)畫效果要和網(wǎng)頁的相關(guān)交互事件捆綁。具體怎么做聯(lián)動(dòng)我就不在這里介展開了，這是交互動(dòng)效的基本常識(shí)。只是聯(lián)動(dòng)的邏輯、參數(shù)，設(shè)計(jì)師需要導(dǎo)出對(duì)應(yīng)的設(shè)計(jì)標(biāo)注文檔給前端工程師。

到這里，大多數(shù)任務(wù)都完成了。但還有一個(gè)非常重要的工作，就是 “性能測試”。不要看網(wǎng)頁中運(yùn)行的 3D 效果很簡陋，和游戲比差遠(yuǎn)了，但不代表它們對(duì)硬件資源的消耗就小。很多 WebGL 開發(fā)的網(wǎng)站稍微復(fù)雜一點(diǎn)，硬件就很容易過載，散熱風(fēng)扇開始咆哮，這會(huì)導(dǎo)致用戶體驗(yàn)變得非常糟糕。

所以每次實(shí)現(xiàn)的最終效果，都需要檢測運(yùn)行時(shí)占用的性能。而這個(gè)檢測不僅僅是在一臺(tái)設(shè)備上，而是要在不同設(shè)備、不同硬件類型、不同系統(tǒng)上都做測試，尤其是一些比較老的、配置低的設(shè)備，比如幾年前停產(chǎn)的12寸 Macbook 等。

沒有任何理由要讓用戶為花哨的視覺效果提供過度的算力，所以但凡運(yùn)行所需的性能超出合理范圍（自己評(píng)估），就肯定要對(duì)內(nèi)容做優(yōu)化。在設(shè)計(jì)層面可以減少場景中的元素?cái)?shù)量，或減少使用模型的頂點(diǎn)數(shù)，頂點(diǎn)越少，所需的計(jì)算兩件就越少。

另一方面就是開發(fā)層面，檢查代碼的效率，以及優(yōu)化或更換使用的著色器、參數(shù)，往往可以大幅度降低硬件所需的要求。

在效果和性能中，性能優(yōu)先級(jí)更高，只要經(jīng)歷過一次相關(guān)的優(yōu)化，就可以在每次項(xiàng)目開始時(shí)就做出對(duì)應(yīng)的準(zhǔn)備，規(guī)范頂點(diǎn)數(shù)和效果使用范圍。

以上就是在網(wǎng)頁中運(yùn)行科交互 3D 圖形的方法，下面總結(jié)一遍從設(shè)計(jì)到落地的流程：

結(jié)尾

在網(wǎng)頁中應(yīng)用 3D 效果，就是由技術(shù)限制來驅(qū)動(dòng)的設(shè)計(jì)實(shí)踐，實(shí)現(xiàn)的方案并不是由設(shè)計(jì)說了算，讓前端工程師無理由配合。想要輸出好的結(jié)果，就需要設(shè)計(jì)師自己了解這些知識(shí)邏輯，并能和前端工程師實(shí)現(xiàn)深度的配合，來找出有效的解決方案。

如果是想要深入可視化行業(yè)的設(shè)計(jì)師，就更應(yīng)該系統(tǒng)學(xué)習(xí)計(jì)算機(jī)圖形學(xué)和相關(guān)的開發(fā)思路，雖然本篇分享沒有很深入講解 WebGL 的底層邏輯，但 WebGL 也僅僅是可視化的其中一個(gè)分支而已，還有更復(fù)雜的 Unreal、Unity 引擎的應(yīng)用，同樣有大量的相關(guān)知識(shí)需要解鎖。

PS ：再分享點(diǎn)個(gè)人的想法，那就是深入 3D 可視化需要的知識(shí)儲(chǔ)備和技能量非常龐大，雖然看著很酷炫，但在真正的B端項(xiàng)目中價(jià)值非常低……一個(gè)B端項(xiàng)目并不會(huì)因?yàn)榛ɡ锖诘?D樣式而獲得成功，也不會(huì)因?yàn)樗鼈儎?chuàng)造更多的業(yè)務(wù)收益，可視化多數(shù)解決的不是業(yè)務(wù)問題，而是 “人的問題”，所以不要被外表沖昏了頭腦。

以上就是本次分享的內(nèi)容，感謝大家的觀看。想要走出新手的困境，獲得更專業(yè)的B端設(shè)計(jì)師技能和認(rèn)知，就來了解我們即將開課的B端系統(tǒng)課程！

喲吼！我們下次再賤～