X-Ray掃描動(dòng)效是影視中常見(jiàn)的特效，變形金剛電影中汽車(chē)人掃描汽車(chē)變身的鏡頭讓人印象深刻，科技感撲面而來(lái)。那么，這么炫的技能能不能應(yīng)用在智能汽車(chē)的HMI設(shè)計(jì)上？將開(kāi)機(jī)動(dòng)畫(huà)、汽車(chē)自檢等場(chǎng)景打造成X-Ray掃描動(dòng)效是一種什么感受？

當(dāng)！然！可！以！ 一切交給KANZI

通過(guò)KANZI軟件實(shí)現(xiàn)X-Ray掃描動(dòng)效 接下來(lái)我們將逐步講述如何使用KANZI實(shí)現(xiàn)X-Ray掃描特效：

1. 在車(chē)模原有效果不變的情況下，實(shí)現(xiàn)X光移動(dòng)掃描車(chē)身的效果

在KANZI中，汽車(chē)模型一般使用特殊材質(zhì)例如光照模型材質(zhì)、PBR材質(zhì)來(lái)實(shí)現(xiàn)真實(shí)的汽車(chē)效果，因此要在原有的材質(zhì)效果上實(shí)現(xiàn)動(dòng)效，需要在原有的材質(zhì)Shader代碼上進(jìn)行功能擴(kuò)展。

本例中的車(chē)模使用的是KANZI自帶的Blinn-Phong著色模型；

在Fragment Shader中，對(duì)最后經(jīng)過(guò)光照計(jì)算輸出的color值進(jìn)行操作實(shí)現(xiàn)效果，最后通過(guò)gl_FragColor輸出。

在Vertex Shader中，定義vPos變量代表模型在世界坐標(biāo)系下的頂點(diǎn)坐標(biāo)，輸出到Fragment Shader使用。

Fragment Shader中定義ScanLinePosX和ScanLineWidthX兩個(gè)float值；

將世界坐標(biāo)系下模型頂點(diǎn)坐標(biāo)的X與ScanLinePosX相減并取絕對(duì)值，獲取每個(gè)頂點(diǎn)到Scan Line PosX的距離dist，與Scan Line WidthX進(jìn)行判斷，在范圍內(nèi)對(duì)color值進(jìn)行再計(jì)算實(shí)現(xiàn)效果，范圍外則顯示原有車(chē)模顏色值，以此確定掃描區(qū)域的范圍；

通過(guò)Animation曲線(xiàn)動(dòng)態(tài)更改Scan Line PosX實(shí)現(xiàn)掃描區(qū)域的移動(dòng)；

2. X光掃描車(chē)身，模型邊緣發(fā)光效果的實(shí)現(xiàn)

邊緣光即Rim Light，在當(dāng)前觀(guān)察視角下模型的邊緣加個(gè)光的效果，通過(guò)常見(jiàn)的光照模型檢測(cè)邊緣，模型頂點(diǎn)的法線(xiàn)向量（即垂直于頂點(diǎn)平面的向量）與攝像機(jī)和頂點(diǎn)間的視角向量之間的夾角越大，說(shuō)明越靠近邊緣。

定義uniform 參數(shù)Rim Light Color 作為邊緣光顏色輸入值，Rim Power Factor作為邊緣光強(qiáng)度因子，N為標(biāo)準(zhǔn)化后的頂點(diǎn)法線(xiàn)向量，V為標(biāo)準(zhǔn)化后的頂點(diǎn)與攝像機(jī)間方向向量，這兩個(gè)向量在原本的光照模型Shader中都已近計(jì)算好了，可以直接使用。

OpenGL內(nèi)置dot（N， V）函數(shù)表示返回兩個(gè)向量的點(diǎn)積，返回值越接近0表示夾角越大、越接近邊緣，Rim Power Factor參數(shù)傳入Open GL內(nèi)置pow （）指數(shù)函數(shù)，控制邊緣光強(qiáng)度，最后獲得掃描區(qū)域rimColor顏色值。

3. X光掃描區(qū)域透視效果實(shí)現(xiàn)

定義uniform 參數(shù)XRay Percentage表示X-Ray透視強(qiáng)度，分別控制了Rim Light顏色與車(chē)模原本顏色混合強(qiáng)度，和掃描區(qū)域透視強(qiáng)度；

XRay Percentage越大區(qū)域顯示邊緣光越強(qiáng)，反之則顯示車(chē)模原本顏色。 實(shí)現(xiàn)透視效果需要車(chē)模分出內(nèi)部與外殼兩個(gè)結(jié)構(gòu)，設(shè)置車(chē)模外殼部分節(jié)點(diǎn)混合Blend Mode為阿爾法： 預(yù)乘（Alpha： Premultiplied），使車(chē)外殼模型可透明，內(nèi)部模型則不需要。

rimColor的alpha通道通過(guò)內(nèi)置函數(shù)smoothstep（）返回0到1直接的值，并通過(guò)XRay Percentage參數(shù)控制；

最終實(shí)現(xiàn)X-Ray效果可控：

4. X光掃描區(qū)域網(wǎng)格效果及邊緣漸變的實(shí)現(xiàn)

定義Wire Texture傳入網(wǎng)格圖紋理，紋理Wrap Mode設(shè)置Repeat；

通過(guò)放到UV坐標(biāo)使紋理重復(fù)擴(kuò)展形成網(wǎng)格，定義Wire Tex Strength參數(shù)控制網(wǎng)格顯示強(qiáng)度，最后將網(wǎng)格紋理顏色值與rimColor混合疊加。

1）X-Ray掃描區(qū)域邊緣需要有漸變過(guò)度的效果，通過(guò)之前計(jì)算得到的模型頂點(diǎn)與Scan Line PosX之間的距離值dist，與區(qū)域的寬度值Scan Line WidthX相比，獲得0到1之間的值；

2）通過(guò)pow（）返回它的1.5次方得到factor，表示當(dāng)前模型頂點(diǎn)到掃描區(qū)域中心的距離因子，掃描區(qū)域邊緣的距離越遠(yuǎn)，factor值越小；

3）再通過(guò)mix（）函數(shù)混合rim Color與車(chē)模原始色，越接近掃描區(qū)域邊緣越向車(chē)模原始色漸變；

最后使用Animation或狀態(tài)機(jī)控制Shader的自定義的參數(shù)實(shí)現(xiàn)X-Ray掃描的效果。
責(zé)任編輯:pj