|点击话题/查看往期|今天是2021年11月19日  星期五
正文共：5344字 50图   预计阅读时间14分

本期内容今天我们来看看正弦和余弦


我将花几分钟解释正弦和余弦背后的概念，然后我将展示一些事情的例子你可以在着色器中以虚幻和统一的方式使用这些节点，所以让我们开始吧，以便了解正弦和余弦，如果我们在圆上放置一个点并在其中放置一个点，我们将从半径值为1的圆开始中心我们可以像这样创建一条线

更多精彩图片 请登录

然后如果我们测量我们创建的这条新线和我们原始值之间的角度我们可以在这里得到这个角度值这个角度值是我们传递给正弦或余弦的值当我们在着色器中使用它时，我们给正弦或余弦节点一个角度值，然后它计算正弦或余弦
现在正弦值是这条线(绿色这条)，注意它垂直于我们的原始值或我们的原始零角度线，它形成一个90度这里的角度与我们圆的外边缘上的点相连，

更多精彩图片 请登录

所以这条线的长度是我们的正弦值我们也可以从我们的点创建一条线是我们的正弦值

更多精彩图片 请登录

我们也可以从我们的点创建一条线，垂直于这里的这个新角度，这个值是我们的余弦长度这条线是我们的余弦，这条线的长度是我们的正弦好的我想让你注意一些事情，因为我们的角度值在这里接近零，我们的正弦值的长度也为零，我们的余弦的长度越来越近到1的值。但是当我们这里的线接近90度时，随着这个角度接近 90 度，我们的余弦收缩并接近于零，而我们的正弦值增加并接近于1

更多精彩图片 请登录

然后当我们绕圆时在这一边，我们的余弦值得到一个负的长度，它的最大值是负的然后我们的正弦值再次接近零，所以当我们四处走动时，正弦和余弦在负 1 和 1 之间有这个振荡值

更多精彩图片 请登录

圆圈和它们相互偏移 90 度让我们来看看它在运动中的样子，他允许我使用这个美丽的动画来 说明这是如何工作的只需观看一分钟就可以很容易地看到发生了什么我会在描述中放一个指向freya频道的链接感谢他让我使用这个动画。所以现在我们已经看到了正弦和余弦是如何工作的，以及我们用这些值测量了什么

更多精彩图片 请登录

让我们看几个例子，看看我们如何在着色器中使用正弦和余弦在着色器中使用正弦和余弦利用正弦产生振荡波形的事实，因此在第一个示例中，这是一个非常简单的基本示例，我们将把时间传递到我们的正弦节点，这就是时间被用作值我们在动画图形中看到的那个角度，随着时间的增加我们的符号的长度值上升然后下降然后上升然后下降并且记住我们看过它并且值在之间振荡一和负一所以它会从零开始回到一回到零再次回到负一

更多精彩图片 请登录

更多精彩图片 请登录

所以我们在这里是我们把时间变成正弦如果我只是展示这个结果你会看到这个值在1 和负1 之间，所以在我们的预览中，您可以看到我们先到1，然后再到0但现在我们处于负1区域，我们看不到负值在我们的预览中，所以我们要解决的问题是稍微调整我们的范围，这样我们就不会在1和负值之间振荡，而是在0和1之间振荡

更多精彩图片 请登录

更多精彩图片 请登录

我们现在的样子要调整我们的范围是首先乘以 0.5，然后缩小你的范围是负 0.5 到 0.5，然后如果我们在我们的范围内增加0.5，我们已经将它从负点5转移到点5到点0到1我希望很清楚它是如何工作的

更多精彩图片 请登录

所以让我们继续插入这些值并你可以看到我们现在已经创建了这个动画闪烁模式嗯，因为我们正在考虑闪烁或在0和1之间振荡的时间所以如果我想创建一个有闪烁灯或其他东西的动画像那样我可以用时间符号来做然后调整范围，而不是负 1 和 1 之间，现在它在 0 和 1 之间。非常酷

更多精彩图片 请登录

如果我想让它振荡得更快，我可以乘以一个值在这里，我不知道像 10 次传递这样的东西，现在我们有一个非常快速的闪烁灯

更多精彩图片 请登录

更多精彩图片 请登录

所以非常简单的基本示例让我们看一下可能稍微复杂一点的东西我要移到这里现在你可以拥有这些节点看到我有嗯我有这个纹理渐变这基本上只是我在photoshop中创建的径向渐变

更多精彩图片 请登录

我正在用这个例子做的是我正在创建一些涟漪，所以我有我的时间节点并且我通过一个分数 ，这意味着时间从零到一，然后又跳回零，然后我从中减去一，然后将结果添加到我的梯度中，因此这些节点的结果在这里看起来像这样，我只是在循环中，我的梯度，因为我在这里减去它

更多精彩图片 请登录

我得到这个像缓慢循环模式

更多精彩图片 请登录

好吧然后我乘以8，我这样做的原因只是为了增加对比度，所以现在我已经得到一个看起来像这样的模式

更多精彩图片 请登录

然后我将值限制在0和5之间因为我在这里乘以8我的最大值是8将值限制在0和5之间然后我乘以pi这给了我这个漂亮的动画在这里圈但是我不想要一个实心圆圈

更多精彩图片 请登录

我实际上想要涟漪我正在创造一个不断扩大的涟漪效果，然后我将其结果传递 到我的正弦波中，我在这里得到了这个非常催眠的结果我希望如果你有问题像这样的图案你可以移开视线或其他东西，但是我会把它传递到根节点会出现下面结果

更多精彩图片 请登录

我们来开另外一个例子，时间的标志作为波浪动画来实际为我们的模型设置动画，而不是在0 和1之间或黑色和白色之间设置颜色动画，现在我们正在对位置进行动画处理，

更多精彩图片 请登录

您可以看到我的顶点在对象空间中的位置我使用拆分节点来拆分它们的xy和z位置坐标 ，然后我取时间的正弦值并将其添加到我的 y 位置，然后在我的主堆栈中，我将其传递到我的顶点位置节点，这样我就可以上下动画我的对象的 y 位置和向下，你可以看到，因为它是一个正弦波，它正在做这个非常好的平滑振荡如果我想把它变成一个反弹的球，就像我们之前说的，正弦在负1和负1之间，为了让球反弹，我只想让它在0和1之间

更多精彩图片 请登录

所以我在这个例子中要做什么，绝对节点是什么，我们以后可能会讨论更多。但它基本上将任何负值转换为正值因此当我低于零进入负值区域时，它会将这些负值转换为正值，现在我有一个球，看起来像是在击中地面并弹跳， 因为我的正弦波负值正在变成正值到目前为止，我们已经使用了我们的正弦节点来为颜色或亮度值设置动画以创建涟漪

更多精彩图片 请登录

并在我们的下一个示例中为我们的对象的位置设置动画或振荡我们将使用正弦和余弦来旋转我们的纹理坐标，例如我说在这个例子中

更多精彩图片 请登录

我们将旋转一些 uv 坐标，我知道这个图看起来有点复杂，所以我将花一点时间来解释这里发生了什么是我的传入 uv 坐标然后我在这里有一个向量 2，它代表我想要旋转我的 uvs 的中心点或枢轴点

更多精彩图片 请登录

然后这里的这个值代表我想要旋转它们的程度，所以首先我从减法开始出我的中心点或我的旋转，然后在图表的末尾， 我将其添加回来，因此默认情况下，我的旋转将在 0 0 左右，位于左下角，这不是我想要的，所以首先我需要减去我的枢轴点以使其居中，然后最后我需要将其添加回来，这就是我在这里做的事情 ，将其减去然后再添加回来，所以我将所有内容移到中心 ，然后我得到现在摆脱了最后的转变

更多精彩图片 请登录

我的图形的这个分支正在转换或旋转我坐标的 u 坐标，图形的这个分支正在旋转 v 坐标，然后我这样你就可以看到我在取余弦输入角度的值，然后将其乘以 x 或 u 坐标，然后将输入角度的正弦乘以 v 坐标， 然后将它们相加，这成为我的新向量 2 然后我对 u 做一些相反的事情我在这里取 v 坐标并将其乘以余弦，然后取x或u 坐标并将其乘以符号然后我是减去这些结果如果我们在中间步骤 中查看我们的结果你可以在这里看到我的u坐标和我的 v 坐标 让我们传递只是为了好玩而不是我们而

更多精彩图片 请登录

让我们通过时间来计算旋转量，这样我就可以为它设置动画，现在你可以看到我的 u 坐标像这样旋转，我的v坐标像这样旋转，我的结果看起来像这样

更多精彩图片 请登录

现在我知道这有点复杂设置每个一次你想旋转一些 uv 坐标，所以我有一些好消息给你，那就是编辑器有一个内置的节点来做这个叫做旋转所以这里是我的旋转 uvs 节点

更多精彩图片 请登录

就像我正在做的所有这些一样，我可以在这里将时间传递到我的旋转值中，并从我的旋转节点获得与我从所有这些图形节点获得的结果相同的结果。所以基本上我刚刚向您展示的是这是图形或者这是发生在我的旋转 uv 节点内部的数学，所以我们可以看到我的结果同步得恰到好处，旋转 uv 节点正在做与所有这些完全相同的事情，但我想向您展示的是，您可以一起使用余弦和正弦来旋转您的u 和 v 以及最终得到一些旋转的 uv，然后你可以， 如果你要应用纹理并使用这些 uv 来采样该纹理，那么你就会有一个旋转的纹理

更多精彩图片 请登录

这违背了我们在开始时看到的正弦和余弦是彼此的互补作为我的半径或我的观点是围绕那个圆圈，这就是我们在这里利用的东西，以便能够旋转我们的 uv 坐标非常酷好吧
让我们现在继续切换到虚幻引擎，看看这些引擎中的例子，我们在这里在虚幻中，我使用正弦和余弦节点统一展示了相同的四个着色器示例，首先我们有时间的正弦 ，我用它来做我们在零和一之间的小振荡 ，所以我要插入在我们的颜色值中 ，嗯插入了这些，我们将在零和一之间获得这种振荡

更多精彩图片 请登录

现在关于正弦节点有一件有趣的事情，我需要指出的是，这与我们通常认为正弦的方式有点不同，通常在数学中，当我们调用正弦函数时， 它给了我们一个周期为两个 pi 的值，并且 两个圆周率时期只是一些假设但虚幻的东西实际上在这里公开了这个周期值，你现在可以输入任何你想要的值，它默认为一个周期所以如果你想让虚幻中的正弦节点表现得像其他游戏引擎或数学公式一样，你愿意吗需要给它一个 2 pi 的周期， 即 6.283185

更多精彩图片 请登录

所以在这些例子中的每一个我都必须输入这个值，因为它默认为一个，这意味着你将得到与 unity 或其他地方不同的结果你在做数学的地方， 所以通常当我在虚幻中使用正弦值时，我一定会在这段时间内给它这两个 pi 值，所以现在我们有一个值嗯，它在负值之间的零之间振荡再次我们需要乘以零点五并加上零点五以将我们的范围从负一到一转移到零到一现在我们已经完成了我可以插入这些结果现在我们开始有一个在之间振荡的值0 和 1

更多精彩图片 请登录

好吧，在我们的下一个例子中，我们正在使用这个径向渐变纹理创建涟漪， 所以我将时间的小数部分从中减去一个，然后将其添加到我们的纹理中 ，如果我们将其插入你可以看到我们这里有这个动画渐变，我们将把这个值乘以8，然后在0和5之间钳位 ，这会给我们一个更坚实的渐变，然后我们再将其乘以 pi 并将其传递给正弦波，这将给我们我们的波动值， 因为正弦波在 1 和负1之间来回振荡，通过我得到的值这个函数的其余部分， 所以正弦波能够给我们这些单独的涟漪 ，然后如果我想要，我可以采取我在这里所做的并扩展它以在 pawn 中创建涟漪

更多精彩图片 请登录

更多精彩图片 请登录

例如：在我们的下一个值中实际上是在为我们的obj的位置设置动画等等，所以我要把它切换到一个球体，这样我们就可以更好地看到它，所以我正在计算时间，在这种情况下，我必须将它乘以一百，因为位置单位虚幻的单位是厘米而不是米，我这里的球体只比一米大一点，所以如果我想要不小的值，我必须将它乘以一百，然后我将把它传递给 z 我的附加mini 的组件因为再次虚幻是 z 向上而不是 y 向上统一我正在为 y 轴设置动画以使我的球垂直反弹， 但在虚幻中我必须为z轴设置动画，所以我要通过这个值然后进入我的世界位置偏移量，

更多精彩图片 请登录

更多精彩图片 请登录

现在你可以看到我的球体在这里上下振荡，因为我添加到它的 z 轴的正弦动画所以这在我们展示的示例中非常酷 我展示了如何利用时间符号的绝对值使 球看起来像我看起来像是在反弹
如果我只是将时间的符号传递给绝对值，那么当我的值试图变为负值而不是负值时，它们会变为正值，我很好地得到了这个弹跳功能（在地面之上反弹）

更多精彩图片 请登录

更多精彩图片 请登录

然后就像在unity中一样，我得到了这个用于旋转我的uv我有这个名为 rotator 的内置节点，它遵循我在 u 坐标上使用正弦和余弦之前向您展示的相同图形模式 ，还有v 坐标上的余弦和正弦旋转我的纹理坐标，所以就像在 unreal 中一样，我们也有这个旋转器节点为我们处理所有这些 ，所以我们实际上不必构建该图， 所以我要插入我的纹理坐标到我的旋转器然后我将我的时间也插入我的旋转器

更多精彩图片 请登录

所以如果我们看这里你可以看到现在我的紫外线坐标动画，就像统一所有的数学包括正弦和余弦歌剧在这个旋转器节点内发生了旋转我的 uv 坐标的动作

更多精彩图片 请登录

这就是今天我们的例子的内容，我希望这对你很有趣，并且你学会了如何在一堆不同的例子中使用正弦和余弦节点在黑色和白色之间来回摆动，创建一些 动画波纹值，使我们的对象在波浪中上下的位置动画化，然后使用正弦、正弦和余弦弹跳并最终旋转 uv 坐标我希望你们度过愉快的 一周你下周回来，我们将讨论幂和平方根节点，所以回来吧，同时祝大家有个美好的一周， 非常感谢大家收看下期预告：幂和平方根点击阅读原文：B站观看原视频教程

更多精彩图片 请登录

【SD_材质节点】第三期 分享10+ 总有一款适合你，助你高效高质的工作(附:节点下载)
【|奇技淫巧 第11篇|如何在 zbrush 中创建自定义接缝笔刷/自定义画笔/MD褶皱布料【如何设置使用优化引擎内的贴图资源/图形管线的流程概述【Ben图形/01】
【UE4图形分析-必要的“stat”命令/像素-顶点-内存/GPU Visualizer 讲解/精确找到瓶颈
【如何在Sd/Ds烘焙法线？Ps和Sd修改法线有什么不一样，为什么要在Sd中修改！【PBR理论知识】推荐必看！Allegorithmic的PBR指南-第2部分(完结)【Marvelous Designer】学会MD或许只需一篇文章就好！只讲用到的命令！【SD_材质节点】40+的SD材质节点分享 助你高效高质的工作(附:节点下载)
【SD风格墙】重点！重点！如何制作风格化的块面感？如何制作丰富色彩。
【SP插件】Substance Painter风格化纹理生成器【SP_风格化材质】分分钟学会制作风格化智能材质(附 : 材质球和源文件)【SD绣花花边】 使用Substance Designer制作绣花花边布料纹理？

更多精彩图片 请登录

本期分享就到这里！更多精彩+++关注联系我们   
下期见，学习不止，不止学习

更多精彩图片 请登录

公众号管理

更多精彩图片 请登录

公众号

更多精彩图片 请登录

B站每一个「在看、点赞」，都是对我们支持与鼓励

来了来了

帮你顶下哈！！

可以的