ShaderDojo

Problems Discussion Profile

45-Degree Line with Aspect Ratio

Collapse

Your task is to create a diagonal line at a perfect 45-degree angle that dynamically adjusts for the screen’s aspect ratio. This ensures that the line remains at the correct angle, regardless of the screen dimensions. In the previous problem, the diagonal line was defined directly using UV coordinates. However, this approach did not account for variations in the screen's width and height, which could distort the angle.

To solve this problem, you will need to calculate the screen’s aspect ratio using the u_resolution uniform. The aspect ratio is the ratio of the screen's width to its height. With this value, you can scale the x-coordinate of the UV coordinates, effectively compensating for the aspect ratio. This adjustment ensures that the line remains at a consistent 45-degree angle across all screen sizes.

After modifying the UV coordinates, use the smoothstep function to create a smooth gradient along the diagonal. The gradient should blend from black to white across a small range, with the transition centered on the diagonal line. The result will be a visually smooth and perfectly aligned 45-degree gradient line.

When implemented correctly, the output will display a diagonal line running from the bottom-left to the top-right of the screen, with a smooth transition from black to white, regardless of the screen dimensions or aspect ratio.

Fetching Status...

×