【調查報導幕後｜技術篇】《報導者》如何製作盜砂地圖動畫？3D效果如何實現？
本文為專題《海峽下的風暴：中國盜砂船入侵下快速消失的台灣海砂、魚群，與被毀的電纜》幕後技術筆記下篇，由《報導者》設計師江世民（Ethan）製圖、說明多媒體篇製作流程、技術與工法，並經資料記者柯皓翔整理為文章。
有關團隊梳理判決書、整理地理資訊的工法可見上篇：
【調查報導幕後｜數據篇】《報導者》如何從法院判決書勾勒盜砂輪廓？結合地理圖資說故事有哪些心得？
對許多台灣讀者來說，「盜砂」似乎是個較遙遠的議題。為有利讀者理解近年發生在台灣海峽淺水海域「台灣灘」、馬祖、金門等地的盜砂問題概況，「地圖」是相當重要的敘事元素。
然而，「地圖」這樣的敘事媒材常牽涉比例尺縮放、位置的移動。如果只是一張純靜態的地圖，常常會受限於載具（手機或桌機）版面大小限制，使瀏覽體驗分數打了折扣。
過去《報導者》曾製作〈從租用到迫遷──南鐵東移，25年政策與地貌的轉變〉及〈還原一場12小時內湮滅的犯罪──數萬噸廢棄物，如何悄悄埋入台糖土地深處？〉，團隊先利用Google Earth Studio生成地圖運鏡動畫、再進入動畫軟體After Effect（AE）調整細節，最後搭配工程團隊開發的「捲動式影片」工具，實現滿版的沉浸式瀏覽效果。
爭取版面空間、增加「時間」維度，是我們提升地圖敘事體驗的常用技巧。基於Google Earth Studio的製作工法雖方便、容易上手，但漸漸無法滿足編輯室的客製化需求，例如自帶配色及材質風格的衛星底圖，其實相當程度影響視覺風格和再製空間。
有沒有其他生成精緻地圖動畫的方法呢？設計師Ethan一番研究後，找到了美國記者Johnny Harris在YouTube的分享影片，他的工作心法也為我們指了一條新路。
透過AE插件「GEOlayers 3」和「Mapbox」，做出精緻地圖動畫
GEOlayers 3是一款AE的插件（plug-in）， 能讓使用者直接在AE的介面中，就能夠讀取地理圖資並設定地圖運鏡；白話來說，AE不只是做動畫的工具，還變成了做地圖動畫的工具。這跳過以往我們得先在Google Earth Studio匯出影片、再匯入AE後製的工序，也不再受限於兩種工具搭配使用所產生的問題。
也就是說，我們事先備妥的抽砂船盜砂點位（csv格式）、台灣灘及限制水域多邊形圖資（kml格式），都可以直接透過GEOlayers 3上傳到AE，在地圖上產生相對應的圖形。
至於我們在意的底圖問題，GEOlayers 3本身已經包含若干圖資可直接使用，不過更好的消息是，它還可連結「外部圖磚」，因此讓底圖的選擇具備更多彈性。
這次我們再搭配使用地圖服務平台Mapbox，其優勢在於讓使用者「製作客製化地圖」，本身有多種的模板可供選擇。如設計師Ethan所言，我們可以設定地圖在不同比例尺下呈現不同層級的地名，也能對應不同的顏色style。
一般我們在使用線上地圖時，可能會注意到畫面會隨著比例尺大小，不斷載入一張張的分割圖片（稱為圖磚）；在Mapbox上，我們可以輸出「圖磚服務」，讓使用者透過url瀏覽該地圖。
需要注意的是，在Mapbox輸出第三方地圖圖磚格式時，我們要選擇「CARTO」類型。
回到GEOlayers 3，我們只要把在Mapbox做的客製化地圖連結餵入，便可以在AE中做出精緻的地圖運鏡了。
利用「動態追蹤」（Motion Tracking）技術，把3D模型也加入地圖中
如果文章只有單純的地圖圖像，整體多媒體風格難免顯得「疏離」，本身就對3D風格很有興趣的Ethan，這次也選擇以3D模型工法，將抽砂船擬真呈現、平衡整體調性。
但我們該如何把3D的抽砂船，結合到AE的地圖動畫呢？這時要先理解「動態追蹤」技術。大家可以想像，我們最終看到的成品畫面，其實是透過多個「圖層」不斷疊加而成，如最底部是Mapbox的底圖、上方另個圖層是台灣灘多邊形的底圖、最上面的則是3D抽砂船的圖層。
我們希望每個圖層的元素都能精準地「綁定」（parenting）在對的位置上，如此一來，畫面在移動、運鏡時，每個圖層都能「跟著走」，在視覺上我們就會覺得他們是「一體」的、位置沒有亂跑。
因此，我們的目標是要生成一個透明底、且運鏡參數與地圖綁定的抽砂船動畫，能夠最後餵回AE中。
我們首先需要從AE匯出地圖運鏡參數（json檔），接著在3D繪圖軟體工具「Blender」中使用插件「after-effects-to-blender-export」。如此一來，AE中的動態追蹤數據便可被讀取，抽砂船模型因此能隨著運鏡參數移動。
我們這次是以30幀為1秒為基本影片格式，最後也產生大量的圖檔序列（sequence）。我們只要把序列放回AE中，便能大功告成，讓3D圖像也能結合在地圖中。
綜合上述，我們這次地圖運鏡可以歸納成下列流程圖：
設計師對3D技術的學習：如何模擬「水」及「砂」？
一個多媒體作品背後常有許多技術學習點及門檻，不斷掌握多種敘事方法、提升製作能力對編輯室至關重要。
《報導者》過去曾在電子煙、火箭、廢棄物等專題中使用過3D繪圖。
製作火箭專題時，設計師開始採用Blender作為3D繪圖工具，許多學習點落在熟悉軟體介面與邏輯；處理廢棄物專題時，學習使用「粒子系統」（particle system）呈現大量廢棄物傾倒效果。
這次技術層面的學習則是精進「物理模擬」（physics simulation）。Ethan分享，在Blender中，流體（Fluid）、液體（liquid）分類之下，有多種模擬方法（simulation method），其中水要選擇「FLIP」、砂則要選擇「APIC」。
所謂的FLIP會把空間中的點位互相連結、運算為一個整體，因此可以做出液體的凝聚感；APIC方法則讓點位彼此「互斥」，因此能做出海砂的顆粒感。
對3D技術有興趣的設計師同業們，可以參考這樣的設定方法。
3D素材擴大使用：以「Sketchfab」生成嵌入碼，讓讀者自由探索模型
在〈遊走兩岸海域的暴利生意：盜走台灣海砂，中國業者現形〉中，我們已經製作出抽砂船模型，團隊也思考：這樣的模型是否有延續利用的可能？
盜砂專題執法現場篇〈修法重罰後，海巡查扣中國盜砂船何以依舊困難？〉中，團隊便將3D模型轉換為「抽砂船科普」，介紹各部件的功能。
這是透過3D模型平台「Sketchfab」來達成，我們可以上傳3D模型、設定點擊說明文字，並產生嵌入碼，回嵌至後台CMS系統當中。這樣的工具讓團隊以方便工序，就能讓讀者在主網站頁面上瀏覽3D模型，而不用耗費過多開發成本。
此外，由於3D模型的製作相對耗時，若能多次利用更能發揮其效益。這次多媒體頁的首圖便以「透明」玻璃的抽砂船，呈現「透視海砂」的效果；專題頁首圖則模擬夜晚抽砂示意圖。對設計端來說，只要模型建立，變可透過調整材質、燈光參數等方式來調整環境畫面氛圍。
設計師：「失敗是最有趣的」
儘管同事們都對這次的海砂專題呈現讚譽有佳，但Ethan卻坦言「它不是一個完美的東西」。
他認為地圖運鏡和3D抽砂船可以做出更好的視覺平衡，在風格上更加統一，例如海與山也能是「3D」，能出現光影等變化，如此一來「整體感」會更好。
另一個他認為可以改善的地方，則是抽砂船在地圖上出現的「抖動」問題。他初步研判是因為「動態追蹤」環節中AE、Blender兩種軟體仍有相容性問題，出現了細微的參數落差所致。
Ethan建議同業，一般認為另一款3D繪圖軟體Cinema 4D（C4D）與AE相容性較佳，也許就能克服此類問題。
儘管對自己要求嚴格，但Ethan也認為這些失敗是重要且有趣的，畢竟從經驗累積的角度來看，團隊不斷改善原先的方法論，也有更多實作心得可與讀者、同業們分享。
以上是《報導者》團隊的多媒體嘗試與紀錄，讓我們期待下個作品吧！如果你喜歡這篇文章，可以幫我們拍拍手 👏 或者留言與我們交流。
📣有你，才有《報導者》
《報導者》秉持深度、開放、非營利的精神，透過讀者的贊助支持來營運，不仰賴商業廣告置入。如果您認同我們的理念，歡迎與我們一起前進，共同推動這場媒體小革命。
☛贊助我們：https://bit.ly/3ylK401
官方網站：https://bit.ly/3rTeR1V
粉絲專頁：https://bit.ly/37jjGYD
Instagram：https://bit.ly/3rWFQJV
