Using Render Textures on a uGUI Image, Panel or Button?

Hello!

I'm trying to put my minimap into the uGUI system. Is it possible to get a Render Texture working with these? I've got my render texture attached to a material, and can put the material onto a uGUI Button object, but it doesn't show anything (is 100% transparent). The camera is working, however.

Thanks!

 

RawImage component.

 

Awesome. I've tried it on an image, but the results are not what I expected, as shown in the image.

You can see the camera preview, which is what I'd like this to look like. However, in the scene view it looks semi-transparent. In the game view is barely noticeable at all. The image has full 255,255,255,255 color though.

Any ideas where I'm going wrong?

 

You probably also need a material. From what I understand, you're supposed to pair textures and materials: Textures provide the pixels, and materials apply them to the surface.

 

I don't believe that's the case with the RawImage component; I'm pretty sure it has a default material that gets applied to it.

If you put an Image component on that object instead, is it visible? I suspect there is an alignment/anchoring/layering issue going on here, rather than a RawImage issue.

 

I'm making a tile-based game and using rawimages in a grid to make the floor. I got a set of textures off the asset store and each texture includes a texture object and a material object. When I was trying to get it to work, I tried applying just one or the other, but it screwed up every time (including appearing semi-transparent), but when I put both the texture and material, it worked.

So it pretty much is the case with the rawimage component.

 

Unfortunately I haven't had the same experience. When adding a material, the scene view shows a pinkish and blocky version of the cameras view, and nothing shows in the game view. Removing the material returns it to the state shown above.

 

Hi Tim,

When the game is running, I can see changes made to the color of the material in the scene view. But while the material is attached, there's nothing showing in the game view. Changing the alpha, which is already to full value, doesn't do anything to the scene view.

When I remove the material I can see the texture in the game view, but it's very transparent even though the alpha is full.

I think I'll just use the normal camera display with adjusting the viewport rect to get it to show in the top corner -- is that worse for performance than using a render texture?

 

Bingo! Someone else having this same problem with RenderTextures and RawImage. I look at the RT in the inspector at runtime, and it's perfect; but the RawImage shows mostly transparent.

Here's an image that shows all the relevant information in the inspectors, and at the top, the Game window, showing that I'm not getting the render texture. Sorry about the lack of UMA clothing, I've not got that far yet XD

 

My latest test has somethings showing properly, but other things -- usually in a color range -- are 100% transparent. Notice the club, for instance.

 

Looks like it is now using the lightness of the image as the alpha?

 

And one more -- same thing, but the camera is now only rendering the player and weapon models. It's on a UI.Image background, and you can slightly see the club, but just barely.

 

There's definitely something not right about RTs and uGUI - I can't see any wrong settings, and like you, get a transparency problem.

 

Apply a material in the Diffuse shader. Fixes all transparency issues with RT's.

 

Actually that doesn't work at all -- adding a diffuse material with the texture assigned makes the texture go 100% transparent. At least for me.

 

Exactly the same.

 

What's the proper way to submit a bug from a giant project (30+gb)? Although it does seem easy to reproduce, as both times I've tried to use Render Textures with the Raw Image component the same thing happens.

 

Whoops, my bad. That is Unlit/Texture the shader you want. Not Diffuse...

 

Closer! I've got my camera set to clear "Depth Only", and the preview shows just the player & weapon, as expected. But now there's white (mostly) around the window area showing the camera, and some other artifacts it looks like.

Any idea how to get rid of those?

Thanks!

 

There's your problem, set it to Solid Color.

 

Well, if I do solid color, then I get a solid color. I'd like the player image to appear on the textured background on my menu screen.

 

I see what you're saying. Here, this might work. Set the camera to clear Depth Only, this should get rid of the white glitching. Next, if the player is still invisible then make sure the player's textures alpha is fully opaque.

 

The camera is already at Depth Only -- last time I tested it was a black glitching. Now It's as shown the the image -- the outside areas of the border texture show some glitching, and some very transparent glitching in the borders. And the players club is missing (or mostly transparent), similar to the original problem.

The shader on the material is set to Unlit/Texture, shader on the player object / weapon is diffuse (full alpha).

:/

 

Yes, but it's irrelevant that the player's weapon is in a diffuse shader. It's the alpha channel of the image that counts.

 

All the alphas are at full value for everything. Each time I load the panel (which turns the camera on as well), the background is different -- sometimes black, sometimes transparent but not correct, and sometimes just a mashup of game objects. Very odd.

 

The weapon is part of an asset store package, so it's got a material (diffuse, 255 alpha) with a texture atlas. The character, also from the asset store, also uses diffuse, 255 alpha textures.

The biggest problem seems to be that the background still gets rendered in some capacity.

 

I also am struggling with uGUI rawimage rendertextures. overlaying rendertexture rawimages on my GUI while retaining camera background transparency is driving me nuts.

Anyhow, I had a similar issue with random artifacts/materials popping up even tho i save and load the scene exactly the same way. I figured out it was the plugin shaderforge that was screwing with it. I removed the plugin and it fixed it. Could it be an external plugin that is affecting your testing?

 

Not sure. I don't use shader forge, and all the materials are mobile/diffuse, so I'd guess not. I'm still on b19, so I'm hoping when I jump to a more current one the issue is fixed!

 

We are experiencing the same issue here.

1. Render Texture is fine, although the raw image has weird transparent sections.
2. Applying a material to the RawImage solves the transparent issue.
3. Depth Only on the RenderTexture appears to create "Don't Clear" style artifacts on the RawImage

Hopefully there is a good work around.

 

Darn, I was hoping this would have been fixed by now. I'm still on b19, but if the problem goes away next time I switch builds, I'd be very happy.

 

One solution we found is setting the camera to use a transparent black solid color clearing instead of depth only. This will create a slight outline on the object, but works for now.

 

Unfortunately that's not working for me. I have the background color set to solid and 0,0,0,0, but it just shows up all black :/

 

Hey, was looking because of the same issue, and seemed to find the solution for me based on these posts. Basically I found that you need to change the background alpha on the skybox color in the camera. It is by default set to something like 10% and if you change the alpha on the main camera to 255 the rawimage looks solid

 

Never mind... this does not seem to fully work with transparent items and terrain....

EDIT: Found this http://varuagdiary.blogspot.com/2012_01_01_archive.html

When using this java script in the camera producing the render texture, it makes the transparent and terrain issue be fixed. (Alpha option set to 1). I did turn off the GUI Layer on the camera too, though that may be related to a different issue.

 

i believe I might have found the solution for my problem at least. I will describe my problem and the fix below:

I attempted to use uGUI's RawImage to display a RenderTexture. This RenderTexture is displaying the output of a camera that shows a simple unity particle system flare. After setting it up, I was experiencing weird artifacts, and couldn't figure out why.

The resulting setup solved the depth artifacts for me:

1. Camera > "Solid Color" + Culling Mask on Particle system Layer + Target Texture(myRenderTexture)

2. Particle system: Change shader from "Particles/Additive" to "Mobile/Particles/Additive"

3. RawImage: Show myRenderTexture


Remember the rawimage needs to be on a canvas to be shown.

Hope this helps!

 

Guys, I had the same issue and found that giving my RawImage a material set to Particles/Alpha Blended Premultiply solved the issue.

 

Using "Particles/Alpha Blended Premultiply" along with "Solid Color" (0,0,0,0) on the camera worked to some degree. The artifacts in the background were gone. However any particles on my weapons/armor would show up incorrectly and some objects were crazy bright.

Returning the material setting to unlit-texture keeps the black background visible, but unlit-transparent somehow removes the weapon from the view (has the slight outlined look as in one of the more original posts).

Other mobile/particle/multiply etc has a look I'd be down with, but the weapon is always transparent mostly. It has the same shader as the player model.

 

You are correct, I only had one solid object hence why Particle/Alpha Blended Premultiply worked. I thought of a temporary bandaid solution, but it's as efficient as killing a fly with a rocket launcher:

-Have a normal render texture with the content you need projected on a plane.
-Have a second render texture recording that plane set to Particles/Alpha Blended Premultiply attached to a RawImage.

This SHOULD give you the proper look, although it's stupidly wrong.

 

Has anyone found a proper fix for this issue?

 

This post is about trying to remove the background of a render texture after a camera has rendered to it.

I was trying my best to use a depth camera that outputs to a render texture, and these are my findings:

1. A Camera set to solidcolor-black that outputs to a rendertexture
2. A rawimage ui gameobject child of a canvas overlay gameobject
4. Use a material that has the attached OverlayBlend shader on it
4. Put the rendertexture onto the material, then put the material onto the rawimage.
(leave the rawimage texture field blank because it is the material that shows the texture)

This might put a bit of a damper on FPS, but it achieves the transparency effect of a rendertotexture camera.

I found that using 'depth' or 'don't clear' would just leave ghost images, so solid color is the best for this technique.

The shader achieves the 'Overlay' image effect just like photoshop. Might be good for minimaps.

 

I believe I have found a solution. It may be a little late for the OP, but may others will find this helpful. The way I fixed it was I added a material to the UI Raw Image element using the Unlit/Texture shader with the Render Texture as the texture. This fixed the problem of parts of the image being transparent for me.

 

OMG. I am super excited, because I just got it to work for me... I had a black background on my Texture i needed to be transparent...
1. Alpha from Grayscale checked
2. Apply both Texture and material with Texture to raw image
3. Use Legacy Shaders/Transparent/Cutout/Soft Edge Unlit

This is exactly what i wanted. I hope this helps.

 

Shader fix for alpha channels and sprites

If anyone is still having trouble. I've attached a custom shader that ignores the alpha channel. You have to create a custom material switch to "UI/Default No Alpha" and apply it to the raw image.

 

No idea why nobody ever sent a bug report on this issue so it could be properly fixed by Unity.

It's apparently been going on for a LONG time. Anyone still having this issue in v5.x ?

 

Why are we not just creating a sprite from the RenderTexture and using a regular image? Or am I missing something special about RenderTextures?

Pseudo code

Code (CSharp):

1. RenderTexture texture;
2. Image image;
3. ...
4. Sprite mySprite = Sprite.Create(Texture);
5. image.sprite = mySprite;

 

Isn't sprite separate from the ugui or am I missing something? RawImage should in theory handle alpha channels in rendertextures.

 

The new UI system uses Sprites.