如題這是在學(xué)習(xí)的過程中遇到的一個(gè)問題，應(yīng)該是個(gè)很常見的問題，但網(wǎng)絡(luò)上看了一圈卻沒發(fā)現(xiàn)別人遇到過這個(gè)問題。

問題背景：

在學(xué)習(xí)shader畫圓的過程中，采用點(diǎn)到原點(diǎn)的距離相等的辦法來畫圓，結(jié)果出來的是個(gè)橢圓，再三確認(rèn)自己的代碼沒問題，如下所示。

代碼塊 1

對應(yīng)圖案：

檢查了下代碼，判斷應(yīng)該是?vec2 position = gl_FragCoord.xy / u_resolution; 這句出了問題，到原文章中再看一遍解釋。

看了一眼我的畫布大小，1280X720，那問題就出在了這個(gè)地方，寬高比不同，最后計(jì)算出的position比例也不同。于是想著辦法怎么去解決這個(gè)問題，并且還能繼續(xù)使用0.5來表示圓心的位置。但是在網(wǎng)上看了一圈，別人都是方形的分辨率，找不到與我同樣的問題。直到看別人的源碼時(shí)，看到了一句話如下。

這句話好像有那么點(diǎn)意思，但是沒看懂，于是拿過來，放到自己的代碼中再次運(yùn)行，咦，真的就成了自己想要的，很是奇怪，到現(xiàn)在也還沒看懂這個(gè)偏移量，比例如何計(jì)算的，先記下來，后續(xù)繼續(xù)理解。

最終代碼一：

歐卡，我來了，現(xiàn)在理解了這句話，來解釋一下。我們看代碼可以看出，y的范圍為0-1，但是x卻可能大于1或小于0，比如我們找出x大于1，小于0的范圍，如下。

從圖上看出，X的取值范圍0-1是一個(gè)正方形，那它的分辨率是多少呢？沒錯(cuò)，就是720X720。

視乎明了了一些，我們將原始的代碼（代碼塊一）第一句更改為下面這句看看。

哈哈，看到這里，我們把上面兩句和下面這句比較一下，一模一樣。

嗯，一切都明了了，我們把X軸與Y軸做了等比例處理，偏移量將中心固定在了屏幕的正中心。

最后的代碼：

完結(jié)，撒花。

剛在公園溜達(dá)，看見一個(gè)小女孩在原地轉(zhuǎn)圈圈，然后對她奶奶說：“奶奶，你猜我在哪個(gè)方向？”

哈哈，太可愛了。