D應(yīng)用的基礎(chǔ)元素:
1、canvas,它是渲染場景的占位符。標準html的canvas元素
2、Objects,這里指的是組成一個場景的所有3d實體。這些實體都由三角形組成。webgl中使用Buffer(vertex、index)來存儲管理這些3d實體數(shù)據(jù)。
3、Lights,如果沒有光照3d場景將看不到任何東西。webgl使用著色器來為場景中的光照建模。我們將會看到3d實體如何根據(jù)物理規(guī)律來反射和吸收光照,并討論不同的光照模型。
4、Camera,攝像機作為3d世界的視口。我們通過攝像機來開發(fā)和看到一個3d場景。我們要理解如何根據(jù)不同的場景來使用不同的矩陣操作,這些操作可以利用相機原理來建模。
webgl中的數(shù)據(jù)類型:
webgl對圖形有一種標準的處理方式,與我們擁有的表面的復(fù)雜性和頂點個數(shù)無關(guān)。只有兩種基礎(chǔ)的數(shù)據(jù)類型來表達3d物體的幾何形狀:vertices和indices(頂點和索引)。
Vertices: 代表3d物體的拐點,每一個頂點使用3個數(shù)字來表達想x,y,z;webgl中沒有提供api來將獨立的頂點傳遞到渲染管線中,因此我們需要將所有的頂點放在一個JavaScript數(shù)組中然后通過這個數(shù)組來構(gòu)造一個webgl頂點緩沖區(qū)(vertex buffer)。
Indices: 索引是在一個給定3d場景的中的所有頂點的數(shù)字標識。索引告訴webgl如何有序的來鏈接頂點來生成一個表面。像頂點一樣,索引也是存儲在JavaScript數(shù)組中然后使用webgl索引緩沖區(qū)傳遞給webgl的渲染管線。
有兩種webgl 緩沖區(qū)來描述和處理幾何圖形:
包含頂點數(shù)據(jù)的緩沖區(qū):Vertex Buffer Objects(VBO)
包含索引數(shù)據(jù)的緩沖區(qū):Index Buffer Objects(IBO)
webgl的渲染管線:
Vertex Buffer Objects
VBO包含了webgl要求來描述將要渲染的幾何圖形的數(shù)據(jù)。除了上面提到的頂點坐標外,還有vertex normal(頂點法線),顏色、紋理坐標等都可以用vbo來建模。
Vertex shader
頂點著色器將會來每個頂點上被調(diào)用,頂點著色器將用來操作之前的頂點數(shù)據(jù),如頂點坐標、法線、顏色、文理坐標。這些數(shù)據(jù)將被頂點著色器內(nèi)置的attributes變量來引用,每一個attribute指向一個他讀取頂點數(shù)據(jù)的VBO。
Fragment shader
每三個頂點定義了一個三角形在三角形表面的每一個元素都需要被分配一個顏色,否則我們的表面將是透明的。
三角形表面的每一個元素成為一個片元(fragment)。因為我們處理的表面將被呈現(xiàn)在我們屏幕上,所以片元通常被理解為像素。
片元著色器的主要目的是為表面的每個獨立像素來計算顏色。