【Unity URP】风格化树01：SpeedTree制作插片树

「爱情、让人受尽委屈。」 2023-09-24 23:54 66阅读 0赞

**写在前面**

OMG，距离上一篇已经过去3天了，今天是ddl，赶紧水一篇（不是）做树模型的记录文章。

## 1 前期尝试 ##

做树的方法有很多，3D建模软件手撸、Houdni程序化生成、或者SpeedTree和TreeIt，在定下来用ST做插片树之前，我做了几个简单的尝试。

### 1.1 Blender制作树 ###

直接建模！

树干 -> 几个球变形面 -> 在面上用粒子特效放上“叶子”，这样的话面数将会非常高，，好像大概有5W+

![86563e91eca14b63b592a6cd081c0950.png][]

另外需要赋予球型法线，为了之后阴影实现的效果更好，具体方法就是DataTransfer：

![f9db5de6ed7f413bbfc5acc417743225.png][]

把法线显示出来可以更直观：

![554a22c445b1437693233c26b681d0e3.png][]

额，，这种不考虑面数的建模法面数简直多的恐怖。

### 1.2 SpeedTree随机生成片 ###

相比Blender里需要想办法去加树叶，SpeedTree就容易多了，，结构的话就是简单的树干-大树枝-小树枝-树叶：

![7539f0432fef496b81ca39fdb17e6101.png][]

PS里做了个简单的透贴（遮罩），加上后：

## ![05ccb2e762cc4b71889d377e5e7b9b89.png][] ##

树的疏密程度取决于我们用的透贴，对比对比：

![895fba5426b542a59bb84917461c2039.png][] 疏

![9952030517d644089c5e52521fc76a31.png][] 密

当然，透贴除了影响疏密程度，还影响树的外观！！所以想要一个好的外观效果，好的透贴非常重要~

做到这里，整体面数也就接近3W+了，其中光树叶面片就有2k+

## 2 SpeedTree插片树 ##

这里就不对插片方法分析了，可以直接参考下面两位大佬的文章，根据树的繁茂程度和大小分析了原神里树插片的方法：

[\[原神风格渲染01\]URP下的树木建模+Shader还原][01_URP_Shader]

[《原神》卡渲效果逆向还原 【一、风格化树】][Link 1]

小节一下：超大的那种均匀扩散的乔木（横竖插片、三片式）；小乔木；大片叶子、层次分明的树（伞状插片），等等，有很多种插片形式。

### 2.1 制作插片 ###

首先是制作插片吧，我选择了三片式插片。虽然确实很简单，我还是走了一些弯路，，，比如插片没考虑到正反面导致导入SpeedTree和Unity后非常奇怪，所以在做的时候需要前后翻转面后再复制，这样法线就前后都有了，不过这样一来三片面插片实际上就会多出一倍的面片数，相当于一个插片面数6。

我是用Blender做的插片，可以直接打开Shading窗口，给面片都赋予一个开启了背面剔除的材质，这样做起来就能模拟出Unity的单面显示效果了。

![0d5e446d7e6145a4af5843da7ab7ed38.png][]

其次是最好把整体中心放在偏向一角的位置，这样不至于很难调整跟树枝的位置关系：

![da9a9b5352f6464ba97b460679d71005.png][]

如此插片就制作完成了。

### 2.2 SpeedTree制作 ###

![35d98619389f4952b246a22ac0fad23a.png][]

就放个最终的结果图吧，后面针对树干和树枝做了简单的减面处理，勉强面数到了4k+，但其实树枝的面数依旧很大，继续优化的话应该是从一开始就调整树干垂向的段数，但是我是调整完了才想起来要控制段数，所以没办法修改了（会影响整体造型的），所以这里就暂时控制到这里。

### 2.3 树叶法线修改 ###

跟上面方法一样，修改前后对比：

![17af2953bff244798a261bfee31744d4.png][]

![806a5d62d63145ccb82cf82615e7967c.png][]

### 2.4 导入Unity ###

再导入Unity看看情况：

树叶给了个简单的Shader（树干光秃秃的好丑），接下来就着色了！

![b2666f5de1864115a2e2cb6bc895e547.png][]

写个法线可视化Shader，再看看树叶的法线信息是不是规整的：

![f131490121c04d6fa523302a065044c3.png][]

蛮好！

--------------------

由于我用的这个是cinema版本没有提供LOD功能，后面会换个Game的重新导出LOD的.st文件。

建模部分就到这儿啦！后续的话先给树叶着色，再SD做树干贴图，最后搭个小场景吧~无意间看到了《The Witness》里的场景：（图来自[https://www.artstation.com/artwork/4Zlx1][https_www.artstation.com_artwork_4Zlx1]）

![c15e620f14f849859a82d4ccbb429dcf.jpeg][]

![e490f9b4fc7c4b9989cda9336f81b6e3.jpeg][]

好看！还原一下。

[86563e91eca14b63b592a6cd081c0950.png]: https://img-blog.csdnimg.cn/86563e91eca14b63b592a6cd081c0950.png
[f9db5de6ed7f413bbfc5acc417743225.png]: https://img-blog.csdnimg.cn/f9db5de6ed7f413bbfc5acc417743225.png
[554a22c445b1437693233c26b681d0e3.png]: https://img-blog.csdnimg.cn/554a22c445b1437693233c26b681d0e3.png
[7539f0432fef496b81ca39fdb17e6101.png]: https://img-blog.csdnimg.cn/7539f0432fef496b81ca39fdb17e6101.png
[05ccb2e762cc4b71889d377e5e7b9b89.png]: https://img-blog.csdnimg.cn/05ccb2e762cc4b71889d377e5e7b9b89.png
[895fba5426b542a59bb84917461c2039.png]: https://img-blog.csdnimg.cn/895fba5426b542a59bb84917461c2039.png
[9952030517d644089c5e52521fc76a31.png]: https://img-blog.csdnimg.cn/9952030517d644089c5e52521fc76a31.png
[01_URP_Shader]: https://zhuanlan.zhihu.com/p/569982917
[Link 1]: https://zhuanlan.zhihu.com/p/438178299
[0d5e446d7e6145a4af5843da7ab7ed38.png]: https://img-blog.csdnimg.cn/0d5e446d7e6145a4af5843da7ab7ed38.png
[da9a9b5352f6464ba97b460679d71005.png]: https://img-blog.csdnimg.cn/da9a9b5352f6464ba97b460679d71005.png
[35d98619389f4952b246a22ac0fad23a.png]: https://img-blog.csdnimg.cn/35d98619389f4952b246a22ac0fad23a.png
[17af2953bff244798a261bfee31744d4.png]: https://img-blog.csdnimg.cn/17af2953bff244798a261bfee31744d4.png
[806a5d62d63145ccb82cf82615e7967c.png]: https://img-blog.csdnimg.cn/806a5d62d63145ccb82cf82615e7967c.png
[b2666f5de1864115a2e2cb6bc895e547.png]: https://img-blog.csdnimg.cn/b2666f5de1864115a2e2cb6bc895e547.png
[f131490121c04d6fa523302a065044c3.png]: https://img-blog.csdnimg.cn/f131490121c04d6fa523302a065044c3.png
[https_www.artstation.com_artwork_4Zlx1]: https://www.artstation.com/artwork/4Zlx1
[c15e620f14f849859a82d4ccbb429dcf.jpeg]: https://img-blog.csdnimg.cn/c15e620f14f849859a82d4ccbb429dcf.jpeg
[e490f9b4fc7c4b9989cda9336f81b6e3.jpeg]: https://img-blog.csdnimg.cn/e490f9b4fc7c4b9989cda9336f81b6e3.jpeg