產(chǎn)品在線展示案例預(yù)覽
- 玉鐲在線預(yù)覽：http://www.yanhuangxueyuan.com/3D/yuzhuo.html
- 汽車在線預(yù)覽：http://www.yanhuangxueyuan.com/3D/car.html
Web3D技術(shù)歷史
可通過插件或WebGL技術(shù)實(shí)現(xiàn)Web3D，在線網(wǎng)頁上預(yù)覽操作三維模型。
插件
最早實(shí)現(xiàn)Web3D技術(shù)所有技術(shù)方案，基本都要依賴特定插件來實(shí)現(xiàn)，渲染效率、渲染質(zhì)量都有些問題，并未全面流行起來。本篇文章既然不涉及使用插件方式實(shí)現(xiàn)三維模型在線預(yù)覽，就不在展開詳述歷史上需要插件實(shí)現(xiàn)在線預(yù)覽三維模型的相關(guān)技術(shù)。
WebGL技術(shù)
說到WebGL，最容易聯(lián)想到的是OpenGL或OpenGL ES。隨著大多數(shù)瀏覽器對(duì)WebGL技術(shù)的支持，瀏覽器不需要安裝任何插件也可以實(shí)現(xiàn)三維模型的在線預(yù)覽和操作。
WebGL應(yīng)用
WebGL技術(shù)可以用于實(shí)現(xiàn)產(chǎn)品在線預(yù)覽、WebVR、Web全景、室內(nèi)裝修在線預(yù)覽、場景漫游、三維建模應(yīng)用、3D導(dǎo)航...，本文主要科普基于WebGL技術(shù)實(shí)現(xiàn)產(chǎn)品的在線預(yù)覽與交互，比如常見的數(shù)碼產(chǎn)品、珠寶首飾、轎車等。
基于WebGL技術(shù)實(shí)現(xiàn)產(chǎn)品三維模型在線預(yù)覽
如果直接通過原生WebGL API和著色器語言來實(shí)現(xiàn)相對(duì)來說比較麻煩，通常來說需要通過一款三維引擎來實(shí)現(xiàn)，如果你是前端工程師你雖然學(xué)習(xí)JavaScript和HTML，但是你在做一些前端項(xiàng)目的時(shí)候會(huì)借助jquery、vuejs等庫或框架，對(duì)于3D開發(fā)也是一樣，需要一個(gè)封裝了WebGL的庫或引擎。
Three.js引擎
WebGL有多款三維引擎，國內(nèi)應(yīng)用最多的就是Three.js，Threejs的中文資料教程相對(duì)來說比較多，同時(shí)企業(yè)招聘WebGL工程師的時(shí)候，通常會(huì)要求你掌握Threejs三維引擎。
three.js的更多教程關(guān)注郭隆邦技術(shù)博客。
技術(shù)流程
Threejs實(shí)現(xiàn)產(chǎn)品三維模型在線預(yù)覽，通常來說需要美術(shù)和技術(shù)相互配合來完成。
1.美術(shù)
3D美術(shù)借助3dmax或Blender或其他三維軟件進(jìn)行三維建模，渲染烘培，然后導(dǎo)出包含幾何體數(shù)據(jù)和材質(zhì)數(shù)據(jù)文件，材質(zhì)通常有一些貼圖。
2.技術(shù)
WebGL程序員通過threejs三維引擎的加載器加載解析美術(shù)導(dǎo)出的模型文件。
真實(shí)度要求
產(chǎn)品的展示渲染效果，在真實(shí)度方面，往往和游戲或動(dòng)漫不同，對(duì)要展示的三維模型通常要求真實(shí)度要高，既然要展示一個(gè)產(chǎn)品必要希望一個(gè)網(wǎng)頁展品要和真實(shí)的產(chǎn)品盡可能一樣，質(zhì)感很強(qiáng)，這樣才能起到更好的營銷效果。
渲染效果
模型幾何體信息創(chuàng)建
所謂模型幾何體信息，也就是頂點(diǎn)數(shù)據(jù)。雖然threejs有很多繪制幾何體的API，但是一個(gè)復(fù)雜的曲面，如果不是比較規(guī)則的球體或圓環(huán)，很難用程序去寫，通常需要美術(shù)需要用可視化的方式建模，也就是使用三維軟件，至于軟件選擇，看美術(shù)需要。
材質(zhì)參數(shù)設(shè)置兩種方式
渲染效果程序員可以通過threejs設(shè)置材質(zhì)參數(shù)實(shí)現(xiàn)，也可以美術(shù)來設(shè)置并包含在導(dǎo)出的三維模型文件中。程序可能并不擅長渲染效果設(shè)置，或者說在threejs設(shè)置材質(zhì)參數(shù)遠(yuǎn)沒有三維模型中設(shè)置方便，通常來說是美術(shù)來設(shè)置決定決定渲染效果的材質(zhì)參數(shù)，比如透明度、高光、金屬度等參數(shù)。
光照參數(shù)設(shè)置
如果想有更好的渲染效果，通常需要設(shè)置光照，如果光照設(shè)置的參數(shù)不恰當(dāng)，渲染效果也會(huì)很大程度上打折扣，光照可以程序員來設(shè)置，也可美術(shù)設(shè)置。如果美術(shù)設(shè)置了光照信息，要注意導(dǎo)出三維模型時(shí)，模型文件格式的選擇。主要有些三維模型格式并不會(huì)包含光照信息，比如stl和obj，而glTF、FBX等格式就可以包含光照信息。
動(dòng)畫效果
一些產(chǎn)品可能會(huì)有一些動(dòng)畫動(dòng)作，比如轎車、冰箱的開門動(dòng)作。通常需要美術(shù)在三維軟件中設(shè)置動(dòng)畫，導(dǎo)出模型后，程序員可以通過threejs的幀動(dòng)畫模塊相關(guān)API解析播放這些開關(guān)門動(dòng)作。要注意的是，選擇能包含動(dòng)畫信息的三維模型格式，比如glTF、FBX、threejs格式，如果選擇obj話，只能展示靜態(tài)模型。
次時(shí)代或PBR流程
通常游戲領(lǐng)域的3D美術(shù)會(huì)談到“次時(shí)代”或“PBR”的概念，你可以理解為一種建模流程。不同的流程導(dǎo)出的模型材質(zhì)有所不同，需要threejs中不同的材質(zhì)去解析。
次時(shí)代
傳統(tǒng)的方式就是創(chuàng)建次時(shí)代模型，對(duì)應(yīng)threejs中的材質(zhì)是高光網(wǎng)格材質(zhì)對(duì)象MeshPhongMaterial，通常貼圖文件包含顏色貼圖、法線貼圖和高光貼圖。
PBR
PBR相比次時(shí)代技術(shù)是一種更新的模型技術(shù)，對(duì)應(yīng)threejs材質(zhì)是物理網(wǎng)格材質(zhì)MeshPhysicalMaterial或標(biāo)準(zhǔn)網(wǎng)格材質(zhì)MeshStandardMaterial。通常貼圖包含顏色貼圖、法線貼圖、金屬度貼圖、粗糙度貼圖。
比較
高光網(wǎng)格材質(zhì)MeshPhongMaterial具有高光顏色和強(qiáng)度屬性，而物理網(wǎng)格材質(zhì)MeshPhysicalMaterial沒有高光相關(guān)屬性，對(duì)應(yīng)的是是金屬度和粗糙度屬性。就貼圖而言，高光強(qiáng)度對(duì)應(yīng)的是高光貼圖，金屬度對(duì)應(yīng)的是金屬度貼圖，粗糙度對(duì)應(yīng)的是粗糙度貼圖。
貼圖
顏色貼圖
顏色貼圖通過uv坐標(biāo)映射在網(wǎng)格模型表面，如果整個(gè)網(wǎng)格模型都是同一種顏色，這種情況，美術(shù)不導(dǎo)出顏色貼圖也沒有關(guān)系，如果一個(gè)網(wǎng)格模型表面不同的區(qū)域顏色不同，那就有必要使用顏色貼圖。
法線貼圖
法線貼圖主要作用是可以減少模型文件的體積，本質(zhì)就是減少頂點(diǎn)數(shù)量，減少頂點(diǎn)數(shù)量可以降低文件大小，提高網(wǎng)絡(luò)傳播速度，減少CPU頂點(diǎn)相關(guān)的計(jì)算量。對(duì)于曲面很少的模型，主要以平面構(gòu)成，有沒有法線貼圖無所謂，如果是產(chǎn)品表面是曲面，讓美術(shù)烘培法線貼圖是很必要的。
團(tuán)隊(duì)
UI和前端
完成一個(gè)網(wǎng)頁效果，通常需要UI先完成設(shè)計(jì)，然后前端使用代碼實(shí)現(xiàn)。目前大多數(shù)的互聯(lián)網(wǎng)公司都是有前端工程師和UI設(shè)計(jì)師的。對(duì)Web3D而言，則需要懂3D美術(shù)，和懂WebGL的技術(shù)。
美術(shù)
美術(shù)方面，可以找一個(gè)懂UI設(shè)計(jì)的3D美術(shù)，短期內(nèi)培養(yǎng)UI去學(xué)習(xí)3D美術(shù)，不太靠譜。如果資金充足可以專門招聘一個(gè)UI設(shè)計(jì)師和一個(gè)3D美術(shù)，一個(gè)做3D模型，一個(gè)做UI設(shè)計(jì)。
技術(shù)
對(duì)于產(chǎn)品展示而言需要的WebGL知識(shí)并不是非常深入，如果公司想節(jié)約成本，完全是可以培養(yǎng)前端去學(xué)習(xí)WebGL和threejs。
交互
為了更好的效果，一個(gè)產(chǎn)品可能不僅僅實(shí)現(xiàn)在線預(yù)覽，還需要設(shè)置一些交互，這樣用戶可以在線遠(yuǎn)程體驗(yàn)產(chǎn)品。比如一個(gè)產(chǎn)品有多種顏色系列，那么可以通過UI按鈕通過點(diǎn)擊來改變模型顏色；比如一個(gè)教程需要開門動(dòng)作，可以設(shè)置一個(gè)UI按鈕進(jìn)行開關(guān)操作。
加載進(jìn)度條
模型相比普通的網(wǎng)頁文件比較大，目前技術(shù)和硬件條件下，還需要一定加載等待時(shí)間，為了更新的用戶體驗(yàn)，可以通過一個(gè)進(jìn)度條組件可視化的顯示模型加載進(jìn)度。
