1.紋理座標
紋理座標是紋理影象上的座標，通過紋理座標可以在紋理影象上獲取紋理顏色。webgl系統中的紋理座標系統是二維的，如圖所示。為了將紋理座標和廣泛使用的x、y座標區分開來，webgl使用s和t命名紋理座標（st座標系統）。
紋理影象的四個角座標為左下角（0.0，0.0），右下角（1.0,0.0），右上角（1.0， 1.0）和左上角（0.0， 1.0）。紋理座標很通用，因為座標值與影象自身的尺寸無關，不管是128*128還是128*256的影象，右上角的紋理座標始終是(1.0, 1.0)。
2.紋理對映步驟
1.準備好對映到幾何圖形上的紋理影象。
2.為幾何圖形配置紋理對映方式。
3.載入紋理影象，對其進行寫配置，以在webgl中使用它。
4.在片元著色器中將相應的紋理從紋理中抽取出來，並將紋素的顏色賦給片元。
3.gl.createtexture()
建立紋理物件以儲存紋理影象。
4.gl.deletetexture()
使用textur刪除紋理物件。如果刪除乙個已經被刪除的紋理物件，不會報錯也不會產生任何影響。
5.gl.pixelstorei(pname, param)
使用pname和param指定的方式處理載入得到的影象。引數
pname:可以是以下二者之一。gl.unpack_flip_y_webgl,對影象進行y軸反轉。預設值為false；gl.unpack_premultiply_alpha_webgl,將影象rgb顏色值的每乙個分量乘以a。預設為false；webgl，預設值為false。
param:指定非0（true）或0（false）。必須為整數。
例如：gl.pixelstorei(gl.unpack_flip_y_webgl, 1)，將影象進行y軸反轉。由於webgl紋理座標系統中的t軸的方向和png、bmp、jpg等格式的座標系的y軸方向相反。因此，只有將影象的y軸進行反轉，才能夠正確地將影象對映到圖形上。
6.gl.activetexture(texunit)
啟用texunit指定的紋理單元。引數：
texunit:指定準備啟用的紋理單元：gl.texture0、gl.texture1…、gl.texture7。最後的數字表示紋理單元的編號
系統支援的紋理單元個數取決於硬體和瀏覽器的webgl實現，但在預設情況下，webgl至少支援8個紋理單元。
7.gl.bindtexture(target, texture)
開啟texture指定的紋理物件，並將其繫結到target上。此外，如果已經通過gl.activetexture()啟用了某個紋理單元，則紋理物件也會繫結到這個紋理單元上。引數：
target:gl.texture_2d或gl.texture_buve_map
texture:表示繫結的紋理物件
例如，之前執行了gl.activetexture(gl.texture0)函式，啟用了第0個紋理單元。現在執行gl.bindtexture(gl.texture_2d, texture)。那麼紋理物件texture也會繫結到紋理單元gl.texture0上。
8.gl.texparameteri(target, pname, param)
將param的值賦給繫結到目標的紋理物件的pname引數上。引數：
target:gl.texture_2d或gl.texture_cube_map
pname:紋理引數
param:紋理引數的值
pname可指定4個紋理引數：
放大方法（gl.texture_map_filter）:當紋理的繪製範圍比紋理本身更大時，如何獲取紋理顏色。比如說，將16*16的紋理影象對映到32*32畫素的空間時，紋理的尺寸變為原始的兩倍。預設值為gl.linear。
縮小方法（gl.texture_min_filter）: 當紋理的繪製返回比紋理本身更小時，如何獲取紋素顏色。比如說，你將32*32的紋理影象對映到16*16畫素空間裡，紋理的尺寸就只有原始的一般。預設值為gl.nearest_mipmap_linear。
水平填充方法（gl.texture_wrap_s）:這個引數表示，如何對紋理影象左側或右側區域進行填充。預設值為gl.repeat。
垂直填充方法（gl.texture_wrap_t）:這個引數表示，如何對紋理影象上方和下方的區域進行填充。預設值為gl.repeat。
可以賦給gl.texture_map_filter和gl.texture_min_filter引數的值包括：
gl.nearest: 使用原紋理上距離對映後畫素中心最新的那個畫素的顏色值，作為新畫素的值。
gl.linear: 使用距離新畫素中心最近的四個畫素的顏色值的加權平均，作為新畫素的值（和gl.nearest相比，該方法影象質量更好，但也會有較大的開銷。）
可以賦給gl.texture_wrap_s和gl.texture_wrap_t的常量：
gl.repeat:平鋪式的重複紋理
gl.mirrored_repeat:映象對稱的重複紋理
gl.clamp_to_edge:使用紋理影象邊緣值
9.gl.teximage2d(target, level, internalformat, format, type, image)
將image指定的影象分配給繫結到目標上的紋理物件。引數：
target:gl.texture_2d或gl.texture_cube
level:傳入0（實際上，該引數是為金字塔紋理準備的）
internalformat:影象的內部格式
format:紋理資料格式，必須使用與internalformat相同的值
type:紋理資料的型別
image:包含紋理影象的image物件
紋理資料格式包含： gl.rgb（紅、l綠色、藍）、gl.rgba（紅、l綠色、藍、透明度）、gl.alpha（0.0， 0.0， 0.0， 透明度）、gl.luminance、gl.luminance_alpha。
如果紋理是jpg格式，該格式將每個畫素用rgb三個分量表示，所以引數指定為gl.rgb。其他格式，例如png為gl.rgba、bmp格式為gl.rgb。
type引數指定了紋理資料型別，通常我們使用gl.unsigned_byte資料型別。所有資料格式如下：
gl.unsigned_byte:無符號整形，每個顏色分量佔據1位元組
gl.unsigned_short_5_6_5：rgb每個分量分別佔據5、6、5位元
gl.unsigned_short_4_4_4_:rgba每個分量分別佔據4、4、4、4位元
gl.unsigend_short_5_5_5_1: rgba，rgb每個分量個佔據5位元，a分量佔據1位元
10.專用於紋理的資料型別
sampler2d:繫結到gl.texture_2d上的紋理資料型別
samplercube:繫結到gl.texture_cube_map上的紋理資料型別
11.gl.uniform1i(location, texunit)
textunit單元的紋理傳遞給著色器。引數：
location:紋理物件的位址
texunit:紋理單元編號
例如gl.uniform1i(u_sampler, 0)，將0號紋理傳遞給著色器中的取樣器變數
12.vec4 texture2d(smapler2d sampler, vec2 coord)
從sampler指定的紋理上獲取coord指定的紋理座標處的畫素顏色。引數：
sampler:指定紋理單元編號
coord：指定紋理座標
返回值：紋理座標處畫素的顏色值，其格式由gl.teximage2d()的inernalformat引數決定。下面列出了不同引數下的返回值。如果由於某些願意能導致紋理影象不可使用，那就返回（0.0, 0.0, 0.0 1.0）。
internalformat/返回值
gl.rgb/(r,g,b,1.0)
gl.rbga/(r,g,b,a)
gl.alpha(0.0, 0.0, 0.0, a)
gl.luminance/(l, l, l, 1.0)
gl.luminance_alpha/(l, l, l, a)
13.teximage2d(target, level, internalformat, width, height, border, format, type, offset)
將image指定的影象分配給繫結到目標上的紋理物件。是webgl2.0的函式，主要區分webgl1.0的同名函式區別。引數：
target:gl.texture_2d或gl.texture_cube
level:傳入0（實際上，該引數是為金字塔紋理準備的）
internalformat:影象的內部格式
width:文理繪製寬度
height:紋理繪製高度
format:紋理資料格式，必須使用與internalformat相同的值
type:紋理資料的型別
image:包含紋理影象的image物件
WebGL 紋理顏色原理
本文由雲 社群發表 webgl繪製影象時，往著色器中傳入顏色資訊就可以給圖形繪製出相應的顏色，現在已經知道頂點著色器和片段著色器一起決定著向顏色緩衝區寫入顏色資訊並最終呈現出來，那麼這個過程是什麼樣，如果圖形的顏色需要用現有來渲染那麼又該如何操作？在繪製開始前，經常見到呼叫函式清空畫布的 gl.cl...
WebGL 紋理顏色原理
本文由雲 社群發表webgl繪製影象時，往著色器中傳入顏色資訊就可以給圖形繪製出相應的顏色，現在已經知道頂點著色器和片段著色器一起決定著向顏色緩衝區寫入顏色資訊並最終呈現出來，那麼這個過程是什麼樣，如果圖形的顏色需要用現有來渲染那麼又該如何操作？在繪製開始前，經常見到呼叫函式清空畫布的 gl.cle...
WebGL 紋理顏色原理
本文由雲 社群發表 webgl繪製影象時，往著色器中傳入顏色資訊就可以給圖形繪製出相應的顏色，現在已經知道頂點著色器和片段著色器一起決定著向顏色緩衝區寫入顏色資訊並最終呈現出來，那麼這個過程是什麼樣，如果圖形的顏色需要用現有來渲染那麼又該如何操作？在繪製開始前，經常見到呼叫函式清空畫布的 gl.cl...