shader 画圆变椭圆

如题这是在学习的过程中遇到的一个问题，应该是个很常见的问题，但网络上看了一圈却没发现别人遇到过这个问题。

问题背景：

在学习shader画圆的过程中，采用点到原点的距离相等的办法来画圆，结果出来的是个椭圆，再三确认自己的代码没问题，如下所示。

代码块 1

对应图案：

检查了下代码，判断应该是 vec2 position = gl_FragCoord.xy / u_resolution; 这句出了问题，到原文章中再看一遍解释。

看了一眼我的画布大小，1280X720，那问题就出在了这个地方，宽高比不同，最后计算出的position比例也不同。于是想着办法怎么去解决这个问题，并且还能继续使用0.5来表示圆心的位置。但是在网上看了一圈，别人都是方形的分辨率，找不到与我同样的问题。直到看别人的源码时，看到了一句话如下。

这句话好像有那么点意思，但是没看懂，于是拿过来，放到自己的代码中再次运行，咦，真的就成了自己想要的，很是奇怪，到现在也还没看懂这个偏移量，比例如何计算的，先记下来，后续继续理解。

最终代码一：

欧卡，我来了，现在理解了这句话，来解释一下。我们看代码可以看出，y的范围为0-1，但是x却可能大于1或小于0，比如我们找出x大于1，小于0的范围，如下。

从图上看出，X的取值范围0-1是一个正方形，那它的分辨率是多少呢？没错，就是720X720。

视乎明了了一些，我们将原始的代码（代码块一）第一句更改为下面这句看看。

哈哈，看到这里，我们把上面两句和下面这句比较一下，一模一样。

嗯，一切都明了了，我们把X轴与Y轴做了等比例处理，偏移量将中心固定在了屏幕的正中心。

最后的代码：

完结，撒花。

刚在公园溜达，看见一个小女孩在原地转圈圈，然后对她奶奶说：“奶奶，你猜我在哪个方向？”

哈哈，太可爱了。