Menu
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?
622
Increased performance – Mipmapping increases cache efficiency as full-size textures will not be needed as often, and the lower resolution mipmaps will fit more easily in the texture cache. This means texture data doesn't have to be fetched as often, reducing bandwidth usage and increasing application performance.
The automatic generation of mipmaps is turned on for textures in the Inspector window. To enable mipmap generation: Select a texture within the Assets section of the Project window to open the Texture Inspector window. Enable the Generate Mip Maps option.
Texture mapping maps a location in a 2D image to a location on a 3D triangle. WebGL uses texture coordinates to perform this mapping. As with so many other aspects of graphics, texture coordinates are percentages. The notation for texture coordinates uses (s,t) to represent an image location.
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).
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
