Composite Canvas Renderer

<< 📘 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

This package requires Unity 2019.4 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#1.0.0",

🚀 Usage

1. Create a GameObject with the CompositeCanvasRenderer component.

2. Add UI elements such as Image, RawImage, Text, TextMeshProUGUI, etc., to the GameObject.

3. 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.

4. Adjust the CompositeCanvasRenderer settings in the inspector.

5. Select an effect in the inspector and fine-tune its settings.

6. Enjoy!

🤝 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.

Pull Requests

Pull requests offer a fantastic way to contribute your ideas to this repository.
Please refer to CONTRIBUTING.md and develop branch for guidelines.

Support

This is an open-source project developed during my spare time.
If you appreciate it, consider supporting me.
Your support allows me to dedicate more time to development. 😊

License

• MIT

Author

• mob-sakai

See Also

• GitHub page : https://github.com/mob-sakai/CompositeCanvasRenderer
• Releases : https://github.com/mob-sakai/CompositeCanvasRenderer/releases
• Issue tracker : https://github.com/mob-sakai/CompositeCanvasRenderer/issues
• Change log : https://github.com/mob-sakai/CompositeCanvasRenderer/blob/main/CHANGELOG.md