Preface

In WebGL1, texture images and sampling information are written in texture objects.

We need to create two different texture objects if we want to read the pixel information from the same image several times, but the filtering method is different each time.

"Are you tired of saying that?"
WebGL: ". . . "

Sampler object

In WebGL2, the sampler object is introduced. Using the sampler object, we can encapsulate the texture filtering mode onto the sampler object. The original texture object can not be filtered in the specified way, so a picture can only create a texture object. For different filtering methods, we can create multiple samplers. When using texture objects, we can bind texture objects and sampler objects to specify the source and reading mode. Texture objects and sampling methods are separated, and a texture object can be associated with multiple sampler objects; multiple texture objects can also be associated with a sampler. If you use sampler objects, some WebGL engines will need to generate code changes.

Creating Sampler Objects

Sampler objects can be created by the method gl. createSampler, such as:

var samplerA = gl.createSampler();

gl.createSampler Method

The following is the signature of gl.createSampler

WebGLSampler gl.createSampler();

This method has no parameters and returns a sampler object created.

Specify sampler parameters

The parameters of the sampler can be specified by the method gl. samplerParameteri.

Gl. sampler Parameteri method

The following is the signature of gl. samplerParameteri

void gl.samplerParameteri(sampler, pname, param);
void gl.samplerParameterf(sampler, pname, param);

The first parameter is the sampler object, the first parameter is the parameter name that needs to be specified, and the third parameter is the parameter value, where the parameter name is as follows:

• gl.TEXTUREMINFILTER
• gl.TEXTUREMAGFILTER
• gl.TEXTUREWRAPS
• gl.TEXTUREWRAPT
• gl.TEXTURECOMPAREMODE
• gl.TEXTURECOMPAREFUNC
  It can be seen that the parameters on the texture object that need to be specified in the original WebGL1 are now moved to the sampler object.

Binding Sampler to Texture Unit

By using the function gl.bindSampler(unit, sampler), the sampler can be bound to the specified texture unit, and the function signature:

void gl.bindSampler(unit, sampler);

For example, the following code snippet:

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

This is equivalent to binding the texture object and samplerA object together. For texture unit 0 reading, the data source comes from the texture object, and the filtering method comes from the original samplerA.

Delete Sampler Objects

The specified sampler object can be deleted by the gl. deleteSampler method. The function signature is as follows:

void gl.deleteSampler(sampler);

Parameters specify the sampler object to be deleted, such as code:

gl.deleteSampler(sampler);

A sample code snippet

Here is a sample code snippet using a 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);

Welcome to pay attention to the public number "Uncle ITman Biao". Biao Shu, with more than 10 years of development experience, is currently the company's system architect, technical director, technical trainer, career planner. In-depth research in computer graphics, WebGL, front-end visualization. I am interested in the training and training of programmer's thinking ability and programmer's career planning.