從儀表板到恆星系:供應鏈遊戲視覺化的摸索路

更新 發佈閱讀 6 分鐘

透過前面幾篇文章,回溯了 Vibe Jam 活動起源去年參與的遊戲,相信大家更能體會這場活動的氛圍。

恰好在今年活動官網倒數結束那一刻截到圖

恰好在今年活動官網倒數結束那一刻截到圖


在有限時間內從零開始做遊戲本就熱血,主辦人 Pieter Levels 又是低成本快速變現的開發者代表之一,不管怎麼想,繳出聲光效果絢麗、快速操作、令人血脈賁張的競速或射擊遊戲,獲獎機會最大?


可是對我這沒有遊戲開發經驗,因為此活動才開始認識 Three.js 的路人而言,追求精緻往往意味著忽略整體時程、眼高手低反而做不出來的風險。當旁人更有實務經驗與資源,雖然活動規定 90% 須由 AI 製作,雖然 AI 似乎被宣揚讓各種專業能力「民主化」,


但你讓莎士比亞跟猴子同樣敲鍵盤,誰先敲出哈姆雷特毫無懸念吧?


因為我實力有限、動作太慢,或許 AGI 都開發出來了也成不了事業,比起競賽獎金,我等參與者更應該找到活動對個人本身的意義。當操作步驟能被一句 prompt 取代,能掌握主動權的部分,就剩為啥要對模型下那句 prompt。

我並不認為這次的嘗試能夠為人矚目、大放異彩,但未來的未來或許我能在某個茶餘飯後拋出來談 :

「AI 剛出來那些年,我就在沒經驗的情況下指揮 AI 設計遊戲囉!」


以長期思維來反推遊戲主題

我必須挑一個夠具體又有持續性的話題,當成遊戲主題:

  • 倘若概念模糊,或許大多遊戲都有討論到,缺乏自身的特色。
  • 倘若風潮短暫,或許這遊戲過了某個時刻,就不適合當話題。

所以這個遊戲專案從「營運 AI 公司」,聚焦到「上中下游 AI 供應鏈管理」,儘管現實世界大概沒一家企業是這樣玩員工大風吹的,但看看新聞報導資料中心與電力基礎建設的需求,可能會持續到 2030 年欸,豈不代表接下來 4、5 年只要某家供應商缺貨、某案場建設延宕,便能把這次活動的經驗拿出來閒聊 :

「我早就指揮 AI 設計一款遊戲,來反映這些產業時事了!」


遊戲是敘事媒介的一種,透過遊戲自然也能傳遞體驗與理念。但當你想傳遞的是一種系統性的抽象事物,能使用的方式,本身可能受到另一種媒介的限制……


說到供應鏈,你想到什麼?

儀表板:數字、條形圖、節點連線圖。


這是一種自然而然的聯想,數字、幾何圖形與連接線,本來就是協助人類理解抽象概念的符號,甚至沿用成為不言自明的既定慣例。比如流程圖中菱形代表「判斷點」、矩形代表「環節」,慣例符號不需解釋,破壞慣例就要負責重建共識,倘若今天有人特別用心重新設計幾何圖形並美化、想讓大家更能切身體會這張流程圖的實際運作「體感」,


大家就會更無法理解了唷。


這導致要透過 Three.js 將供應鏈視覺化,本身就帶有一種文化意義上的挑戰,AI 當然能替你寫出立體呈現的程式碼,問題是,演示出來大家看得懂嗎?

在實際產出程式碼前,我已先與各家 AI 討論如何透過立體視覺,呈現供應鏈充裕與緊繃狀態。從 Claude、ChatGPT、Gemini、Grok 乃至 Deepseek,答覆都讓人失望,疑惑究竟是個人杞人憂天庸人自擾,還是大語言模型們不懂我那股直覺般的顧慮。

AI 們的回應如何?既然是供應鏈管理遊戲,必然要有一個大大呈現供應鏈儀錶板的介面。考量這位用戶希望透過 ThreeJS 的 3D 視覺表現,讓玩家實地感受到變化──把遊戲場景布置成室內 4D 電影院,大銀幕呈現互動式儀錶板吧!


真照 AI 建議去設計,玩這遊戲還不如去看 Netflix。


本質沒有改變啊,供需關係仍然被轉譯成數字,只是這些數字現在漂浮在立體空間裡。AI 只是裝飾了抽象關係,卻沒觸及根本、沒把它們具象化。由於討論不出所以然,只好按部就班先將我構想的供應鏈轉化為立體圖示,再觀摩生成的模樣思考如何設計。


於是 Three.js 把供應鏈節點渲染成立體物件。

上游是淺綠、中游是藍紫、下游是橙紅,顏色對比鮮明,形狀依據位階分為三種不同的柏拉圖立體,上面浮著節點名稱文字,被放置於黑色空間中的一張直線經緯劃分的平面。相關的節點由懸浮粒子形成的光帶連接,除此之外要說照明,就是從某一角 45 度朝下打過來的白色燈光。


我開始從不同角度觀察這些節點的排列。


雖然這種抽象方式,有助於玩家看清楚供應鏈節點關聯,但太無聊了,彷彿你叫 AI 設計 UI 而不給任何美感提示,AI 設計出來自以為「賽博龐克」酷炫風格,實際上千篇一律的暗色背景搭配螢光圓角邊框一樣。


這種景象讓人想到什麼呢,光帶粒子懸浮、空無一物,依照玩家選擇與員工配置有亮有暗……彷彿宇宙般?

因此我有了靈感,倘若供應鏈節點上被配置了更多人手,該節點體積應該要變大。玩家與對手在機制內屬於雙盲狀態,無法得知其他對手的布局,以多面體大小來呈現所有節點此刻人員整體配置數量的關係,那即使缺乏精準資訊,依然能判斷供需情況、進行配置。

如此一來,節點就像漆黑宇宙中的大小恆星,節點間的光帶連結則是小行星帶,原來供應鏈即為星空。


本該如此宇航浪漫的,然而設置節點的相對大小比例隨即成為挑戰,一下子節點無限膨脹、一下子大小差距看不出差異,尤其當前柏拉圖多面體至少差異明顯,倘若為了讓畫面更接近繁星點點,所有節點都得改成圓球狀才像恆星,玩家卻又更難辨別了。


到最後,我無奈地胡亂轉動視角,這才發現這批節點並非擺在同個平面上。

AI 有些雞婆地將上/中/下游節點設計了高度差,更視覺化呈現了上游在上面、下游在下面的供應關係,那些多面體們位於不同 Z 距離的排列,彷彿某處山坡上聳立的雅典石柱或者說摩艾石像……


……就像建築物一樣?




留言
avatar-img
Bsh的沙龍
3會員
60內容數
記錄我在 2022 年 9 月之後使用 AI 生成圖像的嘗試。 這個主題總有一天會沒東西好寫,那就走一步算一步吧...…
Bsh的沙龍的其他內容
2026/05/02
雖然我知道遊戲怎麼玩了,但玩家能不能理解? 欸 Claude,先讀過設計文件,然後替我寫張遊戲機制解說圖 !
Thumbnail
2026/05/02
雖然我知道遊戲怎麼玩了,但玩家能不能理解? 欸 Claude,先讀過設計文件,然後替我寫張遊戲機制解說圖 !
Thumbnail
2026/05/01
確立了基本資源與操作,但這個以供應鏈為主題的遊戲,如果只有分配是不夠好玩的,需要更多的外部因素來製造玩家需要決策的情境。
Thumbnail
2026/05/01
確立了基本資源與操作,但這個以供應鏈為主題的遊戲,如果只有分配是不夠好玩的,需要更多的外部因素來製造玩家需要決策的情境。
Thumbnail
2026/04/30
遊戲需要一個核心循環,讓玩家獲得投入與回報的正向回饋。但如果把這種概念用在 AI 產業鏈上面,總有哪裡怪怪的......
Thumbnail
2026/04/30
遊戲需要一個核心循環,讓玩家獲得投入與回報的正向回饋。但如果把這種概念用在 AI 產業鏈上面,總有哪裡怪怪的......
Thumbnail
看更多
你可能也想看
Thumbnail
見諸參與鄧伯宸口述,鄧湘庭於〈那個大霧的時代〉記述父親回憶,鄧伯宸因故遭受牽連,而案件核心的三人,在鄧伯宸記憶裡:「成立了成大共產黨,他們製作了五星徽章,印刷共產黨宣言——刻鋼板的——他們收集中共空飄的傳單,以及中國共產黨中央委員會有關文化大革命決議文的英文打字稿,另外還有手槍子彈十發。」
Thumbnail
見諸參與鄧伯宸口述,鄧湘庭於〈那個大霧的時代〉記述父親回憶,鄧伯宸因故遭受牽連,而案件核心的三人,在鄧伯宸記憶裡:「成立了成大共產黨,他們製作了五星徽章,印刷共產黨宣言——刻鋼板的——他們收集中共空飄的傳單,以及中國共產黨中央委員會有關文化大革命決議文的英文打字稿,另外還有手槍子彈十發。」
Thumbnail
AI Coding 被宣傳得天花亂墜,彷彿可以讓沒有程式基礎的人,輕鬆寫出可用的應用程式成品。 事實是:要寫出堪用且具備擴展性的程式碼,你還是得遵循傳統的工程紀律來運作。 別懷疑,AI 寫大系統的能力是可疑的 像我這樣,只有 Script 語言經驗、沒有接觸過 C++ 這類硬底子語言的人來說,
Thumbnail
AI Coding 被宣傳得天花亂墜,彷彿可以讓沒有程式基礎的人,輕鬆寫出可用的應用程式成品。 事實是:要寫出堪用且具備擴展性的程式碼,你還是得遵循傳統的工程紀律來運作。 別懷疑,AI 寫大系統的能力是可疑的 像我這樣,只有 Script 語言經驗、沒有接觸過 C++ 這類硬底子語言的人來說,
Thumbnail
每天忙到凌晨,卻只在做重複瑣事?我靠 AI Vibe-Coding 僅用 7 天自建物流系統,每年贖回 1000 小時並省下 300 萬!這不是天方夜譚,而是微企生存必備的「PM 思維」。文中公開 Gemini 實戰心法與魔法指令,教你如何用一張截圖讓 AI 替你打工,徹底終結創業窮忙!
Thumbnail
每天忙到凌晨,卻只在做重複瑣事?我靠 AI Vibe-Coding 僅用 7 天自建物流系統,每年贖回 1000 小時並省下 300 萬!這不是天方夜譚,而是微企生存必備的「PM 思維」。文中公開 Gemini 實戰心法與魔法指令,教你如何用一張截圖讓 AI 替你打工,徹底終結創業窮忙!
Thumbnail
當代名導基里爾.賽勒布倫尼科夫身兼電影、劇場與歌劇導演,其作品流動著強烈的反叛與詩意。在俄烏戰爭爆發後,他持續以創作回應專制體制的壓迫。《傳奇:帕拉贊諾夫的十段殘篇》致敬蘇聯電影大師帕拉贊諾夫。本文作者透過媒介本質的分析,解構賽勒布倫尼科夫如何利用影劇雙棲的特質,在荒謬世道中尋找藝術的「生存之道」。
Thumbnail
當代名導基里爾.賽勒布倫尼科夫身兼電影、劇場與歌劇導演,其作品流動著強烈的反叛與詩意。在俄烏戰爭爆發後,他持續以創作回應專制體制的壓迫。《傳奇:帕拉贊諾夫的十段殘篇》致敬蘇聯電影大師帕拉贊諾夫。本文作者透過媒介本質的分析,解構賽勒布倫尼科夫如何利用影劇雙棲的特質,在荒謬世道中尋找藝術的「生存之道」。
Thumbnail
這篇文章不只想討論這個現象本身,更想追問它背後那些沒有被說出口的假設:蘋果的品質把關還有意義嗎?退件能解決AI垃圾內容嗎?如果我們什麼都不做,App Store的信任又會去哪裡?
Thumbnail
這篇文章不只想討論這個現象本身,更想追問它背後那些沒有被說出口的假設:蘋果的品質把關還有意義嗎?退件能解決AI垃圾內容嗎?如果我們什麼都不做,App Store的信任又會去哪裡?
Thumbnail
5 月,方格創作島正式開島。這是一趟 28 天的創作旅程。活動期間,每週都會有新的任務地圖與陪跑計畫,從最簡單的帳號使用、沙龍建立,到帶著你從一句話、一張照片開始,一步一步找到屬於自己的創作節奏。不需要長篇大論,不需要完美的文筆,只需要帶上你今天的日常,就可以出發。征服創作島,抱回靈感與大獎!
Thumbnail
5 月,方格創作島正式開島。這是一趟 28 天的創作旅程。活動期間,每週都會有新的任務地圖與陪跑計畫,從最簡單的帳號使用、沙龍建立,到帶著你從一句話、一張照片開始,一步一步找到屬於自己的創作節奏。不需要長篇大論,不需要完美的文筆,只需要帶上你今天的日常,就可以出發。征服創作島,抱回靈感與大獎!
Thumbnail
我是特洛伊。面對AI浪潮的焦慮,關鍵在於系統思維而非盲目學習。透過四大工作流:釐清需求、規劃規格、協作編碼與優化,我帶領學員以終為始,讓AI擔任搬磚工頭,將工作流轉化為自動化結果。唯有落地實踐,才能在變動中找回營運節奏,擺脫焦慮擁抱自由。
Thumbnail
我是特洛伊。面對AI浪潮的焦慮,關鍵在於系統思維而非盲目學習。透過四大工作流:釐清需求、規劃規格、協作編碼與優化,我帶領學員以終為始,讓AI擔任搬磚工頭,將工作流轉化為自動化結果。唯有落地實踐,才能在變動中找回營運節奏,擺脫焦慮擁抱自由。
Thumbnail
今天在社群看到一篇文章: 「Google 在 PM 面試中加入 vibe coding 考題。」 意味著,開發團隊的所有人,都必須具有程式概念與基本程式設計能力。 而跟開發端更近的 UI 設計師,必定無法倖免於這股浪潮。 只用 AI 寫報告和文案完全不夠。該是轉型的時候啦各位。
Thumbnail
今天在社群看到一篇文章: 「Google 在 PM 面試中加入 vibe coding 考題。」 意味著,開發團隊的所有人,都必須具有程式概念與基本程式設計能力。 而跟開發端更近的 UI 設計師,必定無法倖免於這股浪潮。 只用 AI 寫報告和文案完全不夠。該是轉型的時候啦各位。
Thumbnail
2026/02/12 智譜發布 GLM-5,主打長任務 agent 與工程級應用,參數擴至 744B,導入 DSA 與自研 RL 基礎設施。多項 benchmark 在開源模型中領先,並支援國產晶片部署,顯示模型能力與供應鏈策略正同步推進。
Thumbnail
2026/02/12 智譜發布 GLM-5,主打長任務 agent 與工程級應用,參數擴至 744B,導入 DSA 與自研 RL 基礎設施。多項 benchmark 在開源模型中領先,並支援國產晶片部署,顯示模型能力與供應鏈策略正同步推進。
Thumbnail
當時間變少之後,看戲反而變得更加重要——這是在成為母親之後,我第一次誠實地面對這一件事:我沒有那麼多的晚上,可以任性地留給自己了。看戲不再只是「今天有沒有空」,而是牽動整個週末的結構,誰應該照顧孩子,我該在什麼時間回到家,隔天還有沒有精神帶小孩⋯⋯於是,我不得不學會一件以前並不擅長的事:挑選。
Thumbnail
當時間變少之後,看戲反而變得更加重要——這是在成為母親之後,我第一次誠實地面對這一件事:我沒有那麼多的晚上,可以任性地留給自己了。看戲不再只是「今天有沒有空」,而是牽動整個週末的結構,誰應該照顧孩子,我該在什麼時間回到家,隔天還有沒有精神帶小孩⋯⋯於是,我不得不學會一件以前並不擅長的事:挑選。
Thumbnail
由 Troy, AI 賦能師,撕開 AI 資本巨頭壟斷的真相。本文為微型創業者指引方向,跳脫 OpenAI 的資本遊戲,專注於 VibeCoding、Gemini 與 Google AI Studio 等重視人本體驗的工具,實現營運智能化、多產倍增與時間救贖,打造反脆弱的永續事業。
Thumbnail
由 Troy, AI 賦能師,撕開 AI 資本巨頭壟斷的真相。本文為微型創業者指引方向,跳脫 OpenAI 的資本遊戲,專注於 VibeCoding、Gemini 與 Google AI Studio 等重視人本體驗的工具,實現營運智能化、多產倍增與時間救贖,打造反脆弱的永續事業。
Thumbnail
從茶飲紅海到藍海,作者Troy分享其創業歷程,點出「情緒價值」、「故事情懷」及「我懂你」的情感連結是關鍵。更重要的是,面對新時代,作者提出AI導入應用,從行銷、帶訓到管理,運用AI系統化作業,減少人事成本、提升效率,擺脫「窮忙」,實現「生意永續」,並提供30分鐘免費諮詢。
Thumbnail
從茶飲紅海到藍海,作者Troy分享其創業歷程,點出「情緒價值」、「故事情懷」及「我懂你」的情感連結是關鍵。更重要的是,面對新時代,作者提出AI導入應用,從行銷、帶訓到管理,運用AI系統化作業,減少人事成本、提升效率,擺脫「窮忙」,實現「生意永續」,並提供30分鐘免費諮詢。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News