mob-sakai / compositecanvasrenderer

CompositeCanvasRenderer bakes multiple source graphics into a bake-buffer (RenderTexture) and renders it. Additional material modification, mesh modification, and baking effects are supported! Let's enjoy the effects that were difficult to implement with UI shaders, such as blur, soft outline, and soft shadow!

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

compositecanvasrenderer's Issues

CompositeCanvasRenderer v.2.0.0

• Add document pages
• Add readme about CompositeCanvasSource
• Fix PreloadedProjectSettings
• Improve inspector
• Add baking profile (such as PostProcessingStack)

Fix documentation and demo

Missing Materials and Shaders in Demo Example / Repo

Hi,

In your demo you have this example :

I'm very interested in the materials for "UI Animation," "Masked Shadow," and "Animation Glow" featured in your demo. Unfortunately, these materials seem to be missing from the repository.

So when I start the project I have this error :
Exception: Type 'CompositeCanvas.Demos.CompositeCanvasRenderer_Demo_Signal, Coffee.CompositeCanvas.Demo' is not found UnityEngine.Debug:LogException(Exception) Coffee.NanoMonitor.NumericProperty:GetPropertyInfo(String) (at Packages/NanoMonitor/Scripts/Utilities/NumericProperty.cs:147) Coffee.NanoMonitor.NumericProperty:UnityEngine.ISerializationCallbackReceiver.OnAfterDeserialize() (at Packages/NanoMonitor/Scripts/Utilities/NumericProperty.cs:130) UnityEditor.PlayerSettings:GetPreloadedAssets() CompositeCanvas.ProjectSettings.PreloadedProjectSettings:GetPreloadedSettings(Type) (at Packages/src/Runtime/ProjectSettings/PreloadedProjectSettings.cs:27) CompositeCanvas.ProjectSettings.PreloadedProjectSettings:GetDefaultSettings(Type) (at Packages/src/Runtime/ProjectSettings/PreloadedProjectSettings.cs:34) CompositeCanvas.ProjectSettings.Initializer:Initialize() (at Packages/src/Runtime/ProjectSettings/PreloadedProjectSettings.cs:78) UnityEditor.EditorAssemblies:ProcessInitializeOnLoadMethodAttributes()

Could you please explain why these shaders weren't included?
Is it possible to obtain these shaders?

By the way, I love your work and am really impressed by the creativity and quality of your shaders! I saw that you integrated 2 beautiful shaders that are not in your exemple (analog effect and digital effect).

Thank you for your assistance.

Android crash

Unity 2020.3.48f1
CompositeCanvasRenderer 1.0.0

I received crash on android. In the developer console I got this:

---

pid: 0, tid: 22481 >>> com.my.game <<<

backtrace:
#00 pc 0x000000000083a2f4 /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libil2cpp.so (il2cpp::vm::Class::FromIl2CppType(Il2CppType const*, bool)+620) (BuildId: 06b2f0171988ec888bf36bdb351ede1110ac8cc9)
#01 pc 0x0000000000857588 /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libil2cpp.so (il2cpp::vm::Type::GetTypeFromHandle(long)+1112) (BuildId: 06b2f0171988ec888bf36bdb351ede1110ac8cc9)
#2 pc 0x00000000015abe8c /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libil2cpp.so (Type_GetTypeFromHandle_m180706985100778663E9C75D4FC001D367C0120F+23114) (BuildId: 06b2f0171988ec888bf36bdb351ede1110ac8cc9)
#3 pc 0x000000000096ed20 /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libil2cpp.so (GameObject_TryGetComponent_TisRuntimeObject_mC7639C3E3E2A65695113BCF25718826CC392D6CB_gshared+50634) (BuildId: 06b2f0171988ec888bf36bdb351ede1110ac8cc9)
#4 pc 0x0000000001a911d0 /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libil2cpp.so (U3CU3Ec_U3CInitializeOnLoadU3Eb__20_0_m3EDDAFAFF9326B868348C64EB1A67F61BF14DA82+15868) (BuildId: 06b2f0171988ec888bf36bdb351ede1110ac8cc9)
#5 pc 0x0000000000e133e4 /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libil2cpp.so (Action_1_Invoke_m587509C88BB83721D7918D89DF07606BB752D744_gshared+47) (BuildId: 06b2f0171988ec888bf36bdb351ede1110ac8cc9)
#6 pc 0x0000000001301cb4 /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libil2cpp.so (FastAction_1_Call_mB927B5612809DE54BD50582C401751F281A197EA_gshared+36479) (BuildId: 06b2f0171988ec888bf36bdb351ede1110ac8cc9)
#07 pc 0x000000000156edc8 /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libil2cpp.so (TextMeshProUGUI_GenerateTextMesh_mA2F8E81A125F189133866F64EF1AE377238BCB9B+21) (BuildId: 06b2f0171988ec888bf36bdb351ede1110ac8cc9)
#08 pc 0x0000000001569a70 /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libil2cpp.so (TextMeshProUGUI_OnPreRenderCanvas_m87F59A95DCCEFAAAA470E491C6CC6967FF0ACD21+21) (BuildId: 06b2f0171988ec888bf36bdb351ede1110ac8cc9)
#09 pc 0x0000000001573180 /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libil2cpp.so (TextMeshProUGUI_Rebuild_mF0C1F166FB5B4A7B8E13A590422C1FBC083717D7+35704) (BuildId: 06b2f0171988ec888bf36bdb351ede1110ac8cc9)
#10 pc 0x00000000010a1f00 /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libil2cpp.so (CanvasUpdateRegistry_PerformUpdate_mC0E85CD761EA6D619AB636E6671CB91DF6605A12+119) (BuildId: 06b2f0171988ec888bf36bdb351ede1110ac8cc9)
#11 pc 0x0000000001db8f7c /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libil2cpp.so (WillRenderCanvases_Invoke_mFCD97A3223FD31C109A2B6283ECE7FE307E89282+47) (BuildId: 06b2f0171988ec888bf36bdb351ede1110ac8cc9)
#12 pc 0x00000000006eca40 /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libil2cpp.so (RuntimeInvoker_FalseVoid_t700C6383A2A510C2CF4DD86DABD5CA9FF70ADAC5(void ()(), MethodInfo const, void*, void**)+137905) (BuildId: 06b2f0171988ec888bf36bdb351ede1110ac8cc9)
#13 pc 0x000000000084c9b0 /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libil2cpp.so (il2cpp::vm::Runtime::Invoke(MethodInfo const*, void*, void**, Il2CppException**)+556) (BuildId: 06b2f0171988ec888bf36bdb351ede1110ac8cc9)
#14 pc 0x000000000061a4f4 /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libunity.so (BuildId: 4565412aacb0f77699b60001b0821a460b259334)
#15 pc 0x000000000061f750 /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libunity.so (BuildId: 4565412aacb0f77699b60001b0821a460b259334)
#16 pc 0x0000000000261f34 /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libunity.so (BuildId: 4565412aacb0f77699b60001b0821a460b259334)
#17 pc 0x0000000000540910 /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libunity.so (BuildId: 4565412aacb0f77699b60001b0821a460b259334)
#18 pc 0x0000000000540944 /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libunity.so (BuildId: 4565412aacb0f77699b60001b0821a460b259334)
#19 pc 0x0000000000540b88 /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libunity.so (BuildId: 4565412aacb0f77699b60001b0821a460b259334)
#20 pc 0x0000000000699b3c /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libunity.so (BuildId: 4565412aacb0f77699b60001b0821a460b259334)
#21 pc 0x00000000006b0330 /data/app/~~hs1rz9CEojR-U50Q6swbUg==/com.my.game-QY9MNYZ2gcOnJ0R1InzjjQ==/lib/arm64/libunity.so (BuildId: 4565412aacb0f77699b60001b0821a460b259334)
#22 pc 0x0000000000355630 /apex/com.android.art/lib64/libart.so (art_quick_generic_jni_trampoline+144)
#23 pc 0x0000000002001128 /memfd:jit-cache

So as I understand, crash appear in this method:

    public class CompositeCanvasProcess
    {
...
#if UNITY_EDITOR
        [InitializeOnLoadMethod]
#else
        [RuntimeInitializeOnLoadMethod(RuntimeInitializeLoadType.BeforeSceneLoad)]
#endif
        private static void InitializeOnLoad()
        {
#if TMP_ENABLE
            TMPro_EventManager.TEXT_CHANGED_EVENT.Add(obj =>
            {
                if (!(obj is TextMeshProUGUI textMeshProUGUI)) return;
                if (!textMeshProUGUI.TryGetComponent<CompositeCanvasSource>(out var source)) return;
                if (!source || !source.isActiveAndEnabled) return;
                if (!source.renderer || !source.renderer.isActiveAndEnabled) return;

                textMeshProUGUI.mesh.CopyTo(source.mesh);

                var subMeshes = ListPool<TMP_SubMeshUI>.Rent();
                textMeshProUGUI.GetComponentsInChildren(subMeshes);
                foreach (var subMesh in subMeshes)
                {
                    if (!subMesh.TryGetComponent<CompositeCanvasSource>(out var subSource)) continue;
                    subMesh.mesh.CopyTo(subSource.mesh);
                }

                ListPool<TMP_SubMeshUI>.Return(ref subMeshes);
            });
#endif
        }
...
}

Incorrect colors in Linear color space

Describe the bug
If I specify a color through the color parameter of the Image, some colors are displayed incorrectly.
At the same time, the color looks correct if you specify it through the Button's color tint

To Reproduce
Steps to reproduce the behavior:

1. Set rendering color space to Linear in ProjectSettings (for Gamma it looks correct)
2. Create Image outside of CompositeCanvasRender
3. Create Image inside CompositeCanvasRender
4. Set color #885522 for both images
5. See different colors

Expected behavior
The color must be the same

Screenshots

Environment:

• Version 1.0.0
• Platform: Editor(Windows), Android
• Unity version: 2022.3.11f1
• Build options: IL2CPP, .Net Standard 2.1, Builtin-RP

Additional context
in my project this can be fixed by converting mesh colors to linear space, but I'm not sure if this works for all cases