webgl自學(xué)筆記——幾何圖形

發(fā)布時(shí)間：2017年07月16日作者： IT網(wǎng)絡(luò)文摘 (該文來自筆記，點(diǎn)擊查看原文)

D應(yīng)用的基礎(chǔ)元素：

1、canvas，它是渲染場(chǎng)景的占位符。標(biāo)準(zhǔn)html的canvas元素

2、Objects，這里指的是組成一個(gè)場(chǎng)景的所有3d實(shí)體。這些實(shí)體都由三角形組成。webgl中使用Buffer（vertex、index）來存儲(chǔ)管理這些3d實(shí)體數(shù)據(jù)。

3、Lights，如果沒有光照3d場(chǎng)景將看不到任何東西。webgl使用著色器來為場(chǎng)景中的光照建模。我們將會(huì)看到3d實(shí)體如何根據(jù)物理規(guī)律來反射和吸收光照，并討論不同的光照模型。

4、Camera，攝像機(jī)作為3d世界的視口。我們通過攝像機(jī)來開發(fā)和看到一個(gè)3d場(chǎng)景。我們要理解如何根據(jù)不同的場(chǎng)景來使用不同的矩陣操作，這些操作可以利用相機(jī)原理來建模。

webgl中的數(shù)據(jù)類型：

webgl對(duì)圖形有一種標(biāo)準(zhǔn)的處理方式，與我們擁有的表面的復(fù)雜性和頂點(diǎn)個(gè)數(shù)無關(guān)。只有兩種基礎(chǔ)的數(shù)據(jù)類型來表達(dá)3d物體的幾何形狀：vertices和indices（頂點(diǎn)和索引）。

Vertices： 代表3d物體的拐點(diǎn)，每一個(gè)頂點(diǎn)使用3個(gè)數(shù)字來表達(dá)想x,y,z；webgl中沒有提供api來將獨(dú)立的頂點(diǎn)傳遞到渲染管線中，因此我們需要將所有的頂點(diǎn)放在一個(gè)JavaScript數(shù)組中然后通過這個(gè)數(shù)組來構(gòu)造一個(gè)webgl頂點(diǎn)緩沖區(qū)（vertex buffer）。

Indices： 索引是在一個(gè)給定3d場(chǎng)景的中的所有頂點(diǎn)的數(shù)字標(biāo)識(shí)。索引告訴webgl如何有序的來鏈接頂點(diǎn)來生成一個(gè)表面。像頂點(diǎn)一樣，索引也是存儲(chǔ)在JavaScript數(shù)組中然后使用webgl索引緩沖區(qū)傳遞給webgl的渲染管線。

有兩種webgl 緩沖區(qū)來描述和處理幾何圖形：

包含頂點(diǎn)數(shù)據(jù)的緩沖區(qū)：Vertex Buffer Objects（VBO）

包含索引數(shù)據(jù)的緩沖區(qū)：Index Buffer Objects（IBO）

webgl的渲染管線：

Vertex Buffer Objects

VBO包含了webgl要求來描述將要渲染的幾何圖形的數(shù)據(jù)。除了上面提到的頂點(diǎn)坐標(biāo)外，還有vertex normal（頂點(diǎn)法線），顏色、紋理坐標(biāo)等都可以用vbo來建模。

Vertex shader

頂點(diǎn)著色器將會(huì)來每個(gè)頂點(diǎn)上被調(diào)用，頂點(diǎn)著色器將用來操作之前的頂點(diǎn)數(shù)據(jù)，如頂點(diǎn)坐標(biāo)、法線、顏色、文理坐標(biāo)。這些數(shù)據(jù)將被頂點(diǎn)著色器內(nèi)置的attributes變量來引用，每一個(gè)attribute指向一個(gè)他讀取頂點(diǎn)數(shù)據(jù)的VBO。

Fragment shader

每三個(gè)頂點(diǎn)定義了一個(gè)三角形在三角形表面的每一個(gè)元素都需要被分配一個(gè)顏色，否則我們的表面將是透明的。

三角形表面的每一個(gè)元素成為一個(gè)片元（fragment）。因?yàn)槲覀兲幚淼谋砻鎸⒈怀尸F(xiàn)在我們屏幕上，所以片元通常被理解為像素。

片元著色器的主要目的是為表面的每個(gè)獨(dú)立像素來計(jì)算顏色。

分類導(dǎo)航

webgl自學(xué)筆記——幾何圖形

延伸閱讀

我想了解如何學(xué)習(xí)