How to perform Mipmapping in WebGL?

webgl

Solution

In WebGL, you can upload mip maps manually — that's what the `level` parameter is in `gl.texImage2D` — or you can just upload level 0 and then use `gl.generateMipmap` to have them generated for you.

Once your mip maps are generated, use `gl.texParameteri` to set a `gl.TEXTURE_MIN_FILTER` of `gl.NEAREST_MIPMAP_LINEAR` (the default value), `gl.NEAREST_MIPMAP_NEAREST`, `gl.LINEAR_MIPMAP_NEAREST` or `gl.LINEAR_MIPMAP_LINEAR`.

Mip mapping should then be used to sample that texture.

My understanding is that it should be as simple as using `gl.generateMipmap(gl.TEXTURE_2D)` and e.g. `gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_LINEAR)`.

Problem

I am learning WebGL and reading the book 'WebGL Programming Guide'. However, the book has omitted the topic on texture mipmapping. I tried to search the official OpenGL ES website but could not seem to get an answer to my question. Neither has anyone asked a similar question in StackOverflow. Could someone show me, from the start to the end, how to perform texture mipmapping in WebGL?

Original source