一、WebGL螢幕座標轉世界座標
阿新 • • 發佈：2019-01-29
最近在研究一位大神用webgl寫的三維地圖引擎，在研究原始碼的過程中學到了很多以前沒注意到的東西，特地在此記錄一番
平常WebGL渲染的時候，如果順過來看的話，座標轉換會經過如下幾個過程
區域性座標=>世界座標=>觀察座標=>裁剪座標=>標準裝置座標=>螢幕座標
就是我們平常說的MVP矩陣，對於這些細節如果還不清楚的話，可以看看的這篇文章，講的很清楚
這裡就不多說了，如果哪天需要知道“當前滑鼠電機的那個點，對應的三維座標是多少幹怎麼辦呢？”也就是說當前螢幕座標所對應的世界座標是多少？
這裡我們需要將這個過程反過來：
當我們滑鼠點選這個螢幕時，通過JavaScript獲取到的當前座標為：event.clientX
event.clientY，這個是螢幕座標，之後我們需要將它轉換為標準化裝置座標，此時X，Y座標都需要對映到（-1，1）的範圍內，此時的公式為：
_mouse.x = ( event.clientX / _domElement.width ) * 2 - 1;
_mouse.y = - ( event.clientY / _domElement.height ) * 2 + 1;之後，三維中的頂點座標資料都是需要有“深度”的，也就是Z值，這個我們可以認為的加一個Z，比如0.5.（當然，你也可以使用WebGL提供的函式GLReadPixels）
之後將這個座標（標準化裝置座標NDC）轉換為齊次座標，之後與相機的MP矩陣的逆矩陣相乘即可