前往
大廳
主題

「資工系選修計算機圖學」之經驗分享

<(_ _)> | 2021-06-08 01:17:16 | 巴幣 8858 | 人氣 8344




↑ 撰文當下剛好是湊あくあ的歌回,建議讀者觀看文章時可將其當作背景 BGM

前幾天剛好撰寫文章回覆巴友的問題,就順手轉到自己的小屋備份並修改一些內容

本篇文章為個人修課經驗查閱網路資料的整理,同時也是上述連結的擴充版
除潤色文章外,也增加補充內容,希冀讀者能了解「資工系選修計算機圖學」是怎麼一回事

本篇僅為個人心得分享,實際課程安排仍端看各校教授,不代表選修課程必定會碰到這些內容
有勘誤還請告知 <(_ _)>



首先,什麼是計算機圖學?(Computer Graphics,以下簡稱 CG)
這是一門電腦科學的分支,主要目的是透過電腦運算產生擬真圖像,產生最終在螢幕上看到的輸出
除了三維資訊外,對二維影像的處理也在該門學科的範疇內

當然,這並不是確切的定義,圖學也非本人專精的領域
無法保證本文提及內容之正確性,僅作為經驗分享,故會提供讀者參考資料予以佐證
(即便如此,我也無法考究參考資料是否 100% 正確)

回歸正題,我先列舉圖學在現實的應用,或許能讓各位對該領域有初步的認識
計算機圖學與攝影、電影特效、遊戲、動畫等領域的核心技術有關 ──
不論是家喻戶曉的電影:從《侏儸紀公園》到《阿凡達》,爆炸就是藝術的麥可貝,坐穩票房的復仇者聯盟
以及每個人的童年旅途:《玩具總動員》、《怪獸電力公司》《超人特攻隊》,那些由皮克斯出品的動畫
或是膾炙人口的3A大作:《隻狼》、《對馬戰鬼》、《賽博龐克》,鬼斧神工的場景與栩栩如生的人物建模

想必各位對上述的作品並不陌生,甚至腦中可以清晰地浮現劇中情景,這些都是計算機圖學的實際應用
然而,今天的主題並非圍繞在現實應用,而是要分享「資工系修計算機圖學」所遇到的二三事

圖學領域的發展與應用相關廣泛,同時也是各校資工系會開設的選修科目之一
當然,每位教授期望的課程方向不同,僅用一篇文章難以將其分毫析釐
甚至讀者實際修課後,才發現教授傳道授業的內容與本文有所不同,倒也無法否認存在著這種可能性

通常在一學期的課程中,難以提及整個領域的發展,遑論實作方面無法涵蓋各個主題
大多是進階課才會教比較難的內容,或至少要求修課同學有一些數學基礎,甚至教授就是想開一門硬課
一切端看課綱而定,若是對授課內容有所疑惑,建議詢問學長姊第一堂課去旁聽

隨著學問的鑽研深入,你可能會需要幾何光學物理學的知識,以讀懂艱澀的理論或新穎的研究
但是不用擔心,剛入門計算機圖學只需要高中程度的線性代數
也就是具有矩陣運算、內外積等基礎,就有辦法應付部分實作內容
至於修課可能會碰到的底層實作,會在後面的篇幅稍作說明




由於近年深度學習的崛起讓電腦視覺的研究與應用發展蓬勃
相信各校資工系都會開設相關的課程 (就本人所知,CV應該比CG熱門)

而各位較耳熟能詳的領域,想必也都是 Computer Vision,而不是 Computer Graphics
若有機會也想撰文分享幾個入門的 Computer Vision 領域,但這不是今天的重點

從這張圖可以看出有幾個相似的領域,分別叫做 CV、CG、PR、IP
本人覺得多少有重疊的部分,無法以一言蔽之,但這邊先照圖片上的輸入輸出做個區別

圖中 Computer Graphics 位於右上角,屬於輸入「Description」、輸出「Images」──
輸出想必沒什麼問題,就是最終你在螢幕上看到的東西

而 Description 可能會是 3D model 的資訊或場景資訊
例如三維空間中物體的點、線、平面、三角形,甚至是表面法向量、場景光照等等
經由這些資訊,讓電腦運算產生出顯示在螢幕上的輸出


【情境】假如你在 Unity 匯入 CatShark 的模型,該模型是如何渲染到你的 2D 螢幕上?其實我也不知道

理所當然地,若想要做研究並發表論文,或是未來要投相關領域的工作,必須對箇中原理有所理解
然而在實務開發中(例如使用 Unity 開發遊戲),卻不一定會碰到必須知曉其原理的情境
畢竟引擎都幫你處理好了,剛入門時只要會操作介面或是別人先前撰寫的 API

通常會需要重造這些功能,或許源自於有特定需求想碰更深入的內容
也有可能是要刻自己的遊戲引擎(去國外念遊戲專門的學校會需要刻)

即便如此,隨著對某個領域的認知漸漸加深,就算沒有重造一次輪子
也應該要知道底層是如何運行的,不太可能只把 API 當成黑盒子
俗話說:「知己知彼,百戰百勝」,或許不用追根究柢地重建整個流程
但在使用這些工具的同時,若是知曉原理則更能掌握自己在做什麼



承上所述,這邊有個名詞叫做 rendering pipeline,詳見 Graphics_pipeline - Wikipedia
簡單來說就是「將三維模型渲染到二維螢幕上」,實作涉及高中的線性代數

實際上整個流程更為複雜,此處只對幾何轉換的部分做簡單說明
再次聲明,這也不是整個 rendering pipeline 的全貌,僅是分享本人修課習得的經驗

若讀者今日撰寫 webGLOpenGL,也都有現成的 API 可供調用 (矩陣運算等..
每個環境的細節又有些許不同,若有興趣再自行參照上述 API 之官方文件

而接下來提到的內容,是從數學角度分析整個流程,說不上艱澀難懂,但實作也不容易
或許不是每間學校的圖學課,都會要求使用數學知識重造輪子,因此沒興趣的讀者可以跳至下一節內容

在此節將會簡單說明實作內容為何,提及演算法的關鍵字與結果展示,提供一個查閱的方向給有興趣的讀者
(其實資工系要求實作底層細節也是合情合理,我之前在中央修圖學的教授就著重在這部分)


首先你的目的是將(3D模型的)點、線、面的資訊投影到二維螢幕上
這部分涉及空間的座標轉換,應該算是高中線代的基礎常識 ── 參考資料:[OpenGL] Coordinate
沒記錯的話應該是 Object Space → World Space → Camera Space → Projection Space → Screen Space

在這個流程中,相鄰之座標空間轉換,也都會各自再做一些處理 (例如 3D clipping、back-face culling 等)
然而本篇並非技術向文章,在此便不多做說明

回到第一步,你知道 3D 模型可透過很多三角形組成,那麼要怎麼畫三角形?那就是三個頂點各自連線
那我要怎麼把兩兩頂點做連線呢?畢竟三角形是由三條直線所組成,首先必須完成兩點連線的功能
如果有電腦科學背景的讀者,很輕易就能想到電腦畫面是由離散的像素組成
只要以 pixel 為單位逐步畫出,就能夠形成一條線

最直觀的方式是透過斜率,但我們有另一個方法,叫做 Mid-Point Line Drawing Algorithm
這個演算法會得到稍微好一點的直線,稍微避免斜率造成的誤差
※註:畫圓可參考 Mid-Point Circle Drawing Algorithm (還有很多演算法,但我沒刻過

如果你會三維空間變換,知道模型的 3D 座標投影到螢幕上的位置,也知道如何在螢幕上畫線
只要再加上 clipping 演算法,剔除不想要繪製的區塊,就能夠得到以下的成果
※註:clipping (Cohen-Sutherland) 又分為 2D 與 3D 的版本


讀者看到這邊可能會想說:
「欸不是,你這樣和這張梗圖有什麼差異?
感覺關鍵步驟都跳過啦,我還是不清楚要怎麼畫出這個茶壺!」


沒錯,若我必須詳細說明每個流程的實作細節,待文章撰寫完暑假就要開始了
雖然上述流程會碰到但細節先不要,這是必要之惡 = =
若有興趣的讀者,可以上網查閱相關資料,或是找台大歐陽明老師的投影片與課程錄影

若非實作底層細節而是使用 webGL,可以直接在 vertex shaderfragment shader 呼叫一行 discard
如此一來便能捨棄不想畫出(clipping)的部分,當然判斷條件還是得自己寫的

同時你會發現上圖的茶壺看不到背面的 mesh,因為我有做 Back-face culling
可剔除從視野方向無法看見的物體背面
※註:數學意義由「攝影機到平面的向量」與「某個平面的表面法向量」決定是否繪製

在此之上,再加入場景光照資訊(Ambient、Diffuse、Specular light,或物體表面的顏色)
實作某個 shading 方法 (將物體著色),然後再做個 Z-buffer (依物體遠近繪製),便能得到以下結果


↑ 具有簡單光照效果,且可區分物體深度的兩個方塊就此完成,此為 flat shading 之實作

若選修課程著重於底層實作,那麼上課內容或許會花不少篇幅介紹公式推導實作細節
也就是被我省略掉的那一大段流程的前因後果,但幾乎都是簡單的高中數學知識,因此不必太擔心

如果不是重造輪子,那可能會以下一節提到的方式進行



所以圖學還有什麼樣的研究領域?我先貼 wiki,然後標個重點

圖學的研究內容相當廣泛,可是我又不是神仙,怎麼知道這些東西在幹嘛 = =
但是你去修課,會學到的通常就是上述內容的一部分
比較常見的主題有 shadersrenderingray tracing
這些是剛入門圖學常見的基礎,不過還是依教授本人的規劃而定

通常也會講述原理、公式堆導,但不會像先前這麼詳細且要實作整個流程
大部分的演算法 (幾何轉換、clipping、back-face culling、z-buffer) 都可以使用現成的 API 來解
兩者大概是「透過數學知識寫出 API」與「用 API 做個成品」的差異

如果想知道 state-of-the-art 的發展,可以去看 SIGGRAPH 的論文
但本人也蠻久沒念論文了,對現在的發展趨勢不太熟悉,只好貼個以前隨便寫的筆記


如果採用 API (如 webGL)寫作業,那實作內容可能會像上圖所示
大概就是匯入幾個模型 → 讓物體做剛性變換 → 加入光源、不同 shading 方法等...
直接透過 API 完成先前提到的 rendering pipeline,但可能還是要實作部分 shading 的演算法
(通常至少會提及 flat shadinggouraud shadingphong shading)

修課同學可能會對 shader 有更深的理解 (vertex shaderfragment shader 的流程
在未來開發時,如果需要自己寫 Cg/HLSL 和 GLSL 等 shading language 時或許會有所幫助



最後做個簡單結論,如果像前者 ── 實作計算機圖學的底層數學
便會對整個 rendering pipeline 的運作原理有一些理解 (幾何部分居多)
這部分比較像是重現 API,像以前看別人面試騰訊的心得文,有被問到 OpenGL lighting API 的原理
或是走學術研究 / 去國外念遊戲相關學校,可能還是蠻需要這塊的知識

如果不排斥數學其實還不錯玩,但是用處大不大就見仁見智
本人最近剛好入門 3D Computer Vision,我覺得先前有實作整個流程,還算有一點幫助
若沒有相關經驗倒也無關要緊,而且我修這門課時沒有碰到 shader,是美中不足之處

如果是後者 ── 使用API寫作業,可能會碰 shader
雖然沒有實作底層流程,但通常還是會學到整個運行原理,摸到的知識相較會廣泛一些
不想碰數學或討厭重造輪子的話,可能會偏好這個方向的授課模式 (ex:112圖學
如果以後要自己寫 shader 也會有所幫助,不過我都丟給我同學寫ㄏ

就我自己的同溫層而言,蠻多同學是因為想製作遊戲才接觸圖學,其中有部分也真的踏入遊戲業的不歸路

資工系的圖學課程之於遊戲製作的關聯,比較像是遊戲開發三大領域的「程式」面
並且無論是以何種形式,授課範圍都還在基礎的範疇,若要鑽研精深仍得自行尋覓方向

此外遊戲開發的「美術」也會碰到 CG 相關軟體,但這和資工系圖學課程的關聯就沒有那麼大了
以我修過兩間學校計算機圖學的經驗,皆沒有碰到 CG 軟體,頂多寫 shader 算是有摸到美術的一環吧

我個人認為要往遊戲業發展,無論是「程式」還是「美術」都蠻值得接觸圖學領域的基礎知識
至於「企劃」層面就不太確定了

即便不往相關領域走,計算機圖學仍舊是相當有趣的學科
追溯許多現實應用發展之根本,探究這些圖形如何透過數學發展建構而成
尤其透過程式實作渲染出圖像,得到的回饋感相當不錯
至少我修過兩門圖學課的體驗都還算良好畢竟入門不難

然而想要深入探究該門學科是相當困難的,絕不是修過一兩門課就能知其所以然
這個領域的水非常深,論文很難讀,而且在台灣要尋覓純圖學的工作似乎也不太容易...嗎



額外內容:
還記得於文章第一段提到計算機圖學與攝影、電影特效、遊戲、動畫等領域的核心技術有關嗎?
除了三維資訊外,對二維影像的處理也在該門學科的範疇內
而先前都只有提到將三維資訊轉換為螢幕上的輸出

在此段落會簡單分享攝影特效部分的應用,也大多是對二維影像的處理

首先是 HDR image,也就是具有更大曝光動態範圍(更大的明暗差別)的圖像技術
以及從不同曝光範圍相片中生成高動態範圍圖像的方法

↑ 可以透過上列具有不同曝光程度的四張圖片作為輸入,得到一張 HDR 影像,經過處理得到下列的輸出

原本計算得出的 HDR 影像可能會有超過顯示器最大值的亮度,因此要透過 Tone Mapping 演算法
將圖片轉換成具有正常場景亮度的 LDR 影像

HDR 的生成可參閱 Paul E. Debevec, Jitendra Malik, Recovering High Dynamic Range Radiance Maps from Photographs, SIGGRAPH 1997.

除此之外,產生 HDR 前可以做前處理 (MTB algrotirhm for image alignment)
或是拍攝的圖片有鬼影時,也能透過其他方法去除
但本人對這部分的理解不太熟悉,故不多做說明

第二個主題是全景圖,由於近代數位相機等攝影設備的進步,以及 VR 領域的蓬勃發展,各位可能略有所聞
簡單來說,就是同時具有全向資訊 (水平正負180度°,垂直正負90°) 的圖片

↑ 擷自 wiki 的一張全景圖

概念上是站在原地拍攝相鄰的數張圖片,將其以環狀效果拼接而成
實作上相當不容易,並且(視實作方法而定)需要知道拍攝圖像之 focal length

可參照 M. Brown, D. G. Lowe, Recognising Panoramas, ICCV 2003. 的流程
但是我實作爛掉就不細講流程了 QQ

圖學領域包羅萬象,還有不少有趣的題目族繁不及備載
像是 beautifying images、oil painting / water color effects、image morphing 等...
而這些題目也並非只在 CG 這門課提及,或許會有相近領域的課程,會提供更多不同的知識以便探索

雖說長年以來的學術發展,就好比站在巨人的肩膀上,能讓人看得更廣更深
但要能消化前人累積的經驗與成果,在此之上繼續深入也不是件容易的事
我認為在學期間,透過修課對各領域有初步認識,也不失為一件好事



本文至此告一段落,僅分享我在兩間學校修習計算機圖學的經驗
想當然爾,以本人粗略的淺見實在無法涵蓋充足資訊,且本文提及之內容皆為該領域的基礎
更無法網羅所有現實應用與研究領域,還請各位讀者海涵

至少,希望能幫助各位了解「計算機圖學的現實應用」與「資工系選修計算機圖學」實際上會做些什麼
如此一來便足矣,未來若有機會也希望能再撰寫其他文章,分享個人淺見

謝謝各位 <(_ _)>

創作回應

煙嵐
<(_ _)>
2021-11-02 20:31:11
霧島悠樹
厲害,這邊好文!
2022-03-22 13:52:59
雨初
2022推!學3D學到一半正好在苦惱電腦圖學是不是必要知識,但網路上好像又不太有類似的提問。
2022-10-11 09:16:44
玥白YueBai
2023推,準備升大二,下學期想去給電腦圖學痛扁看看,看到這篇文章先推<(_ _)>
2023-06-23 05:26:25
shioubi-鐵板燒好吃
推佬的經驗分享 謝謝你 這學期選修了電腦圖學 看了這篇之後對即將摸到/學到的一些基礎知識又有了多一些的認識 <(__)>
2023-09-24 22:54:33

更多創作