Vulkan Samples 阅读 -- User Interface（一） Text Rendering & Distance Field Fonts & ImGui Overlay

Text Rendering

prepare

• loadAssets： 加载立方体
• prepareUniformBuffers
  • createBuffer
  • updateUniformBuffers
• setupDescriptorSetLayout
  • descriptorSetLayoutBinding
  • vkCreateDescriptorSetLayout
  • vkCreatePipelineLayout
• preparePipelines
  • vkCreateGraphicsPipelines：mesh
• setupDescriptorPool
  • vkCreateDescriptorPool
• setupDescriptorSet
  • vkAllocateDescriptorSets
  • writeDescriptorSet
  • vkUpdateDescriptorSets
• buildCommandBuffers
  • loop
    • vkBeginCommandBuffer
    • vkCmdBeginRenderPass
    • vkCmdSetViewport
    • vkCmdSetScissor
    • vkCmdBindPipeline
    • vkCmdBindDescriptorSets
    • draw
    • vkCmdEndRenderPass
    • vkEndCommandBuffer
  • vkQueueWaitIdle
• prepareTextOverlay： 本节重点
  • shaderStages： 保存渲染字体的shader
  • new TextOverlay
    • 初始化成员变量
    • prepareResources
      • stb_font_consolas_24_latin1
        • 获取字体信息
      • vkCreateCommandPool
      • vkAllocateCommandBuffers
      • vkCreateBuffer
      • vkGetBufferMemoryRequirements
      • vkAllocateMemory
      • vkBindBufferMemory
      • vkCreateImage： 字体纹理
      • vkGetImageMemoryRequirements
      • vkAllocateMemory
      • vkBindImageMemory
      • Staging
        • vkCreateBuffer
        • vkGetBufferMemoryRequirements
        • vkAllocateMemory
        • vkBindBufferMemory
        • vkMapMemory
        • memcpy
        • vkUnmapMemory
      • Copy to image
        • vkAllocateCommandBuffers
        • vkBeginCommandBuffer
        • setImageLayout
        • vkCmdCopyBufferToImage
        • setImageLayout
        • vkEndCommandBuffer
      • vkQueueSubmit
      • vkQueueWaitIdle
      • vkFreeCommandBuffers
      • vkFreeMemory
      • vkDestroyBuffer
      • vkCreateImageView
      • vkCreateSampler
      • vkCreateDescriptorPool
      • vkCreateDescriptorSetLayout
      • vkCreatePipelineLayout
      • vkAllocateDescriptorSets
      • writeDescriptorSet
      • vkUpdateDescriptorSets
      • vkCreatePipelineCache
    • prepareRenderPass
      • vkCreateRenderPass
    • vkCreateGraphicsPipelines
  • updateTextOverlay
    • textOverlay->beginTextUpdate()
      • vkMapMemory
    • textOverlay->addText（包括位置信息）
    • textOverlay->endTextUpdate()
      • vkUnmapMemory
      • updateCommandBuffers
        • loop
          • vkBeginCommandBuffer
          • vkCmdBeginRenderPass
          • vkCmdSetViewport
          • vkCmdSetScissor
          • vkCmdBindPipeline
          • vkCmdBindDescriptorSets
          • vkCmdBindVertexBuffers
          • vkCmdBindVertexBuffers
          • vkCmdDraw
          • vkCmdEndRenderPass
          • vkEndCommandBuffer

render

• draw
  • prepareFrame
  • commandBuffers.push_back(textOverlay->cmdBuffers[currentBuffer])
  • vkQueueSubmit
  • submitFrame
• vkDeviceWaitIdle
• updateTextOverlay

shader

• VS: 正常渲染三角形
• FS: 正常渲染（使用texture获取字体）

小结

  本节主要讲字体渲染方法。vulkan管线设置没有新东西。注意字体资源的加载流程，以及字体渲染的方法即可。

Distance Field Fonts

prepare

• parsebmFont: 加载字体
• loadAssets： 加载字体sdf&bitmap
• generateText: 创建四边形作为字符的画板
  • VBO, IBO
• setupVertexDescriptions
  • 设置VAO的Description
• prepareUniformBuffers
  • createBuffer
  • updateUniformBuffers
  • updateFontSettings
    • memcpy(uniformBuffers.fs.mapped, &uboFS, sizeof(uboFS));
• setupDescriptorSetLayout
  • descriptorSetLayoutBinding
  • vkCreateDescriptorSetLayout
  • vkCreatePipelineLayout
• preparePipelines
  • vkCreateGraphicsPipelines：mesh
  • vkCreateGraphicsPipelines: 字体
• setupDescriptorPool
  • vkCreateDescriptorPool
• setupDescriptorSet
  • vkAllocateDescriptorSets
  • writeDescriptorSet
  • vkUpdateDescriptorSets
• buildCommandBuffers
  • loop
    • vkBeginCommandBuffer
    • vkCmdBeginRenderPass
    • vkCmdSetViewport
    • vkCmdSetScissor
    • vkCmdBindPipeline
    • vkCmdBindVertexBuffers
    • vkCmdBindIndexBuffer
    • vkCmdDrawIndexed
    • Linear filtered bitmap font
      • vkCmdSetViewport
      • vkCmdBindDescriptorSets
      • vkCmdBindPipeline
      • vkCmdDrawIndexed
    • drawUI
    • vkCmdEndRenderPass
    • vkEndCommandBuffer

render

• draw
  • prepareFrame
  • vkQueueSubmit
  • submitFrame

shader

• bitmap: VS&FS 正常
• sdf:
  • VS: 正常
  • FS:
    • fwidth = abs(dFdx§)+ abs(dFdy§)
    • smoothstep: 可以用来生成0到1的平滑过渡值,

小结

  本节主要讲Distance Field Fonts 的使用, vulkan管线设置没有新东西。 感觉Distance Field Fonts字体渲染其实就是将一个四边形按照字体保存的距离场计算透明度. outline 也是根据这个场生成的(这里可以借鉴一下outline方法).

ImGui Overlay

   本节忽略掉, 应该不会使用到