Question by Stickeyd · Sep 30, 2018 at 10:13 AM · c#ui gui graphics gl

How to scale triangle created by GL(using viewport position) with scale factor of Canvas?

I'm trying to create speech bubbles by rendering two objects, a bubble and the triangle under it.

To do it I have two parts of the bubble. One is the actual bubble, it is implemented by an image and is a part of my UI. The other one is a triangle under it, it'is implemented using unity GL, drawing triangle.

The problem is, this triangle that I draw using unity GL and viewport position does not scale with scale factor of my canvas, which is set to "Scale with screen size". But the bubble wihch is a part of the canvas is scaling of course(I also change its position considering scale factor of the canvas). I have no idea how to apply this to my GL triangle though. How can I scale my triangle by scale factor?

Maximized screenshot in unity, 16:9, 1600x900 Works ok, the bubble is on top of the triangle

Not maximized screenshot in unity, 16:9, 800x450 The triangle here is the same in pixel size as in previous screenshot. It's not scaling with scale factor as the bubble itself.

Here is my code:

 void LateUpdate() 
 {

     //find out the position on the screen of this game object
     goScreenPos = Camera.main.WorldToScreenPoint(goTransform.position);

     float scaleFactor = Canvas.gameObject.GetComponent<Canvas>().scaleFactor;


     Vector2 finalPosition = new Vector2(goScreenPos.x / scaleFactor, goScreenPos.y / scaleFactor);

     goViewportPos.x = goScreenPos.x / (float)Screen.width  ;
     goViewportPos.y = goScreenPos.y / (float)Screen.height;

     Vector2 positionOfImage = new Vector2(finalPosition.x - centerOffsetX , finalPosition.y - centerOffsetY + offsetY);

     if (createdImageObject == null)
     {
         createdImageObject = Instantiate(imageObject);
         createdImageObject.transform.SetParent(Canvas);
     }

     createdImageObject.GetComponent<RectTransform>().anchoredPosition = new Vector3(positionOfImage.x, positionOfImage.y, 0);
 }

And the GL rendering:

 void OnRenderObject()
 {
     //push current matrix into the matrix stack
     GL.PushMatrix();
     //set material pass
     mat.SetPass(0);
     //load orthogonal projection matrix
     GL.LoadOrtho();
     //a triangle primitive is going to be rendered
     GL.Begin(GL.TRIANGLES);
 
         //set the color
         GL.Color(Color.white);
         
         //Define the triangle vetices
         GL.Vertex3(goViewportPos.x, goViewportPos.y+(offsetY/3)/Screen.height, 0.1f);
         GL.Vertex3(goViewportPos.x - (bubbleWidth/3)/(float)Screen.width, goViewportPos.y+offsetY/Screen.height, 0.1f);
         GL.Vertex3(goViewportPos.x - (bubbleWidth/8)/(float)Screen.width, goViewportPos.y+offsetY/Screen.height, 0.1f);
     
     GL.End();
     //pop the orthogonal matrix from the stack
     GL.PopMatrix();
 }

I borrowed the code from this guide

It's really old though so I'm trying to modify it for the new Unity UI instead of GUI. But the UI is responsive and the GL is not. That's why I'm having these problems.

What should I do? How can I scale my triangle with scale factor? Or should I do something else to solve that problem?

Add comment