DIY一個人工智慧珠寶設計師v1.0

tonejs.github.io

還可以結合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部分有很多代碼都沒法在一篇文章里詳細說明，更多詳盡的內容，我們將在活動過程中進行分享。

mixlab的價值觀是跨界·開放·學習·互助，我們追求以各種跨界的可能創造新產品。珠寶在注入科技屬性後，還可以與各領域結合，比如與建築，建築師可以以某種建築元素進行珠寶設計，著名的建築大師扎哈設計的寶格麗B.zero1系列珠寶，是一個例子。從舉世聞名的競技場——羅馬斗獸場中汲取靈感，以其獨特的風格、極致的設計顛覆了傳統珠寶的審美準則，也成為寶格麗標誌性設計作品。

——盧梭《愛彌兒》：

「最好的教育就是無所作為的教育：學生看不到教育的發生，卻實實在在地影響著他們的心靈，幫助他們發揮了潛能，這才是天底下最好的教育。」

結合mixlab基於學習的思考，珠寶還可以與教育結合，為中小學生開發教育課程，通過珠寶開啟研究自然科學的大門，提高藝術素養，掌握珠寶鑒定、手繪技能，學習如何把自己腦海中「異想天開」的創意繪製出來，並動手製作為立體的珠寶首飾成品，同時還能學會時尚搭配美學，提升審美品位。

當然，珠寶還有更多的跨界的可能，比如跟音樂結合、跟品牌結合（mixlab的定製珠寶）、珠寶類的遊戲等等。

在我們活動當天，mixlab給大家提供了舒適的環境：

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

活動鏈接地址：