將座標從event.offsetX和event.offsetY轉換爲webGL原生座標

Question

我有用JavaScript編寫的這個webGL程序，我必須在用戶點擊的位置畫一個畫布點。爲此，我需要獲取用戶點擊的位置的座標。我通過使用JavaScript的event.offsetX和event.offsetY來獲得相對於畫布左上角的點的座標。這裏的事情是，webGL使用座標相​​對於畫布中心的不同座標系。關於如何將event.offsetX和event.offsetY座標轉換爲webGL座標的任何想法？

Answer 1

WebGL與任何其他3D圖形環境一樣，在與畫布處理不同的座標系中操作。 X/Y/Z不是像素，而是從-1.0到1.0的值。如果您試圖將屏幕座標（像素）轉換爲標準化的設備座標（NDC），則該過程非常簡單（如下所示），但是如果您試圖將其轉換爲場景的座標系，那麼它高度依賴於您將場景投射到屏幕上的方式。

在this post中，請閱讀標題爲標準化設備座標的部分以獲取有關屏幕座標與NDC之間轉換的更多信息和示例。