打造更真實(shí)的沉浸式3D展廳「一」

之前的文章我介紹了用blender和three.js實(shí)現(xiàn)一個(gè)簡(jiǎn)單3D畫(huà)廊的流程，我們知道要在web端(尤其是手機(jī)端)獲得更好的渲染性能和用戶(hù)體驗(yàn)，要盡量減少實(shí)時(shí)渲染，因此我們?cè)?/span>blender中烘焙了所有的顏色，光線和陰影到材質(zhì)中，英文中管這個(gè)流程叫做light map baking，但渲染出的效果往往差強(qiáng)人意，這是因?yàn)槲覀儧](méi)完全利用好blender物理材質(zhì)特性，這次我們就介紹如何用adobe substance painter來(lái)為blender輸出更加逼真的物理貼圖的工作流。

substance painter作為Allegorithmic公司旗下的明星軟件一直是渲染PBR材質(zhì)的利器，被Adobe收購(gòu)后成為creative?cloud中的一員，可以和Adobe家族中其他產(chǎn)品更好的配合，使用起來(lái)也更加的方便。

我們知道blender的默認(rèn)principled BSD材質(zhì)就是基于PBR的，它提供了一些基本的物理特性諸如：base color，roughness，metallic，normal，要讓渲染看起來(lái)更加真實(shí)，需要我們?yōu)檫@些特性提供紋理貼圖，這就是這次的主角substance painter要幫我們做的事情。

1.?在頂點(diǎn)繪制模式中設(shè)置材質(zhì)區(qū)域

substance painer默認(rèn)的PBR模板會(huì)為blender中每個(gè)材質(zhì)material生成5張紋理貼圖，所以如果你的模型用到了2個(gè)材質(zhì)，那么生成的貼圖數(shù)量就是2×5=10張，可以想象如果你的模型使用了更多的材質(zhì)，這樣管理起來(lái)就很不方便，一般我們只希望為一個(gè)模型生成一套貼圖，可以使用blender中的頂點(diǎn)繪制模式vertex paint來(lái)幫我們實(shí)現(xiàn)。

拿blender默認(rèn)的立方體為例，我們可以在vertex paint模式下為立方體的兩個(gè)區(qū)域設(shè)置不同的顏色，什么 顏色并不重要，在將模型導(dǎo)入到SP中的時(shí)候，SP可以自動(dòng)識(shí)別出這些顏色區(qū)域，在編輯模式下選中區(qū)域，然后按shift+k鍵進(jìn)行顏色繪制。

將剛才的立方體模型導(dǎo)出為fbx格式，導(dǎo)出類(lèi)型選擇為當(dāng)前選中的Mesh。

2.?在Substance?Painter中導(dǎo)入模型

在SP中新建項(xiàng)目，選擇PBR模板，紋理分辨率設(shè)置為2048，你也可以根據(jù)自己的需要設(shè)置更高或更低的分辨率，法線貼圖模式選擇openGL。

3.?烘焙貼圖

然后在紋理集設(shè)置中選擇烘焙貼圖，消除鋸齒這里選擇2次采樣。

ID選項(xiàng)這里選擇頂點(diǎn)顏色模式，這樣才能識(shí)別出blender繪制好的顏色區(qū)域。

4.?設(shè)置材質(zhì)

先在左側(cè)資源庫(kù)中拖拽一種金屬材質(zhì)到右側(cè)的立方體，在圖層面板中新建一個(gè)文件夾，將剛才新建的紋理圖層拖拽到文件夾中。

右鍵單擊文件夾選擇添加顏色選擇遮罩，然后在屬性面板中選擇遮罩對(duì)應(yīng)的顏色區(qū)域，該區(qū)域就是我們之前在blender中繪制的顏色區(qū)域。

同樣為其他的顏色區(qū)域添加顏色遮罩并分配所需的材質(zhì)，我們就完成了材質(zhì)的設(shè)置，是不是很簡(jiǎn)單！

5.?導(dǎo)出材質(zhì)

因?yàn)槲覀冏罱K要導(dǎo)出貼圖到blender中進(jìn)行渲染，現(xiàn)有的導(dǎo)出模板并不能完全滿足我們的導(dǎo)出需求，我們可以在現(xiàn)有的PBR模板基礎(chǔ)上新建一個(gè)blender輸出模板。

這時(shí)發(fā)現(xiàn)模板的normal通道還是DirectX模式，這里需要修改為openGL模式，將右下側(cè)的Normal OpenGL通道拖拽到normal貼圖的RGB方塊里。

完成后就可以根據(jù)我們?cè)O(shè)置好的模板導(dǎo)出貼圖文件。

6.?在blender中導(dǎo)入貼圖

為了方便在blender導(dǎo)入生成好的貼圖，我們先要啟用Node Wrangler插件。

右側(cè)面板會(huì)多出Node Wrangler選項(xiàng)，選中principled BSDF再點(diǎn)擊右側(cè)的Add Principled Setup選擇我們剛才導(dǎo)出的所有貼圖文件就可以完成設(shè)置。

總結(jié)

完成PBR貼圖的設(shè)置后，我們就可以走之前介紹過(guò)的流程，進(jìn)行環(huán)境光的設(shè)置烘培出更加真實(shí)的貼圖導(dǎo)出給three.js使用，后面我會(huì)介紹如何在3D展館中控制攝像機(jī)，如何結(jié)合一些實(shí)時(shí)渲染使場(chǎng)景看起來(lái)更真實(shí)等一些實(shí)用的技術(shù)。