初始化WebGL − JavaScript是用于初始化WebGL的上下文。
創(chuàng)建數(shù)組 − 我們創(chuàng)建JavaScript數(shù)組來(lái)保存幾何數(shù)據(jù)。
緩沖區(qū)對(duì)象 − 通過(guò)將數(shù)組作為參數(shù)來(lái)創(chuàng)建緩沖區(qū)對(duì)象(頂點(diǎn)和索引)。
著色器 − 我們創(chuàng)建，編譯和使用JavaScript鏈接著色器。
屬性− 我們可以創(chuàng)建屬性，啟用它們并使用JavaScript緩沖區(qū)對(duì)象相關(guān)聯(lián)。
制服− 我們還可以使用 JavaScript 制服(uniforms)關(guān)聯(lián)。
變換矩陣 − 使用JavaScript，我們可以創(chuàng)建變換矩陣。

最初我們創(chuàng)建幾何形狀所需的數(shù)據(jù)和它們傳遞到著色器中緩沖器的形式。著色器語(yǔ)言指向緩沖區(qū)對(duì)象，這作為輸入傳遞給頂點(diǎn)著色器的屬性變量。

頂點(diǎn)著色器

當(dāng)我們通過(guò)調(diào)用方法drawElements()和drawArray()啟動(dòng)渲染過(guò)程中，頂點(diǎn)著色器提供的每個(gè)頂點(diǎn)執(zhí)行在頂點(diǎn)緩沖區(qū)對(duì)象。它計(jì)算原始多邊形各頂點(diǎn)的位置并且存儲(chǔ)在不同的 gl_position。它還計(jì)算的其他屬性，例如顏色，紋理坐標(biāo)，以及頂點(diǎn)，這通常與頂點(diǎn)相關(guān)聯(lián)。

原始匯編

計(jì)算位置及每個(gè)頂點(diǎn)的其他細(xì)節(jié)之后，下一階段是原始裝配階段。這里三角形被組裝并傳送給光柵化程序。

光柵化

在光柵化步驟，在原始的最終圖像的像素被確定。它有兩個(gè)步驟 -

剔除− 最初的取向(是其正面或背面朝向？)多邊形被確定。所有這些三角形使用不當(dāng)取向不可見(jiàn)在觀看區(qū)域被丟棄。這個(gè)過(guò)程被稱(chēng)為剔除。
剪裁 − 如果一個(gè)三角形部分在觀看區(qū)域之外，則視圖區(qū)域之外的部分被去除。這個(gè)過(guò)程被稱(chēng)為剪裁。

片段著色器

片段著色器獲取

從頂點(diǎn)著色器不同變量的數(shù)據(jù)，
從光柵化階段元語(yǔ)，然后
計(jì)算顏色值頂點(diǎn)之間每一個(gè)象素。

片段著色器存儲(chǔ)在每個(gè)片段的每一個(gè)像素的顏色值。這些顏色值可以在片段操作進(jìn)行訪(fǎng)問(wèn)，我們將在下一個(gè)節(jié)學(xué)習(xí)和討論。

一些片段操作確定在所述原始的每個(gè)像素的顏色后進(jìn)行。這些片段操作可以包括以下 -

深度
顏色緩沖區(qū)混合
抖色

一旦所有的片段進(jìn)行處理，2D圖像形成并顯示在屏幕上。幀緩沖器是渲染管線(xiàn)的最終目的地。

幀緩沖

幀緩沖區(qū)的圖形內(nèi)存持有的場(chǎng)景數(shù)據(jù)的一部分。這個(gè)緩沖區(qū)包含細(xì)節(jié)如寬度和表面的高度(以像素為單位)，每個(gè)像素的顏色，深度和模版緩沖器。

上一篇：WebGL旋轉(zhuǎn)