DIY一个人工智能珠宝设计师v1.0

今天mixlab以社区的方式，完成第二篇『人工智能珠宝设计师』方向的文章。本文通过『科技珠宝』为切入点，介绍了目前科技赋能珠宝的技术及案例，然后结合传统的珠宝设计制作流程，带大家DIY一个人工智能珠宝设计师，从技术栈、demo代码、产品设计等等内容一一道来。

作者们：

shadow、DANA、Juntao、Fangyex

shadow

机器学习研究员／NodeJS全栈／产品经理／设计&技术顾问／写文章的／……

DANA

CMO／珠宝鉴定师／珠宝设计师／创业者

Juntao

零售及消费品行业咨询顾问／数据分析／创业者／

Fangyex

UX设计师／Creative coder

--以上排名不分先后--

1 科技与珠宝

用户的个人数据获取越来越容易，随着消费者个性化定制需求的觉醒，3D打印、纳米微雕等技术的成熟，融合科技的珠宝有了更多的可能。本节介绍纳米微雕、心率检测技术、声波、3D打印等4个科技应用于珠宝的案例。

1.1 纳米微雕

抖音带火VENTI爱的记忆，获赞百万成表白神器。

这款项链运用纳米微雕技术，将100句不同国家语言的“我爱你”雕刻于产品中，借助光源投射即可看见其中玄机。

1.2 心率检测技术

恒美广告(DDB)香港集团推出的名为“Crafted By My Heart”的戒指定制App，利用健身App最喜欢的心率检测技术和3D打印技术，它能把你扑通扑通的心跳纪录下来，刻成一只实实在在的戒指。

体验流程：

1 选择款式

2 记录心率

3 生成珠宝

4 下单生产

1.3 声波可视化

日本创意公司Encode Ring将三秒的短语转换成声波，再将声波的样子做成“声纹戒指”。将语言变成有形的记忆，让你完美地把声音戴在身上，不怕遗忘，也饶富创意。

来源：https://encodering.com/

再看一个案例，一名旧金山设计师，昵称10DotMatrix。她发明了一种采用3D拟声形式制造饰品的方法。用开源软件抓取某个单词的声波特征，然后进行转化，制作出饰品的数字模型，最后用3D打印机把它打印出来。

还有另外一个案例是KAESL初创公司推出的珠宝产品 “ Avoice for love ”。为爱发声，如其名所意，利用人工智能技术将表达爱的美妙话语或音乐，智能化地融合在珠宝的设计过程中，详见《人工智能珠宝设计师01》

1.4 3D打印

3D打印为珠宝设计带来了技术的语言与革新，可以实现以前很难生产的复杂形态，例如动物表皮的模仿之类的，还有上面提到的很多例子，也都是依靠3D打印实现的。

2 珠宝设计传统制作工序

前面介绍完科技珠宝相关的案例及技术，我们想要实现人工智能珠宝设计师，必须对传统的珠宝设计8道工序有所了解，才能把我们的想法完美的通过技术实现。

2.1 设计

设计师需要客户或自己的创意灵感手绘出设计草图，并以此为蓝本，不断修改，最终呈现以精确尺寸的设计图。

2.2 起版

根据珠宝设计图制作珠宝模板，分为手工雕蜡起版和电脑CAD起版。

手工雕蜡起版，需要有经验的工匠，耗时长。是采用浮雕的技法直接用雕蜡方法制造出首饰原形，主要适用于造型特殊复杂的珠宝，如花草，动物造型等。

电脑CAD软件绘图，现在大部分珠宝都采用的方法。可以大大提高设计效率和精度，CAD绘制后还可以直接用3D打印，打印出蜡模或胶膜。

2.3 倒模

倒模即是获得珠宝的基本雏形，需要先种“蜡树”，将上一步起版的多个蜡模种在“蜡树”上，以便一次性铸造出来。通过灌石膏、烘焙石膏、浇铸金熔液，石膏模炸洗及清洗等一系列工序，最后获得“蜡树”上各个金铸件，剪下后就得到一个个金版。

2.4 执模

对金版（珠宝毛坯）进行精心修理的工序，需要对珠宝金版铸件进行整形、修挫、焊接、打磨等，针对首饰的不同部位，利用不同工具对其进行修整。

2.5 镶嵌

镶嵌流程主要包括宝石的选择（配石）、车石（打磨宝石）、镶嵌三个步骤。

要将主石、配石固定在各自的镶口上，这是一个非常重要的精密工序。镶嵌的工艺也极其讲究，会根据不同宝石的特点，选择不同的镶嵌工艺。

2.6 抛光和表面处理

为确保金属表面光泽，需进行抛光。抛光后使用激光镭射机在指定位置进行刻字工序，一般珠宝上需要刻印：

金的成分，如Au750，代表18K金，S925代表925银等；

宝石的品种和重量，如D1.01ct，重1.01ct的钻石和品牌标记等；

还可以刻印客户自定义的字母或符号。

2.7 品质检验

将制作好的珠宝首饰，逐个进行精细检验，包括检查每个镶爪和镶口的工艺质量，检查每一件成品的外观、结构及表面，从而确保质量的合格，品质过关。

2.8 出具证书

最后将珠宝首饰送至相关的检测机构进行鉴定，出具证书。

3 人工智能珠宝设计师的技术框架

上文介绍了科技珠宝及传统的珠宝设计流程。人工智能应用于设计，主要是模拟设计的思维活动，之前mixlab已经对各领域的人工智能设计师相关的技术、案例进行了研究及DIY，本次借珠宝设计内容准备的机会，重新把人工智能珠宝设计师的体系、技术、示例代码等一一梳理。回到珠宝设计领域，由于是直接面对消费者，我们会考虑顾客的个人喜好，结合制造工艺等内容，寻找一种珠宝的最佳形态，这也是人工智能珠宝设计师技术框架的前提条件。

人工智能珠宝设计师同时也是一种新型个性化电商产品，主要流程：输入+生成+微调+下单。在输入上，有2种方式可选，一种是以绘画的方式，用户自己控制，随意创作；另一种则是利用摄像头或声音等采集个性化数据，例如声音数据、身高、体重、心率等作为输入方式。

3.1 输入数据

使用人工智能，第一步要模拟的是如何使用机器获取用户的个人喜好数据。

方式1

通过聊天机器人技术，与用户交流获取用户的喜好；

方式2

如果有数据支持，通过个性化推荐的方式预测用户的喜好，作为输入，也是可行的方式；

方式3

使用人体数据作为输入，例如心电图、声波、体重身高等数据。

方式4

让用户通过手绘的方式，描绘心中的珠宝作为输入。

3.2 结构化的设计数据

根据输入方式，搜索到诸如材质、符号、重量等相关的结构化的设计数据，作为设计引擎的输入，例如黄金、四叶草、10g等。其中方式4，我们可以参考通过手绘匹配3d模型的案例实现。

3.3 3D设计引擎

珠宝设计引擎，可以直接对接至3D打印的，实时渲染，供用户实时观看结果，并微调设计。

3.4 知识库

预先训练好珠宝的知识库，可以是图谱，或者其他结构化数据的形式。在系统实际投入使用过程中，不断根据用户对系统的使用情况，更新迭代知识库。

一个知识库的例子：

材质：黄金、玫瑰金、银饰、绿宝石、红宝石、……

符号：四叶草、心形、星形、月亮、水滴、十字架、声波、字母、……

模型生成算法：四叶草算法、心形算法、……

其他……

4 人工智能珠宝设计师的相关技术栈

主要涉及聊天机器人、个性化推荐、sketch-RNN、CNN图像分类、参数化设计、三维引擎、数据可视化等技术。

4.1 聊天机器人

微软的小冰，苹果的Siri都是这一技术的代表产品，目前大部分聊天机器人，可以做到简单问题的回答、查询天气、查看新闻、查询航班、给用户讲笑话、推荐菜谱、查找图片等通用型问题。

4.2 个性化推荐

我们可以通过爬取珠宝电商的购买数据及对应的用户信息，构建一个基于用户信息的珠宝推荐系统。例如我们可以通过爬取小红书上关于六福珠宝的用户日记数据，挖掘最受欢迎的款式，作为爆款，优先推荐给我们的系统用户。

4.3 sketch-RNN

谷歌开源的sketch-RNN，利用RNN，自动补全手绘图为珠宝造型，降低用户的绘画成本，并匹配合适的3D珠宝模型供用户选择。谷歌的autodraw就是绘画方面的自动补全工具，3D珠宝模型方面暂时没有看到很合适的案例，比较接近的是通过手绘生成3D世界的例子。可参考的方式：

https://worlddraw.withgoogle.com/draw

sketch-RNN，作为一种工具，可以帮助我们提高对创造性思维过程的理解。

4.4 CNN图像分类

CNN图像分类已经非常成熟了，我们可以基于迁移学习，用于提取珠宝的设计风格，把珠宝图像的特征抽象出来，集成到我们的系统里。另外一个应用就是用于处理声波等数据可视化后的数据，把特定的声波归类到对应的结构化的设计数据上。

4.5 手机心率检测技术

引自论文《Validation of heart rate extraction using video imaging  on a built-in camera system of a smartphone》。

4.5.1

手机摄像头记录手指末端因心跳造成的细微颜色变化

4.5.2

取出每幅画面的中心区域（降低计算量和非中区域的干扰）

4.5.3

计算中心区的平均红色分量值，作为特征值

4.5.4

将每幅画面的特征值，按时间序列绘制成连续图像

4.5.5

使用FFT快速傅里叶变换（找出系数最大的分量的频率f)，f*60就是这段信号反映出来的平均心率数。

4.6 声音数据可视化

此部分主要是利用浏览器的 Web Audio API , 推荐使用tonejs库。查看官网示例，即可感受。

https://tonejs.github.io/examples/#mic

还可以结合THREE.js做一些更酷炫的可视化～

4.7 参数化设计

参数化设计方法就是将模型中的定量信息变量化,使之成为可以任意调整的参数。在参数化设计系统中，设计人员根据工程关系和几何关系来指定设计要求，称为约束关系。

参数化设计 F（x）:

F 的构建可以是规则，也可以是数学公式，甚至可以用深度学习来构建。

参数化设计有一个重要分支，就是数据驱动型的设计。数据驱动的设计方式主要是通过3d模型的生成，在仿真环境里根据数据的反馈，从而不断修正设计，过程也是适用于强化学习的介入。

有个很典型的案例，一家位于洛杉矶的初创公司Hack Rod制作的一个具有几何结构的汽车底盘，并将数百个传感器安装到汽车和司机身上，在测试过程中传感器所捕获到2000万个关于汽车结构和作用力的数据点，这些数据可以反映影响汽车和司机的物理力量究竟是什么，然后通过autodesk的Dreamcatcher重新生成新的底盘设计。一旦最终设计被选定，它会被移交给autodesk的Design Graph。Design Graph是一款机器学习搜索应用，它会为每一个虚拟零件提供建议使得零件符合真实汽车制造标准。

在整个底盘设计过程中，通过人工智能构建、虚拟现实设计、3D打印制造的流程能极大降低了汽车生产的时间和预算成本。

4.8 THREE .js三维引擎

由于是面向消费者的，因而比较理想的应用环境是基于web的，我们可以采用 threejs 生成三维模型，实时渲染，提供给用户调整设计的参数面板。可供用户调整的参数面板可以使用dat.GUI 组件，快速地进行原型开发。

dat.GUI 是一个轻量级的图形用户界面库（GUI 组件），使用这个库可以很容易地创建出能够改变代码变量的界面组件。结合threejs的使用，方便我们试验我们的3D模型生成参数。

4.9 3D打印

3D打印是一场颠覆性的工业技术革命，无论是《中国制造2025》还是《工业4.0》，3D打印都备受瞩目。 有了3D打印，大规模的个性化定制就不再是难题。3D引擎生成的文件格式需支持STL格式，因为STL已经成为3D打印标准的数据格式。Threejs 是支持STL格式输出的。

STL文件格式（stereolithography，光固化立体造型术的缩写）是由3D SYSTEMS 公司于1988 年制定的一种为快速原型制造技术服务的三维图形文件格式。STL不同于其他一些基于特征的实体模型，STL用三角形网格来表现3D CAD模型，只能描述三维物体的几何信息，不支持颜色材质等信息。

5 demo代码

以上介绍完各项技术，我们在demo部分选取了最核心的内容，例如threejs复杂几何体的生成。其他更详细的内容我们会在活动当天进行交流，一起学习相关的技术。

threejs的模型，除了手工建模导入之外，还有一种是通过代码来自动生成的，也是人工智能珠宝设计师的核心技术。我们在这里给大家demo下自动生成更加复杂、不规则、参数化的几何体的代码。

5.1 挤出与车削

这一类方法实际上使用过三维软件的人都会很熟悉。它们都是用以一个基础的二维形状轮廓，在三维空间中构成物体。车削的原理如图所示：

挤出的原理如下图：

它们的使用方法都可以直接查询 Three.js/docs 官方文档，上面有详细的API可以遵循使用。

利用下挤出生成字母项链：

这两种方法，生成的几何体还是属于「规则」的几何体。如果想要做点不规则的几何体，可以继续往下看。

5.2 修改顶点数据

在Threejs的实现中，几何体实际上是分成三层结构的。

第一个层级叫做DirectGeometry，它是最底层的几何体信息。

第二个级别叫做BufferGeometry，它的内部保存一个叫做attributes的容器，了解着色器就会知道，这个attributes中的数据将直接在渲染中被传入着色器中。

第三个级别叫做Geometry，它是以我们人类的视角去描述一个几何体的方式，比如一个BoxGeometry就是一个Geometry的子类，保存如长、宽、高、分段等等描述信息。

我们用一个简单的例子来描述一下几何体在Three内部的构建过程。创建一个几何体通常需要一条命令比如：

var geometry =new THREE.BoxGeometry(10,10, 10);

如果使用浏览器的console去调试和查看，可以看到这种附属关系：

THREE中的几何体都会保存着一个叫做vertices的数组，这个数组中装载着这个几何体所有的顶点位置信息。那么在必要的时候，我们其实可以直接操作这个数组来进行几何体的形状变化。

我们先构建一个十二面体：

var pointsGeometry = new THREE . DodecahedronGeometry ( 10 );

然后，我们可以通过更改vertices来改变形状：

// 每个顶点的坐标随机地增减一定的幅动 

for ( var i = 0 ; i < pointsGeometry . vertices . length ; i ++ ) { 
pointsGeometry . vertices [ i ]. add ( randomPoint (). multiplyScalar ( 2 ) );
} 

改变前后的效果如图：

虽然看上去很杂乱，但其实如果结合其他用法，可以做出一些有趣的东西。请继续往下看。

5.3 MorphTargets

了解了上面的方法原理后，就可以使用Three给我们的另一个强大的方法：MorphTargets。

如果看一下所有几何体的基础父类Geometry，会发现它包含这样两个数组：morphTargets和morphNormals。先说morphTargets，它保存了一系列的「顶点状态」，比如下面这张图：

其中，对于同样一个立方体来说，可以通过设定不同的顶点位置，来设定不同的morphTarget。 以Three的官方示例( examples/webgl_morphtargets.html )举例来说，我们可以先创建一个基础立方体：

var geometry = new THREE . BoxGeometry ( 100 , 100 , 100 );

然后我们保存八个morphTarget状态，每个morphTarget依次代表立方体的一个顶点处于的一种状态，见下面代码：

for ( var i = 0 ; i < 8 ; i ++ ) { 
 var vertices = []; 

for ( var v = 0 ; v < geometry . vertices . length ; v ++ ) {
  vertices.push ( geometry . vertices [ v ]. clone () );
  
   if ( v === i ) {
    vertices [ vertices . length - 1 ]. x *= 2 ; 
    vertices [ vertices . length - 1 ]. y *= 2 ;
    vertices [ vertices . length - 1 ]. z *= 2 ;
   }
} 
geometry . morphTargets . push ( { name : "target" + i , vertices : vertices } ); 

}

接下来，我们使用刚刚创建的具有morphTarget属性的几何体来构造一个mesh：

mesh = new THREE . Mesh ( geometry , material );

那么，我们就可以通过这个mesh的morphTargetInfluences属性来控制立方体的形变，比如

mesh . morphTargetInfluences [ 0 ] = - 0.3 ;

这样，就可以动态控制立方体的形状：

基于这个方法，可以做出很多有意思的东西，比如我们可以创建一张网格网格面片，然后，我们利用morphTarget让这个面片可以来回「抖动」：

然后，我们只要在弄出两个这样的面片，为它们附上材质，就可以做出抖音风格：

其他的实现方法可查看 mixlab 往期发布的《用代码生成Glitch Art风格的抖音字体》文章。

5.4 参数化几何体

Three留给了我们参数化几何体的方式。其方法为一个叫做ParametricGeometry的几何体。它的使用方式可见官方API：

var geometry = new THREE . ParametricGeometry ( function , 25 , 25 );

如果我们修改一下参数化函数，比如我们让每个顶点的z坐标与x坐标和y坐标产生一些关系。

还有这种类型的曲面：

5.5 直接生成BufferGeometry

除了前面介绍的方法，我们还可以更加「自主」一些地定制几何体。这就是自定义bufferGeometry。这个方法需要我们「自行」生成一个几何体的所有顶点数据，包括每个顶点的位置、法线向量、顶点颜色、uv信息。下面举例介绍一下这种方法。

首先需要创建一个bufferGeometry：

var geometry = new THREE . BufferGeometry ();

然后我们可以使用任意一种随意的方式，把我们想要的几何体顶点数据先生成出来，比如：

// 生成顶点位置数据

var positions = [ p1 . x , p1 . y , p1 . z , p2 . x , p2 . y , p2 . z , ... ]

// 生成顶点颜色数据

var colors = [ p1 . r , p1 . g . p1 . b , p1 . a , p2 . r , p2 . g . p2 . b , p2 . a , p3 . r , p3 . g . p3 . b , p3 . a , ... ]

然后，我们需要将这两个数组作为参数，转化为Threejs的类型缓冲数组，当然也是使用Three的方法：

 var positionAttribute = new THREE . Float32BufferAttribute ( positions , 3 );
 
 var colorAttribute = new THREE . Uint8BufferAttribute ( colors , 4 );

接下来，还需将这两个类型数组添加到我们之前创建的空的BufferGeometry中：

 geometry . addAttribute ( 'position' , positionAttribute ); 
 geometry . addAttribute ( 'color' , colorAttribute );

这样，就可以像使用其他Geometry那样来使用这个几何体了：

var mesh = new THREE . Mesh ( geometry , material );

如果结合THREE提供的自定义着色器类型THREE.RawShaderMaterial，那么可以创造出比较有趣的生成艺术，比如最近很流行的渐变颜色风格：

demo部分有很多代码都没法在一篇文章里详细说明，更多详尽的内容，我们将在活动过程中进行分享。

6 珠宝+跨界的复合型产品设计

mixlab的价值观是跨界·开放·学习·互助，我们追求以各种跨界的可能创造新产品。珠宝在注入科技属性后，还可以与各领域结合，比如与建筑，建筑师可以以某种建筑元素进行珠宝设计，著名的建筑大师扎哈设计的宝格丽B.zero1系列珠宝，是一个例子。从举世闻名的竞技场——罗马斗兽场中汲取灵感，以其独特的风格、极致的设计颠覆了传统珠宝的审美准则，也成为宝格丽标志性设计作品。

——卢梭《爱弥儿》：

“最好的教育就是无所作为的教育：学生看不到教育的发生，却实实在在地影响着他们的心灵，帮助他们发挥了潜能，这才是天底下最好的教育。”

结合mixlab基于学习的思考，珠宝还可以与教育结合，为中小学生开发教育课程，通过珠宝开启研究自然科学的大门，提高艺术素养，掌握珠宝鉴定、手绘技能，学习如何把自己脑海中“异想天开”的创意绘制出来，并动手制作为立体的珠宝首饰成品，同时还能学会时尚搭配美学，提升审美品位。

当然，珠宝还有更多的跨界的可能，比如跟音乐结合、跟品牌结合（mixlab的定制珠宝）、珠宝类的游戏等等。

在我们活动当天，mixlab给大家提供了舒适的环境：

我们一起找到最好玩的 IDEA ！～