WEBGL 2D遊戲引擎研發系列 第一章

WEBGL 2D遊戲引擎研發系列 第一章 <新的開始>

~\(≥▽≤)/~HTML5遊戲開發者社區（羣號：326492427）

轉載請註明出處:http://html5gamedev.org/

 

目錄

• HTML5 2D遊戲引擎研發系列  第一章 <一切的開始>
• HTML5 2D遊戲引擎研發系列 第二章 <磨劍>
• HTML5 2D遊戲引擎研發系列 第三章 <Canvas技術篇-畫布技術-顯示圖片>
• HTML5 2D遊戲引擎研發系列 第四章 <Canvas技術篇-畫布技術-基於手動切片動畫>
• HTML5 2D遊戲引擎研發系列 第五章 <Canvas技術篇-畫布技術-紋理集複雜動畫>
• HTML5 2D遊戲引擎研發系列 第六章 <Canvas技術篇-畫布技術-混色特效和粒子>
• HTML5 2D遊戲引擎研發系列 第七章 <Canvas技術篇-畫布技術-鼠標偵聽器>
• HTML5 2D遊戲引擎研發系列 第八章 <Canvas技術篇-基於頂點繪製與變形>
• WEBGL 2D遊戲引擎研發系列 第一章 <新的開始>
• WEBGL 2D遊戲引擎研發系列 第二章 <顯示圖片>
• WEBGL 2D遊戲引擎研發系列 第三章 <正交視口>
• WEBGL 2D遊戲引擎研發系列 第四章 <感想以及矩陣>
• WEBGL 2D遊戲引擎研發系列 第五章 <操作顯示對象>
• WEBGL 2D遊戲引擎研發系列 第六章 <第一次封裝>
• WEBGL 2D遊戲引擎研發系列 第七章 <混色>
• WEBGL 2D遊戲引擎研發系列 第八章 <批處理(影分身之術)>
• WEBGL 2D遊戲引擎研發系列 第九章 <基於UV的模擬切片>
• WEBGL 2D遊戲引擎研發系列 第十章 <紋理集動畫>
• WEBGL 2D遊戲引擎研發系列 第十一章 <着色器-shader>
• WEBGL 2D遊戲引擎研發系列 第十二章 <粒子發射器>
• WEBGL 2D遊戲引擎研發系列 第十三章 <Shader分享>
• 遊戲技法 2D遊戲引擎研發系列 第一章 <優化技巧>
• 遊戲技法 2D遊戲引擎研發系列 第二章 <計時器>
• 遊戲技法 2D遊戲引擎研發系列 第三章 <基於UV的無縫圖像滾動>
• 遊戲技法 2D遊戲引擎研發系列 第四章 <基於形狀的碰撞檢測>

 

              HI,朋友們,歡迎來到本系列教程的第二季,WEBGL2D遊戲引擎研發系列,不知道你是不是和我一樣有夢想,內心永遠有一篇屬於自己的遊戲世界呢,技術快速發展的今天,每當我們到一個新的領域去學習如何製作遊戲,但是迎面而來的就是各種引擎,不知道你是否和我一樣渴望學習底層的知識,你是否也和我一樣沒有安全呢,對於工作而言,效率永遠是第一,能快速通過引擎開發出商業項目肯定是好的,但回想一下,我們這麼多年努力究竟學習到了什麼?創建一個地圖，加入尋路算法？做一個揹包系統?現在的新技術會越來越多,新的硬件平臺也越來越多,難道我們每跨越一個新領域都要期待是否有合適的引擎嗎？或者你可以考慮業餘時間自己也專研專研,當你瞭解底層的渲染原理後對引擎的使用也會更加順手,優化的想法也會越來越豐富,很多人想寫是出屬於自己的引擎卻發現需要很多的數學公式而放棄,或者是API很難理解,現在,不用擔心,我會毫不保留的把的公式留給你,我也不會發一大段沒有註釋的代碼讓你自己琢磨，HTML5遊戲開發者社區和9tech與你同在,有什麼不明白的地方歡迎來我們交流。

          好了,如果你現在正在聽歌建議換抒情一點的歌曲,因爲我們即將進入一個複雜而美妙的世界,老規矩,在開始講解代碼之前,我會把實現的原理告訴你,告訴你我們爲何要這樣使用API,當你瞭解原理之後再去使用代碼會有一種親切的感覺,如果你跟隨本章的學習之後掌握了WEBGL的知識那麼恭喜你,你也同時掌握了opengl的原理,它將伴隨你跨越任何平臺,現在讓我們開始吧.

兩個小夥伴的故事

           這是一個兩個小夥伴的故事,讓我們迴歸的到很早很早以前,那會還沒有像現在一樣科技發達,能做到的就是在計算機的顯示器中某個區域顯示某個顏色,這時有一個小夥伴按耐不住了,他提出了一個想法,就是數據共享,小夥伴在它的顯示器上通過網格顯示出了一副圖像,他非常的興奮和開心,他希望分享給別人,希望能在別人的顯示器顯示,現在他創作的圖像是這樣的

             他思考了許久,如何才能把這圖圖像傳遞給別人呢,或許他應該發明一種圖像的格式用來存儲這些像素信息,於是他就創造了用於存儲這幅圖像的數據格式,在我們現在看來,它有的時候叫bmp有的時候叫jpg更多的時候叫png,不管怎麼樣,他成功了,現在他開心的拿着這幅圖像的信息找到了他的小夥伴,HI,朋友,我這裏有一副超越畢加索的畫你要看看嘛,於是,兩個小夥伴開始商量着如何才能在另外一臺電腦上顯示這幅圖像,小夥伴說,HI,朋友,你能通過我的數據創建和我的圖像寬度高度一樣的網格嗎？另一個小夥伴說,沒問題,那我們就叫這個過程是柵格化吧,於是,這樣一個空的網格出現了,

             哇，兩個小夥伴都驚呆了,他們成功了第一步,現在某人有說了,HI,朋友,那你能採集我的圖像信息的像素並且記錄他們的座標在你的網格里填入相同的顏色嘛?,另一個小夥伴說,沒問題,那我們就叫這個過程爲紋理採樣吧,於是他們開始紋理採樣,過程是非常愉快的

            又一副超越畢加索的畫要出來了,在作品完成之際,小夥伴又有了新想法,HI,朋友,如果我們對這幅圖像放大或者縮小會怎麼樣?小夥伴說,沒問你,那你可以先創建這圖圖像的2倍大小的網格吧,然後我們讓他們的數據信息都乘以2怎麼樣,於是兩個小夥伴又開始了新的創作,比如這樣

                細心的小夥伴發現原來在(0,5)的點在放大的圖的(0,5)*2=(0,10)的點上了，原來長度爲6的像素格子現在爲12了,這正好是他們想要的效果,小夥伴說,這太神奇了,要不我們叫這個過程爲插值計算吧,後來,小夥伴又有了新的想法,如果我們要移動這圖圖像怎麼辦呢？那我們之前的邏輯是不是移動到新的位置後還要再計算一次呢？小夥伴說,之前我們用的是絕對座標系,這樣太麻煩了,我們新創建一個座標系吧,叫它UV怎麼樣？U代表X軸的取樣範圍,V代表Y軸的取樣範圍,他們的範圍值是0~1,1代表原圖的最大值,這樣我們就不用關心這個圖像在什麼位置或者如何縮放了，於是小夥伴開始了新的創作

              通過UV座標系小夥伴不用再關心圖像的XY究竟在什麼位置了,而只關心取樣的範圍是多少,只要利用插值計算後對應最大值就可以了,小夥伴開始了各種各樣的實驗

把U的最大取樣範圍設置爲0.5

                這樣就等於再原圖最大取樣到50%，或者也可以說是用原圖的50%填充了新的網格,下面再把V的最大值設置爲0.5

                哇,通過UV,小夥伴們成功的新網格里顯示了原圖的某一個部分,或者可以說原圖在新網格里放大了,不僅可以放大,還可以縮小,但是縮小會遇到一個問題,縮小後採樣範圍會大於原圖,比如你可以設置U和V的最大值爲2,但是原圖的UV座標系是0~1,2是超出範圍的,所以小夥伴們決定做2個選擇,其中一個選擇叫邊緣重複,也就是取樣超過邊緣了,那麼就用最後一次取樣的數據填充後面的數據,比如這樣(實際上這張圖重複的應該是透明區域,爲了方便演示,我們假設它的邊緣像素是有顏色的)

                這樣的好處在於,如果最邊緣的像素是透明的,那麼他們就會重複透明的像素,這樣看起來圖片周圍都是空的一樣,還有一種重複的方式爲紋理重複,也就是說取到了邊緣處又回到0開始重新取樣,這樣的效果看起來是這樣的

                   這樣採樣的好處就是可以在一個網格里循環重複渲染紋理的滾動,你可以上下滾動或者左右,再或者上左一起,只需要讓UV同時加上或者減去某個值,比如

               兩個小夥伴越來越開心,因爲他們利用UV座標系可以讓圖像在新的網格里任意縮放和位移了,這時候一個小夥伴說了,HI,朋友,之前我們創作圖像的過程太複雜了,能不能把這個過程交給計算機去處理呢?另一個小夥伴說,那你如何才能讓計算機知道你在畫什麼呢？這很簡單啊，兩點成線,三點成面,我們可以利用3個點的座標讓計算機知道我們將要在哪個位置生成一個面,我們可以定義2組信息,一組是頂點的接受循序,另外一組信息是頂點的實際座標點,,因爲計算機肯定要知道我們哪個頂點的循序對應哪個頂點座標對吧,比如我們這樣設置第一組信息(0,1,2),這樣設置第二組信息(0,0)(0,6)(6,6) ,這樣計算機器就應該知道怎麼定位這3個點了,比如這樣

               小夥伴說,計算機怎麼知道你的頂點呢？我們需要一個自動程序來識別他們吧,另一個小夥伴說,沒錯,我們創建一個小程序叫頂點着色器吧，它專門負責我們傳遞過來的頂點信息,和頂點相關的邏輯,每個頂點都會運行一次這個着色器,通過這個着色器我們可以柵格化我們的網格,比如這樣

             看吧,這樣我們就很簡單的讓計算機識別我們的新網格了,但是如果我們需要是矩形呢？另一個小夥伴說了,那就定義2個三角形吧,因爲2個三角形其中有2個頂點是共享的,所以我們只需要設置一個新的頂點循序和新的頂點座標就好了,比如這樣(0,1,2)(0,3,2) 頂點座標是(0,0)(0,6)(6,6)(6,0),這樣我們又節省資源又可以繪製出一個矩形.

                 現在計算機能根據我們的指示繪製出新的網格,那剩下部分就是開始採樣咯？沒錯但是在這裏之前我們需要把UV信息也傳遞到頂點着色器裏去,因爲只有通過頂點着色器我們才能計算出他們的中間插值，因爲實際上我們並沒有傳遞給計算每一個格子的UV座標，這個座標可以很容易的讓計算機器算出來,比如,0~1之間的插值是0.1,0.2,0.3,0.4,0.5 …..,最後我們需要把這些屬性傳遞給一個叫片段着色器(像素着色器),它是每個像素運行一次,當像素着色器接受到UV的插值座標後就會開始從原圖開始取樣了,它會把取到的結果最終輸出到畫面上,實際上這個過程還有很多種選擇,比如線性採樣,也就是說我們可以獲取當前像素片段周圍的像素點然後通過算法計算出一個合理的平均值來當作本像素的顏色值,這樣圖像會顯得真實一次過度也會平滑一些,還有一種是臨近採樣模式,這個速度比較快,但是圖像的效果不是很好,因爲它只是簡單的從周圍的像素取一個值沒有複雜的算法,除了他們還可以有其他的採樣算法,但目前來說我們常用的就是這2種了,比如你正在拼接某個圖塊時發現有細縫你可以利用臨近採樣模式降低細縫的顯示,現在,我們經過了一系列的步驟終於成功的顯示出了圖像,小夥伴們很興奮,要不我們總結一下吧.

1.創建頂點索引循序

2.創建創建頂點座標數據

3.創建UV座標數據

4.生成紋理

5.創建頂點着色器

6.創建片段着色器

7.上傳頂點索引

8.上傳頂點座標到頂點着色器柵格化

9.上傳UV座標到頂點着色器計算插值

10.上傳紋理數據到像素着色器並且接受UV的插值座標

11.通過UV插值座標從原圖採樣獲得顏色輸出到屏幕

              這是大致的流程了,於是兩個小夥伴開心幸福的生活在一起了,故事講完了,你現在對這套渲染流程有沒有一個大概的瞭解了？我們這裏列出的只是一個初略的框架而已,實際具體的流程可能比這個還要複雜,不過你可以放心,複雜的部分通常都是計算機底層的硬件幫你完成了,一般情況你只需要按照上面的步驟去繪圖就可以了,現在你可以回味一下,我們下一個章節就要利用WEBGL的API對應到這個步驟了,我相信你如果讀完了兩個小夥伴的故事的話,對後面的章節應該會有極大的信心了.

轉載請註明：HTML5遊戲開發者社區 » WEBGL 2D遊戲引擎研發系列 第一章 <新的開始>