Graphics.RenderTexture() causes extra image to appear on canavas - unity3d

I have some code like this:
readonly Rect WORK_SOURCE_RECT = new Rect(0f, 0f, 1f, 1f);
Color[] workPixels;
void Start() {
Texture2D workTexture = new Texture2D(256, 256, GraphicsFormat.R8G8B8A8_UNorm,
TextureCreationFlags.None);
workPixels = workTexture.GetPixels();
}
void OnGUI() {
workTexture.SetPixels(workPixels);
workTexture.Apply();
Graphics.DrawTexture(toRect, workTexture, WORK_SOURCE_RECT,
0, 0, 0, 0, renderColor);
}
void Update() {
// Omitted - Some changes are made by code here to the workPixels array.
}
The call to Graphics.DrawTexture() correctly draws the content of workTexture to the screen, just how I want it. But there is a strange side effect...
Any other GUI that is drawn inside of a scene object containing a Canvas component, will show an extra Y-reversed copy of the work texture. (Nevermind the reversal--not the issue.) I don't know why this extra image is drawn. It seems like there is a shared resource between two GUI things I'd hoped were completely unrelated.
In the image shown below, the reversed-face on the right is the unwanted extra render. Strangely it appears when I move to the right side of my scene, so it's like it is in world space. But it will update when GUI-based elements like subtitles are shown.
On Unity 2019.4.13f1 with MacOS.

The solution I found that resolved my problem was camera stacking. I created a second camera that was culled to just UI layer. The first camera had UI layer removed from culling. And then the calls to Graphics.DrawTexture() no longer appeared on the canvas used for UI.

Related

Converting mouse coordinates for ui in world space

Im having problems with position convertions. The way im trying to solve it may be very wrong but thats due to inexperience in that case and im up for any suggestion on how to do it differently.
What im trying to do is a gui with a dot graph envelope that the user can change by draging the dots with the mouse.
This is what i would wan it to look like.
https://imgur.com/FP6f1Cz
First i did the UI like normal in overlay but i couldnt get the line renderer to work so i took the whole ui into world space. This makes the line renderer visible. With the UI in world space ive tried both to put the envelope line renderer in the canvas with the rest of the ui and outside the canvas UI.
Here is the code that renders the lines where the dots are and moves the dots when the mouse drags them :
public class Envelope : MonoBehaviour
{
LineRenderer lineRenderer;
// Start is called before the first frame update
void Start()
{
lineRenderer = GetComponentInChildren<LineRenderer>();
}
// Update is called once per frame
void Update()
{
var points = GetComponentsInChildren<EnvelopePoint>().Select(ep => ep.transform.localPosition).ToArray();
lineRenderer.positionCount = points.Length;
lineRenderer.SetPositions(points);
}
}
public class EnvelopePoint : MonoBehaviour
{
[SerializeField] bool isHeld = false;
// Start is called before the first frame update
void Start()
{
}
// Update is called once per frame
void Update()
{
if (isHeld)
{
// Vector3 mousePos = Camera.main.ScreenToWorldPoint(Input.mousePosition);
Vector3 mousePos = Input.mousePosition;
transform.position = mousePos;
}
}
private void OnMouseDown()
{
isHeld = true;
}
private void OnMouseUp()
{
isHeld = false;
}
}
The best result is to put the envelope outside of the canvas.
The lines render well to where the points are but im not able to convert the mouse position to correct coordinates for the dots. When i click on a dot to drag it the dot snaps to a position a bit lower and a bit to the left of the mouse. Like this:
https://imgur.com/3KK6VD3
But then i can drag the dots and the lines adjust perfectly.
I guess i have two questions:
How should i get the mouse position conversion correctly?
Is this a strange or over complicated way of doing this? Is there a more reasonable way?
Id love some tip as well on what i should read up on to better understand the different screen types and how to convert between them.
RectTransformUtility.ScreenPointToWorldPointInRectangle: Transform a screen space point to a position in world space that is on the plane of the given RectTransform.
There is also ScreenPointToLocalPointInRectangle but since you are modifying Line Renderer's points (which are in world space), I think ScreenPointToWorldPointInRectangle best suits your needs.

Dynamically added LineRenderer doesn't show in game view

I add some line dynamically and they appear in the scene view perfectly, but not in game view. The z indexes are properly set, I use different layer just for the lines. I tried changing the camera clipping planes values, culling mask is on everything.
void Update()
{
Vector2 mousePos;
if (Input.GetMouseButtonDown(0))
{
Vector3 closeToPoint = IsClickCloseToPoint();
if (closeToPoint.z != -10000f)
{
GameObject newObj = Instantiate(lineGenerator);
startMousePos = closeToPoint;
newLine = newObj.GetComponent<LineRenderer>();
newLine.transform.SetParent(parentObject.transform);
newLine.positionCount = 2;
}
}
if (Input.GetMouseButton(0))
{
if (newLine != null)
{
mousePos = Input.mousePosition;
newLine.SetPosition(0, new Vector3(startMousePos.x, startMousePos.y, -5f));
newLine.SetPosition(1, new Vector3(mousePos.x, mousePos.y, -5f));
distance = (mousePos - startMousePos).magnitude;
distanceText.text = distance.ToString("F2");
}
}
if (Input.GetMouseButtonUp(0))
{
if (newLine != null)
{
newLine = null;
}
}
}
You are drawing everything on a canvas. But LineRenderer is not a UI component and therefore is not shown on the canvas.
If you want to work with LineRenderer nontheless check this info in Unity Answers. The basic idea is to have the canvas set up as Screen Space and increase the width of the lines. Don't forget to assign the camera.
i think you need to put a material on the lineRenderer. What you see in the scene view is the "non material" texture that doesn't appear in game view :)
I hope that help :)
Raph
The problem was that the coordinates are different in the scene view and the game view, or at least you have to design to the game view, not the scene view. My lines were present in the game view, but they were out of the canvas. I used Camera.main.ScreenToWorldPoint(Vektor3) to convert every vektor.
I can't see the Inspector settings of your LinRenderer but I suspect that you have
Alignment set to Transform Z
Lines face the Z axis of the Transform Component.
And thos becomes completely invisible if your orthographic Camera looks exactly in Z direction onto it.
Try and change the Alignment to View.
Also note that literally nothing is rendered on top of a ScreenSpace Overlay Canvas. It is one of the last things to be rendered in a frame.

Is WaitForEndOfFrame the same as OnRenderImage?

In Unity, is WaitForEndOfFrame
void Update()
{
StartCoroutine(_c());
}
IEnumerator _c()
{
yield return new WaitForEndOfFrame();
BuildTexturesForExample();
}
identical to OnRenderImage?
void OnRenderImage()
{
BuildTexturesForExample();
}
(It goes without saying the minimal/useless unity doco on the two calls does not help.)
If not what is done "after" OnRenderImage until WaitForEndOfFrame is called?
Does anyone have any experience of using the two comparatively?
Safe to replace??????
Can you always safely replace a WaitForEndOfFrame pattern with OnRenderImage?1
What's the deal?
1(Of course, gizmos/ongui are irrelevant.)
I guess I just found the actual answer in OnPostRender
OnPostRender is called after the camera renders all its objects. If you want to do something after all cameras and GUI is rendered, use WaitForEndOfFrame coroutine.
So (other than I thought and the ExecutionOrder makes it look/sound like) all methods in the Render block (except OnGUI and OnDrawGizmos) are called on a per Camera basis and also note that
OnPostRender: This function is called only if the script is attached to the camera and is enabled.
or
OnRenderImage: This message is sent to all scripts attached to the camera.
Its purpose is Post-Processing (I only understood how they work looking at the examples.), therefore it actually takes 2 arguments!
OnRenderImage(RenderTexture src, RenderTexture dest)
so you can overwrite the output texture (dest) with some render effects after receiving the input (src) as in their example
Material material;
private void OnRenderImage(RenderTexture source, RenderTexture destination)
{
// Copy the source Render Texture to the destination,
// applying the material along the way.
Graphics.Blit(source, destination, material);
}
There is also e.g. OnRenderObject which is called on all GameObjects (MonoBehaviours) not only the Camera. Again until I saw the example I didn't really understand what it does (or what makes it different from OnRenderImage). But that example here helped:
void OnRenderObject()
{
// Render different meshes for the object depending on whether
// the main camera or minimap camera is viewing.
if (Camera.current.name == "MiniMapcam")
{
Graphics.DrawMeshNow(miniMapMesh, transform.position, transform.rotation);
}
else
{
Graphics.DrawMeshNow(mainMesh, transform.position, transform.rotation);
}
}
Bonus: I finally understand the real purpose of Camera.current! :D
WaitForEndOfFrame on the other hand is called after all cameras finished rendering and everywhere not only on a Camera GameObject.
Waits until the end of the frame after all cameras and GUI is rendered, just before displaying the frame on screen.
So I'ld say No, you can/should not replace WaitForEndOfFrame by using OnRenderImage!

Unity 5: how to zoom and translate an object from a grid layout to the center of the screen

I'm trying to create a scroll grid view in which every cell object is tapable.
When a cell object is tapped I want to scale and traslate it to the center of the screen and render it above other cells.
I was able to make it tapable and scale it in its position. Now I want to move the cell object to the center of the screen and render it above other cells.
I've tried many solutions but none of them works.
This is my hierarchy:
This is the grid in normal state:
This is the grid when a cell was tapped:
I'm populating the grid from a C# script dynamically.
void Populate()
{
GameObject cardContainerInstance, cardInstance;
foreach (var c in cardsCollection.GetAll())
{
if (c.IsOwned)
{
cardContainerInstance = Instantiate(cardContainer, transform);
cardInstance = cardContainerInstance.transform.Find("Card").gameObject;
var cardManager = cardInstance.GetComponent<CardManager>();
cardManager.card = c;
cardManager.AddListener(this);
}
else
{
Instantiate(cardSlot, transform);
}
}
}
public void OnCardClick(GameObject cardObject, Card card)
{
Debug.Log("OnCardClick " + card.name);
if (openedCard != null) {
if (openedCard.Number == card.Number)
{
CloseCard(openedCardObject);
}
else
{
CloseCard(openedCardObject);
OpenCard(cardObject, card);
}
}
else
{
OpenCard(cardObject, card);
}
}
void OpenCard(GameObject cardObject, Card card)
{
//cardObject.GetComponent<Canvas>().sortingOrder = 1;
var animator = cardObject.GetComponent<Animator>();
animator.SetTrigger("Open");
openedCard = card;
openedCardObject = cardObject;
}
void CloseCard(GameObject cardObject)
{
var animator = cardObject.GetComponent<Animator>();
animator.SetTrigger("Close");
openedCard = null;
openedCardObject = null;
}
I can't figure out how to move the cell to the center and render it above others.
Note that all is animated using an animator attached to the object itself.
Could anyone help me please? Thank you very much!
EDIT: more details
All cell object have the following hierarchy:
where:
CardContainer is an empty object added to use animator on Card child object
Card is the object itself that has a script, a canvas renderer and an animator
StatsImage is the object that slide out when the card is tapped
Image is a calssic UIImage with Image script, Shadow script and canvas renderer
Other component are simple texts.
EDIT: fix in progress
Trying to apply this suggestions I was able to manage the rendering order (as you see on the image below) but it seems that prevent touch events to be detected on the game object.
I've added a GraphicsRaycaster too and now the bottom horizontal scroll view scrolls again but only if I click and drag a card.
Moreover, with the GraphicsRaycaster, the main grid card still are not clickable and it's possible to open the card only if it is behind the bottom panel (if I click on the red spot in the image below the card behind the panel receives che click)
This is the CardContainer at runtime(note that I'm attaching new Canvas and GraphicsRaycaster on the CardContainer, which is the "root" element):
You didn't clarify whether you are using a sprite renderer or some other method but here is an answer for each.
Sprite renderer:
this the simple one. In each sprite renderer, there is a variable called "sortingOrder" in script and "Order in layer" in the inspector. sprite renderer with sorting Orders that are higher is rendered first. All you would need to do is call:
cardObject.GetComponent<SpriteRenderer>().sortingOrder = 1;
when you click the card, and
cardObject.GetComponent<SpriteRenderer>().sortingOrder = 0;
when you unclick it. I hope that makes sense!
Other Method:
this one is a bit harder and I would suggest that you switch to sprite renderers and it will be much easier and more stable down the road, but I can understand if you have already written a lot of scripts and don't want to go back and change them.
Anyway, all you will need to do Is create two layers: cardLower and cardUpper. then create a new camera and call it topCamera. now under the top camera object in the inspector, change the culling mask (it's near the top) and make sure cardUpper is selected. then change the Clear flags (first one) to "Don't Clear" finally change the depth to 0 (if that doesn't work change it to -2). Now objects in the cardUpper will always be rendered above everything else. You can change the layer through script with
cardObject.layer = "cardUpper"
or
cardObject.layer = "cardLower"
I hope that helps!
Ok, so its pretty simple. So you are going to want to add another canvas component to the game object, and check the override sorting to true. Then use
cardObject.GetComponent<Canvas>().sortingOrder = 1;
to place it in the front and
cardObject.GetComponent<Canvas>().sortingOrder = 0;
to put it in the back.
you are also going to need to put a GraphicsRaycaster on to each of the cardObjects
Ignore my other answer about sprite renderers, they are not needed here

move object and it's children out of camera in unity2d

I have made a gameobject together with some children gameobject to represent the information to show up when specific circumstances occurred.
I have already ajusted the position of the information gameobject(together with its' children) in the cameraarea. The thing is that I want to move the gameobject(together with its' children) out of the camera, maybe on top or maybe on left. Following is the scratch to demonstrate the position I want to put it:
So that I could move the information gameobject and its' children (Red box) with some movement effect when needed, I have no problem with moving it back but could find an elegant way to move it out of the camera when the game started.
Mostly because I don't know how to calculate the position out of the camera.
Maybe find the upper border of the camera and the size of the gameobject and its children?
I know I could do this by maybe add a marker gameobject to represent the downer border of the information gameobject, and move it until it's not visible, but is there a more elegant way?
Any ideas?
For this one, I would use the following trick: use any method (animation, coroutine, Update method...) to move your item out of screen the way you desire. Then you can use the OnBecameInvisible event which is called when the item does not need to be rendered on any camera anymore. The event will there be used to detect that the parent object moved out of screen, and that you want to stop the current movement. You then just need to define in this event that you want to stop the current moving behavior, and you will be done.
void OnBecameInvisible() {
// Stop moving coroutine, moving in Update or current animation.
}
There are probably more elegant ways of doing it as you said, but I think this method should be enough for what you want to achieve.
It took me time, but I found this way for you, attach this script to your gameObject:
public Renderer rend;
//drag the camera to the script in the inspector
public Camera camera1;
Vector3 bottomleft;
Vector3 topright;
void Start()
{
rend = GetComponent<Renderer>();
//the top-right point of the camera bounds
topright= camera1.ViewportToWorldPoint(new Vector3(0, 0, transform.position.z));
//the bottom-left point of the camera bounds
bottomleft = camera1.ViewportToWorldPoint(new Vector3(1, 1, transform.position.z));
StartCoroutine(MoveUp());
}
IEnumerator MoveUp()
{
//while the position and the height are lower that the Y of top right
while (transform.position.y + rend.bounds.size.y < topright.y)
{
//move the object to the new position (move it up)
transform.position = new Vector3(transform.position.x, transform.position.y + .01f, transform.position.z);
//and wait for 1/100 of a second
yield return new WaitForSecondsRealtime(.001f);
}
}
you can play with the WaitForSecondsRealtime value to change the velocity of moving.