3d變2d

昨晚左右手在一轉眼間就突然各多了一個作品上去,今天手上左邊是藍右邊是綠,雖然對扁皇政府有點不喜歡,但是為了保持中立,我還是不要把圖貼出來的好:P (絕對不是我懶惰)

話說Team Fortress 2這款遊戲據說valve做了10多年才完成這個作品,使用的市廣售台灣網路遊戲使用的插畫風格的shader(就是所謂的cartoon shader或賽璐璐),但是這個遊戲明顯的畫出高明許多的,而且更加接近漫畫的感覺.

其實這真的是3D,不是用畫的…

他的公式其實就很簡單,傳統的插畫式shader就是把顏色區塊先定出來,然後這個比較特別的大概就是Rim Highlighting…下面兩張有著明顯的差異..

要做這樣的東西,大概就是可以參考一下以下幾篇paper
最重要的大概就是Gooch 1998,Lake 2000,BARLA 2006,不過我還沒有很仔細的看完,看完在來寫心得報告..

BARLA, P., THOLLOT, J., AND MARKOSIAN, L. 2006. X-Toon:
An Extended Toon Shader. In International Symposium on Non-
Photorealistic Animation and Rendering (NPAR), ACM.
DECAUDIN, P. 1996. Cartoon Looking Rendering of 3D Scenes.
Research Report 2919, INRIA, June.
GOOCH, A. A., GOOCH, B., SHIRLEY, P., AND COHEN, E. 1998.
A Non-Photorealistic Lighting Model for Automatic Technical
Illustration. ACM Press/ACM SIGGRAPH, New York, M. Cohen,
Ed., 447–452.
GOOCH, B., SLOAN, P.-P. J., GOOCH, A. A., SHIRLEY, P., AND
RIESENFELD, R. 1999. Interactive Technical Illustration. In
Proceedings of the 1999 Symposium on Interactive 3D Graphics,
ACM Press, New York, J. Rossignac, J. Hodgins, and J. D. Foley,
Eds., 31–38.
GREGER, G., SHIRLEY, P., HUBBARD, P. M., AND GREENBERG,
D. P. 1998. The Irradiance Volume. IEEE Computer Graphics
and Applications 18, 2 (/), 32–43.
HEIDRICH, W., AND SEIDEL, H. 1998. Efficient Rendering of
Anisotropic Surfaces Using Computer Graphics Hardware. In
Image and Multi-dimensional Digital Signal Processing Workshop,
315–318.
LAKE, A., MARSHALL, C., HARRIS, M., AND BLACKSTEIN, M.
2000. Stylized Rendering Techniques for Scalable Real-Time 3D
Animation. ACM Press, New York, J.-D. Fekete and D. Salesin,
Eds., 13–20.

不過什麼都不看的話,倒是有個公式直接用就行了,其實是很簡單的方法,卻可以這樣應用,了解他後會發現數學的奧妙…

polygon strip

polygon strip或稱為 triangle strip，通常會用後者稱呼它，因為一般都是畫三角形。

triangle通常有 triangle strip 、 triangle fan 、 triangle list

Triangle List自然就是獨立的三角形，1到3構成一個三角形，4到6構成第二個三角形，看起來還蠻浪費的(會有重複的邊，45 跟67兩條線就重疊了)，不過很直接，看起來就像這樣

triangle strip是前三個點構成一個三角形後，第四個點與前兩個點(第2第3個點)構成第二個三角形，後面以此類推，示意圖如下

在某些硬體上，特別是比較舊的SGI硬體還有某些電視遊樂器，用triangle strip可以減少vertices送到顯示的流水線上的數目，對於效能很有幫助，因為大部分的三角形(除了第一個)，只需要用一個頂點就能表示出來。
但是在比較近期的PC顯卡，有著比較短的vertex cache，還有效能的提高，已經讓triangle list的速度跟triangle strip的速度一樣快，所以triangle strip在PC上可能沒有以前這麼重要了。

triangle fan是前三個點構成一個三角形後，第四個點與第一個點還有前一個點(第3個點)構成第二個三角形，後面以此類推，示意圖如下

跟上面的triangle strip一樣，在某些硬體上的確能得到比較佳的效率。但是似乎比較建議用前面兩個。

在PSP的SDK中對polygon的type共分了以下這些，所以上面這三種幾何是必須要知道的也是基本的。
* GU_POINTS – Single pixel points (1 vertex per primitive)
* GU_LINES – Single pixel lines (2 vertices per primitive)
* GU_LINE_STRIP – Single pixel line-strip (2 vertices for the first primitive, 1 for every following)
* GU_TRIANGLES – Filled triangles (3 vertices per primitive)
* GU_TRIANGLE_STRIP – Filled triangles-strip (3 vertices for the first primitive, 1 for every following)
* GU_TRIANGLE_FAN – Filled triangle-fan (3 vertices for the first primitive, 1 for every following)
* GU_SPRITES – Filled blocks (2 vertices per primitive)

幾何圖形表示

幾何圖形的表示法好像有三種,implicit, explicit, and parametric.

在CG(computer grphic)中最常用的是parametric.

雖然有三種,但是有些地方寫explicit又稱作parametric,就變成兩種了,真是讓人混淆

我發現在CG中explicit好像可以忽略,以2d line來說
explicit representation :  y = mx+ c
implicit representation:  y -mx – c =0
parametric representation: x = x0+t(x1-x0) ,y=y0+t(y1-y0)

2d curve的話
explicit : y=f(x)
implicit : f(x,y) = 0
parametric: x=f(t), y =g(t)

所以其實誰又稱為誰就不那麼重要了,知道他們的表示法就好了.

More Transforms

一位美國的詩人Robert Penn Warren曾寫:
“What if angry vectors veer
Round your sleeping head, and form.
There’s never need to fear
Violence of the poor world’s abstract storm."
很符合Transforms要表達的意涵…

Transform在圖學中幫助我們定位(position)、變形(reshape)、移動物件燈光攝影機(animate objects、lights、cameras)

Real-Time Rendering書中將Transforms分成5個小節: Basic Transforms、Special Matrix Transforms and Operations、Quaternions、Vertex Blending、Projections.

上一篇是屬於Basic Transforms。稍微解說一下
1.Linear Transformations 是說 F(a)是線性的
F(a+b) = F(a) + F(b) and F(ka) = kF(a)

2.Affine Transformations 是指linear transformations後面多一個translation.所以可以這樣說，所有的linear transformations都是affine transformations. 但是反過來就不事了.
大概是這樣 v’ = vM + b. 

3.Invertible Transformations是指轉換可逆.就是可以Undo它。
假如F(a)是invertible就是表示會有一個F^-1使得F^-1(F(a)) = a

4.Angle-preserving Transformations很簡單，就是夾角在經過transform後是不變的。

5.Orthogonal Transformations ,會被稱為Orthogonal Transformations的就只有Translation、Rotation跟Reflection。

6.Rigid Body Transformations,顧名思義，這東西就只是改變位置跟方向而已，其他都是不變的。Reflection不能算是Rigid Body Transformations.

Special Matrix Transforms and Operations包含了Euler(尤拉) Transform跟Rotation about an Arbitrary Axis(任意軸旋轉)

Transformations’s types

在圖學中,transformation是很重要的一節,包含了很多的轉換,大概來歸納一下.

Transform	Linear	Affine	Invertible	保留角度	Orthogonal	Rigid Body	保留長度	Areas/ volumes preserved	Determ- inant
Linear Transformations	Y	Y
Affine Transformations		Y
Invertible Transformations			Y						≠0
Angle- preserving Transformations		Y	Y	Y
Orthogonal Transformations			Y	Y		Y			±1
Rigid body Transformations		Y	Y	Y	Y	Y	Y	Y
Translation		Y	Y	Y	Y	Y	Y	Y
Rotation(1)	Y	Y	Y	Y	Y	Y	Y	Y	1
Uniform scale(2)	Y	Y	Y	Y					K的n次(3)
Non- Uniform scale(2)	Y	Y	Y
Orthographic Projection(4)	Y	Y							0
Reflection(5)	Y	Y	Y		Y		Y	Y(6)	-1
Shearing	Y	Y	Y					Y(7)	1

(1)基準點在2D中是原點,3D中是通過原點的任意軸.
(2)基準點都是原點,而且使用正的scale參數.
(3)determinant在2D是平方,3D中是3次方.
(4)投到一條線(2d)或者一個平面(3d)上分別都經過原點
(5)基準是一條線(2d)或者一個平面(3d)上分別都經過原點
(6)不考慮負的區域.
(7)這是不可能的事情…….

幾本Graphic相關的Book List

3D Math Primer for Graphics and Game Development
這本書真是簡單易懂，雖然以computer graphic系列的書來說，這本算是沒什麼價值，但是以一些基本數學基礎來說這本還算蠻好的，因為有3/4都在講3d空間中的transformatins，所以說這本書涵蓋的主題有點少

Mathematics for 3D Game Programming and Computer Graphics, Second Edition
這本談論到的主題比較多一點了，把一些Game裡常用的東西都有講到一些，算是也蠻清楚的，還有一些簡單物理運算的topic

上面這兩本都是for Game Programming，所以內容會有點簡單，沒有這麼深，一般來說，math的東西大都被放在附錄裡，下面這幾本就是比較深入講graphic方面的了，當然除了書，每年的Siggraph跟GDC的paper都要看一下，才能算稍微跟在站在世界頂端的人後面。

Computer Graphics: Principles and Practice in C
號稱四人幫寫的一本書，每個作者都大有來頭，這本書算是出版的比較久了(第一版1990出版、第二版1995年出版)，所以很多人推崇，裡面有[基本的raster實作][graphic hardware的細節][UI][color理論][shading][image process][animation]等，雖然感覺上很老舊，但是從最小的觀念上來是挺不錯的。reference有將近40頁保守估計應該有600多個reference。

Introduction to Computer Graphics
基本上就是上面那本的精簡版(1993年出版)。

3D Computer Graphics (3rd Edition)
這本書感覺上方向跟上面的不太一樣，不過一樣是在說graphic，這本書說實話比上面那兩本好理解多了。

Fundamentals of Computer Graphics (我沒有) 作者網頁
這本書算是比較最近出的，2005出版，內容沒有仔細看過，不過比較多近代在用的東西。

上面這四本算是graphic可能都會提到的教科書，下面還有一本書也是講圖學的，只是在重點在Real-time

Real-Time Rendering (2nd Edition)
有提到一些遊戲的效果是如何產生的，算是很好的一本書，不過還沒好好看過。

下面還有幾本算是比較偏的，算是額外的讀物

Advanced Game Development with Programmable Graphics Hardware
其實就是在講Shader，但是提到多種演算法來做shader，算是不錯的參考書。

High Dynamic Range Imaging: Acquisition, Display, and Image-Based Lighting
講HDR的理論，顏色理論，光線理論，對攝影、image processing都有很大的幫助 :p

ShaderX已經出到ShaderX4了 也是講Shader的

InvSqrt

今天看到這個http://blog.ijliao.info/archives/2006/12/04/2739/

裡面貼了在Beyond3D裡的一則新聞,主要是下面這段做<開根號的倒數1/sqrt>的code,他的寫法跟效能讓人感到非常神奇,最神奇的尤其是0x5f3759df這個數字,推導出的人肯定是個天才.

float InvSqrt(float x)
{
float xhalf = 0.5f*x;
int i = *(int*)&x; // get bits for floating value
i = 0x5f3759df – (i>>1); // gives initial guess y0
x = *(float*)&i; // convert bits back to float
x = x*(1.5f-xhalf*x*x); // Newton step, repeating increases accuracy
return x;
}
至於只想求Sqrt(float x)，它是return 傳入值 * x

求root大家都用牛頓法來逼近一個近似值,這就不用說了,上面的code應該快在他用特別的方法做一些bit hack,還有那個magic number來得到一個initial guess,雖然我的也比一般使用1/sqrt快,但是相較之下顯的弱了一些,而且我作弊,是用SSE指令集,先用rsqrtss(這就已經是平方根倒數了)當做一個initial guess,然後再用牛頓法求root ,在不支援SSE指令集的機器上就沒用了,不過如果把上面那段改成SSE來做不知道效能會不會再提升一次 😛 不過大概是沒辦法改,能改的話原作者就改了,有空來看看

下面這是我的實作方法，也不賴啊
float InvSqrt( float F )
{
 const float fThree = 3.0f;
 const float fOneHalf = 0.5f;
 float temp;

 __asm
 {
  movss xmm1,[F]
  rsqrtss xmm0,xmm1   // 1/sqrt estimate (12 bits)
       // 牛頓法的iteration  (X1 = 0.5*X0*(3-(Y*X0)*X0))
      //  我們只做一次iteration
  movss xmm3,[fThree]
  movss xmm2,xmm0
  mulss xmm0,xmm1   // Y*X0
  mulss xmm0,xmm2   // Y*X0*X0
  mulss xmm2,[fOneHalf]  // 0.5*X0
  subss xmm3,xmm0   // 3-Y*X0*X0
  mulss xmm3,xmm2   // 0.5*X0*(3-Y*X0*X0)
  movss [temp],xmm3
 }

 return temp;
}

所以結論在他的initial guess是：
int i = *(int*)&x; // get bits for floating value
i = 0x5f3759df – (i>>1); // gives initial guess y0
那個 i

而我的initial guess是：
rsqrtss xmm0,xmm1
那個xmm0
為什麼已經算出開根號倒數還要再算呢?? 因為我要讓他更快
規格書上rsqrtss是這樣運作的
DEST[31-0] ← APPROXIMATE(1.0/SQRT(SRC[31-0]));
假設一個暫存器有128bit，也就是說它只把後面的32bit拿來算然後丟出去，所以算出的只是一個近似值
我們就是需要這個近似值，然後再去用牛頓法逼近

Depth of Field 景深

景深(Depth of Field)
就是前景清晰但是背景模糊的效果
http://i.i.com.com/cnet.g2/images/2006/128/926632_20060509_screen002.jpg
用來做焦點的突顯 在電影裡常常用到 如果要拍出這樣的東西需要一點技術
有人問怎麼做 我只是大概說了 跟HDR概念差不多..
竟然有人在巴哈說了這樣的話
        其實跟HDR沒什麼關係
        這個效果在LDR運算環境下就可以做出來了
        比較簡單的方法有兩種
        一個是對投影矩陣以焦點為中心
        把比焦點遠和比焦點近的座標空間分別添加不同的位移量
        http://www.glprogramming.com/red/images/Image125.gif
        然後把不同位移量的投影矩陣所產生的多張圖片合併
        不過這個方法速度比較慢
        另一個方法是直接取目前的ColorBuffer畫面和對應的Z-Buffer資料
        以Z-Buffer中各Pixel的Z值和焦點的Z值的差值,做為Blur強度的參數
        然後以此資訊對ColorBuffer進行各部位Blur程度不同的Blur處理
        跟焦點的深度誤差大的Pixel就會比較模糊
        跟焦點的深度誤差小的Pixel就會比較清楚
        這方法速度比較快
        現今遊戲所使用的通常都是這種方式
        事實上 要做到接近真實的感覺必須要用HDR
HDR才夠表現出自然光 RGBA可以到16bits 或32bits
http://www.daionet.gr.jp/~masa/rthdribl/Image/dof6_00.jpg
真想問他是看到哪個遊戲用那種方法
目前用硬體加速的方法都是用 後處理(post-processing)
就是先把結果render到一張材質上 再針對這張材質做處理
最後在把這張材質輸出到螢幕上
大部分知名的賽車遊戲都是用後處理來處理車身對環境的反射
然後景深就是用後處理經過兩個pass
pass1:將場景附帶一些資訊render出來
           這我見到的方法就有兩種1.是render出一張A8R8G8B8跟一張G16R16(放Depth16跟Blurriness16)的圖 2.render出一張A16B16G16R16

pass2:將剛剛的圖做一些filter(一般來說是先縮小在blur它，但也有許多其他方法)，常聽到的高斯模糊也可以用來做filter

最後在合成就能產生景深 這樣的效果既好 又是給GPU算的 比巴哈回我那個蠢方法好多了

而在非HDR下我知道 可以用Jittering的方法來算 用查表的方式先建好表格 執行時查表省去運算的步驟
http://www.glprogramming.com/red/chapter10.html

但是他後面提的一個pixel一個pixel針對z-buffer的計算 我就不信他給CPU算 800*600 可以跑遊戲，可以跑即時的遊戲 我認為他只能做影像處理

看他IP是中央的，看來又是個嘴砲，不過我也不確定加上我與世無爭 所以不想回他:PŠ

All Your Game-Art Needs! (Tutorials, Model and Texture Downloads, and More)

Tutorials

Search
TutorialFind (3D)
TutorialFind (2D)

Low Poly Modeling (& Skinning)
Character Model 1 (non-specific)
Character Model 2 (3DS Max)
Character Model 3 (Maya)
Character Model 4 (3DS Max)
Character Model 5 (Anim8tor)
Character Model 6 (Milkshape 3D)
Female Model 1 (Milkshape 3D)
Zombie (Milkshape 3D)
Orc Head (3DS Max)
Head 1 (Anim8tor)
Head 2 (Anim8tor) (Warning, site crashes Opera. Use IE)
Knight 1 (Anim8tor) (Warning, site crashes Opera. Use IE)
Modeling for Animation (non-specific)
Polygon Reduction (Anim8tor)
Building a House (MilkShape 3D)
Skinning a House (MilkShape 3D)
Assault Rifle (MilkShape 3D)
Car: Audi TT (MilkShape 3D)
Car: Ferrari F360 (MilkShape 3D)
Simple Interior (MilksShape 3D)

Texturing
Seamless Textures
Skin Tones
Texturing a Face
Hair
Star Field
Planets
Landscape
Trees
Concrete
Painting a Tree (very large .JPG)

Full Processes
3D Level Design
Zombie: Part 1 | Zombie: Part 2 | Zombie: Part 3 | Zombie: Part 4 | Zombie: Part 5 (MilkShape, PhotoShop, & Character FX)
3D Discovery (many tutorials)
Broad Horse Overview
Designing Arcade Computer Game Graphics (Full book)

Sprite & Tileset Creation
The Complete Guide to Isometric Pixel Art

Effects
-dead links removed-

Rigging & Animation
-dead links removed-

Drawing – Characters & Design
Drawing Resources thread
Human Head
Human Hands
Car

Software Specific
Many Anim8tor Tutorials
MilkShape 3D Basics
Many GIMP Tutorials
GIMP website

Downloads

Models
TurboSquid Model Search
TurboSquid Model Packages
Many Free Models (Dwarf, Zombie, Guns, Cars, etc)
Model packs of weapons, vehicles, and more (in .DMF file format)

Textures
Mayang free textures
Texture Search 1
Texture Search 2
Free Textures 1
Free Textures 2
Free Textures 3
Free Textures 4 (Must register as member)
Texture Packages 1
Texture Packages 2 (Under “Miscellaneous" – View samples here)
Tiled Background Textures
20 Seamless Textures – free
Cubemaps

Tile Sets
Numerous Tile Sets

Sprites
Sprites, Vehicles, Random Animated
Free Sprites 2
Various Sprites (& Tiles)

Photoshop Plugins
Photoshop plugins, brushes, shapes, styles, etc

Effects
High-Res HDRI Map-Pack 1
High-Res HDRI Map-Pack 2
High-Res HDRI Map-Pack 3

Fonts
Font Website Listing
1001Fonts.com
Fontica.com
Fonts as GIFs

Need the Software to do these Tutorials or to use the Downloads?
Check out the 3D & 2D Software Information thread.

Siggraph 2005 paper

雖然沒有去 不過在家裡也是可以看

http://www.cs.brown.edu/~tor/sig2005.html