Aspect Ratio - Built-in functions - Shader Learning

Built-in functions

Aspect Ratio

Task

Write a shader that draws a red circle in the center of the screen. The circle should have a radius of 0.25 times the height of the screen. For aspect ratio correction, adjust the circle's dimensions to account for landscape orientation.

Theory

To avoid distortion when using texture coordinates, it is important to consider the aspect ratio of the texture. This can be achieved by calculating the ratio of its width to height:

ratio = width / height

Using Aspect Ratio to Adjust Object Size and Position


You can adjust the object size and position using the aspect ratio:

x = x * ratio
width = width * ratio

Or

y = y / ratio
height = height / ratio

Choosing the Right Adjustment


The decision to multiply the X by the aspect ratio or divide the Y by the aspect ratio depends on the orientation of the object being drawn and the desired outcome:


• Landscape Orientation: If the object is wider than it is tall, multiplying the X by the aspect ratio will stretch the object horizontally to fit the screen.

• Portrait Orientation: If the object is taller than it is wide, dividing the Y position by the aspect ratio will stretch the object vertically to fit the screen.


Ultimately, it depends on how you want the object to appear on different screen sizes and aspect ratios.