将内容渲染到合成目标

使用 Composition Target 渲染通道可以:

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

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

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

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

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

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

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

      • Clear 渲染通道清除当前渲染上下文的部分或全部缓冲区。

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

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

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

        • 名为 Draw Objects 的 Draw Objects 渲染通道使您能够设置 Camera 节点来渲染特定的节点列表、过滤这些节点并控制视锥体剔除。默认情况下,Draw Objects 渲染通道使用其最近的祖先 Gather Lights 渲染通道提供的灯光来渲染节点。默认情况下,Draw Objects 渲染通道使用默认的 Camera 节点渲染 Viewport 2D 节点中的所有节点。

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

      默认情况下,此 Blit 渲染通道将 Composition Target 渲染通道渲染其内容所用的第一个颜色纹理绘制到屏幕上。

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

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

    ../../_images/viewport-2d-in-the-project.png ../../_images/render-pass-prefab-set-to-compose-and-blit-pass.png
  3. (可选) 如果您不设置合成目标,可以在 Composition Target 渲染通道中设置以下属性:

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

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

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

      小技巧

      您可以使用 Composition Target 渲染通道 > 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 渲染通道设置为最多渲染到四个合成目标。例如,使用多渲染目标渲染来实现屏幕空间环境光遮蔽或延迟着色。

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

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

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

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

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

      • Clear 渲染通道清除当前渲染上下文的部分或全部缓冲区。

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

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

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

        • 名为 Draw Objects 的 Draw Objects 渲染通道使您能够设置 Camera 节点来渲染特定的节点列表、过滤这些节点并控制视锥体剔除。默认情况下,Draw Objects 渲染通道使用其最近的祖先 Gather Lights 渲染通道提供的灯光来渲染节点。默认情况下,Draw Objects 渲染通道使用默认的 Camera 节点渲染 Viewport 2D 节点中的所有节点。

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

      默认情况下,此 Blit 渲染通道将 Composition Target 渲染通道渲染其内容所用的第一个颜色纹理绘制到屏幕上。

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

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

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

    如果您未设置任何像素格式属性,Kanzi 会为 Composition Target 渲染通道创建一个合成目标。

    索引最高的像素格式属性决定 Kanzi 为 Composition Target 渲染通道创建的合成目标数量。您未设置值的像素格式属性会从索引更高且已设置值的像素格式属性获取其值。

    例如:

    • 如果您设置 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 渲染通道 > Clear 渲染通道,并在 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. 在 Library > Materials and Textures > Material Types 中,在您要用于将内容绘制到多个合成目标的 Material Type 中,编辑 Fragment Shader。

    不要使用 gl_FragColor,而是使用 ES 3.1 着色器语法显式定义每个输出及其位置和类型。在 layout(location = n) 中,n 是您要写入的颜色缓冲区的索引,对应于具有匹配索引的 Composition Target 渲染通道结果纹理。代替

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

    使用

    ...
    
    #version 310 es
    
    layout(location = 0) out mediump vec4 outColor0;
    layout(location = 1) out highp  float outFloat1;
    
    void main()
    {
        ...
    
        // Write the value to CompositionTargetRenderPass.ResultTexture0.
        outColor0 = ...
    
        // Write the value to CompositionTargetRenderPass.ResultTexture1.
        outFloat1 = ...
    
        ...
    }
    
  6. 设置一个或多个 Blit 渲染通道来绘制合成目标的内容:将这些渲染通道的 Texture 属性绑定到 Composition Target 渲染通道的 Result Texture 属性。

    例如,要设置一个 Blit 渲染通道来绘制多个合成目标:

    1. 在 Library 中选择 Compose and Blit Pass > Blit 渲染通道,并在 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 渲染通道中对应的 Result Texture 属性

      例如,设置:

      • Property 为 Blit 渲染通道 > Texture 1

      • Expression 到

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

    1. 在 Library 中选择 Composition Target 渲染通道,并在 Properties 中添加 Depth Texture Format 属性,将其设置为您要用于深度纹理的格式。

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

    2. 在您要用来 blit 深度纹理的 Blit 渲染通道中,将 Texture 属性绑定到 Composition Target 渲染通道的 Result Depth Texture 属性。

  8. (可选) 如果您没有手动设置 Composition Target 渲染通道的任何合成目标,Kanzi 会将这些属性值应用于它创建的所有合成目标。您可以通过手动设置以下属性来更改这一行为:

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

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

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

      小技巧

      您可以使用 Composition Target 渲染通道 > 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 渲染通道的合成目标的频率。

要分配合成目标的渲染:

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

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

    • Render Pass > Update Rate 为您希望更新 Composition Target 渲染通道所渲染内容的频率:

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

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

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

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

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

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

    小技巧

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

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

另请参阅

渲染 (Rendering)

使用 Kanzi Studio 渲染通道预设

渲染多个渲染通道或纹理

创建后期处理效果

为合成目标创建 mipmap

使用多重采样

教程:创建一个 bloom 效果