unity shaderGraph实例-物体线框显示

吴梓穆

已于 2024-02-28 15:56:59 修改

阅读量1.2k

点赞数 8

分类专栏： shader 文章标签： unity

于 2024-02-27 14:48:48 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_44568736/article/details/136317896

版权

shader 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

本项目基于URP

实现一，读取UV网格，由自定义shader实现效果

优缺点

优点：可以使用代码调整线的粗细和内部填充颜色
缺点：要求模型的每个面必须是四边形或三角形，不能出现更多的边，否则无法正确描出边框，这会要求房间的门框等需要折角的地方会产生额外的线框

效果展示

在这里插入图片描述

模型准备

我们需要特殊处理一下模型的UV，重置所有的UV，让顶点紧贴UV坐标的边框，注意如果一个面有5个及以上的边，那么无法让这个面的每个顶点都紧贴边缘，这样最后的结果是错误的
在这里插入图片描述
为了以后贴图方便，我们为模型构建第二套纹理，重置第二套纹理的UV，第一套保持不变

整体结构

在这里插入图片描述

各区域内容

区域1

在这里插入图片描述

区域1看似复杂，其实是四条线的思路是一样的，这里做的事只有一件，就是获得一个外边是白色矩形，内部是黑色方块的贴图。
具体来说，使用一个范围为0.5-1的slider决定白色区域的粗细。
1号2号两个条线拼接出白框上边和下边，3号4号拼接出白框左右边，最后相加，得的白框，最后将白色范围钳制到0-1之内。
需要注意，这里我们用的是第二套UV贴图（UV01）；

区域2

在这里插入图片描述

反转黑白区域，目的是为了填充中间区域的颜色

区域3

在这里插入图片描述
为白色边框添加颜色，并和区域2里的颜色相加，获得最后的颜色

区域4

在这里插入图片描述
输出颜色，并且添加透明度

shader属性

在这里插入图片描述
透明，additive混合，双面渲染

颜色属性

在这里插入图片描述

borderColor使用HDR颜色，目的是为了边缘自发光效果，内部填充颜色不要用HDR颜色，否则混合结果会很难看。

材质属性

使用shader创建材质，为borderColor添加HDR高亮
在这里插入图片描述

后处理

为后处理添加bloom效果，最好将高亮的颜色Tint改为和边线一样的颜色
在这里插入图片描述

实现二，直接使用纹理，使用默认shader实现

在这里插入图片描述

优缺点

优点：可以高度自定义，想要什么图案画在纹理上就是了，使用起来非常方便
缺点：图案是静态的，不能使用参数调整

贴图准备

在这里插入图片描述
在模型制作软件中导出UV布局图，然后沿着UV边线绘制图案，并填充所需的颜色，需要注意的是，填充色应该比边线颜色暗的多。

材质准备，使用默认的

在这里插入图片描述

关注

8
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
unity shaderGraph实例-物体线框显示

优点：可以使用代码调整线的粗细和内部填充颜色缺点：要求模型的每个面必须是四边形或三角形，不能出现更多的边，否则无法正确描出边框，这会要求房间的门框等需要折角的地方会产生额外的线框，破坏美观性，所以下方效果展示里直接去掉了墙的门框这个结构。
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。