Transparent Recording using Unity Recorder

Hi!

We are very happy that the problem has been resolved! :)

We mentioned that the shader we provided is for Gamma because it doesn't include calculations for linear space.

However, since the Shaders used in Step1 are just showing the character in white, you can use them in Linear as well.

If you look at the UI of the material library, you can find the Shader asset properties for "Linear" as well as "Gamma"

Set the 2 "Step1" Shaders we provided to the "2. Color Space : Linear" item (just like you set a total of 8 in the Gamma property).

Then it will be rendered in Linear as well.

(However, we recommend using Gamma for 2D games that usually use Unlit.)

Besides this case, using the "Material Library" you can set the material to fit any Color Space.

Please check the link below for a detailed explanation of "Material Library".

https://rainyrizzle.github.io/en/AdvancedManual/AD_MaterialLibrary.html

AnyPortrait also supports URP through the "Material Library".

We provide materials such as URP Unlit as well as 2D Lit.

You can see the description of URP at the link below.

https://rainyrizzle.github.io/en/AdvancedManual/AD_URP.html

However, there is a problem that the Shaders we provide are not properly compatible with the URP in Unity 2021, 2022.a.

We will provide a new version of the URP Material Presets in the next update that improves compatibility issues, and the next update will be available in the next few days.

Anyway, we're so glad this issue has been resolved!

If you have any other problems or questions, please feel free to contact us anytime!

Thank you.

That was it! I swapped from gamma to linear then back again a few time in my project settings, as well as changing the images Color Space in the Images section in AP to gamma. Although it kept asking me each bake to set it back to Linear, I canceled it and baked through. What I missed was the Settings Tab, Color Space. That remained Linear.

Do all materials need the Gamma Color Space to function correctly? Also, would this function with URP unlit material? And thanks for the help! Always so attentive, very appreciated!

Hi!

Thank you for your reply.

After reading the workflow you described, we don't see any particular problems.

All in all, it looks like you did well along with our guide.

If you set the Default Material in the Material Library and execute Bake, the changed material should appear in the scene.

We're also puzzled as the material library works mostly without problems.

Even we tested again using the package we provided, but there was no problem with the package.

So we wondered if the problem was coming from somewhere else.

Is the "Color Space" of your current project "Linear"?

The reason we thought of Color Space is shaders provided by us work in "Gamma Color Space".

Check whether the value of "Project Settings > Player > Other Settings > Color Space" in the Unity menu is "Gamma" or "Linear".

Also, please check if the value of "Bake > Setting tab > Color Space" of AnyPortrait is also set to "Gamma".

Since different shaders are applied depending on the color space, the shaders provided by us will not work properly if it is "Linear".

We haven't figured out another cause yet.

If this is not the cause, it seems that we have no other option but you send your project file to us.

Please check once.

If it is set to Linear, change the settings of Unity and AnyPortrait to Gamma and test again. (You need to bake again.)

If not, please contact us again.

If you can send us your project file, just send it to our email and we'll check it out right away. ( contactrainyrizzle@gmail.com )

Thanks.

Sure. I have followed the steps again. First I've started with the default material.

Next I create another Unlit Default.

Then I assign Normal to the 1st section, then Clipped to the group below it.

The Default Material is ON. I've changed no other setting or option with the Step1 material. (Do I have to confirm a change or update of the material after changing it? Other than the Bake step.) I now Bake, close AP editor, then inspect the scene.

Perhaps I missed a step that I just completely overlooked?

Hi!

Perhaps there was a problem creating a material set named "Step1 Render" in our description.

Please check the following again.

- Are the provided "Step1 Normal / Clipped" Shaders assigned correctly?

- Is the "Default Material" option of the "Step1 Render" material set activated to "ON"?

- Did you execute "Bake" after changing the material?

The material will not change unless any of the 3 above have been completed.

Please check again and let us know if the issue is not resolved!

Thank you.

Hey there!

Thanks so much for the details and shaders to do this. I am having difficulty figuring out where I went wrong. At Step1, the character is not rendered pure white as in your pictures. Despite changing all the normal and clip shaders within the Unlit (default) duplicate.

Everything else appears to work.

My current results are in my screenshot here.

Hi!

We've found a way to clean outlines using Unity Recorder, and we'll add this comment again.

This technique uses 3 cameras, 2 Render Textures, 2 duplicated characters, and 1 Quad mesh.

This is a reproduction of the screen capture system of AnyPortrait mentioned earlier.

Shaders and materials need to be created additionally.

Please use the package file we have attached.

The process is very complicated, so please try it one by one.

Note that.

In this technique, the characters do not use "KeepAlpha".

If the existing character has a KeepAlpha material applied, change it to "Default Unlit Material".

(1) This is the prepared scene. Unnecessary lights are deleted, and only the Main camera and Character are placed.

(2) Set the "Ambient Color" to "Black" in the Lighting settings.

(3) Import the attached package file. As above, 2 Render Textures, 3 Shaders, and 1 Material are installed.

(1) You need to render the character twice. Select the character and press "Ctrl+D" to duplicate it.

Add "Step1" and "Step2" respectively to the character name for easy identification.

(1) Select "Step1 Character".

(2) Click the "Open Editor and Select" button to open the AnyPortrait editor for this character.

(1) Select the Root Unit of this character.

(2) Click "Material Library".

(3) Click the "Make Material Set" button.

(4) Select the "Unlit (Default)" preset.

(5) Press the "Select" button.

(1) Select the added "Material Set".

(2) Change the name. (I set it to "Step1 Render" here.)

(3) Activate the "Default Material" option as "ON".

(4) Change the 4 Shaders for "Basic Rendering of Gamma" to the attached "AnyPortrait/Capture/Step1 Normal". (The file name is "CaptureShader_Step1_Normal".)

(5) Similarly, change the 4 Shaders for "Clipped Rendering of Gamma" to the attached "AnyPortrait/Capture/Step1 Clipped".

When this is done, execute "Bake" and return to the Unity Scene.

Let's go back to the scene and look at the characters one by one.

We moved the character a little along the Z-axis to make it easier to distinguish. (The X and Y positions should remain the same.)

You can see the "Step1 Character" turned white. This white image acts as a mask.

The "Step2 character" is rendered as same as before.

The next step is to change the settings of the camera and increase the number.

(1) Select Camera (Main Camera).

(2) Change "Clear Flags" to "Solid Color" and "Background" to "Black". The background of the mask should be black.

(3) Change "Culling Mask" from "Everything" to "Default".

(4) Change the "Projection" type to "Orthographic" and set "Size" appropriately.

(5) Assign “CaptureRT_Step1” among “Render Textures” of the package to the “Target Texture” property.

Duplicate (Ctrl+D) the camera.

Add “Step1” and “Step2” to the camera names for easy identification.

(1) Select the duplicated "Step2" camera.

(2) Most default settings remain the same as "Step1", and change "Culling Mask" to "UI".

(3) Change "Depth" from "-1" to "1", and change "Target Texture" to "CaptureRT_Step2" (this is also included in the package).

This setting is for 3 steps rendering as above.

In the first rendering (Step1), a "Mask Image" representing the visible part is created. Set the layer to "Default".

In the second rendering (Step2), the basic character will be rendered, but the background will be set to be opaque. The layer is "UI".

In the third rendering (Step3), the final image is created by merging the two Render Textures created in Step1 and Step2.

With this in mind, let's move on to the next task.

(1) Select "Step2 Character".

(2) Since the layer of Step2 is "UI", change "the Layer of Step2 Character" to "UI".

In this way, Step1's character will be rendered on the "Default" layer, and Step2's character will be rendered on the "UI" layer.

Finally, it is time to create the camera and Quad objects of Step3.

(1) Create a new camera.

(2) Among the properties of the camera, set "Clear Flags" to "Solid Color" and set "Background" to "Black".

(3) Change "Culling Mask" to "TransparentFX".

(4) Set "Depth" to "3". Keep "Target Texture" property empty (None).

Add a "Quad" object.

Now we will apply a Material that the Render Textures will be composited with.

Before that, let's check the material.

(1) Select "Mat_MergeImages" material included in the attached package.

(2) This Material uses a Shader named "AnyPortrait/Capture/Merget Images".

(3) It receives two images, and "CaptureRT_Step1" and "CaptureRT_Step2" are assigned respectively.

(If not, please assign as above.)

(1) Select the "Quad" mesh.

(2) Apply the "Mat_MergeImages" Material.

(3) If applied properly, you can see the result of the Render Textures merged in the Scene.

The layer in Step3 is "TransparentFX", so (1) change the "Quad"'s layer to (2) "TransparentFX".

(1) Adjust the position and size of the Quad so that the character is rendered to fill the screen.

If the Z position of the Quad and the camera is the same, it will not be rendered, so let's adjust the Z-axis of the Quad first.

Since the ratio of the width to height of the render texture is 1:1, the ratio of the quad must also be 1:1. Be careful when resizing.

(1) To change the position or size of a character on the screen, select both “Step1” and “Step2” characters.

(2) Adjust the position or size to (3) prepare to shoot with Unity Recorder.

Now it's time to prepare to launch Unity Recorder.

Because there are 3 cameras, Unity Recorder has a hard to find a target camera.

Let's set the "Step3 Camera" as the target by editing the "Tag" of the camera.

(1) Select all "Step1, Step2" cameras.

(2) Change "Tag" from "MainCamera" to "Player".

(1) Select the "Step3" camera.

(2) Change "Tag" to "MainCamera".

Now turn on Unity Recorder.

(1) As above, Set “Targeted Camera > MainCamera” and set to be saved as “PNG (Include Alpha)”. (Set the resolution to suit you.)

(2) Press the "START RECORDING" button.

The rendered result is as above.

You can see that the outline problem is gone because a mask is used.

This process was quite complicated to use Unity Recorder, and if there is another better recorder, it can be easily solved.

Since we don't have access to Unity Recorder's system, we think the above is almost the only way.

Otherwise, we recommend using the screen capture function of AnyPortrait mentioned above.

If you have more questions, please leave a comment.

Thank you.

Hi!

After reading your post, we checked the manual again.

When we made the manual, we were not aware of the problem with KeepAlpha, and the captured images were small, so we didn't find this problem.

We are sorry that we gave a hasty explanation without knowing exactly what the problem was.

For images that do not have a blurred outline, and the captured size is not resized, the outline problem is not noticeable.

But in all other cases, the outlines are rendered strangely due to poor handling of KeepAlpha and rendering of transparent backgrounds.

We tested a few things to fix this problem.

The first is not to set a "transparent background", but to set the background color to magenta (1, 0, 1) or green (0, 1, 0) like the old way, and then remove the background with an image program (eg. GIMP).

We were able to convert the Magenta color background to a transparent color using GIMP's "Color to Alpha" feature. However, there was a little bit of Magenta color left in the image, so we didn't think this was a good solution.

The second way was to fix the Shader and make it "Multi-Pass" to fix the Keep Alpha issue.

The approach was to first render the character with "Cutout Opaque Shader" and then recolor it with "Transparent Shader".

This method solved the problem with the outline to some extent, but there was a problem that the colors were calculated strangely in the translucent materials inside the character.

We've tried several methods, but the only way we can suggest is to use AnyPortrait's screen capture feature for now.

https://rainyrizzle.github.io/en/AdvancedManual/AD_ScreenCapture.html

AnyPortrait's screen capture function also includes a Sprite Sheet function.

(However, it is a pity that UnityRecorder's FPS control function is not here)

When we implemented AnyPortrait's screen capture function, we encountered a similar issue.

AnyPortrait used the "two rendering method" to create a transparent background.

Originally, AnyPortrait's screen capture function did not support a transparent background, but the problem was solved using the following method.

In the first rendering step, a black and white mask is created. This does not refer to the Clipping Mask, it is the result of rendering the character image in white and the background in black.

And in the second rendering step, an image with an opaque background is rendered. And we were able to create a transparent background by compositing these two images.

The reason we explained AnyPortrait's method is because we believe that the same approach should be applied to solve the Keep Alpha issue when using "Unity Recorder".

If you really need to use Unity Recorder and not a feature of AnyPortrait, we'll use this approach and do a little more research.

After reading this comment, please leave your comments and we will provide further guidance.

Thanks.