【互動網頁設計網聚】數位登陸:網站3D特效到虛擬展間 – 黑洞創造創意總監古建樺

2022年04月09日舉辦的【互動網頁設計】網聚,邀請到許多夥伴來分享,從互動式生成藝術藝術、NFT 介紹、虛擬設計展覽到聲音藝術和新媒體,多樣化的分享串起此次舉辦的【互動網頁設計】網聚,歡迎有興趣的朋友下一次可以來參與唷!本次分享人之一,黑洞創造創意總監古健樺,此次主要分享從線上策展道專案規劃,藉由總監的經驗歷程,來一起了解何謂數位登陸吧!

【數位登陸 網站3D特效到虛擬展間】/黑洞創造創意總監:古健樺

黑洞創造創意總監:古健樺

本次講師之一 - 黑洞創造創意總監、零維空間創辦人以及政治大學 3D 遊戲程式兼任講師 - 古健樺,從資工科系相關背景,進入到網頁設計專業,並在接觸到 Unity 後對互動設計領域十分感興趣,因此從工程師的角色轉換到目前專注於介面設計,讓網頁設計專案執行時除了注重流程外,也會更重視介面細節。

古健樺總監觀察到,現今在網頁頁面設計流程中,設計師端與工程師端,時常會對於相同問題點,因理解角度不同而討論,但其實最源頭的執行方向本就有所差異。如何面對這樣的問題呢?古健樺總監認為,可能是設計師方要多一分在程式語言上的能力,又或是工程師在原有的程式語言能力加上些許設計概念,才能有效加速流程的進行。

執行專案介紹

古健樺總監認為,原有的程式語言能力加上多項平台或遊戲引擎的開發學習,強調必須要善用資源的運用,並且更專注在創意流程的設計或是更艱難的技術上,才是未來網頁互動設計的趨勢。在政大遊戲程式教學課程擔任兼任講師時,跨領域或是從零基礎開始的學員有時候會因為不同理解角度而迸發出更多的創意。古總監也在課程中帶領學員進行黑客松,藉此勾引出對程式的興趣而去嘗試學習更多不同的程式語言。

黑洞創造 ,主打以美感與設計製作出具有豐富視覺的科技服務,創辦初衷希望能傳遞「勇敢突破、創造力、喜愛接觸新科技」的品牌形象,也因此產出的作品具有極高的視覺吸引力。業務內容包含特效網站、互動科技以及虛擬展場。

以下為黑洞創造執行專案的介紹:

JPG 擊樂實驗室 – 朱宗慶打擊樂團合作

互動裝置設定在當樂手敲擊時,下方投影就會出現相對應的效果,或是將果物與聲音裝置串起,形成另一種趣味。

JPG 擊樂實驗室 – 朱宗慶打擊樂團合作(圖片擷取自影片

台北市電腦商業同業公會製作 – 技能競賽線上展

除了展現線上展覽趨勢外,此專案裡七十幾項職類競賽,在兩個月的時間內完成 3D 圖片展示,攤位也皆可以使用滑鼠旋轉,讓整體呈現更富有趣味性。

台北市電腦商業同業公會技能競賽線上展(圖片擷取自黑洞創造

金赫獎成果展

在展間裡,除了作品欣賞外,觀者還可以進行投票。另外,在展間的整體規劃上,光影以及客戶端的視覺重點 logo 也是可以多加注意的小重點。

金赫獎成果展(圖片擷取自 Virsody

大溪大禧

與衍序規劃設計合作之專案。將地方和相關民俗活動盛事做結合,從抽籤、繞境和煙火等等,都做出精美的互動。例如,觀眾在繞境時,可以先選擇不同角色進行活動,在隊伍中,個神將的順序也都參照民俗規範。每個不同的停駐位置都有不同的變化出現,這樣的 CUE 點在互動展場製作中,也讓使用者印象深刻的小技巧。

大溪大禧關公繞境網站(圖片擷取自黑洞創造

品牌諮詢公司 Distractions! 網站

互動設計上,介面的動態效果呈現都必定會經過多重修改,此份專案上可以注意到網頁中的球形在行進的狀態,除了拖拉外,還有在放掉球形時,會有動畫式的反彈。

品牌諮詢公司 Distractions 進行網站專案(圖片擷取自 Distractions! 官網

兩廳院合作專案:神不在的小鎮 線上 串聯兩廳院活動,進行與劇本有相連結的線上互動網站

網頁主要強調 2D、3D 及 4D 的呈現,本次專案中黑洞設計主要負責2D 的進行。合作專案本身是一部沉浸式劇場的表演,此網頁主要是以劇情前導部分製作,因此內容詳盡,讓沒有機會前去現場的觀眾,也可以藉由線上展覽了解劇情。特色方面,一樣可以選擇角色,主要畫面以 Pixel 風格完成。

兩廳院製作《神不在的小鎮》ONLINE(圖片擷取自《神不在的小鎮》網站

Ladybug 線上策展

此專案以串聯女性設計師為概念的計畫,畫面視覺風格上,想傳達「數量多」的概念,因此使用類似桌面風格,在桌面上多個資料夾,以及文件點開後只會不斷重複堆疊的效果。

Ladybug 線上策展網頁(圖片擷取自黑洞創造

品木宣言專案

品木宣言在以線上方式進行直播時,使用 Unity 打造的展間進行展示。在這專案中,強調的是互動網頁設計在串接上的學習重要性。

品木宣言專案(圖片擷取自影片

NEWYELLOW紐耶羅 NFT藝術展

此專案是黑洞創造第一個以虛擬畫作進行展覽的線上展間,使用線上展間進行 NFT 的呈現有一項最大優點,就是使用像是 Javascript 或是 p5.js 呈現的畫作,可以將其作品 3D 的動態效果直接呈現,線上瀏覽動態作品,所以不會是單純以平面的方式展示。

NEWYELLOW紐耶羅 NFT藝術展(圖片擷取自黑洞創造

Art Taipei 台北藝術博覽會

展場上,將畫作連結賣場以利買賣,像是在第一天就將七幅畫作以 RNFT 的方式銷售出,購買之後在現下進行兌換。但也因為是多家藝廊合辦,所以針對鏡頭位置的規劃也是當初調整許久的部分。

Art Taipei 台北藝術博覽會線上展間(圖片擷取自 Virsody

羅芙奧線上拍賣|無設限:NFT 專場

羅芙奧為藝術集團,本次合作是為進行 NFT 交易買賣 NFT 拍賣虛擬展,希望帶給藏家們如同在實體展場中觀賞 NFT 收藏,大破既有的規則框架,沉浸在欣賞當中。

羅芙奧線上拍賣|無設限:NFT 專場(截圖自黑洞創造

從 Web 到 Web3 的數位流程

從數位化 Web 到 數位轉型 Web2、Web2.5再到現在的數位登陸 Web3到底各自代表了什麼?

╴數位化:數位典藏列如將文物掃描、聲音以 Mp3 方式錄製作為紀錄,或是原本只本書冊轉換為電子書。
╴數位轉型:將原先數位化加上原有商業模式,融合改變後形成全新的商業模式。
╴數位登陸:以區塊鏈為基礎,從數位轉型前行的過程。

在 Web3 的浪潮下,古總監 2022 年結合 Web3D 技術打造 Web 3.0 的產品 Virsody i.o
Virsody i.o 為線上虛擬策展平台,核心概念主打「在前往 Web3 的路上沒有人該被留下」。強調數位的東西需要以數位的方式被展示出,例如 NFT 、多媒體相關物件、3D模型,甚至是 iframe 網頁本身,皆能嵌入。希望大家都能共同無負擔的進入元宇宙,其簡易的編輯和上傳應用,或是 SEO 縮圖與管控展場模型地圖,主要目的是想讓不是 3D 專業的觀眾也能操作使用,能快速達到虛實整合,讓線上與線下展覽相輔相成,從展前預熱、展期互助到最後的展後留存,都是未來在虛擬世界與現實中希望能夠達到的最佳目標。

閱讀完文章後,對於線上展間感興趣嗎?歡迎一同追蹤古健樺總監所開設的 黑洞創造臉書社團 ,或是加入 動畫互動網頁特效入門(JS/CANVAS)互動藝術程式創作入門課程 開始學習互動式網頁應用的基本功吧!還有不要忘了 追蹤老闆 Twitter 和訂閱 老闆,來點寇汀吧。Boss, CODING please. Youtube 頻道讓學習不間斷!

此篇直播筆記由幫手 熊柑 協助整理

PHP Code Snippets Powered By : XYZScripts.com