搜索 Unity

Unity ArtEngine:借助超逼真图像营销产品

2021年7月27日 类别 Industry | 15 分 阅读
Image of an office rendered in Unity
Image of an office rendered in Unity
分享

Is this article helpful for you?

Thank you for your feedback!

一家办公家具制造商怎样才能使用3D可视化技术改善顾客的购买体验?为了发扬其家具产品的定制传统,制造商Flokk决定翻新自家的购物网站。翻新的一个重点在于将所有椅子产品的材质数字化,再投射到3D模型上。这部分数字化流程由公司的数字化合作伙伴Forte Digital辅助完成,而实物扫描流程则用到了Unity ArtEngine。 

 

Unity ArtEngine赋能Flokk实现逼真的产品可视化

Flokk是办公家具设计与制造的领军企业。其产品销往全球80多个国家,坐拥HÅG、Offecct、Giroflex、RH、Profim、9to5 Seating、BMA、RBM和Malmstolen等多个品牌。公司的2000名员工每天都为实现“Inspire great work(激发高质量办公)”这个共同愿景而努力。

此内容由第三方提供商托管,该第三方提供商不允许在未接受“Targeting Cookies”的情况下观看视频。如果想观看来自这些提供商的视频,请将“Targeting Cookies”的 Cookie 首选项设置为“是”。

独具匠心的设计是Flokk产品的核心。得益于高效的供应链和制造工艺,公司的每款产品都支持客户定制。不过,家具设计并非总能在线上购买体验中成为决定性因素。在2019年,Flokk决心改变这种状况,与长期合作的Forte Digital一起,着手投入和搭建一个全新的电子商务平台。新项目的一项关键工作便是使用Unity ArtEngine扫描实物产品的材质,再将其导入至内部开发的3D产品配置器,让顾客能够在网页浏览器中方便地设计自己的3D座椅。

Image of a blue room with a wooden desk and blue chairs.

本次项目的成果包括:

  • 首次实现了在线自助结账,增加了网站访问量
  • Flokk现在可以在3D配置器中直接截取高清产品照片,减少了对实物产品摄影的需求,提高了内部工作效率。
  • 提高了网上订购体验的可靠性,减少了错误订购和退货,提高了经销商和顾客的满意度。
  • 使得Flokk的品牌形象更接近市场定位;Flokk设计的价值现在不仅能呈现在产品上,还会体现到整个顾客体验中。
  • 在最有可能忽视实时3D技术的传统行业中取得长久的竞争优势

初识实时3D技术的潜力

由于Flokk的椅子皆为定制产品,每张座椅都能有数百万种配置,这也使得公司的供应链和订购过程变得非常复杂。举例来说,在订购一张特定型号的SKU办公椅时,顾客有几十种面料可以选择,还能指定座椅的尺寸、液压杆、底座和滑轮配置,也能添加额外的配件,比如颈枕和扶手。整个订购体验和购买汽车非常类似。

Image of office chair hardware and parts.

Flokk信奉设计至上。公司以生产可满足顾客审美、高质量及耐用性需求的产品为傲(毕竟,一把价值700-2000美元的办公椅必须对得起这个价格)。顾客们还希望Flokk高质量和高价值的设计能够体现双方互动的方方面面,包括网上订购体验。

Image of a rose colored office with green office chairs.

然而在2019年之前,Flokk缺少流畅的网站体验。而在表面的页面以外,静态的内容也很难长时间吸引顾客的注意力。并且,公司最近的并购又加剧了产品一致性和风格控制的问题。旧版网站的基础结构可扩展性较低,无法支持规格复杂的新品牌和产品,导致顾客的购买体验不太理想。Flokk还没有在线自助服务渠道。

Flokk的电子商务经理Martina Winsell解释说:“我们发现许多经销商和顾客都希望能在网上浏览我们的产品,并在线根据需求进行定制。由于我们的产品规格较为复杂,在构思未来的网站设计时,我们着重关注了网站定制的可行性。”

不夸张地说,这次电子商务网站的翻新来得“太晚了”。翻新项目有着宏大且明确的目标:设计一个通用的基础平台,在其上增添自助服务渠道,可用于制作多样化销售工具,可随公司产品目录一起扩展,并且能最大化顾客体验。

为实物3D可视化打下基础

在做出投资决定后,Flokk开始寻找一个值得信赖的合作伙伴。 

Forte Digital是一家主营技术、设计和商业策略交叉领域的咨询公司,其为客户提供数字产品和服务,并与多家公司建立了长期合作关系。这些合作伙伴横跨多个行业,如Farmasiet(挪威最大的网上药店)、Nationaltheatret(世界知名剧院)、Gyldendal Akademisk(大型学术出版商)以及NorgesGruppen(挪威最大零售商)。

Forte Digital为自己的客户构筑了具有长期价值的解决方案,其核心竞争力在于公司跨多个学科的专业知识。这种优势是公司成为项目候选之一的原因,也使得Flokk最终选择了他们。

该项目围绕着构建一款常见的产品可视化平台(俗称“配置器”)展开,它应能准确地呈现Flokk的产品及不同配置,可部署至消费者网站、新Flokk Hub经销商平台及其他销售和营销工具等各种网页平台。

Green circle chart showing how to design the new website.

在Flokk的可扩展性和高效率需求下,将配置器放到3D空间中是一种正确的选择,不然,要为每把椅子拍摄各个角度、各种配置的照片将耗费大量的时间和成本。 

在确定基础平台的要求后,下一步便是考虑怎样让Flokk在虚拟空间中呈现产品,怎样数字化这些海量的椅子材质。

使用ArtEngine数字化现实材质

图像清晰度和精确度在表现材质时尤为重要,这就要求Forte Digital使用扫描技术来制作Flokk数百种椅子材质的数字孪生。当然,材质也能使用软件程序化地生成(即以零碎材质为基础),或从公共材质库购买扫描好的材质。但只有扫描真正的Flokk材质才能保证成果真实可信。

具体来说,项目组决定使用一种叫做光度立体法的扫描方法,这种技术可以借助几张不同光线条件下的物体照片来捕捉表面特性。光度立体法不仅可以提取反照率(即物体颜色,类似典型平面扫描仪的功能),还可以提取法线(即表面的起伏),有时还可以提取镜面和粗糙度数据,这些关键数据是生成真实物理渲染(PBR)材质所必须的。

Gif of how unity lighting works

由于工作量较大,团队需要尽可能地自动化流程并保证结果的准确性。Forte Digital的3D艺术家Piotr Bieryt决定搭建一个定制的自动化扫描装置,辅以ArtEngine来处理扫描数据。

prototype rig using laser-cut plywood and 3D-printed elements

Bieryt使用激光切割出的胶合板和3D打印出的元件组装了这个装置,再用黑色天鹅绒盖住原型装置的内侧,防止出现颜色失真和光线反射,然后在底部安装了一块可拆卸的黑色透光板,让光从底部射入来照射出材质的透明度。最后,将这个装置配置为使用Arduino进行操控。

“我喜欢动手做东西、捣鼓自动化,所以整个过程非常有趣!” Bieryt解释说。

他使用无反光镜的奥林巴斯16MP相机和60mm微距镜头(微四三系统)来捕捉Flokk材质纤维的细节,并将照片保存为RAW格式以保留准确的白平衡和颜色。在校正照片的色彩后,Bieryt接着开始使用ArtEngine。

Bieryt常用的ArtEngine工作流大致如下。

在下方例子中,拍摄的样品是一款Flokk椅子上10x10厘米的半透明织物。在创建材质时,材料的透明度通常需要以额外的透明度通道表示,这就可能造成数据不准确。为了解决这个问题,Bieryt对织物进行了两次扫描,一次从侧面照亮材料(标准的光度立体法),另一次是从底部照亮材料(专门记录透明度)。

在导入ArtEngine后,他将两组图像分别接入Multi-Angle to Texture节点,将16张图像合并成反射率、法线和透明度三张贴图,

 

Image demonstrating the art engine texture node with albedo, normal, and transparent textures.

然后使用Gradient Removal(类似于Photoshop中的High Pass滤镜)去除反射率和法线贴图上较为明显的渐变色,使其更适合于铺展。

Image showing a before and after of adding a texture gradient to speakers in ArtEngine
Image showing the process of merging textures in ArtEngine.

Bieryt接着使用Compose Material功能将三张贴图合并成一个材质,使用Pattern Unwarp来平整自然的织物形变。Bieryt指出:“在扫描前花时间平整样本很有必要,因为这样能减少后期处理的时间,但就算你不能把所有的小突起给按下去,ArtEngine的工具也可以随后进行修正。”

Image showing texture before pattern warp and after pattern warp in ArtEngine

他随后使用Crop 节点将平整后的纹理划到一个1:1的框中。下方为节点图。

Image describing how the ArtEngine mutation structure works.

接下来是使用Mutation Structure节点来进一步改善材质的平铺,该节点能借助AI来识别和消除重复的图案,并保留底层图案。

Bieryt指出:“ArtEngine的Mutation Structure非常神奇,它直接改变了整个工作,我们能够更专注于扫描数据的艺术性,不必再与软件或算法较劲。”

Image showing how ArtEngine's mutation structure changes the 3D model's appearance.
Image showing how to adjust output dimensions in ArtEngine.

他随后继续调整了材质比例和输出维度等参数,并最终得到了一份高度精细的8K纹理,其面积比10x10厘米的原样本大6倍,并且没有明显的平铺瑕疵。

Image showing the world scale, pattern map, and mutation structure settings in ArtEngine.

最后,Bieryt使用Height GenerationRoughness / Gloss Generation来创建高度和粗糙度贴图,再用Compose Material将所有内容导出。

Image of the compose material process inside of ArtEngine.

下方为最终的节点图表。

Final node graph of all the textures used by Bieryt and team in ArtEngine.

同样式不同色的材料只需扫描一次,那些结构相同的织物可通过修改材质颜色来呈现不同的色彩,材质在应用到3D模型上后由Blender Cycles渲染出最终效果图。

Image showing a green office chair, blue office chair, and grey office chair

总装

自翻新项目启动以来,Flokk已经看到了切实的效果:随着线上结算逐步在各国普及,公司的网站访问量有了显著增加,其经销商和顾客的满意度和好感也有了提升,直接提高了品牌的忠诚度和声誉,线下订单所产生的间接成本也急剧下跌。

所有改进都直观地呈现在了公司的消费者网站Flokk.com。用户在选中了感兴趣的椅子型号后,可以继续定制产品的方方面面,以自由视角近距离地查看所选配置,在线上下单前就了解定制所产生的相关费用。

Image showing the new layout of the Flokk website
Image showing the updated chair textures created with ArtEngine

这次重建项目仍在进行中,Flokk计划继续将自助服务功能拓展到其他国家的本土销售网站上,并部署新的工具供销售团队和客户使用。例如,公司当前的计划之一是在配置器的基础上做出“展厅模式”,以iPads应用的形式部署到全球各地的产品展厅中,方便顾客在店内了解和订购Flokk产品。

从广义上说,本次重建项目向整个公司展示了专注顾客体验、适应顾客偏好的重要性,因为当今的消费者越来越喜爱通过网络或应用购买商品。可以肯定的是,Flokk已经在竞争中夺得了一个非常好的优势地位,在家具制造这样的传统行业里,端到端用户体验并不常是企业首先考虑的问题。而Flokk在自己的投资决策中率先考虑到了顾客的购物体验,也因此博取了一个长期性的竞争优势,为未来更多的成功打好了基础。

Simulation of Flokk chairs in a glass walled room looking out to mountains
2021年7月27日 类别 Industry | 15 分 阅读

Is this article helpful for you?

Thank you for your feedback!