第 2 步 - 显示泛光效果

在此步骤中,您首先将 bloom 效果应用于汽车的前灯。然后,通过将其与正常渲染的场景混合来显示 bloom 效果。

在下一步中,您将通过另外应用该泛光效果三次进行微调。

应用全屏泛光

要应用全屏泛光:

  1. 选择 File > Import > Import Project Item(s)。转到 <KanziWorkspace>/Tutorials/Bloom/Assets 并选择 GaussianBloom07.kzexport 文件。

    Kanzi Studio 添加 GaussianBloom07 材质类型和 GaussianBloom07Material 材质,该材质使用 7 像素的内核尺寸提供定向高斯模糊效果。您使用此材质创建全屏泛光效果。

    ../../_images/load-material-type-from-disk1.png ../../_images/gaussianbloom07material-in-library.png
  2. 应用第一个通道的全屏泛光效果:

    1. 在 Library > Rendering > Render Pass Prefabs > Bloom > Render Bloom 渲染通道中,创建一个 Blit 渲染通道,并将其命名为 Blit Horizontal Bloom。从 Library 中将 Bloom Threshold 渲染通道拖到 Properties 窗口,并将其放到 Blit Horizontal Bloom 渲染通道的 Texture 0 属性上。

      您将 Blit Horizontal Bloom 渲染通道设置为将 Bloom Threshold 渲染通道的结果纹理绘制到屏幕上。

      ../../_images/blit-horizontal-bloom-in-library.png ../../_images/blit-horizontal-bloom-texture0-binding.png
    2. 在 Properties 中,添加并设置:

      • Material 到 GaussianBloom07Material

      • 将 Material Properties > Blur Direction 属性 X 属性字段设置为 1。

        通过这种方式,您在水平方向上应用模糊效果。

      • Material Properties > Blur Radius 到 2

        通过这种方式,您可以设置模糊效果的强度。

      • Material Properties > Intensity 到 1.5

        通过这种方式,您可以设置泛光效果的强度。

      您使用此渲染通道来绘制 Bloom Threshold 渲染通道,使用 GaussianBloom07Material 材质将高斯模糊的泛光效果应用到 Car 节点的水平方向。

      ../../_images/blit-horizontal-bloom-properties.png ../../_images/preview-first-horizontal-blur-applied.png
    3. 在 Library 中的 Render Bloom 渲染通道中,创建一个 Composition Target 渲染通道,并将其命名为 Horizontal Bloom。将 Blit Horizontal Bloom 拖到 Horizontal Bloom 渲染通道中。

      您使用 Horizontal Bloom 渲染通道将 Blit Horizontal Bloom 渲染通道渲染到合成目标。在本节后面,您将使用合成目标作为输入,应用在垂直方向上具有高斯模糊的泛光效果的渲染通道。

      ../../_images/horizontal-bloom-1-in-library.png
    4. 在 Library 中,选择 Horizontal Bloom 渲染通道。在 Properties 中,添加 Resolution Divisor 属性,并将其设置为 2。

      通过这种方式,您将渲染通道自身渲染到的合成目标的分辨率除以 2。

      您可降低合成目标分辨率,以提高性能。

      ../../_images/horizontal-bloom-properties.png
    5. 在 Library 中,复制 Horizontal Bloom 渲染通道,并将新的渲染通道重命名为 Vertical Bloom。

      您使用此渲染通道在垂直方向应用模糊。

      ../../_images/duplicate-horizontal-bloom-1.png ../../_images/vertical-bloom-1-in-library.png
    6. 在 Library 中,选择 Vertical Bloom > Blit Horizontal Bloom 渲染通道。在 Properties 中:

      • 将 Name 属性设置为 Blit Vertical Bloom。

      • 单击绑定 Texture 0 属性的绑定,并在 Binding Editor 中,将 Expression 设置为

        {@../../Horizontal Bloom/CompositionTargetRenderPass.ResultTexture0}
        

        单击 Save。

      • 设置 Blur Direction:

        • X 属性字段为 0。

        • 将 Y 属性字段设置为 0.5。

          通过这种方式,您在垂直方向上应用模糊效果。

          您使用值 0.5,因为您将 Horizontal Bloom 渲染通道的分辨率除以 2。这样,您可以创建对称的模糊效果。

      您使用此渲染通道绘制 Horizontal Bloom 渲染通道,使用 GaussianBloom07Material 材质将高斯模糊的泛光效果应用到垂直方向的 Car 节点。

      ../../_images/vertical-bloom-1-blit-horizontal-bloom-in-library.png ../../_images/vertical-bloom-1-blit-vertical-bloom-in-library.png ../../_images/vertical-bloom-1-blit-vertical-bloom-properties.png
  3. 添加用于合并多个全屏泛光效果通道的材质:

    1. 加载 <KanziWorkspace>/Tutorials/Bloom/Assets/Combine.kzexport 材质。

      Kanzi Studio 添加 Combine 材质类型和 CombineMaterial 材质,该材质支持渲染四种纹理并为每种纹理定义倍增因子。

      ../../_images/load-material-type-from-disk1.png ../../_images/combinematerial-in-library.png
    2. 在 Library > Materials and Textures > Materials 中,选择 CombineMaterial。在 Properties 中,将 Texture 0、Texture 1、Texture 2 和 Texture 3 属性设置为 < No Texture >。

      ../../_images/combinematerial-without-textures.png
  4. 在 Library > Rendering > Render Pass Prefabs > Bloom > Render Bloom 中,创建一个 Blit 渲染通道,将其命名为 Blit Combined Bloom,然后:

    • 从 Library 中,将 Vertical Bloom 渲染通道拖到 Properties 窗口,并将其放在 Blit Combined Bloom 渲染通道的 Texture 0 属性上。

    • 在 Properties 中,将 Material 设置为 CombineMaterial。

    使用此渲染通道将 Vertical Bloom 渲染通道使用 CombineMaterial 绘制到屏幕上。在本教程的下一步中,您将应用三次 bloom 效果,并使用此渲染通道合并所有四个通道的输出。

    ../../_images/blit-combined-bloom-in-library.png ../../_images/blit-combined-bloom-properties-1-texture.png ../../_images/preview-bloom-pass-1-applied.png

显示大灯打开的汽车

在本节中,您将创建渲染通道和材料,以显示车灯打开的汽车。

要显示大灯打开的汽车:

  1. 创建支持混合全屏泛光效果和正常渲染场景的材质:

    1. 加载 <KanziWorkspace>/Tutorials/Bloom/Assets/BlitBloomMaterial.kzexport 材质。

      Kanzi Studio 添加 BlitBloom 材质类型和 BlitBloomMaterial 材质,该材质支持将全屏泛光效果与正常渲染的场景混合,并支持设置全屏泛光效果的颜色。

      ../../_images/load-material-type-from-disk1.png ../../_images/blitbloommaterial-in-library.png
    2. 在 Library > Materials and Textures > Materials 中,选择 BlitBloomMaterial。在 Properties 中,将 Blend Mode 属性设置为 Additive。

      您将 Blend Mode 设置为 Additive,因为要显示泛光效果,您希望将其像素值添加到正常渲染场景的像素值中。

      ../../_images/blitbloommaterial-in-library.png ../../_images/blitbloommaterial-properties.png
  2. 显示具有全屏泛光效果的场景:

    1. 在 Library > Rendering > Render Pass Prefabs > Bloom > Render Bloom 中,创建一个 Composition Target 渲染通道,并将其命名为 Bloom Out。将 Blit Combined Bloom 渲染通道拖到 Bloom Out 渲染通道中。

      ../../_images/bloom-out-created-in-library.png ../../_images/bloom-out-with-blit-combined-bloom-in-library.png
    2. 在 Library 的 Bloom 渲染通道预设中,创建一个 Blit 渲染通道,将其命名为 Show Bloom,然后:

      • 从 Library 中,将 Bloom Out 渲染通道拖到 Properties 窗口,并将其放在 Show Bloom 渲染通道的 Texture 0 属性上。

      • 在 Properties 中,添加并设置:

        • Material 到 BlitBloomMaterial

        • 将 Material Properties > Post-processing Color Multiply 属性 Lightness (L) 属性字段设置为 240。

          这样,您可以设置光晕效果的亮度。

      您使用此渲染通道绘制 Bloom Out 渲染通道,使用 BlitBloomMaterial 材质来显示泛光效果。

      ../../_images/show-bloom-in-library.png ../../_images/show-bloom-properties.png ../../_images/preview-show-bloom-pass-1.png

另请参阅

要了解有关 Kanzi 中渲染通道的更多信息,请参阅 渲染 (Rendering)。

要详细了解关于材质和材质类型的信息,请参阅 材质类型和材质。