WebGL2系列之採樣器對象

前言

在WebGL1中，紋理的圖片和採樣信息都是寫在紋理對象之中.

採樣信息告訴GPU如何去讀取貼圖上圖片的信息。

若是咱們但願從同一個圖片屢次讀取像素信息，可是每次讀取的時候使用的過濾方式不同, 此時咱們須要建立兩個不一樣的紋理對象。

"你說這樣是否是很煩啊"
WebGL: 「。。。」

採樣器對象

在WebGL2中，引入了採樣器對象，使用採樣器對象，能夠把紋理的過濾方式封裝到採樣器對象上面，而本來的紋理對象能夠不用在指定過濾方式，所以一張圖片能夠只用建立一個紋理對象，對於不一樣的過濾方式，建立多個採樣器；在使用紋理對象的時候，能夠綁定紋理對象和採樣器對象來實現圖源和讀取方式的指定。紋理對象和採樣方式被分開，一個紋理對象能夠和多個採樣器對象關聯； 多個紋理對象也能夠和一個採樣器關聯。若是使用採樣器對象，一些WebGL的引擎就會須要產生代碼上的變更。

建立採樣器對象

經過方法gl. createSampler能夠建立採樣器對象，好比：

var samplerA = gl.createSampler();複製代碼

gl.createSampler方法

如下是gl.createSampler的簽名

WebGLSampler gl.createSampler();複製代碼

該方法沒有參數，返回一個建立好的採樣器對象。

指定採樣器參數

經過方法gl. samplerParameteri能夠指定採樣器的參數。

gl. samplerParameteri方法

如下是gl. samplerParameteri的簽名

void gl.samplerParameteri(sampler, pname, param);
void gl.samplerParameterf(sampler, pname, param);複製代碼

第一個參數是sampler 對象，第一個參數是須要指定的參數名，第三個參數是參數值，其中參數名以下這些參數包括

• gl.TEXTUREMINFILTER
• gl.TEXTUREMAGFILTER
• gl.TEXTUREWRAPS
• gl.TEXTUREWRAPT
• gl.TEXTURECOMPAREMODE
• gl.TEXTURECOMPAREFUNC
  能夠看出就是本來的WebGL1中須要指定的紋理對象上的參數，只是如今移到了採樣器對象上。

綁定採樣器到紋理單元

經過函數 gl.bindSampler(unit, sampler)，能夠把採樣器綁定到指定的紋理單元，函數簽名：

void gl.bindSampler(unit, sampler);複製代碼

好比以下代碼片斷：

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.bindSampler(0, samplerA);複製代碼

此時至關於把texture對象和samplerA對象綁定到了一塊兒，此時對於紋理單元0的讀取，數據源來自texture對象，而過濾方式來自原samplerA。

刪除採樣器對象

經過gl. deleteSampler方法能夠刪除指定的採樣器對象，函數簽名以下：

void gl.deleteSampler(sampler);複製代碼

參數指定要刪除的採樣器對象，好比代碼：

gl.deleteSampler(sampler);複製代碼

一個示例代碼片斷

下面是使用採樣器的一個示例代碼片斷

var samplerA = gl.createSampler();
gl.samplerParameteri(samplerA, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_NEAREST);
gl.samplerParameteri(samplerA, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.samplerParameteri(samplerA, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.samplerParameteri(samplerA, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

var samplerB = gl.createSampler();
gl.samplerParameteri(samplerB, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.samplerParameteri(samplerB, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.samplerParameteri(samplerB, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);
gl.samplerParameteri(samplerB, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);

// ...

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.bindSampler(0, samplerA);

gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.bindSampler(1, samplerB);複製代碼

歡迎關注公衆號「ITman彪叔」。彪叔，擁有10多年開發經驗，現任公司系統架構師、技術總監、技術培訓師、職業規劃師。在計算機圖形學、WebGL、前端可視化方面有深刻研究。對程序員思惟能力訓練和培訓、程序員職業規劃有濃厚興趣。