Computer Graphic --- Shadow

      在電腦圖學領域內 , 陰影 ( Shadow ) 的研究也是很重要的一門領域 , 場景中若缺乏陰影 ,會顯得不真實.而看起來是這麼平凡, 隨處可見且理所當然的 shadow , 而在早期的遊戲動畫產業,想要能即時的 (real time) 計算它並呈現完美的陰影效果, 是很困難的. 甚至現在很多的3D遊戲還是繼續用假的陰影來欺騙我們的眼睛 ( 人類的眼睛是很容易被欺騙的^^), 貼一張看似物體形狀的 (大多是圓形)的陰影在腳色的腳底下跟著腳色移動 , 看似太陽從正上方照下來的陰影形狀 圖一

 (圖一)

何謂假的陰影:  沒有正確的得知場景中物體彼此之間的遮蔽關係跟它們的可見度( visibility )

何謂真的陰影:  透過任何演算法, 正確地得知場景中物體彼此之間的遮蔽關係 , 並計算出它

                             們的可見度 ( visibility)   (圖二)

 (圖二)

要正確計算每個物體的 visibility , 最直覺且正確的算法就是:

(1). 從這個物體中心往四面八方射出無限多條追蹤線 ( tracing line ) , 積分出它的可見度 (圖三)

 (圖三)

但上述方法(1) , 還不太能用在很需要即時運算反應的遊戲產業上 (但我相信未來的 GPU繪圖

硬體設備越來越厲害時,有機會達到逼真且即時計算的陰影效果),取而代之的有兩種方法

(2) Shadow Mapping  (3) Shadow Volume , 這邊先大改講一下兩種方法的優缺點 ,下一篇會講他們的理論作法 , 與 coding 方式.

這兩種方法都可以大略的得知物體的遮蔽資訊 , 

Shadow Mapping :

目前遊戲業我相信應該還是以 Shadow Mapping 為主流 , 因為它實作簡單 ,且因為先天的演算法

條件在靜態場景上能發揮最大效能 , 不過會產生出來的陰影, 在先天演算法的設計下, 有很大的機會產生鋸齒狀的陰影外框 (圖 四 ) ,但經過許多的專家學者們的努力, 它已經被改良的非常好很多缺點都可以被克服, 所以在動態的場景上的效果表現已很不錯了 (註一) ,

(圖四)

Shadow Volume : 

此方法非主流 ,  因為它先天的演算法設計本身就不是很match 現行的電腦圖學發展情況 , 在場景中物體非常多 , 物體的 polygon 數量非常多 的情況下 ,

會導致繪製陰影的時間很久 , 如果又是動態場景 , 只能說悲劇的效能 , 更別提如果要做 soft shadow (註二),  就親自實做過的經驗 , 不建議再用 shadow volume 來實作陰影 ( 目前的學術與業界主流都是以 shadow mapping 為主 , 由這點可以看出端倪 , 別往死胡同裡去^^)

註一 :

   動態場景( Dynamic Scene) 指的是場景中物體可移動的情況 , 在學術界中 , 對動態場景的區別

   有分 : 1. 鏡頭移動   2. 物體移動   3. 光源移動   4. 全部都可以移動 

   移動的表現是:  1. 單純的平移(上下左右)  2. 旋轉   3. 型變 (形狀改變 ) 

   最好的情況當然是 , 演算法能適用在 上述任何情況!!

註二:

    真實的場景中 , 幾乎是看不到 hard shadow 的 , 如果只用 shadow mapping 或 shadow 

volume 計算 visibility , 被遮到給0 , 沒被遮到給 1 ,  boolean 的方式裝載 遮蔽資訊 , 只會有 hard shadow 的效果而已 , 之後會講解如何用 shadow mapping 做出 假的 soft shadow.

     

 ( Soft  Shadow)

 ( Hard Shadow)

   

Computer Graphics---Beginners_Chapter1.2_E

Polygon-mesh representation is the one of the general modeling methods. The basic idea is that using the triangle meshes to construct the shape of the scene’s object as shown in Figure 1.

Fig. 1

For example, we have to know which triangles make up the square and these triangles that are made up from which edges respectively. Finally, we also have to know these edges are constructed from which vertices as shown in Figure 2.

Fig. 2

Consequently, we should have the information of vertex, edge and face for a triangle. All the above information need to be store in a data structure. In order to efficiently develop, there are some common formats for storing these data such as the “OBJ” file format shown in Figure 3. In the gray block, the small letter v represents a vertex, and the three numerical values behind it are the coordinate of it in three dimensions. 

Fig. 3

Letter vt depicts the texture coordinate uv of a vertex. This coordinate can be used to map the corresponding pixel’s color in the texture map as shown in Figure 4. 

Fig. 4

Letter vn describes the normal vector of a vertex and be used to compute the lighting interaction. Letter f represents a face that is made up from which vertices, and these vertices have their corresponding normal vectors and texture coordinates. We also can define the materialof the model to simulate the rough skins and the glossy feeling. These information are placed in the ”mtl” file.

However, if only has model information, it is not sufficient to synthesize the realistic image. We need to set up the lighting information to illuminate the model and the observer ( camera) to receive the reflective radiant flux .We also have to decide the position of the screen for displaying the final result. We can use the Graphics API such as OpenGL and Direct3D to finish the above operations as shown in Figure 5. The further introduction of the rendering processing in current graphic hardware will appear in next part.

Fig. 5

Computer Graphics---Beginners_Chapter1.2_C

多邊形網狀表示法是目前通用的物體模型近似建構的方式之一, 基本概念是由最小的多邊形(三角形網狀)去組合出物體的形狀如圖一

圖一

舉例來說, 一個正方形表面, 要先知道是由哪兩個最小單元的三角形網狀面組成, 而這兩個三角形又是個別由哪三條邊線所建構出來的, 最後每條邊線是由哪兩點構成的, 如圖二.

圖二

所以對於一個最小單元的多邊形(三角形網狀),我們應該要有其頂點的資訊, 線的資訊和面的資訊.上述的資訊都需要存在資料結構內 , 但若每個人對於模型所需的資訊存放格式都不同的話, 對於後續的研究多少會造成發展上的阻礙, 故出現了一些通用的存放格式.以OBJ 檔案格式為例,如圖三, 先看灰色區塊, 小寫英文字母v ,代表某個頂點,其後面三個數字分別是它的x,y和z座標位置(此時的坐標系還是物體自己本身的坐標系)

圖三

字母vt, 代表的是某個頂點的紋理座標 u和 v, 此紋理座標的功用是透過其座標值對應到的紋理像素顏色,模擬出物體表面的材質感,如圖四

圖四

再來看到字母vn, 代表的是某個頂點的法向量值, 此法向量可以用來計算出光線照射到物體上的反應, 最後看到 f 字母 ,代表的是某個面分別是由哪三個頂點構成, 而每個頂點又會有對應到的法向量及紋理座標值

我們還可以設定此模型它的質地表現, 像是皮膚的粗糙感, 玻璃的光滑感,這些資訊都可以放在某個mtl檔內.

有了模型的描述後, 對於最終的呈像,就跟真實的世界一樣,需要設定光源資訊讓光線照亮物體,並且也要有觀察者,接收反射出來的光進入我們的眼睛(鏡頭), 還要決定好成像的位置在螢幕的哪邊, 這些設定以及對硬體輸出輸入裝置的操作, 可以透過現有的API 幫我們輕鬆做到像是: OpenGL , Direct3D等, 如圖五, 在下一個小節將更進一步的介紹目前繪圖硬體的成像原理

圖五

Computer Graphics---Beginners_Chapter1.1_E

Using computer to render the images which conforms to you for displaying or applications and making the human life being better can be called computer graphics. We can roughly divide the computer graphics into photorealistic rendering and non-photorealistic rendering.

In general:

Photorealistic rendering --- Rendering the realistic scenes by using computer.

Non-photorealistic rendering ---Rendering the artistic images by using computer.

(Non-photorealistic rendering is various and diversified, so we first understand that how to render the realistic scenes by using computer.)

All things are discrete in computer, and the final results are displaying by the screen of computer. Now Imagining that dividing your screen into a lot of squares which are same size as shown in Figure 1. When the one of they gets the instruction, it will be shaded by the color which fits your mind. Formally, we call it pixel. Consequently, when you use the computer to render some objects, the problems are appearing, For example, how the scene’s objects are represented, how many pixels of the object, where are they in the screen and how to compute the pixel’s color satisfy the human visual perception.

Fig. 1

A. Parametric Patches and Curves: We can use the mathematical formulation to create the curves by input some parameters. The shapes of the objects in two or three dimension all can be represented by using a lot of curves. The advantages are that the small memory storage and the surfaces of the objects can be easy controlled.

(Key Works: Bezier curves, B-spline representation)

B. Polygon Meshes: Objects are composed of many polygons as shown in Figure 2. The basic element of polygons for approximately constructing the surfaces of objects can be a triangle (face) or not. For example, three vertices can form three edges and three edges can form one triangle. Therefore, the more polygon meshes can construct the finer model. This method is simple and intuition. But it needs more memory.

Fig. 2, From: wiki

C. Volumetric elements : This method is a spatial subdivision technique. We can divide the scene’s space into many cubes (or call voxels) and find that how many cubes the objects occupy and where are they as shown in Figure 3. We can use octrees to organize the voxels. We also can use different volumetric elements like sphere. This method is suitable to simulate the light scattering and becomes more popular recently.Note that the different geometric component may influence the performance of rendering and the image’s quality.

Fig. 3, From:  Thiedemann et al.[2011] ,Voxel-based Global Illumination

D. CSG: We can model the objects by combining a set of geometric primitives, and then apply the Boolean operations to decide the accurate permutation and combination of the primitives as shown in Figure 4. This method is suitable to the mechanize objects. But it is difficult to the fine objects unless you have a lot of various geometric primitives.

Fig. 4, From: Textbook

In summary, which methods of objects representation can we choose? In general, it is sufficient to most application when using polygon meshes. I will introduce the practical data structure and the general document of this method.

Computer Graphics---Beginners_Chapter1.1_C

利用電腦繪製出想要的圖片用來顯示或者應用, 使人類的生活更美好這就可以稱做電腦圖學. 在這裡我簡單的把圖學的領域分成擬真顯像跟非擬真顯像.

廣義來說:

擬真--用電腦描繪出逼真的場景

非擬真--用電腦描繪出具有藝術家風格的圖片

(非擬真的領域很多元且包羅萬象, 我們只要先了解如何用電腦計算出逼真的圖片就行了.)

在電腦的世界裡, 所有的東西都是離散化的表現 . 最終的圖片結果都將會透過你的螢幕顯示出來. 想像一下, 把你的螢幕切割成好幾個大小一樣的正方形,如圖一, 當收到指令訊號後, 每個小正方形將填滿該有的(你想要的)顏色 , 故可稱它為像素. 所以當你想要用電腦描繪出某個物體時,問題會有: 

1.物體該如何表示(不管是3D還是2D的物體)  

2. 物體所佔的像素有幾個且在螢幕的哪些位置 

3. 物體的像素顏色如何正確計算並符合真實的現象.

圖一

先來談談

1.      物體的表示 :  

a. 參數化的定義 b. 多邊形的定義 c. 容積單元定義 d. 可建構的立體幾何元件表示法 (CSG)

A.  參數化的表示: 可以利用參數化的數學式子, 定義出空間中的曲線 , 不管是二維還是三維的物體,其形狀可以由數條曲線去描繪,好處是只需要很少的儲存空間和對物體表面的控制可很自由

   ( 相關的知識 : Bezier curves, B-spline representation)

B. 多邊形的定義: 空間中的物體可以許多的多邊形去表示,如圖二, 可以看到多邊形的最小單位可以是一個三角形(面), 物體的表面可以近似的由無數個三角形去描繪.  任兩點可以表示出一條直線, 而三條線可以表示出一三角形, 所以物體精細度的控制來自於使用多少個多邊形去近似. 這種表示方式很直覺也很簡單,但需要的記憶容量就很多了.

圖二, From: wiki

C. 容積單元: 把三維的空間,分割成許多的立方體, 找出物體所占有的立方體個數及其位置, 算是空間的離散化表現,如圖三 ,我們可以把立方體稱為體素(Voxel),你可以用Octree 的方式去儲存, 當然不一定要立方體也可以是球體等幾何元件, 近年此方法有越來越流行的趨勢, 尤其在light scattering的應用上此方法有其優勢(不同的幾何元件有可能會影響最終的圖片品質或者計算效能)

圖三, From: Thiedemann et al.[2011] ,Voxel-based Global Illumination

D. CSG: 物體的形狀可以是一組許多不同的幾何元件所組成的, 並利用布林運算決定每個幾何元件的組合方式如圖四, 可以觀察出對於機械型式的物體用這種方式很簡單, 但對於細緻的物體這種方法很難做到, 並且對於物體形狀的編輯很不彈性,除非你事先有很多不同的幾何元件.

圖四, From : Textbook

這麼多表示方式, 該選哪種? 一般來說, 大部分的應用都可以用多邊形的方式去定義物體, 在下小節會介紹這種方式的通用文件格式.

             

Computer Graphic(CG) --- Beginners

  In order to record my learning processes of computer graphic, i try to write some know-how about CG in here. Note that i don't guarantee that  this knowledge is absolutely correct, however you still can take some benefits from here. I will write two versions. One is Chinese, the other is English.

Computer Graphics is the profound scholarship, and it has been developed until now. I only provide simple but significant and fundamental knowledge here. You can obtain some related works from this website (1) for promoting yourself. The learning processes will be partitioned into six parts. The first three chapters depict basic theory, and last three chapters describe some applications in programming. "Shader" also will be used to produce special effects. Note that i will not explain carefully because this article is just a record. But hope that it gives you some assistance.

 電腦圖學的領域非常的廣及深, 事實上到現還在繼續發展, 在這邊我只能提供簡單但重要的基礎知識, 若你想更進一步的探索可以到這個網站 (1) 查詢相關的文獻 , 相信不久後,你也能成為這個領域的高手. 我會把學習步驟切割成六大章節,前三章節簡述相關的理論, 後三章節會是實務程式部分, shader的部分也會提到 ,  再次強調我不會講得仔細, 因為這只是個紀錄. 希望對你是有幫助的.

Website : (1) http://kesen.realtimerendering.com/

  Bezier curve  - 貝茲曲線

          修電腦圖學的一定聽過它, 詳細說明可以去wiki看,在我認為它是種可參數化(畫XD)的曲線,為什麼要理解它呢? 因為有時候你必須自己製造所想要的曲線出來,,你可以由輸入的起點,控制點,終點做出想要的曲線出來!!

這裡實作二次Bezier curve:

首先要知道線性貝茲曲線的定義:

B(t) = P0 + (P1-P0)t  = (1-t)P0 + tP1  , t在[0,1]區間內  --------(1)
P0,P1可以想成一條直線上的兩個端點,而在這條直線上的任意一點為B點,
(其實由向量空間可以看的出來,B點為原點(P0)加上Vector(P1-P0)做normalize後乘以純量 )
所以參數化表示後就如同公式(1)

在這邊可得知一次貝茲公式可得 一條直線線段,那二次就可以得到曲線線段了:

二次貝茲曲線還要再加入第三個點--->控制點  ,由控制點來控制曲線彎曲的幅度如上圖
所以要求得B點很簡單先求得Q0點再求得Q1點,接者就可以求出目前的B點

a :  Q0(t) =  (1-t)P0 + P1

b:  Q1(t)  = (1-t)P1+  P2

c: B(t) = (1-t)Q0 + Q1

t 在0,1區間內

把  a跟b所求得的 Q0 跟Q1帶入 c式  可得 -> B(t) = ((1-t)^2)*P0 + 2(1-t)(t)*P1 + (t^2)*P2

這邊附上demo 影片 以及部分 C# code

code : private void calculate(PointF start,PointF control,PointF end)
{ if (t < 1)
{
B_t.X = ((float)Math.Pow((1 - t), 2)) * start.X + ((float)(2 * (1 - t) *t*control.X + ((float)Math.Pow(t, 2)) * end.X;

B_t.Y = ((float)Math.Pow((1 - t), 2)) * start.Y + ((float)(2 * (1 - t) * t)) * control.Y + ((float)Math.Pow(t, 2)) * end.Y;

g_for_image[0].FillEllipse(Brushes.Black, B_t.X, B_t.Y, 5, 5);



t = t + 0.01;

calculate(start, control, end);

}
}
;