---

1、項目概念

?

概念CG by?老邵

偶然之間看到一張科幻電影的海報，這不可名狀的扭曲，總讓人聯想起宇宙中變化的引力和未知的空間。在數不清的科幻電影宇宙里，有無數的人在進行著星際的旅行。

這些宇航員在穿梭蟲洞時，由于引力的變化，身體出現扭曲和不可預測的姿態。而作為環境的蟲洞本身也是變換無窮，我希望用Computational Design的方式來探索和展示這個場景的可能性。

2、思路和流程

我把設計元素拆分成宇航員和蟲洞兩部分，分別對其進行設計。策略方面還是從參數化構建出發的，一方面是因為參數化系統可以使設計師對生成的風格有比較好的控制力，另一方面如果要用機器學習的話，數據集的采集也是個難題。而參數化系統正好可以大量生成數據集，可以作為之后進一步做機器學習的基礎。

在宇航員的設計上，我們借鑒了傳統皮影戲的概念，用骨骼系統來控制整體人物形態的生成。在插畫稿設計之初就建立在一個模塊化的基礎上。

設計了好幾款頭盔的手稿，最終還是選了一款比較傳統的。骨骼系統使得設計元素能很方便的替換，也能套用其他人物形象。

生成方面，相比于純粹的隨機生成或者遺傳算法，我們選擇了一種交互式的生成算法。用戶可以在系統隨機產生的姿態中進行選擇，在被選擇的姿態之間進行插值計算，從而生成近似的一系列方案，這也能增加用戶的參與度、體驗感。

背景方面，邏輯就更為簡單了。我在grasshopper中構建了一個三維的蟲洞，蟲洞的形狀、內部的元素（扭曲的線條和浮動的幾何體）都通過一系列隨機的參數進行控制，并在一定范圍內的隨機位置對其進行觀測。由此可以產生大量的平面背景樣本，數量和風格也都非常可控。

起初做的渲染風格的背景，后來發現和宇航員的插畫風格不搭配，最后還是轉向了更為扁平的風格。

3、整合設計

上述工作都完成之后，我們在p5.js里整合了所有的設計元素，并且部署到了網頁上。用戶可以在網頁上生成不同的宇航員和背景，選擇并迭代自己喜歡的方案，保存生成的結果。

網頁設計原型

http://break-through.studio/p5sketch/fallingintoblackhole/

項目體驗地址

請大家在電腦端打開網頁體驗，因為我們沒有做移動端的優化。

4、超越參數化

從功能來說，上面的內容已經很完整了；但是對于實驗來說，下面進行到了非常有趣的部分。我把背景部分的幾何元素去掉，輸出了10000張作為數據集，在RunwayML中進行機器學習訓練。

當然，在3000步的訓練之后，能產生非常接近的視覺效果，在分辨率不高的情況下，用StyleGan生成的圖像和參數化生成的看起來非常接近了。但其實作為普通用戶來說，他們并不在意這是用什么方式生成了。

而我們設計背景的初衷，是去表現一個光怪陸離的隧道狀空間。所以我試著在一個生成星云的模型上遷移我的訓練，在500步的時候，產生了非常理想的結果——得到了一個有科幻電影質感的蟲洞。

不得不感嘆，做Computational Design是一個“控制感”和“意外性”的博弈。我們想要去控制生成的畫面，但是我們也希望能有意外的驚喜和突破。在權衡這兩者的過程中，保持設計的初衷，是一件困難而又有趣的事情。之后我又嘗試了一下別人訓練好的StyleTransfer模型，希望能獲得一些Non-photorealistic rendering（非真實感渲染）的風格，效果也很不錯。

5、IP應用

最后，作為一個平面設計的項目，做了一些衍生品的效果圖，實物之后也會考慮定制出來，作為一些UDM Lab的周邊吧。

左右滑動查看更多

在電子產品上的一些應用

左右滑動查看更多

6、總結

作為一個非盈利性質的實驗項目來說，總體結果我還是滿意的，剩余當然也有一些遺憾和后續需要改進的地方：比如說最開始插畫稿細節很豐富，但是在網頁上縮小了之后效果就沒那么好了；網頁的交互也沒來得及做的很好……后續也希望能把整個項目做成實時3D的網頁版本，能帶來更驚艷的交互體驗（加入有生之年系列，如果我學得會Shader的話）

項目參與人員

p5.js算法：孝吾

背景生成：絲瓜

宇航員插畫：胖虎&絲瓜

CG概念動畫：老邵

如果大家有疑問或者更好的思路，非常關注作者。

也歡迎加入Mixlab無界社區交流~

總結

以上是生活随笔為你收集整理的动态海报，一次 Computational Design 实验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。