Composite Canvas Renderer

October 26, 2023 · View on GitHub

:warning: NOTE: If you are using Unity 2022.2 or earlier, please use the v1.x version.

<< 📘 Documentation | 🎮 Demo | ⚙ Installation | 🚀 Usage | 🤝 Contributing >>

📝 Description

CompositeCanvasRenderer bakes multiple source graphics into a bake-buffer (RenderTexture) and renders it.

It also supports additional material modification, mesh modification, and baking effects, allowing you to enjoy effects that were challenging to implement with standard UI shaders, such as blur, soft outline, and soft shadow.

Key Features:

Bakes multiple source graphics into a RenderTexture as bake-buffer.
Utilizes the materials set on the source graphics during the baking process.
The bake-buffer is automatically baked as needed, or you can trigger manual baking with SetDirty().
Apply custom effects to the bake-buffer using a CommandBuffer after baking (as post-bake effect).
You can use custom materials for rendering the bake-buffer.

Let's enjoy a wide range of effects that were previously challenging to achieve with standard UI shaders!

Features

Efficiency: By combining multiple graphics into a bake-buffer, it reduces the number of draw calls and can significantly improve rendering performance.
Automated Baking: The bake-buffer is automatically generated as needed, simplifying the rendering process and reducing manual intervention.
Control: Users have the flexibility to manually trigger the baking process using SetDirty(), giving them control over when and how the graphics are baked.
Material Usage: It ensures that the materials set on the graphics are used during the baking process, maintaining visual consistency.
Post-Bake Effects: After baking, you can apply various effects to the bake buffer using a command buffer, allowing for additional visual enhancements or post-processing.
Built-in Effects: Several effects are available out of the box!
Custom Material Support: You can use custom materials for rendering the bake-buffer.
Foreground/Background Rendering: Supports both foreground and background rendering.
Color and Blend Mode: Allows you to change color modes and blend modes.
Quality and Performance Control: You can fine-tune quality and performance using the Down Sampling Rate parameter.
Perspective/Orthographic Rendering: Supports both perspective and orthographic rendering. In orthographic rendering (where relative position.z and relative rotation.xy are 0), baking is less frequent.
TextMeshPro Compatibility: Works seamlessly with TextMeshPro. <font> and <sprite> tags are supported, and it may also be compatible with other custom UI classes.
Editor Support: Enjoy a convenient editing experience with the ability to preview the bake buffer in the inspector and visualize the baking region in the scene view. You can also customize the behavior from the project settings.

📄 Documentation

Check out the detailed documentation to learn more about the project and its features.

Documentation

🎮 Demo

WebGL Demo

⚙ Installation

:warning: NOTE: If you are using Unity 2022.2 or earlier, please use the v1.x.

This package requires Unity 2022.3 or later.

Install via OpenUPM

This package is available on OpenUPM package registry. This is the preferred method of installation, as you can easily receive updates as they're released.

If you have openupm-cli installed, then run the following command in your project's directory:

openupm add com.coffee.composite-canvas-renderer

Install via UPM (using Git URL)

Navigate to your project's Packages folder and open the manifest.json file. Then add this package somewhere in the dependencies block:

{
  "dependencies": {
    "com.coffee.composite-canvas-renderer": "https://github.com/mob-sakai/CompositeCanvasRenderer.git?path=Packages/src",
    ...
  },
}

To update the package, change suffix #{version} to the target version.

e.g. "com.coffee.composite-canvas-renderer": "https://github.com/mob-sakai/CompositeCanvasRenderer.git?path=Packages/src#2.0.0",

🚀 Usage

Create a GameObject with the CompositeCanvasRenderer component.
Add UI elements such as Image, RawImage, Text, TextMeshProUGUI, etc., to the GameObject.
The baking area is determined by the RectTransform.size and the Expands option. In the scene view, the baking area is displayed as a magenta rectangle.
Adjust the CompositeCanvasRenderer settings in the inspector.
Select an effect in the inspector and fine-tune its settings.
Enjoy!

Project Settings

You can adjust the project-wide settings for CompositeCanvasRenderer. (Edit > Project Settings > UI > Composite Canvas Renderer)

Settings

Transform Sensitivity: Sensitivity of transform that automatically rebuilds the soft mask buffer.
Enable Culling In Play Mode:
Enable Culling In Edit Mode:

Shader

Registered Variants: A list of shader variants available at runtime. Use "-" button to remove unused variants, reducing build time and file size.
- By default, the used ui-effect shaders will be included in the build. You can remove them if you don't need.
Unregistered Variants: A list of shader variants that are not registered. Use "+" button to add variants.
Error On Unregistered Variant: If enabled, an error will be displayed when an unregistered shader variant is used.
- The shader variant will be automatically added to the Unregistered Variants list.

Important

The setting file is usually saved in Assets/ProjectSettings/CompositeCanvasRendererProjectSettings.asset. Include this file in your version control system.
The setting file is automatically added as a preloaded asset in ProjectSettings/ProjectSettings.asset.

Advanced

Pre Load Settings In Build: When enabled, this settings asset will be added to PlayerSettings.preloadedAssets in build.
When disable, you should load this settings via Resources, AssetBundles or Addressables to use CompositeCanvasRenderer.
You can overwrite the settings by re-enabling CompositeCanvasRendererProjectSettings. This allows you to hot update shader variants and presets.

private static IEnumerator HotUpdateCoroutine()
{
    const string k_SettingsAddress = "Assets/ProjectSettings/CompositeCanvasRendererProjectSettings.asset";
    yield return Addressables.LoadAssetAsync<CompositeCanvasRendererProjectSettings>(k_SettingsAddress);
    while (CompositeCanvasRendererProjectSettings.shaderVariantCollection.WarmUpProgressively(5) == false) yield return null;
}

🤝 Contributing

Issues

Issues are incredibly valuable to this project:

Ideas provide a valuable source of contributions that others can make.
Problems help identify areas where this project needs improvement.
Questions indicate where contributors can enhance the user experience.

mob-sakai