自Ormsby吉他设计工作室Web应用程序(https://designer.ormsbyguitars.com)发布以来已经两年了,这是世界上最具创新性的跨平台3D定制工具之一。 现在该进行更新了。

自发布以来,所使用的基础框架和工具已经进行了数百万美元的改进,因此,要利用这一主要更新,着重于升级到最新版本以及为核心用户体验带来急需的更新。
用户界面更改和您会注意到的事情
此版本中的新增功能/已更新:
- 使用DRACO压缩(https://google.github.io/draco/)可以大大减少模型大小,从而加快加载速度。 它仍然是一个庞大的应用程序,需要大量的数据,CPU和内存,因此仍会使您花哨的电话/计算机难以工作。
- 单击/点击吉他声部以打开相关类别的选项(脖子,身体,硬件)
- 减少了UI混乱,如果不使用UI,UI应该会摆脱困境。
- 针对移动设备和小屏幕的选项UI进行了大幅改进。 我们支持的最小屏幕尺寸是iPhone 5 SE。
- 添加了新的UI动画:选项列表,鼠标悬停以缩小“预设”中的预览。
- 性能提升
技术更新
该应用程序是当时最先进的技术的早期采用者,例如glTF(网络上3d资产的新行业标准),Angular javascript框架,Ionic框架,TypeScript和ThreeJS的全新版本。
glTF 2.0和DRACO
glTF 1.0是在创建该应用程序的第一个版本时进行开发的,我们以.obj格式的3d资源和更高版本的glTF 1.0混合启动。 从那时起,glTF 2.0被发布,并支持DRACO网格压缩。 这使我们可以减小3D模型文件的大小,从而加快加载速度。 为了提高解码性能,在可能的情况下,解码器为WebAssembly。
Facebook 3D帖子
同样在随后的几年中,Facebook添加了对具有3D内容的帖子的实验支持,因此我们一直在尝试添加glTF导出-这还使我们能够将吉他设计加载到其他3d包中,例如用于光线追踪或其他工作流程的Blender。 不幸的是,此应用程序中使用的模型在支持DRACO网格压缩之前,平均而言对于Facebook而言仍然过于复杂/庞大。
离子4和角度
Ionic是用于标准界面元素(如按钮等)的UI框架。该应用程序最初使用Angular 2.0和Ionic 2.0的早期alpha版本开发,并在Ionic 2.0发行的同时发布。
从那时起,使用Stencil js编译器完全重写了Ionic,以实现更快的跨框架工作,并且Angular当前处于V7。 此更新使我们了解了这些工具的所有最新版本。
经验教训和未来更新
应用启动后,有足够的人有时间使用它,出现了一些共同的主题:
- 没有人使用内置的共享功能(共享完整3D设计的链接)。 大多数人只是分享图片(Instagram等)。 这可能是缺乏可发现性,或者过于复杂。
- 人们希望有更多的吉他变体可供选择(6、7、8弦,贝司,其他型号,硬件变体)。 随着形状的变化,在3D中很难做到这些,因此我们需要为每个变化对应的3D模型。 此外,加载新的吉他模型目前是一个复杂的过程。
- 基于开始配置使事情变得更加困难。 硬编码和使用固定的UI布局(在移动设备上不起作用)更容易,这是人们通常要做的。 在后台,该应用程序被构建为由配置数据库驱动的通用3D产品配置工具,这使定制UI变得相当困难。
此更新的工作花费了几周的时间,并且大部分在新年假期期间作为一个“有趣”项目完成,并且在该应用程序经历了一段平静的时期之后,基本上使该软件恢复了正常运行。 以下是我们希望在将来准时和省力的情况下进行的一些工作:
- 使加载新模型容易得多。 当前,此过程非常复杂,每个模型(例如吉他的类型)要花费一天的时间。 它涉及在Rhino 3D中获取原始3d模型,然后在apps数据库中对其进行转换,压缩,分组和分类,然后为该类型的吉他配置所有产品属性(默认材料等)。 这需要完整的UI,以简化此过程。
- 使发布新的标准材料变得更加容易。
- 轻松分享到Instagram。 这些设计显然很不错,因此我们需要集中精力简化该过程。
- 设计画廊—发布您的设计,我们会将它们包含在带有功能设计的画廊中,以供人们签出。 也许它将风靡一时,您可以推广Soundcloud。
- 性能更新和真实感改进:这些通常是互斥的,因此可以保持平衡。