three.js mtl材质贴图未显示_基础渲染系列(十)——更复杂的复合材质

本文是关于three.js渲染系列教程的第十篇,重点介绍了如何使用mtl材质添加自阴影效果,通过遮挡贴图实现凹陷深度,以及使用细节遮罩增加材质细节。此外,还探讨了如何支持多材质编辑,通过添加关键字来实现不同的着色器变体。
摘要由CSDN通过智能技术生成

本文重点:

1、烘焙自阴影到材质中

2、给表面的某些部分增加细节

3、支持更多的效果变体

4、一次性编辑多个材质

这是关于渲染的系列教程的第十部分。上一次,我们使用了多个纹理来创建复杂的材质。这次我们再增加一些复杂度,并且还支持多材质编辑。

本教程是使用Unity 5.4.3f1制作。

       a52484bd99527d6ee040eb881d34041e.png      

(复合材质往往看起来一团糟)

1、遮挡区域

虽然我们可以创建看起来很复杂的材质,但这些只是假象,三角形仍然是平坦。法线贴图可以给人深刻的印象,但这仅适用于直射光。没有自我遮挡。较高的零件应该在较低的区域上投射阴影,但现在不会发生。当法线贴图存在小孔,凹痕或裂缝时,这一点最为明显。

假设有人在向我们的电路板射击。但没有穿过电路板,留下了明显的凹痕。下面就是为此调整的法线贴图。

       f609b64a39a42af1f98320c7945e2712.png      

(凹陷电路法线图)

使用此法线贴图时,电路材质确实确实凹陷了。但是凹痕最深的部分和未凹痕的表面一样被照亮。凹痕没有任何自我遮挡的现象。结果,这些凹痕看起来并不深。

7f596ea815a6d59146425ca490bcf76c.png

1.1 遮挡贴图

要添加自阴影,我们可以使用所谓的遮挡贴图。你可以将其视为材质的一部分,固定阴影贴图。用于凹陷电路的这种贴图,一般为灰度图像。

       0e8ed91b44a35f53ebaf369e26ad26ce.png      

(遮挡贴图)

要使用此贴图,请将此贴图的texture属性添加到我们的着色器。再添加一个遮挡强度滑块属性,以便我们可以对其进行微调。

       1c8a2c35010cdbdf80711062aa788e7a.png      

就像金属贴图一样,使着色器功能仅在设置遮挡贴图时才对其进行采样。仅将功能添加到基本通道中,因此不必担心会出现其他灯光影响。

       5b26691ac8260c82f92acacf458da792.png      

1.2 遮挡UI

因为我们有一个自定义的着色器GUI,所以必须将新属性手动添加到着色器的UI中。因此,向MyLightingShaderGUI.DoMain添加DoOcclusion步骤。

       a45dd5ad527cbe8c159a81c68d2734ee.png      

这种新方法与DoMetallic几乎相同,DoMetallic也涉及贴图,滑块和关键字。因此,请复制该方法并进行所需的更改。尽管DoMetallic在没有贴图的情况下会显示滑块,但我们需要在此做相反的操作。另外,Unity的标准着色器使用遮挡贴图的G颜色通道,因此我们也将这样做。在工具提示中展示。

       cc155ca15be1ba96cf161c5b2e561468.png      

       783465dd30b77d3394129cd8750b76af.png      

       dbf840266b0a6e4361ecc5afe4357d3a.png      

(检视器,没有和有遮挡贴图)

1.3 添加阴影

要访问包含文件中的贴图,请添加采样器和float变量。

       

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值