本章內(nèi)容

• 創(chuàng)建一個(gè)閉合的cube mesh
• 給cube添加帶弧度平滑的邊緣
• 定義法線
• 使用sub-meshes（子mesh）
• 創(chuàng)建一個(gè)常規(guī)shader
• 合并碰撞體

1.合成一個(gè)cube

上一章https://mp.csdn.net/postedit/89474068我們已經(jīng)實(shí)現(xiàn)了一個(gè)平面mesh。一個(gè)cube由6個(gè)平面組成，我們可以由6個(gè)上一章實(shí)現(xiàn)的平面修改位置和方向后組成一個(gè)cube，這種方法看起來挺好，但是其實(shí)并不實(shí)用，雖然我們也可以過?Mesh.CombineMeshes這個(gè)函數(shù)合并這6個(gè)mesh，但是我們最好還是一次性創(chuàng)建這個(gè)cube。

2.創(chuàng)建cube的頂點(diǎn)

一個(gè)cube中的頂點(diǎn)可以分為三類。角上的頂點(diǎn)（下圖3），邊上的頂點(diǎn)（下圖2）以及面上的頂點(diǎn)（下圖1）

具體每個(gè)種類多少其實(shí)就是算數(shù)學(xué)題，具體如何算的可以參考原文，最后計(jì)算定點(diǎn)數(shù)量代碼如下?

?之后再計(jì)算每個(gè)頂點(diǎn)的位置，最后結(jié)果如下

?

?3.添加三角形

?具體實(shí)現(xiàn)方法類似之前的文章，但是涉及更多的數(shù)學(xué)知識(shí)，這里不細(xì)講了，大體思路是先計(jì)算cube四周的四個(gè)面，之后計(jì)算上面（top）和下面（bottom）。最后效果如下

4.使邊緣圓滑

基于之前的代碼，重新創(chuàng)建一個(gè)類命名為RoundedCube，并添加一個(gè)Roundness變量用于控制圓滑程度

這回我們要自己計(jì)算法線。先定義法線數(shù)組

創(chuàng)建一個(gè)函數(shù)，用于計(jì)算法線以及使得頂點(diǎn)沿著法線位置變化形成弧度

?計(jì)算法線的原理是依據(jù)roundness參數(shù)形成一個(gè)更小的cube，大cube和小cube之間頂點(diǎn)的向量差就是大cube上該點(diǎn)的法線。如下圖所示：

?通過roundness參數(shù)，來確定大cube上每個(gè)頂點(diǎn)對(duì)應(yīng)的小cube位置

最終結(jié)果

5.拆分Mesh

如何計(jì)算UV使得其可以渲染紋理？我們可以將總的三角形列表拆分成多個(gè)子mesh（三角形列表），其之間共用一些相同的頂點(diǎn)，這也使得我們可以使用不同材質(zhì)去渲染每一組子三角形列表。

創(chuàng)建三個(gè)子列表

計(jì)算每個(gè)三角形列表

不再是設(shè)置mesh.triangles? 而是設(shè)置子mesh

如果只設(shè)置一個(gè)材質(zhì)，那么會(huì)發(fā)現(xiàn)只有兩個(gè)面會(huì)渲染（一組）

?在mesh render中material array設(shè)置三個(gè)材質(zhì)，會(huì)得到正確結(jié)果

?6.渲染Gird

我們可以使用shader，在shader中指定如何計(jì)算使用一個(gè)紋理而代替在mesh中存儲(chǔ)uv信息。

Unity中默認(rèn)shader的代碼如下：

因?yàn)槲覀僲esh中沒有uv信息，我們需要在shader中計(jì)算，所以我們?cè)陧旤c(diǎn)著色器中計(jì)算uv信息，并將其傳入到surface shader中

通過使用shader中的keyword，我們可以控制shader的渲染

根據(jù)所設(shè)置的keyword提供支持?

根據(jù)所選keyword設(shè)置來進(jìn)行uv計(jì)算

可以看出同一個(gè)shader通過設(shè)置keyword來提供三個(gè)material對(duì)應(yīng)的效果

?但是能看出來grid line沒有和四邊形完全對(duì)應(yīng)上，更糟的是因?yàn)槲覀兪褂玫氖鞘澜缱鴺?biāo)系，當(dāng)我們旋轉(zhuǎn)和移動(dòng)這個(gè)cube的時(shí)候效果會(huì)更奇怪。

我們需要使用的是在圓滑之前原始的cube中的頂點(diǎn)位置，因此我們通過將其存儲(chǔ)在mesh中傳入shader。因?yàn)槲覀冞@個(gè)例子中vertex color channel沒有用，所以我們就用它來存儲(chǔ)這個(gè)信息。

在shader中使用color channel存儲(chǔ)的信息進(jìn)行計(jì)算

7.添加碰撞體

添加一個(gè)碰撞體時(shí)候的樣子

為平坦的部分添加box collider（共三個(gè)）?

為圓滑邊緣添加capsule collider（12個(gè)）

最后的效果

https://thumbs.gfycat.com/RingedCornyBlesbok-mobile.mp4

?

總結(jié)

以上是生活随笔為你收集整理的Catlike Coding网站文章解析 -- 2.Procedural Grid的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。