基于参数化模型的3D产品配置器开发

Posted 2023-03-02 新缸中之脑

当我被要求为客户创建3D产品配置器时，我想到的第一个平台是 SketchFab。 我是在澳大利亚墨尔本的 SAE 创意媒体学院学习计算机动画时接触到它的。

推荐：使用 NSDT场景设计器 快速搭建 3D场景。

1、基于Sketchfab开发3D产品配置器

SketchFab 是在线共享和销售 3D 模型的最佳平台之一。 它具有逼真的渲染、场景设置、动画和声音，使模型看起来令人惊叹并真正使它们栩栩如生。 此外，还可以通过检查模型的网格、纹理映射、法线和其他变化，在技术层面检查模型。

那时，我已经使用该平台很长时间来创建建筑模型、家具和其他各种项目的静态演示。 但是，我从未使用它来创建产品配置器。

这是我发现使用 SketchFab 的 API 时，可以通过更改材料、隐藏或显示模型的一部分，甚至通过移动和旋转几何体来创建配置器。 材料（或纹理）可以像正在播放的视频文件一样复杂，甚至可以是用户可以输入的自定义文本。

其他功能遵循模型中的层次结构。 换句话说，如果一个形状是其他形状的“父”，它的“子”也会受到影响。 例如，“子”形状根据其“父”形状移动或隐藏。 这样，如果规划了 3d 模型的结构，那么在将文件上传到 SketchFab 时就已经有了一定程度的逻辑。

在 Cinema4D 中创建的父子几何关系示例，可用于基于 SketchFab 的配置器。

最后，你可以创建相机运动、更改照明、场景设置、滤镜、注释、动画，甚至可以创建可点击和可悬停的元素，以便在场景中进行更直观的交互。

我的第一次尝试是创建一个床头柜，其中包含飞檐样式、底座样式、抽屉样式和材料选项等选项。 只要床头柜的尺寸保持不变，我就可以简单地隐藏和显示几何图形（使用父/子技术）以根据所选选项可视化最终结果。 这是最终结果。

2、使用 SketchFab 时的注意事项

达到这种复杂程度，我很高兴使用 SketchFab。 尽管如此，我开始怀疑产品逻辑的复杂性可以达到什么程度：

• 如果我想改变抽屉的数量怎么办？
• 如果我想让床头柜更高或更宽怎么办？
• …

使用 SketchFab 并没有真正的“标准”方法来执行此操作，尽管可以使用不同的技巧对其进行模拟。 例如，如果产品只有几个预定义的尺寸，则所有这些尺寸都可以存在于同一场景中并隐藏起来，以便仅显示用户选择的尺寸。

如果只有几个选项要显示，这是有效的。 但是一旦选项数量增加，数据也会增加。 因此，配置器变得很重，需要很长时间才能加载，具体取决于你的 Internet 速度。 有些手机甚至无法加载它们。 此外，管理模型层次结构和逻辑将成为负担。

另一种模拟尺寸变化的方法是重叠静态形状，通常是盒子，然后将它们彼此远离。 假设我们想要一堵墙，墙的长度在一米到两米之间。

为了实现这一点，需要将两个代表墙的一米长的盒子放置在完全相同的位置。 然后通过 API 移动其中之一，以模拟墙变长。 如果墙的长度和高度需要改变，则需要四个盒子，因为另外两个需要向上移动。

在 Cinema4D 中创建的参数化墙示例，可用于基于 SketchFab 的配置器。

但是，如果这堵墙可以达到八米甚至更长呢？ 然后我们需要添加更多的几何体来模拟这些增量。 最重要的是，通过 API 移动不同部分的逻辑并不理想，尤其是在维护方面。 这意味着任何未来的变化，比如在墙上增加一个深度选项，都需要付出巨大的努力。

此外，使用这种方法，纹理需要有一个无缝的图案，这样当碎片移动时，它们看起来就像一个整体。

我将这种重叠方法发挥到了极致，并创建了一个完整的棚屋配置器。 它允许用户改变整个建筑的长度。 我甚至能够改变每扇门和窗户的尺寸。 这是此配置器的实际操作的快速视频。

不幸的是，正如我之前提到的，我遇到了很多限制。 一方面，不可能将建筑物延伸到任何精确的长度。 另一方面，模型加载速度非常慢，因为每面墙上的每个可用选项都必须同时存在，并根据用户的选择隐藏或显示。

总之，尽管 SketchFab 中的渲染看起来很棒，但我需要一个不同的解决方案，以便 Night Table 和任何其他复杂的配置器具有真正的产品逻辑。

3、 寻找新的解决方案：Grasshopper + ShapeDiver

幸运的是，在我的祖国哥伦比亚的安第斯大学学习建筑学时，我了解了 McNeel 开发的一款名为 Rhinoceros 3D 的软件及其插件之一：Grasshopper。

Grasshopper 是一个可视化编程界面，允许使用精确的逻辑创建任何类型或复杂性的参数模型。 这似乎正是我所需要的…

我之前展示的相同参数墙，现在使用 Grasshopper 创建。

例如，要创建一个简单的墙，如上面使用 Cinema 4D 的示例，可以使用墙的长度、高度和厚度的特定参数创建一个盒子。 另一个盒子也可以控制墙壁的纹理贴图。 这些盒子可以有任何尺寸，更新它们只是移动一些滑块的问题。

现在我只需要弄清楚如何将 Grasshopper 和参数化 3D 的力量带到线上，就像 SketchFab 带来可视化来自离线软件的 3D 模型的力量一样。

事实证明，2015 年，一家名为 ShapeDiver 的公司成立，其愿景是使在线参数化模型成为现实。 借助他们的技术，我能够上传 Grasshopper 模型并在线共享它们。

此外，我意识到他们还提供了一个 API，它提供了与 SketchFab 类似的选项。 可以创建可点击和拖动的元素，简单的动画，并且可以完全控制模型的参数和场景中的对象。

此外，还有一些功能只能通过 ShapeDiver 的 API 获得，例如添加或创建简单的动画，这些功能可以在 SketchFab 版面板中进行控制。 然而在 ShapeDiver，开发人员不断发布功能，为没有 Web 开发知识的设计师提供更多选择。

例如，在最新版本之一中，ShapeDiver 在查看器中包含一个新选项卡，设计人员可以在其中设置场景照明以增强他们的模型。

SketchFab 提供后处理滤镜，有助于增强模型，但是这些滤镜在处理动画或游戏设计时更为相关。

SketchFab 的一大优势是与不同 3D 软件和文件类型的兼容性。 目前，ShapeDiver 仅与 .gh 或 .ghx 文件兼容，这些文件是在 Rhinoceros 3D 和 Grasshopper 中创建的。

做出这种选择的原因是 Grasshopper 是目前最完整、最实惠且易于使用的参数化软件之一，在全球拥有庞大的用户社区。 尽管如此，ShapeDiver 的后端构建有一个灵活的结构，能够根据未来的市场需求处理其他参数化软件。 如果你想了解有关 ShapeDiver 架构的更多信息，请查看 ShapeDiver 的 CTO 撰写的这篇文章。

最后要考虑的一件事是 ShapeDiver 的技术依赖于远程服务器来计算对任何模型所做的更改。 因此，解决方案不会“实时”显示，而是在选项更改后几秒甚至几毫秒内更新模型。

例如，如果货架的长度发生变化，货架不会立即变长或变短，而是等待 ShapeDiver 的服务器发送新的更新几何。 这也是 ShapeDiver 在产品逻辑和性能方面更强大的原因，因为它允许一个模型具有潜在的数十亿种变化，而无需在浏览器中同时加载所有变化。

4、为什么我选择 ShapeDiver

正如我上面所解释的，如果你有大量的产品选项，在 SketchFab 中，所有这些选项都必须同时存在于场景中。 有时需要计算数百个网格，因此使查看器非常慢。

相反，ShapeDiver 只是将请求的几何图形发送给查看器。 每次更改参数时，都会创建一组新的几何图形，从而消除任何不必要的几何图形。 此外，ShapeDiver 有一个智能缓存系统，可以存储（记住）所有以前计算过的选项，因此使用的配置器越多，速度就越快。 这意味着当世界各地的人打开配置器并请求之前已经预先计算的某些更改时，服务器将在几毫秒内将答案发送回用户的浏览器。

除了性能之外，借助 ShapeDiver，你还可以创建“智能”3D 模型。 由于 ShapeDiver 基于实际的 CAD 软件而不是 3D 设计软件，因此模型中充满了可以提取的信息，用于计算、总结甚至生产！

例如，在用户确定结果后，可以自动提取精确数据并将其用于价格计算、运输估算、带有生产细节的图像甚至可用于 3D 打印的文件（.stl 文件）、激光切割 （.dxf 和 .dwg 文件）或 CNC 切割 (.gcode)。

例如，如果你有一个表格配置器，你可以获得一个具有不同视图和尺寸的摘要图像，甚至是一个 .dwg 文件，其中包含嵌套部件以及正确的图层和曲线颜色，可以用于生产。

除了提取数据，ShapeDiver 还允许用户直接在在线配置器中导入数据和文件。 ShapeDiver 支持导入文本文件、图像、.dwg 文件和.obj 文件。

通过文本文件，公司可以导入包含其全部产品信息和定价逻辑的整个数据库。 例如，使用 ShapeDiver 的图像处理工具，图像可以从简单的东西变成带有自定义文本的动态组合。

将 2D 绘图转换为完整的 3D 模型等复杂操作也可以毫无问题地执行。

此外，CAD 软件允许你进行复杂的计算，例如检查对象之间的碰撞、计算对象是否适合空间、检查对象是否在给定空间内、不同类型对象之间的交集等。这意味着 使用 Grasshopper 的强大功能，可以轻松完成各种复杂的数学和几何计算。 如果你了解 C# 或 Python 等编程语言，ShapeDiver 也能够处理它们。

最后，正如我之前提到的，产品逻辑的复杂性没有限制。 你可以为简单的产品构建完整的应用程序，也可以为复杂的建筑或任何其他产品构建完整的应用程序。

这怎么可能？ 管理无限产品逻辑的主要方法之一是使用 JSON 对象，我在过去已经介绍过，ShapeDiver 提供了处理、读取和构造此类对象的工具。

例如，假设你正在为可以有任意数量的门或窗的房屋构建配置器，并且你希望用户能够选择每个门窗的位置、尺寸和设计。 在这种情况下，JSON 数据结构将是同时管理所有这些参数的理想解决方案。

5、应该为产品配置器选择哪个平台？

如果你是从事动画和游戏设计的数字艺术家，SketchFab 无疑是你的解决方案。 如果你的产品参数很少或只有基于材料的参数，并且模型需要尽可能真实，那么 SketchFab 可能也适合你。 例如，3D 广告是 SketchFab 技术的一个很好的用例。

但是，如果你的模型具有需要灵活、可扩展、易于管理和面向未来的产品逻辑，ShapeDiver 是最好的选择。

6、结束语

总之，SketchFab 提供了最好的渲染和场景工具，以最真实和身临其境的方式在线共享 3D 模型。 但是，它并不是真正以创建配置器为最终目标而构建的。 得益于 SketchFab 的 API，可以为模型提供一些参数化功能以及探索它们的交互方式。 不幸的是，这些参数非常严格。 这些限制最终会使任何应用程序的开发复杂化，以防它需要扩展到许多选项或扩展到生产或技术工具中。

另一方面，ShapeDiver 是作为创建产品配置器的平台从头开始构建的。 结果可以直接在 ShapeDiver 应用程序中使用，或嵌入到具有 API 扩展可能性的任何网站中。

ShapeDiver 提供了规划任何产品逻辑、导入和导出数据、进行数学和几何计算等的自由。 使用这些工具，可以创建从简单的营销配置器到复杂的技术配置器的所有内容。 如果你想了解更多关于不同类型的产品配置器的信息，ShapeDiver 的产品负责人撰写了这篇关于它的精彩指南。 此外，如果你想了解我们的一些客户如何使用 ShapeDiver 构建令人惊叹的在线体验，请务必查看我们的成功案例部分。

此外，如果你需要创建模型能够进行几何和数学计算的用户界面，以便用户在使用配置器时获得反馈，唯一的方法是使用 ShapeDiver。

自动化是将 SketchFab 与 ShapeDiver 区分开来的另一大因素，因为 ShapeDiver 具有导入和导出不同类型文件的能力，使得使用外部数据库或导出生产数据成为可能。

---

原文链接：ShapeDriver — BimAnt