|
| 1 | +## Introduction |
| 2 | +Our program can now load and render 3D models. In this chapter, we will add one more feature, mipmap generation. Mipmaps are widely used in games and rendering software, and Vulkan gives us complete control over how they are created. |
| 3 | + |
| 4 | +Mipmaps are precalculated, downscaled versions of an image. Each new image is half the width and height of the previous one. Mipmaps are used as a form of *Level of Detail* or *LOD.* Objects that are far away from the camera will sample their textures from the smaller mip images. Using smaller images increases the rendering speed and avoids artifacts such as [Moiré patterns](https://en.wikipedia.org/wiki/Moir%C3%A9_pattern). An example of what mipmaps look like: |
| 5 | + |
| 6 | + |
| 7 | + |
| 8 | +## Image creation |
| 9 | + |
| 10 | +In Vulkan, each of the mip images is stored in different *mip levels* of a `VkImage`. Mip level 0 is the original image, and the mip levels after level 0 are commonly referred to as the *mip chain.* |
| 11 | + |
| 12 | +The number of mip levels is specified when the `VkImage` is created. Up until now, we have always set this value to one. We need to calculate the number of mip levels from the dimensions of the image. First, add a class member to store this number: |
| 13 | + |
| 14 | +```c++ |
| 15 | +... |
| 16 | +uint32_t mipLevels; |
| 17 | +VkImage textureImage; |
| 18 | +... |
| 19 | +``` |
| 20 | + |
| 21 | +The value for `mipLevels` can be found once we've loaded the texture in `createTextureImage`: |
| 22 | + |
| 23 | +```c++ |
| 24 | +int texWidth, texHeight, texChannels; |
| 25 | +stbi_uc* pixels = stbi_load(TEXTURE_PATH.c_str(), &texWidth, &texHeight, &texChannels, STBI_rgb_alpha); |
| 26 | +... |
| 27 | +mipLevels = static_cast<uint32_t>(std::floor(std::log2(std::max(texWidth, texHeight)))) + 1; |
| 28 | + |
| 29 | +``` |
| 30 | + |
| 31 | +This calculates the number of levels in the mip chain. The `max` function selects the largest dimension. The `log2` function calculates how many times that dimension can be divided by 2. The `floor` function handles cases where the largest dimension is not a power of 2. `1` is added so that the original image has a mip level. |
| 32 | + |
| 33 | +To use this value, we need to change the `createImage` and `createImageView` functions to allow us to specify the number of mip levels. Add a `mipLevels` parameter to the functions: |
| 34 | + |
| 35 | +```c++ |
| 36 | +void createImage(uint32_t width, uint32_t height, uint32_t mipLevels, VkFormat format, VkImageTiling tiling, VkImageUsageFlags usage, VkMemoryPropertyFlags properties, VkImage& image, VkDeviceMemory& imageMemory) { |
| 37 | + ... |
| 38 | + imageInfo.mipLevels = mipLevels; |
| 39 | + ... |
| 40 | +} |
| 41 | +``` |
| 42 | +```c++ |
| 43 | +VkImageView createImageView(VkImage image, VkFormat format, VkImageAspectFlags aspectFlags, uint32_t mipLevels) { |
| 44 | + ... |
| 45 | + viewInfo.subresourceRange.levelCount = mipLevels; |
| 46 | + ... |
| 47 | +``` |
| 48 | + |
| 49 | +Update all calls to these functions to use the right values: |
| 50 | + |
| 51 | +```c++ |
| 52 | +createImage(swapChainExtent.width, swapChainExtent.height, 1, depthFormat, VK_IMAGE_TILING_OPTIMAL, VK_IMAGE_USAGE_DEPTH_STENCIL_ATTACHMENT_BIT, VK_MEMORY_PROPERTY_DEVICE_LOCAL_BIT, depthImage, depthImageMemory); |
| 53 | +... |
| 54 | +createImage(texWidth, texHeight, mipLevels, VK_FORMAT_R8G8B8A8_UNORM, VK_IMAGE_TILING_OPTIMAL, VK_IMAGE_USAGE_TRANSFER_SRC_BIT | VK_IMAGE_USAGE_TRANSFER_DST_BIT | VK_IMAGE_USAGE_SAMPLED_BIT, VK_MEMORY_PROPERTY_DEVICE_LOCAL_BIT, textureImage, textureImageMemory); |
| 55 | +``` |
| 56 | +```c++ |
| 57 | +swapChainImageViews[i] = createImageView(swapChainImages[i], swapChainImageFormat, VK_IMAGE_ASPECT_COLOR_BIT, 1); |
| 58 | +... |
| 59 | +depthImageView = createImageView(depthImage, depthFormat, VK_IMAGE_ASPECT_DEPTH_BIT, 1); |
| 60 | +... |
| 61 | +textureImageView = createImageView(textureImage, VK_FORMAT_R8G8B8A8_UNORM, VK_IMAGE_ASPECT_COLOR_BIT, mipLevels); |
| 62 | +``` |
| 63 | + |
| 64 | + |
| 65 | + |
| 66 | +## Generating Mipmaps |
| 67 | + |
| 68 | +Our texture image now has multiple mip levels, but the staging buffer can only be used to fill mip level 0. The other levels are still undefined. To fill these levels we need to generate the data from the single level that we have. We will use the `vkCmdBlitImage` command. This command performs copying, scaling, and filtering operations. We will call this multiple times to *blit* data to each level of our texture image. |
| 69 | + |
| 70 | +Like other image operations, `vkCmdBlitImage` depends on the layout of the image it operates on. For optimal performance, the source image should be in `VK_IMAGE_LAYOUT_TRANSFER_SRC_OPTIMAL` and the destination image should be in `VK_IMAGE_LAYOUT_TRANSFER_DST_OPTIMAL` while blitting data. Vulkan allows us to transition each mip level of an image independently. `transitionImageLayout` only performs layout transitions on the entire image, so we'll need to write a few more pipeline barrier commands. First, remove the existing transition to `VK_IMAGE_LAYOUT_SHADER_READ_ONLY_OPTIMAL` in `createTextureImage`: |
| 71 | + |
| 72 | +```c++ |
| 73 | +... |
| 74 | +createImage(texWidth, texHeight, mipLevels, VK_FORMAT_R8G8B8A8_UNORM, VK_IMAGE_TILING_OPTIMAL, VK_IMAGE_USAGE_TRANSFER_SRC_BIT | VK_IMAGE_USAGE_TRANSFER_DST_BIT | VK_IMAGE_USAGE_SAMPLED_BIT, VK_MEMORY_PROPERTY_DEVICE_LOCAL_BIT, textureImage, textureImageMemory); |
| 75 | + |
| 76 | +transitionImageLayout(textureImage, VK_FORMAT_R8G8B8A8_UNORM, VK_IMAGE_LAYOUT_UNDEFINED, VK_IMAGE_LAYOUT_TRANSFER_DST_OPTIMAL, mipLevels); |
| 77 | + copyBufferToImage(stagingBuffer, textureImage, static_cast<uint32_t>(texWidth), static_cast<uint32_t>(texHeight)); |
| 78 | +//transitioned to VK_IMAGE_LAYOUT_SHADER_READ_ONLY_OPTIMAL while generating mipmaps |
| 79 | +... |
| 80 | +``` |
| 81 | +This will leave each level of the texture image in `VK_IMAGE_LAYOUT_TRANSFER_DST_OPTIMAL`. |
| 82 | +
|
| 83 | +We're now going to write the function that generates the mipmaps: |
| 84 | +
|
| 85 | +```c++ |
| 86 | +void generateMipmaps(VkImage image, int32_t texWidth, int32_t texHeight, uint32_t mipLevels) { |
| 87 | + VkCommandBuffer commandBuffer = beginSingleTimeCommands(); |
| 88 | + |
| 89 | + VkImageMemoryBarrier barrier = {}; |
| 90 | + barrier.sType = VK_STRUCTURE_TYPE_IMAGE_MEMORY_BARRIER; |
| 91 | + barrier.image = image; |
| 92 | + barrier.srcQueueFamilyIndex = VK_QUEUE_FAMILY_IGNORED; |
| 93 | + barrier.dstQueueFamilyIndex = VK_QUEUE_FAMILY_IGNORED; |
| 94 | + barrier.subresourceRange.aspectMask = VK_IMAGE_ASPECT_COLOR_BIT; |
| 95 | + barrier.subresourceRange.baseArrayLayer = 0; |
| 96 | + barrier.subresourceRange.layerCount = 1; |
| 97 | + barrier.subresourceRange.levelCount = 1; |
| 98 | + |
| 99 | + endSingleTimeCommands(commandBuffer); |
| 100 | +} |
| 101 | +``` |
| 102 | + |
| 103 | +We're going to make several transitions, so we'll reuse this `VkImageMemoryBarrier`. |
| 104 | + |
| 105 | +```c++ |
| 106 | +int32_t mipWidth = texWidth; |
| 107 | +int32_t mipHeight = texHeight; |
| 108 | + |
| 109 | +for (uint32_t i = 1; i < mipLevels; i++) { |
| 110 | + |
| 111 | +} |
| 112 | +``` |
| 113 | + |
| 114 | +This loop will record each of the `VkCmdBlitImage` commands. Note that the loop variable starts at 1, not 0. |
| 115 | + |
| 116 | +```c++ |
| 117 | +barrier.subresourceRange.baseMipLevel = i - 1; |
| 118 | +barrier.oldLayout = VK_IMAGE_LAYOUT_TRANSFER_DST_OPTIMAL; |
| 119 | +barrier.newLayout = VK_IMAGE_LAYOUT_TRANSFER_SRC_OPTIMAL; |
| 120 | +barrier.srcAccessMask = VK_ACCESS_TRANSFER_WRITE_BIT; |
| 121 | +barrier.dstAccessMask = VK_ACCESS_TRANSFER_READ_BIT; |
| 122 | + |
| 123 | +vkCmdPipelineBarrier(commandBuffer, |
| 124 | + VK_PIPELINE_STAGE_TRANSFER_BIT, VK_PIPELINE_STAGE_TRANSFER_BIT, 0, |
| 125 | + 0, nullptr, |
| 126 | + 0, nullptr, |
| 127 | + 1, &barrier); |
| 128 | +``` |
| 129 | +
|
| 130 | +First, we transition level `i - 1` to `VK_IMAGE_LAYOUT_TRANSFER_SRC_OPTIMAL`. |
| 131 | +
|
| 132 | +```c++ |
| 133 | +VkImageBlit blit = {}; |
| 134 | +blit.srcOffsets[0] = { 0, 0, 0 }; |
| 135 | +blit.srcOffsets[1] = { mipWidth, mipHeight, 1 }; |
| 136 | +blit.srcSubresource.aspectMask = VK_IMAGE_ASPECT_COLOR_BIT; |
| 137 | +blit.srcSubresource.mipLevel = i - 1; |
| 138 | +blit.srcSubresource.baseArrayLayer = 0; |
| 139 | +blit.srcSubresource.layerCount = 1; |
| 140 | +blit.dstOffsets[0] = { 0, 0, 0 }; |
| 141 | +blit.dstOffsets[1] = { mipWidth / 2, mipHeight / 2, 1 }; |
| 142 | +blit.dstSubresource.aspectMask = VK_IMAGE_ASPECT_COLOR_BIT; |
| 143 | +blit.dstSubresource.mipLevel = i; |
| 144 | +blit.dstSubresource.baseArrayLayer = 0; |
| 145 | +blit.dstSubresource.layerCount = 1; |
| 146 | +``` |
| 147 | + |
| 148 | +Next, we specify the regions that will be used in the blit operation. The source mip level is `i - 1` and the destination mip level is `i`. The two elements of the `srcOffsets` array determine the 3D region that data will be blitted from. `dstOffsets` determines the region that data will be blitted to. The X and Y dimensions of the `dstOffsets[1]` are divided by two since each mip level is half the size of the previous level. The Z dimension of `srcOffsets[1]` and `dstOffsets[1]` must be 1, since a 2D image has a depth of 1. |
| 149 | + |
| 150 | +```c++ |
| 151 | +vkCmdBlitImage(commandBuffer, |
| 152 | + image, VK_IMAGE_LAYOUT_TRANSFER_SRC_OPTIMAL, |
| 153 | + image, VK_IMAGE_LAYOUT_TRANSFER_DST_OPTIMAL, |
| 154 | + 1, &blit, |
| 155 | + VK_FILTER_LINEAR); |
| 156 | +``` |
| 157 | +
|
| 158 | +Now, we record the blit command. Note that `textureImage` is used for both the `srcImage` and `dstImage` parameter. This is because we're blitting between different levels of the same image. The source mip level was just transitioned to `VK_IMAGE_LAYOUT_TRANSFER_SRC_OPTIMAL` and the destination level is still in `VK_IMAGE_LAYOUT_TRANSFER_DST_OPTIMAL` from `createTextureImage`. |
| 159 | +
|
| 160 | +The last parameter allows us to specify a `VkFilter` to use in the blit. We have the same filtering options here that we had when making the `VkSampler`. We use the `VK_FILTER_LINEAR` to enable interpolation. |
| 161 | +
|
| 162 | +```c++ |
| 163 | +barrier.oldLayout = VK_IMAGE_LAYOUT_TRANSFER_SRC_OPTIMAL; |
| 164 | +barrier.newLayout = VK_IMAGE_LAYOUT_SHADER_READ_ONLY_OPTIMAL; |
| 165 | +barrier.srcAccessMask = VK_ACCESS_TRANSFER_READ_BIT; |
| 166 | +barrier.dstAccessMask = VK_ACCESS_SHADER_READ_BIT; |
| 167 | +
|
| 168 | +vkCmdPipelineBarrier(commandBuffer, |
| 169 | + VK_PIPELINE_STAGE_TRANSFER_BIT, VK_PIPELINE_STAGE_FRAGMENT_SHADER_BIT, 0, |
| 170 | + 0, nullptr, |
| 171 | + 0, nullptr, |
| 172 | + 1, &barrier); |
| 173 | +``` |
| 174 | + |
| 175 | +This barrier transitions mip level `i - 1` to `VK_IMAGE_LAYOUT_SHADER_READ_ONLY_OPTIMAL`. |
| 176 | + |
| 177 | +```c++ |
| 178 | + ... |
| 179 | + if (mipWidth > 1) mipWidth /= 2; |
| 180 | + if (mipHeight > 1) mipHeight /= 2; |
| 181 | +} |
| 182 | +``` |
| 183 | + |
| 184 | +At the end of the loop, we divide the current mip dimensions by two. We check each dimension before the division to ensure that dimension never becomes 0. This handles cases where the image is not square, since one of the mip dimensions would reach 1 before the other dimension. When this happens, that dimension should remain 1 for all remaining levels. |
| 185 | + |
| 186 | +```c++ |
| 187 | + barrier.subresourceRange.baseMipLevel = mipLevels - 1; |
| 188 | + barrier.oldLayout = VK_IMAGE_LAYOUT_TRANSFER_DST_OPTIMAL; |
| 189 | + barrier.newLayout = VK_IMAGE_LAYOUT_SHADER_READ_ONLY_OPTIMAL; |
| 190 | + barrier.srcAccessMask = VK_ACCESS_TRANSFER_WRITE_BIT; |
| 191 | + barrier.dstAccessMask = VK_ACCESS_SHADER_READ_BIT; |
| 192 | + |
| 193 | + vkCmdPipelineBarrier(commandBuffer, |
| 194 | + VK_PIPELINE_STAGE_TRANSFER_BIT, VK_PIPELINE_STAGE_FRAGMENT_SHADER_BIT, 0, |
| 195 | + 0, nullptr, |
| 196 | + 0, nullptr, |
| 197 | + 1, &barrier); |
| 198 | + |
| 199 | + endSingleTimeCommands(commandBuffer); |
| 200 | +} |
| 201 | +``` |
| 202 | +
|
| 203 | +Before we end the command buffer, we insert one more pipeline barrier. This barrier transitions the last mip level from `VK_IMAGE_LAYOUT_TRANSFER_DST_OPTIMAL` to `VK_IMAGE_LAYOUT_SHADER_READ_ONLY_OPTIMAL`, since that wasn't handled by the loop. |
| 204 | +
|
| 205 | +Finally, add the call to `generateMipmaps` in `createTextureImage`: |
| 206 | +
|
| 207 | +```c++ |
| 208 | +transitionImageLayout(textureImage, VK_FORMAT_R8G8B8A8_UNORM, VK_IMAGE_LAYOUT_UNDEFINED, VK_IMAGE_LAYOUT_TRANSFER_DST_OPTIMAL, mipLevels); |
| 209 | + copyBufferToImage(stagingBuffer, textureImage, static_cast<uint32_t>(texWidth), static_cast<uint32_t>(texHeight)); |
| 210 | +//transitioned to VK_IMAGE_LAYOUT_SHADER_READ_ONLY_OPTIMAL while generating mipmaps |
| 211 | +... |
| 212 | +generateMipmaps(textureImage, texWidth, texHeight, mipLevels); |
| 213 | +``` |
| 214 | + |
| 215 | +Our texture image's mipmaps are now completely filled. |
| 216 | + |
| 217 | +## Sampler |
| 218 | + |
| 219 | +While the `VkImage` holds the mipmap data, `VkSampler` controls how that data is read while rendering. Vulkan allows us to specify `minLod`, `maxLod`, `mipLodBias`, and `mipmapMode` ("Lod" means "Level of Detail"). When a texture is sampled, the sampler selects a mip level according to the following pseudocode: |
| 220 | + |
| 221 | +```c++ |
| 222 | +lod = getLodLevelFromScreenSize(); //smaller when the object is close, may be negative |
| 223 | +lod = clamp(lod + mipLodBias, minLod, maxLod); |
| 224 | + |
| 225 | +level = clamp(floor(lod), 0, texture.mipLevels - 1); //clamped to the number of mip levels in the texture |
| 226 | + |
| 227 | +if (mipmapMode == VK_SAMPLER_MIPMAP_MODE_NEAREST) { |
| 228 | + color = sample(level); |
| 229 | +} else { |
| 230 | + color = blend(sample(level), sample(level + 1)); |
| 231 | +} |
| 232 | +``` |
| 233 | + |
| 234 | +If `samplerInfo.mipmapMode` is `VK_SAMPLER_MIPMAP_MODE_NEAREST`, `lod` selects the mip level to sample from. If the mipmap mode is `VK_SAMPLER_MIPMAP_MODE_LINEAR`, `lod` is used to select two mip levels to be sampled. Those levels are sampled and the results are linearly blended. |
| 235 | + |
| 236 | +The sample operation is also affected by `lod`: |
| 237 | + |
| 238 | +```c++ |
| 239 | +if (lod <= 0) { |
| 240 | + color = readTexture(uv, magFilter); |
| 241 | +} else { |
| 242 | + color = readTexture(uv, minFilter); |
| 243 | +} |
| 244 | +``` |
| 245 | + |
| 246 | +If the object is close to the camera, `magFilter` is used as the filter. If the object is further from the camera, `minFilter` is used. Normally, `lod` is non-negative, and is only 0 when close the camera. `mipLodBias` lets us force Vulkan to use lower `lod` and `level` than it would normally use. |
| 247 | + |
| 248 | +To see the results of this chapter, we need to choose values for our `textureSampler`. We've already set the `minFilter` and `magFilter` to use `VK_FILTER_LINEAR`. We just need to choose values for `minLod`, `maxLod`, `mipLodBias`, and `mipmapMode`. |
| 249 | + |
| 250 | +```c++ |
| 251 | +void createTextureSampler() { |
| 252 | + ... |
| 253 | + samplerInfo.mipmapMode = VK_SAMPLER_MIPMAP_MODE_LINEAR; |
| 254 | + samplerInfo.minLod = 0; // Optional |
| 255 | + samplerInfo.maxLod = static_cast<float>(mipLevels); |
| 256 | + samplerInfo.mipLodBias = 0; // Optional |
| 257 | + ... |
| 258 | +} |
| 259 | +``` |
| 260 | + |
| 261 | +To allow the full range of mip levels to be used, we set `minLod` to 0, and `maxLod` to the number of mip levels. We have no reason to change the `lod` value , so we set `mipLodBias` to 0. |
| 262 | + |
| 263 | +Now run your program and you should see the following: |
| 264 | + |
| 265 | + |
| 266 | + |
| 267 | +It's not a dramatic difference, since our scene is so simple. There are subtle differences if you look closely. |
| 268 | + |
| 269 | + |
| 270 | + |
| 271 | +The most noticeable difference is the writing on the signs. With mipmaps, the writing has been smoothed. Without mipmaps, the writing has harsh edges and gaps from Moiré artifacts. |
| 272 | + |
| 273 | +You can play around with the sampler settings to see how they affect mipmapping. For example, by changing `minLod`, you can force the sampler to not use the lowest mip levels: |
| 274 | + |
| 275 | +```c++ |
| 276 | +samplerInfo.minLod = static_cast<float>(mipLevels / 2); |
| 277 | +``` |
| 278 | + |
| 279 | +These settings will produce this image: |
| 280 | + |
| 281 | + |
| 282 | + |
| 283 | + |
| 284 | +This is how higher mip levels will be used when objects are further away from the camera. |
| 285 | + |
| 286 | + |
| 287 | +## Conclusion |
| 288 | + |
| 289 | +It has taken a lot of work to get to this point, but now you finally have a good |
| 290 | +base for a Vulkan program. The knowledge of the basic principles of Vulkan that |
| 291 | +you now possess should be sufficient to start exploring more of the features, |
| 292 | +like: |
| 293 | + |
| 294 | +* Push constants |
| 295 | +* Instanced rendering |
| 296 | +* Dynamic uniforms |
| 297 | +* Separate images and sampler descriptors |
| 298 | +* Pipeline cache |
| 299 | +* Multi-threaded command buffer generation |
| 300 | +* Multiple subpasses |
| 301 | +* Compute shaders |
| 302 | + |
| 303 | +The current program can be extended in many ways, like adding Blinn-Phong |
| 304 | +lighting, post-processing effects and shadow mapping. You should be able to |
| 305 | +learn how these effects work from tutorials for other APIs, because despite |
| 306 | +Vulkan's explicitness, many concepts still work the same. |
| 307 | + |
| 308 | +[C++ code](/code/28_mipmapping.cpp) / |
| 309 | +[Vertex shader](/code/26_shader_depth.vert) / |
| 310 | +[Fragment shader](/code/26_shader_depth.frag) |
0 commit comments