将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之间进行转换的示例。