从2D到3D,WEBGL实战(1)— 缘起

1,063 阅读6分钟

一、一个 “小需求”

年前搬砖的时候接到这么一个“小需求”,要支持买家可视化定制包装参数:

image.png

拿到需求的时候,我是拒绝的,这超纲了啊!不过最终还是被晓之以理动之以情了:

ICBU 这些年来一直深耕于国际贸易,但是有个核心痛点一直没有得到很好地解决:定制服务效率低。不同于天猫、淘宝这些 C 类业务,B2B 业务会需要大量的定制服务,而目前这些定制服务并没有很好地进行线上化,而又由于国际贸易中的时差、语言等问题,定制体验不够友好:

1. 价格不透明

如下所示包装袋,价格会有十多倍的波动,而且商家也无法注明什么样的袋子会贵多少;基本都要买家询盘(类似发邮件)沟通价格

image.png


2. 沟通效率低

是不是买家发了询盘就能马上知道价格呢?事实上还差得远:


1)由于时差等因素,卖家回复买家询盘一般要半天之后了;又由于语言、地区等因素,卖家可能无法承接买家诉求,无法回复买家,因此买家询盘的回复率事实上远不到100%;


2)买家即使幸运地获得了卖家回复,拿到报价的时间实际上也可能远不止半天

还以包装袋为例,不同的袋形、尺寸、承重还有印刷内容都会极大地影响定制价格;要在什么地方印什么东西,用文字表述费时费力而且非常不精确,这会导致买卖家返回多轮沟通,而单次沟通可能都要等半天才能得到回复,这个效率....


二、定制可视化

淘宝成功把 C 类贸易线上化,带动了整个中国零售业的变革;我们 ICBU 有没有可能也把定制业务线上化,从而带动 B2B 业务的革新呢?经过近半年的调研沟通,我们坚定地认为:定制线上化可行,而且会极大地促进整个行业的数字化升级。我们一期选定了定制需求、交易金额都非常大的包装印刷行业,并联合长三角印包产业带提出了 “海外产品定制,报价时间提升到最快3分钟” 的口号,赋能中国包装行业的数字化出海。我们希望通过定制的线上化、可视化实现:


1. 沉淀常用的行业定制诉求和指导价

一旦常见的定制需求支持线上表达,我们就可以通过买卖家的定制数据沉淀出各行业的常见定制诉求与响应价格。这能直接促进部分定制服务的线上交易,极大地提升买卖家的决策效率。


2. 大幅提升定制沟通效率

我们做开发的都有经验,只靠需求稿是很难直接进行开发的,对着交互稿或者视觉稿我们的代码才能全速前行。定制需求的可视化,就是要把买家需求从简单的需求稿转换为高保真的交互稿甚至是视觉稿,让买卖家能直观清晰地理解各自诉求。


3. 走向新制造

ICBU 上有一批非常专业的买家,他们非常清楚自己需要什么,在 Alibaba 上只是想找到靠谱的合作工厂把自己的设计生产出来。我们会助力这部分买家,支持把他们的设计稿直接转换为工厂生产用的模型图,推动部分工厂走向真正的新制造。

1111111.gif


三、让人兴奋的技术挑战

一期包装定制项目开发过程中,连续遇到各种技术挑战,头疼的同时也会为一个个技术的突破收获由衷的喜悦。一方面感叹于那帮牛逼的前辈们脑子怎么长的,居然能想到这么解决问题!另一方面自己也会在技术钻研中找到我们技术人的最纯粹的快乐!


1. 三维空间如何对齐?

这个大家不难想到,我给两个物体各定义一个朝向的箭头(可以用向量表示),对齐其实就是让两个物体的朝向指向相同的方向。数学上其实就是把其中一个箭头(向量)旋转到跟另一个箭头(向量)平行。道理大家都懂,可代码要怎么写呢?这里就要膜拜一下大神汉密尔顿了,他发明了一种叫做 四元数 的运算法则,让空间旋转简单到爆炸~

image.png


2. 如何在曲面上蒙一层贴图?

如果发明四元数来简化旋转离我们太遥远了(毕竟是青史留名的大数学家),在曲面上贴图就是我们凡人可以企及的了。一般用一整张图把模型包起来比较简单,要把图贴在一个大件的某个部分就会非常难定位。这个问题的解决思路非常巧妙,既然贴到某个部分困难,我就直接把这部分切下来复制成一个全新的小模型,然后用贴图把这个小模型包起来。这样复制的模型压在原来的模型上,看起来就跟在原来的大模型上贴图一样了。

image.png


3. 如何选中之前的贴图?

我们定制过程中,贴到模型上的图要能够单独编辑和移动。如何才能在鼠标点击的时候,知道要选中哪个贴图呢?

直观的想法是类似游戏中的子弹射击,从鼠标位置发射一个子弹,打到哪个贴图就选中哪个。可是贴图不规则,又有不同贴图互相叠加时,这种方法很不准确。

image.png

然后又有前辈大神想出一招叫做:帧缓存拾取,就是在后台把不同的物体用不同的纯色渲染出来,然后只需要判断鼠标选中的位置是什么颜色,就知道选中的是啥物体了~骚的不行~

image.png

4. 如何做立体、平面图的展开折叠?

我们常用的包装盒、包装袋其实都是先平面切割好,然后折叠或者缝制出来的。包装盒生产的时候用的其实是展开后的平面图片,专业上叫“刀版图”,机器按刀版图上的线切割纸板后,按痕迹折叠即可得到立体的盒子。要走向真正的新制造,我们就需要做到平面、立体图的互转,这个目前我们直接借用了达摩院的技术实现了几种基础纸盒的平面、立体图转换。有没有办法实现更加通用的转换方案我们也还在探索之中,欢迎懂行的大神指教!

111222.gif

(示例图为 包装魔术师 的展开、折叠效果)