This is the 13th day of my participation in the August More Text Challenge.More challenges in August

The title of this article: WebGL Lesson 27: Texturing Mipmap | August Update ChallengeCopy the code

Helpful hints

This article is the 27th in the WebGL Curriculum column, and it is highly recommended to start with the previous one. Because we spent a lot of time talking about vectors and matrix operations. These basics will influence your thinking.

primers

Last time, there was a line of code that we didn’t cover in detail:

    gl.generateMipmap(gl.TEXTURE_2D);
Copy the code

He must be useful. That’s what we’re going to focus on in this class: Mipmap.

Practical problems with texturing

We know that the image itself has width times height.

Our canvas has its own width * height.

The shape we want to draw has its own size and cannot occupy the entire canvas, such as drawing a small square.

On this square, we map.

Suppose the square is very small with only a few pixels: for example, 2 * 2.

But our image is very large, say, 512 by 512.

So if you anchor this tile to this little square, it’s impossible to show every pixel of the original image in detail.

So what do we do? We take the average.Copy the code

For example, a square is 2 by 2. So he has a total of four pixels.

The pixels in the upper left corner of the square are averaged with all the pixels in the upper left quarter of the original image.

The pixels in the upper right corner of the square are averaged with all the pixels in the upper right quarter of the original image.

The pixels in the lower left corner of the square are averaged with all the pixels in the lower left quarter of the original image.

The pixel in the lower right corner of the square is averaged with all the pixels in the lower right corner of the original image.

That way, it still reflects what the original image looks like. There is nothing wrong with the effect.

What is the problem: efficiency ！！！！！Copy the code

Just averaging, you go through thousands and thousands of pixels, sum them up, and average them out.

WebGL’s solution to this problem: Prepare small images in advance

The problem is that the pixels that we’re going to draw are very small.

The actual picture given is very large, need to traverse average, consumption of performance!

B: Ok.
WebGL said: Please prepare more pictures for me, both large and small, and I will choose whether to use your large picture or small picture for sampling according to the actual pixel points drawn!!!!!!
Programmer: art does not draw for me, I can not afford to provoke
WebGL said: “you useless guy, you can’t even prepare a picture, how do you expect me to draw, you want me to calculate the average, beg to death!!
Programmer: …………………………
WebGL says: forget it, you give me a big picture, I will generate several small pictures for you out ！！！！！！ callgl.generateMipmap(gl.TEXTURE_2D)Function bar! Once it’s called, you don’t have to worry about the rest.
Programmer: you are so powerful, how do you generate, you still have an art inside?
WebGL said: you understand a wool, do I need art, I am the average calculation step, first calculated, put in my video memory, space for time, understand ？？？？？？
Programmer: big guy cow force, took.
WebGL says: Remember, this thing is called Mipmap
Programmer: Ok!

WebGL generates Mipmap details

WebGL’s generateMipmap function will generate several small images for you. What is the size of the image?

The way he did it, if your original drawing was 16 by 16, then

  • The first small picture: 8 * 8
  • The second small picture: 4 * 4
  • The third small picture: 2 * 2
  • The fourth small picture: 1 * 1

Each one is 1/4 of what it was before.

It’s that simple.

WebGL picks up MipMap details

After WebGL generates the smaller images, it takes your larger images along with it.

When it comes to drawing and sampling, he will judge by himself which picture is most suitable for the size of canvas pixels. This image is then automatically selected for sampling.

Of course, there are some more detailed controls you can do:

For example, you can even average the two images, if they’re both about the same size as the pixels you’re drawing.

There are a bunch of control modes, I will not go into detail, this is based on your own presentation needs to choose, please check the specific API:

Gl.texparameteri (gl.texture_2d, gl.texture_min_filter, a schema)Copy the code

Note the gl.texture_min_filter parameter:

This parameter means that if the pixel size we want to draw is smaller than the original size of the image, we will use one of the following modes for sampling.

One of these patterns includes:

  • gl.NEAREST
  • gl.LINEAR
  • gl.NEAREST_MIPMAP_NEAREST
  • gl.LINEAR_MIPMAP_NEAREST
  • gl.NEAREST_MIPMAP_LINEAR
  • gl.LINEAR_MIPMAP_LINEAR

So several, what is the specific meaning, please consult the official documents.

extension

If the size of the pixel we want to draw is smaller than the original size of the image, we can use the above modes for sampling.

What about the other way around?

The size of the pixels that you want to draw is very large, and the image is very small.

The same:

Gl.texparameteri (gl.texture_2d, gl.texture_MAG_filter, a schema)Copy the code

At this point, we can only choose gl.NEAREST and GL. LINEAR modes.

Why, if you understand the details of these patterns.

With the end of the text, here is the q&ACopy the code

“WebGL took it all on itself,” Guagua says.

  • A: You can also find art to draw a few small images, WebGL also allows you to upload your own small images…