[WebGL Primer] 28, Texture parameters

Note: The article is translated from http://wgld.org/, the original author Sambonja 広 (Doxas)

The effect of this demo

Lufy: First wordy a few words, really good years did not write a blog, after the work to re-contact HTML5 development, although not as strong as before the desire to write the article, but looked at the previous WebGL tutorial only translated a half, so good tutorial, so broken more also really pity, So I'll try to take some time to fill in this part of the article.

attributes that the texture contains

A multi-texture was introduced last time, and multiple textures are applied in a polygon. Learn multi-texture rendering, you can use texture synthesis to achieve a variety of effects, and further enhance the performance of the screen.
This time, in order to further improve the texture rendering quality, to introduce the texture parameters. By controlling the texture parameters, the rendering quality of the model can be improved very well, although there will be some difficult to understand, which can be considered later.
So what exactly is the texture parameter in WebGL? Now let's start with the explanation here.
Texture parameters are characteristics associated with quality and characteristics when rendering with textures. For example, even if the texture is generated using the same resolution and size of the image, if the texture parameters are different, the result of the rendering will vary greatly.
Texture parameters can be divided into two major categories,
The first kind, the quality or quality-related parameters, change this parameter, the rendering of the filter will change, so the use of the perfect tween texture, you may get high-quality rendering effect.
The second, is the texture of the characteristics. Specifically, texture coordinates that are out of range are usually specified, and textures change. In general, the range of texture coordinates should be set between 0-1, and in fact, even if you specify a texture coordinate outside the range can be rendered. However, if you specify a texture parameter, the value outside this range determines the specific meaning.
So, let's take a look at how the texture parameter is set and how it will be rendered.
How to set the texture parameters

First of all, look at the texture parameter setting method, set the texture parameters using the Texparameteri function, this function through three parameters to set the texture parameters.
It is important to note that the texture parameters set here are only for textures that are bound at this point in time, while other textures in WebGL are unaffected.

Examples of use of >texparameteri

Gl.texparameteri (GL. TEXTURE_2D, GL. Texture_min_filter, GL. NEAREST);

The Texparameteri function, the first parameter is the kind of texture, is a constant, usually using a 2-dimensional texture when used and previously used GL. texture_2d. The second parameter specifies the kind of texture parameter, and the third parameter is a constant. At this stage, the first parameter uses a fixed value on the line, the other two parameters, the following will be explained in detail.

specifies the quality of the texture

Specifies the quality of the texture, that is, the quality, which is defined in which way the texture is scaled. The zoom in and zoom out in WebGL can be set separately.
When you specify a tween method for a texture magnification, the second parameter of Texparameteri is specified as Gl.texture_mag_filter, and when you specify the tween method when the texture shrinks, the parameter is specified as GL. Texture_min_filter. The available quality parameters are listed in the table below, and it is important to note that the parameter constants that Mag_filter and Min_filter can specify are different.

constant Name	meaning	MIN	MAG
Gl. NEAREST	Nearest filter to get the pixel closest to the texture coordinate point	0	0
Gl. LINEAR	Linear interpolation filters to get a weighted average of 4 pixels near the coordinate point	0	0
Gl. Nearest_mipmap_nearest	Select the nearest MIP layer and use the nearest neighbor filter	0	X
Gl. Nearest_mipmap_linear	Use linear interpolation and nearest neighbor filtering between MIP layers	0	X
Gl. Linear_mipmap_nearest	Select the nearest MIP layer, using linear filtering	0	X
Gl. Linear_mipmap_linear	Using linear interpolation between MIP layers and using linear filtering	0	X

When using mipmap, it is only when the image is zoomed out that the specified constants are the ones above. When zoomed in, the tween can only be processed according to the weighted average.
The six quality parameters listed above, the more downward, the higher the processing load. By the meaning of the name can also be seen, linear series than the nearest series load, but also can get relatively high quality effect. If you want to use the lowest-load handling when zooming in and out, set it up as follows.

> Example of specifying Texture quality

Gl.texparameteri (GL. TEXTURE_2D, GL. Texture_min_filter, GL. NEAREST);
Gl.texparameteri (GL. TEXTURE_2D, GL. Texture_mag_filter, GL. NEAREST);

Specify the characteristics of a texture

Then, looking at the texture coordinates outside the texture setting, this setting also uses the same function as the Texprameteri, the second parameter can be specified as two types, respectively, the horizontal and vertical axes of the texture coordinates.
Use GL when setting the horizontal axis of the texture. texture_wrap_s, use GL when setting ordinate. texture_wrap_t.
And the next parameter can set the value of a few three kinds.

number of fixed names	means	Example
Gl. REPEAT	The value outside the range is processed repeatedly	1.25 = 0.25:-0.25 = 0.75
Gl. Mirrored_repeat	Mirror repeat processing for values outside the range	1.25 = 0.75:-0.25 = 0.25
Gl. Clamp_to_edge	To control the value between 0-1	1.25 = 1.00:-0.25 = 0.00

It may not be a good idea to express words in words, GL. Repeat is the tiling of pictures one after another. Gl. Mirrored_repeat is a mirror-like flip after tiling, the last of GL. Clamp_to_edge is to control the texture coordinates in the range of 0-1, whether 10, or 100, and finally can only be 1.

> Example of setting texture coordinate features

Gl.texparameteri (GL. TEXTURE_2D, GL. texture_wrap_s, GL. REPEAT);
Gl.texparameteri (GL. TEXTURE_2D, GL. texture_wrap_t, GL. REPEAT);

Summary

Now you can almost understand the texture parameters, it is important to note that the texture parameters need to be individually specified for each of these texture parameters. This time the demo, is one side of the dynamic changes in texture parameters and coordinates, while the polygon is rendered, the texture is the beginning of the map is the result of the operation.
The textures used in this demo have two images.


The first texture with a picture

A picture of the second texture


The first picture is exactly the same as the previously used picture, the second one is slightly modified, and the gradient is processed from left to right, which makes it easy to understand the texture coordinates that are outside the range.
The top two images are set as textures in the demo, and then the composition is rendered. It also constantly changes polygon coordinates and texture parameters, rendering a total of 9 polygons. Each polygon, set different texture parameters, first look at the half part of the six polygons.


Because it is a static picture, so it looks more laborious, in the demo, the polygon is centered on the Y axis rotation, so it is easy to see the differences between the various parameters.
Then the bottom half renders three polygons, and the texture coordinates are set as follows.


As you can see, all vertices are outside the range of 0-1, rendering the effect as follows.


One can see the difference, deliberately set the value of the outside of the case is not so common, but there are some special circumstances must be so set up, so the set of these settings thoroughly understand it.
Also, as previously stated, the texture parameter is only valid for the currently bound texture. The texture of the second picture in the demo is always in the bound state, and the texture of the first picture, whether it is the quality or texture coordinates, is not changed, this is a more important point.
Next time talk about mixing color, understand the process color, you can do translucent processing and other synthetic effects.

The changing texture parameters of the demo

http://wgld.org/s/sample_016/

Reprint Please specify: Transfer from Lufy_legend's blog Http://blog.csdn.net/lufy_legend