我如何为太空主题的Three.js作品集网站自制位移贴图

在制作我的作品集网站https://jhyahav.vercel.app时，我在处理置换贴图https://en.wikipedia.org/wiki/Displacement_mapping时遇到了一个有趣的问题。

对于不太熟悉的人来说，这里有一个简单的解释： 在处理图形时，尤其是在使用 Three.js 网格时，你可以使用各种类型的贴图来改变网格的属性，其中最简单的一种是颜色贴图。这些像素会被映射到网格上。对于像我用到的球体几何形状来说，你可以把它想象成用来装饰球体几何形状的包装纸。

简而言之，位移图是一个灰度图像，其中每个像素的亮度决定了顶点移动多少。还有很多其他类型的贴图可以使用，与 Three.js 网格进行各种处理。想了解更多的话，Three 的 MeshStandardMaterial 文档 是很好的参考起点。

经过一番考虑后，我决定真的想用位移贴图技术来增强随机生成的小行星和我制作的一颗行星的真实感。然而，与相对容易找到的好色彩贴图不同，我很难找到符合我需求的位移贴图资源，更不用说免费且符合需求的位移贴图了。幸运的是，经过一些创新和尝试，我找到了制作自己的位移贴图的方法。

首先，我将在介绍详情时，先提出两个重要的说明，

1. _这种方法可能不适合你的具体情况。_ 我创建这些位移贴图是为了一个特定的目的，那就是让它们看起来随机一些，同时保持岩石表面的自然美感。不过，你的实际效果可能会有所不同。

2. 这种方法可能并不是最优雅的方法。 对于那些在3D建模和动画方面比我更擅长的人来说，或者愿意花些钱的人来说，有更好的选择。你可以用Photoshop从零开始制作位移贴图。你也可以用像Blender这样的工具直接制作完整的3D模型，而不必依赖位移贴图。此外，在我找现成的位移贴图时，确实发现了一些网站以高价出售它们，不过我无法验证它们的质量和性价比如何。

这样就解决了，这是我如何快速免费地并且不用任何工具制作自己的岩石位移贴图。

1. 我使用Google Lens找到了与我找到的付费位移贴图的水印预览相似的一些免费图像。说实话，那时我并不清楚自己在寻找什么。从一张付费贴图的预览开始似乎是一个不错的起点，我觉得这样的探索是有意义的。现在回想起来，这其实并不太重要；最重要的是要有一张灰度图像，并且图像中要有足够的亮度变化来保持多样性。如果你在阅读这篇文章以跟随我的过程并自己制作位移贴图，你可以跳过这一步，可以直接使用任何免费的灰度图像，或者参考我下面提供的几张。

2. 我挑选了几张看起来不错的图片。 根据这些图片做了新的Lens搜索。最后，我将选择范围缩小到两张图片，一张是 火星峡谷的公开领域图片，另一张是 NASA拍摄的火星盐沉积物的照片。

3. 我将图片裁剪成正方形并调整到合适的分辨率，即512x512像素。 一般来说，你的地图应该是正方形，宽度/高度是2的幂次方。对于大多数应用来说，512x512应该足够用了，你甚至可以降低到256x256以提升性能，而不会牺牲太多细节。

4. 我把图片的四分之一镜像到其他部分。 实际上我只对最终选择的位移贴图做了一部分这样的处理。我最初这么做是为了防止网格表面出现任何接缝，理论上，图片左侧的颜色需要与右侧完美匹配，这样几何边缘的连接处就不会显得奇怪。实际上，我尝试跳过这一步，第二个贴图的结果看起来完全没问题。

5. 我在每张图片的顶部和底部添加了均匀的水平线。 这里的理由与上一步类似，但这次确实很重要。如果你不确保图片顶部和底部边缘像素亮度完全一致，那么在球体的两极就可能出现不美观的效果，如 这个StackOverflow问题 所示的例子。

这是到目前为止地图的样子：

6. 我模糊了图像以平滑图像中的失真。 虽然我对第5步之后取得的进展感到满意，然而 我仍然觉得结果不是我想要的。我的星球表面和小行星上的隆起确实很明显，但对我来说太尖锐和不平滑了。（如果你想要尖锐的失真，可以跳过这一步。）我尝试了不同级别的模糊，直到达到了我感觉最合适的程度。之后，因为模糊过程会吸收这些线条，所以我必须重新添加在第5步中添加的线条。

最终的扭曲图像

我很惊讶它们竟然完美地满足了我的需求，如果你的项目需要，也可以用它们。

本文最初发布于2022年8月28日在我的社交博客网站COACSS上。

谢谢你的参与！加入__In Plain English_社区啦！快走之前：

• 记得为作者 鼓掌 并 关注 她👏
• 关注我们：X|领英（LinkedIn）|YouTube|Discord|通讯
• 访问我们的其他平台：Stackademic|CoFeed|Venture|Cubed（Stackademic、CoFeed、Venture 和 Cubed 是我们的其他平台）
• 更多内容，请访问 PlainEnglish.io