将内容渲染到合成目标

使用 Composition Target Render Pass 来:

Composition Target Render Pass 会自动从其渲染的内容创建纹理。一个 Composition Target Render Pass 最多可以渲染到四个合成目标。您可以使用 Blit Render Pass 将这些纹理绘制到屏幕或其他合成目标,使用特定的材质。要将内容渲染到 Render Target Texture,您可以使用 Render to Texture Pass。请参阅 渲染到纹理。

将内容渲染到一个合成目标

要将内容渲染成一个合成目标:

  1. 在 Library 中,按 Alt 并右键单击 Rendering,并选择 Compose and Blit Pass。

    Compose and Blit Pass 包含渲染通道结构,使您能够使用特定材质将 Composition Target Render Pass 渲染通道或纹理传输到屏幕。

    Compose and Blit Pass 渲染通道预设包含以下渲染通道:

    • Composition Target Render Pass 将自身及其后代渲染通道渲染到一个或多个合成目标。

      • Clear Render Pass 清除当前渲染背景的若干或所有缓冲区。

        默认情况下,Compose and Blit Pass 中的 Clear Render Pass 使用透明黑色清除第一个颜色缓冲区,并使用值 1 清除深度缓冲区。

        例如,要使用不同的颜色清除第一个颜色缓冲区,请将 Clear Color 0 属性设置为您希望用作 Kanzi 渲染到 Composition Target Render Pass 的内容背景颜色的颜色。

      • Gather Lights Render Pass 收集您设置为使用 Compose and Blit Pass 的 Viewport 2D 节点中的 Light 节点,并将它们传递给其子 Draw Objects Render Pass 渲染通道。

        • Draw Objects Render Pass 名为 Draw Objects 允许您设置一个 Camera 节点来渲染特定的节点列表,过滤这些节点,并控制视锥体裁剪。默认情况下,Draw Objects Render Pass 使用其最近的祖先 Gather Lights Render Pass 提供的灯光来渲染节点。默认情况下,Draw Objects Render Pass 使用默认的 Camera 节点来渲染 Viewport 2D 节点中的所有节点。

    • Blit Render Pass 使用一种特定材质将一个或多个单一纹理或立方体贴图纹理位块传送到屏幕。

      默认情况下,该 Blit Render Pass 在屏幕上绘制 Composition Target Render Pass 渲染其内容的第一个颜色纹理。

      ../../_images/compose-and-blit-pass-create1.png ../../_images/compose-and-blit-pass-library1.png
  2. 在 Node Tree 中,选择您要将其内容渲染到合成目标的 Viewport 2D 节点。在 Properties 中,将 Render Pass Prefab 属性设置为 Compose and Blit Pass。

    Kanzi 将该 Viewport 2D 中的场景渲染到合成目标,并使用 Blit Render Pass 将内容绘制到屏幕上。

    ../../_images/viewport-2d-in-the-project.png ../../_images/render-pass-prefab-set-to-compose-and-blit-pass.png
  3. (可选) 如果您未设置合成目标,可以在 Composition Target Render Pass 中设置这些属性:

    • Resolution Multiplier 和 Resolution Divisor 设置默认合成目标的分辨率。

      Kanzi Studio 将合成目标的分辨率乘以 Resolution Multiplier 属性的值,并除以 Resolution Divisor 属性的值。

      例如,要将合成目标的分辨率乘以四倍,请将 Resolution Multiplier 设置为 4。要将合成目标的分辨率减少到原来的四分之一,请将 Resolution Divisor 设置为 4。

      小技巧

      您可以使用 Composition Target Render Pass > Width 和 Height 属性来设置合成目标的确切大小。Width 和 Height 属性的值会覆盖根据 Resolution Multiplier 和 Resolution Divisor 属性的值计算出的合成目标的尺寸。

      要将 Width 或 Height 属性绑定到当前视口宽度或高度的一部分,使用 Render Pass > Input Viewport Area 属性,该属性报告相对于父渲染通道的合成空间的视口区域。

      在绑定中,使用这些表达式来访问视口的尺寸:

      • 宽度:{@./RenderPass.InputViewportArea}.Z

      • 高度:{@./RenderPass.InputViewportArea}.W

    • Pixel Format 0 设置合成目标的像素格式。

    • Depth Texture Format 设置深度合成目标的格式。

      当您想创建深度纹理时,设置此属性。

      此属性的值会覆盖 Depth Renderbuffer Format 属性的值。

    • Depth Renderbuffer Format 设置深度渲染缓冲区的格式。

      当您未设置此属性时,Kanzi 会自动将深度渲染缓冲区格式设置为最佳可用格式。在大多数情况下,这是 32 位浮点格式,它也消耗最多的内存。

      Depth Texture Format 属性的值会覆盖此属性的值。

    • Depth Compare Function 用于设置深度合成目标的深度比较模式。

    • Addressing Mode 设置 Kanzi 如何处理 [0, 0] - [1, 1] 矩形之外的合成目标纹理的纹理坐标:

      • Repeat 使纹理在这些坐标之外重复。这是默认值。

      • Mirror 以使纹理重复,但每隔一次重复进行镜像。

      • Clamp 将纹理限制在这些坐标内,并在坐标之外重复纹理的边缘像素。

      • Mirror once 使纹理在负方向上重复一次,然后将纹理夹紧。

    • Filter Mode 设置 Kanzi 如何访问合成目标的纹理样本:

      • Nearest 从最近的样本中获取颜色。

      • Linear 用于从相邻样本中插值颜色。这是默认值。

    • 使用 Mipmap Mode 为合成目标创建 mipmap。请参阅 为合成目标创建 mipmap。

    • Multisample Level 设置您要使用的抗锯齿采样数。请参阅 使用多重采样。

    ../../_images/composition-target-render-pass-default-properties.png

将内容渲染到多个合成目标

您可以设置一个 Composition Target Render Pass 来渲染最多四个合成目标。 例如,使用多重渲染目标渲染来实现屏幕空间环境光遮蔽或延迟着色。

要将内容渲染到多个合成目标,您要运行 Kanzi 应用程序的硬件必须支持 GL_EXT_draw_buffers 扩展或 OpenGL ES 3.0 或更高版本。

要将内容渲染成多个合成目标:

  1. 在 Library 中,按 Alt 并右键单击 Rendering,并选择 Compose and Blit Pass。

    Compose and Blit Pass 包含渲染通道结构,使您能够使用特定材质将 Composition Target Render Pass 渲染通道或纹理传输到屏幕。

    Compose and Blit Pass 渲染通道预设包含以下渲染通道:

    • Composition Target Render Pass 将自身及其后代渲染通道渲染到一个或多个合成目标。

      • Clear Render Pass 清除当前渲染背景的若干或所有缓冲区。

        默认情况下,Compose and Blit Pass 中的 Clear Render Pass 使用透明黑色清除第一个颜色缓冲区,并使用值 1 清除深度缓冲区。

        例如,要使用不同的颜色清除第一个颜色缓冲区,请将 Clear Color 0 属性设置为您希望用作 Kanzi 渲染到 Composition Target Render Pass 的内容背景颜色的颜色。

      • Gather Lights Render Pass 收集您设置为使用 Compose and Blit Pass 的 Viewport 2D 节点中的 Light 节点,并将它们传递给其子 Draw Objects Render Pass 渲染通道。

        • Draw Objects Render Pass 名为 Draw Objects 允许您设置一个 Camera 节点来渲染特定的节点列表,过滤这些节点,并控制视锥体裁剪。默认情况下,Draw Objects Render Pass 使用其最近的祖先 Gather Lights Render Pass 提供的灯光来渲染节点。默认情况下,Draw Objects Render Pass 使用默认的 Camera 节点来渲染 Viewport 2D 节点中的所有节点。

    • Blit Render Pass 使用一种特定材质将一个或多个单一纹理或立方体贴图纹理位块传送到屏幕。

      默认情况下,该 Blit Render Pass 在屏幕上绘制 Composition Target Render Pass 渲染其内容的第一个颜色纹理。

      ../../_images/compose-and-blit-pass-create1.png ../../_images/compose-and-blit-pass-library1.png
  2. 在 Node Tree 中,选择其内容要渲染到合成目标的 Viewport 2D 节点,并在 Properties 中将 Render Pass Prefab 属性设置为 Compose and Blit Pass。

    Kanzi 在该 Viewport 2D 中渲染场景到一个合成目标,并使用 Blit Render Pass 将内容绘制到屏幕上。

    ../../_images/viewport-2d-in-the-project.png ../../_images/render-pass-prefab-set-to-compose-and-blit-pass.png
  3. 要设置您想要创建的合成目标的数量,在 Compose and Blit Pass 中的 Library 中选择 Composition Target Render Pass,在 Properties 中添加一个或多个 Pixel Format 0、Pixel Format 1、Pixel Format 2 和 Pixel Format 3 属性,并将它们设置为您想要用于合成目标的像素格式。

    如果您未设置任何像素格式属性,Kanzi 将为 Composition Target Render Pass 创建一个合成目标。

    具有最高索引的像素格式属性设置 Kanzi 为 Composition Target Render Pass 创建的合成目标的数量。未设置值的像素格式属性将从您已设置值的具有更高索引的像素格式属性中获取其值。

    例如:

    • 如果您设置 Pixel Format 0 和 Pixel Format 2 属性的值,Kanzi 将创建三个合成目标并设置:

      • 第一个合成目标使用您通过 Pixel Format 0 属性设置的像素格式。

      • 第二个合成目标使用您通过 Pixel Format 2 属性设置的像素格式。

      • 第三个合成目标使用您通过 Pixel Format 2 属性设置的像素格式。

    • 要创建使用相同像素格式的两个合成目标,请设置 Pixel Format 1 属性的值。

    ../../_images/composition-target-render-pass-in-compose-and-blit-pass.png ../../_images/composition-target-render-pass-pixel-format.png
  4. 在 Library 中,选择 Compose and Blit Pass > Composition Target Render Pass > Clear Render Pass,并在 Properties 中添加并设置 Clear Color 属性为您想要用来清除合成目标的颜色缓冲区的颜色。

    例如,如果您想使用两个合成目标,请设置 Clear Color 0 和 Clear Color 1 属性。

    ../../_images/clear-render-pass-in-compose-and-blit-pass.png ../../_images/clear-render-pass-clear-color-0-1-set.png
  5. 在您要用于将内容绘制到多个合成目标的 Material Type 中的 Library > Materials and Textures > Material Types 中,编辑 Fragment Shader:

    1. (可选) 如果您的目标平台不支持 OpenGL ES 3,请启用 GL_EXT_draw_buffers 扩展,该扩展允许指定要绘制的颜色缓冲区列表:

      #extension GL_EXT_draw_buffers : enable
      
    2. 将输出值写入输出数组变量 gl_FragData[n] 的元素中,而不是 gl_FragColor,其中 n 是您要写入的颜色缓冲区的索引,对应于具有匹配索引的 Composition Target Render Pass 结果纹理。

      ...
      
      void main()
      {
          ...
      
          gl_FragColor = ...
      }
      

      使用

      ...
      
      void main()
      {
          ...
      
          // Write the value to CompositionTargetRenderPass.ResultTexture0.
          gl_FragData[0] = ...
      
          // Write the value to CompositionTargetRenderPass.ResultTexture1.
          gl_FragData[1] = ...
      
          ...
      }
      
  6. 通过将它们的 Texture 属性绑定到 Composition Target Render Pass 的 Result Texture 属性,设置一个或多个 Blit Render Pass 渲染通道以绘制合成目标的内容。

    例如,要设置一个 Blit Render Pass 以绘制多个合成目标:

    1. 在 Library 中,选择 Compose and Blit Pass > Blit Render Pass,并在 Properties 中为每个组合目标复制绑定,该绑定绑定 Texture 0 属性。

      ../../_images/blit-render-pass-in-compose-and-blit-pass.png ../../_images/blit-render-pass-copy-texture-binding.png ../../_images/blit-render-pass-paste-binding.png
    2. 单击您创建的每个绑定,并在 Binding Editor 中设置:

      • 将 Property 到您想要绑定的纹理。

      • Expression 到 Composition Target Render Pass 中相应的 Result Texture 属性。

      例如,设置:

      • Property 到 Blit Render Pass > Texture 1

      • Expression 到

        {@../Composition Target Render Pass/CompositionTargetRenderPass.ResultTexture1}
        
      ../../_images/click-texture-binding.png ../../_images/blit-render-pass-texture-1-binding.png
  7. (可选) 要渲染到深度纹理:

    1. 在 Library 中选择 Composition Target Render Pass,并在 Properties 中添加并设置 Depth Texture Format 为您要用于深度纹理的格式。

      如果您没有设置 Depth Texture Format 属性,但渲染设置要求深度测试以渲染 Composition Target Render Pass 的子渲染通道,Kanzi 会自动创建一个深度渲染缓冲区。

    2. 在您要复制深度纹理的 Blit Render Pass 中,将 Texture 属性绑定到 Composition Target Render Pass 的 Result Depth Texture 属性。

  8. (可选) 当您没有手动设置 Composition Target Render Pass 的任何合成目标时,Kanzi 会将属性值应用于其创建的所有合成目标。您可以通过手动设置这些属性来更改此设置:

    • Resolution Multiplier 和 Resolution Divisor 用于设置合成目标的分辨率。

      Kanzi 将每个合成目标的分辨率乘以 Resolution Multiplier 属性的值,并除以 Resolution Divisor 属性的值。

      例如,要将每个合成目标的分辨率乘以四倍,请将 Resolution Multiplier 设置为 4。要将每个合成目标的分辨率减少到原来的四分之一,请将 Resolution Divisor 设置为 4。

      小技巧

      您可以使用 Composition Target Render Pass > Width 和 Height 属性来设置合成目标的确切大小。Width 和 Height 属性的值会覆盖根据 Resolution Multiplier 和 Resolution Divisor 属性的值计算出的合成目标的尺寸。

      要将 Width 或 Height 属性绑定到当前视口宽度或高度的一部分,使用 Render Pass > Input Viewport Area 属性,该属性报告相对于父渲染通道的合成空间的视口区域。

      在绑定中,使用这些表达式来访问视口的尺寸:

      • 宽度:{@./RenderPass.InputViewportArea}.Z

      • 高度:{@./RenderPass.InputViewportArea}.W

    • Addressing Mode 设置 Kanzi 如何处理 [0, 0] - [1, 1] 矩形之外的合成目标纹理的纹理坐标:

      • Repeat 使纹理在这些坐标之外重复。这是默认值。

      • Mirror 以使纹理重复,但每隔一次重复进行镜像。

      • Clamp 将纹理限制在这些坐标内,并在坐标之外重复纹理的边缘像素。

      • Mirror once 使纹理在负方向上重复一次,然后将纹理夹紧。

    • Filter Mode 设置 Kanzi 如何访问合成目标的纹理样本:

      • Nearest 从最近的样本中获取颜色。

      • Linear 用于从相邻样本中插值颜色。这是默认值。

    • 使用 Mipmap Mode 为合成目标创建 mipmap。请参阅 为合成目标创建 mipmap。

    • Multisample Level 设置您要使用的抗锯齿采样数。请参阅 使用多重采样。

在多个帧之间分配合成目标的渲染

要减少每帧渲染工作负载的数量,您可以设置 Kanzi 更新 Composition Target Render Pass 的合成目标的频率。

要分配合成目标的渲染:

  1. 在 Library > Rendering > Render Pass Prefabs 中,选择一个您用来将内容渲染到合成目标的 Composition Target Render Pass。请参阅 将内容渲染到一个合成目标、将内容渲染到多个合成目标 和 渲染到纹理。

    ../../_images/composition-target-render-pass-in-compose-and-blit-pass.png
  2. 在 Properties 中,添加并设置:

    • Render Pass > Update Rate 到您希望更新 Composition Target Render Pass 渲染的内容的速率:

      • 要在每帧更新内容,请设置为 1。这是默认值。

      • 要每隔一帧更新内容,请设置为 2;要每隔四帧更新内容,请设置为 4,以此类推。

      • 要仅渲染一次内容,请设置为 0。

    • Render Pass > Update Rate Offset 到您想要偏移渲染速率的帧数。

      通过这种方式,您可以将多个渲染通道的渲染分配到不同的帧。

      例如,当您有两个 Composition Target Render Pass 渲染通道,其内容每隔一帧更新一次时,在其中一个渲染通道中,将 Update Rate Offset 设置为 1。这样,Kanzi 就会在交替的帧中更新这些渲染通道渲染的内容。

    小技巧

    要在使用相同渲染通道预设的多个 Viewport 2D 节点中将 Update Rate 和 Update Rate Offset 属性设置为不同的值,您可以自定义该渲染通道预设的实例。请参阅 自定义渲染通道的实例。

    ../../_images/properties-update-rate.png

另请参阅

渲染 (Rendering)

使用 Kanzi Studio 渲染通道预设

渲染多个渲染通道或纹理

创建后期处理效果

为合成目标创建 mipmap

使用多重采样

教程:创建一个 bloom 效果