在 Shopify 上使用 AR 将虚拟变为现实

增强现实是我们看到越来越多的东西，但它到底是什么以及它是如何完成的？ 得益于视频游戏和电影，例如 Ready Player One，每个人都熟悉虚拟现实。 在虚拟现实中，您戴上 VR 耳机并体验完全合成的现实，将您从物理世界中移除，让您沉浸在一个完全不同的世界中。 与此同时，增强现实模糊了虚拟与现实之间的界限。 它允许用户体验人工内容作为其物理环境的一部分，并将席卷电子商务，因为 Shopify 正在采用该技术为其店主启用 AR。

最近，Shopify 整合了 Apple 的 ARKit 的使用，为其用户提供 AR 内容，我们 Eastside Co 一直在尝试使用它。 最近，我们与 Lazy Oaf 合作，为他们与传奇的 Doc Martens 合作开发的新鞋系列提供增强现实版本。 通过 3D 建模将 Lazy Oaf 设计的独特美学带入增强现实是一个有趣的挑战，而且我相信，它为在线购物增加了一定程度的交互性，这与以前只能在零售店中获得的交互性接近。

那么，为 AR 制作虚拟产品需要什么？在此过程中会出现哪些问题？

开始设置

Lazy Oaf 非常友好地在发布前向我们发送了实际产品，因此我能够很好地了解产品是什么样的。 这可能是非常有益的，因为有时照片无法捕捉产品中使用的材料的类型或感觉，这对于使产品看起来更正确很重要。 我们的摄影师和摄像师 Dave 在我开始 3D 建模过程之前，从正面、背面、两侧、顶部和底部以及从各个角度拍摄了每双 Doc Marten 鞋子，以帮助捕捉表面的一些细节。

一旦我裁剪和缩放照片以使其彼此准确，我就会在 3DS Max 2018 中将它们作为蓝图进行布局。

基本建模

从这里开始，建模从简单的形状开始。 鞋子最初是一个单一的平面，被挤压和操纵以适应鞋底的形状。

基本形状完成后，我切割构成鞋底胎面的边缘并挤压它们，然后是鞋底的其余部分，应用一些修饰符以获得整个鞋底的圆形底部。 经过一些进一步的基本建模后，鞋底已准备好进入 ZBrush 进行高分辨率工作。

高分辨率 3D 建模

采用低分辨率模型并增加多边形数量会使模型变得平滑。 这个过程完成了几个层次，使表面更加光滑，这使我能够沿鞋底边缘添加针迹，并手动将针孔雕刻到表面上，使其看起来好像是正确的针迹。

将鞋底磨平并打磨后，我从鞋的上部开始，创建一个遵循鞋本身轮廓的基本形状。

使用这个粗略的版本作为基础，我能够提取构成鞋子细节的所有部件的形状。 所有构成该形状的重叠材料都是从该形状中拉出并相应排列的。 脚趾前部的系带区域被雕刻了。

从这个阶段开始，就是在脚趾上添加诸如带扣和鞋带之类的配件，当然还有更多的小细节，例如面板的缝线。

困难的部分

有了一些颜色，模型肯定完成了，对吧？ 不幸的是没有。 Doc Marten 鞋的 3D 模型作为一个整体由不到 1000 万个多边形组成。 尽管我们现在口袋里的智能手机是非常强大的计算设备，但它们很难同时渲染这么多多边形。 就像电影剪辑师一样，你必须挑选你想要呈现的内容的重要部分。 你会注意到鞋子的内部还没有完成。 可以这么说，这是第一件击中剪辑室地板的作品。 鞋的内部对整体美感没有重要意义，因此不建模它降低了模型的复杂性（同时节省了我一些时间）。 但我们仍然剩下近 1000 万个多边形。

因为增强现实实时渲染模型，我们必须降低复杂性。 这涉及将多边形计数减少到可管理的水平，这是一个非常乏味的过程。 幸运的是，大部分部件都是以低多边形版本开始的，我能够返回这些部件并将它们重新用于这项任务。 在下面的屏幕截图中，您可以看到虽然形状代表了鞋子本身，但它缺乏更精细的细节，例如针脚、略微斜切的边缘和所有这些多边形所提供的总体平滑度。 但是，您还可以看到多边形数量已从近 1000 万个减少到刚刚超过 6000 个，如果需要，实际上可以进一步减少一点，但是 6000 个多边形完全在预算之内，并且具有支持形状的几何图形会很方便为下一阶段。

恢复细节

所以现在我们有两个版本的鞋子：一个非常高分辨率的版本，一个可以在移动硬件上快速流畅地渲染的低分辨率版本。 但现在我们错过了我认为让鞋子独一无二的细节。

为了将高分辨率细节转移到低分辨率版本，我们需要将它们“烘焙”成各种纹理贴图，为增强现实中的虚拟光提供信息。 为此，我们首先需要打开模型并将其展平，创建一个 UV 贴图。 什么是 UV 贴图？ 如果它像折纸模型一样展开，它就是我们模型的 2D 表示； 它允许稍后将纹理投影到其表面上。

为了使细节看起来清晰干净，我决定将模型分成两部分。 鞋底、带扣和带子在一个部分中，然后将鞋面部分变成另一部分。 这使我能够使用 2 个小纹理贴图而不是单个大纹理贴图，这会导致文件更小，因此加载速度更快。

您可以在下面看到 UV 贴图 - 两个部分的扁平化版本。

完成后，我们可以烘焙贴图并处理纹理，添加材质信息，使产品看起来像产品。

上面屏幕截图中的紫色可能看起来很奇怪，但这是我们将细节带回模型的主要方式。 高分辨率模型的表面被投影到较低分辨率的模型上，并根据表面指向的方向记录为红色、绿色或蓝色的值。 当应用于模型并且光源照射它时，光照射到的像素的颜色决定了光反射的方向，从而创建了一个没有多边形成本的人工 3D 表面。 这在缝线中最为明显。

一旦创建了这些贴图，现在只需将材质和纹理应用到表面即可。

身体素质

现代实时渲染器使用称为 PBR 或基于物理的渲染的系统。 这意味着照明和渲染引擎会尝试根据表面的材质准确地映射光线在撞击模型表面时的行为方式。 现代纹理软件使创建逼真的材料变得非常容易。 Substance Painter 有助于以数字方式重新创建这些现实生活物品的表面。 我们主要使用 5 种不同的纹理贴图将各种属性应用于模型：

• 颜色贴图这听起来像，它是材料的基色。
• Metalness这是一张黑白图，用于确定模型的哪个部分是金属或非金属。
• 粗糙度正如听起来一样，它定义了模型表面的粗糙或光滑程度。
• 环境光遮蔽（ Ambient occlusion ） 一种灰度贴图，它模仿两个表面在角落相遇的那些微小的接触阴影，它为照明增加了额外的深度。
• 法线贴图这是前面显示的紫色贴图，它负责显示表面的细节 - 如下所示，当关闭鞋底和鞋帮上的法线贴图时，几乎没有任何细节。

一旦纹理过程完成，我们就会得到一些看起来相当有说服力的东西。 最后一步是导出模型和纹理并将它们转换为 AR 友好格式。 在这种情况下，它是 USDZ，因为这是 Apple ARKit 使用的格式。

如果你还在我身边，那就太好了！ AR 的结果远比制作过程更令人着迷，但我希望这一幕后的小小一瞥能说明手动重新创建真实产品的虚拟表示的过程有多少。 3D 扫描和摄影测量等新技术将使该过程在未来变得更容易，但现在除非您在技术上投入大量资金，否则质量并不完全存在。

我们仍处于增强现实技术的早期阶段——随着它的不断发展以及手机变得更加强大和强大，我们将开始在日常生活中越来越多地看到这项技术。 虽然 Ready Player One 和其他科幻电影普及了虚拟现实，但我相信 VR 将继续留在娱乐和教育领域，而 AR 将变得像互联网一样普遍——尤其是当我们都获得了控制论的眼睛升级时。 也许这有点远，但在此之前，至少我可以在桌子上放几双鞋而不会被告知。

访问 Lazy Oaf 并在您自己的运行 iOS 和 Safari 12 的 iPhone 或 iPad 上查看 Dr Marten 鞋子。