將event.offsetX和event.offsetY的坐標轉換為WebGL本機坐標

Question

我有一個用JavaScript編寫的webGL程序，必須在畫布上在用戶點擊的位置繪制一個點。 為此，我需要獲取用戶單擊位置的坐標。 我通過使用JavaScript的event.offsetX和event.offsetY來獲得相對於畫布左上角的點的坐標來完成此操作。 此處的問題是，webGL使用不同的坐標系，其中坐標相對於畫布的中心。 關於如何將event.offsetX和event.offsetY坐標轉換為webGL坐標的任何想法？

Answer 1

與其他3d圖形環境一樣，WebGL在與畫布處理的坐標系不同的坐標系下運行。 X / Y / Z的值從-1.0到1.0，而不是像素。 如果您嘗試從屏幕坐標（像素）轉換為歸一化設備坐標（NDC），則過程相當簡單（請參見下文），但是，如果您嘗試轉換為場景的坐標系，則它高度依賴於您將場景投影到屏幕上的方式。

在本文中 ，請閱讀標題為“ 標准化設備坐標 ”的小節，以獲取更多信息以及在屏幕坐標和NDC之間進行轉換的示例。