问题标签 [mouse-picking]

我正在尝试按照本教程进行有关在 OpenGL 中选择鼠标的操作，但我无法使其正常工作。

在我的基本理解中，要从鼠标坐标中获取世界空间坐标，我需要乘以一堆逆矩阵。然后为了从局部空间获取世界空间坐标，我将局部空间坐标与模型矩阵相乘。但是我得到的坐标并没有相互对齐。

我试图规范化模型的世界坐标，因为鼠标坐标也被规范化了，但我不确定是否是这种情况。

努力用鼠标选择一个点/四边形。我相信我要么在错误的空间中使用坐标，要么可能没有考虑帧缓冲区的位置/大小（它是主窗口的子窗口）。

尝试转换为各种不同的坐标空间并反转模型矩阵。目前在世界空间中投影一条射线（希望是正确的）并尝试将其与点的（四边形）位置进行比较。该点在本地空间中指定，但实体在原点（0f，0f，0f）呈现，因此我认为它在世界空间中应该没有什么不同？

要在世界空间中获取鼠标射线：

当悬停在一个点 (11.25, -0.75) 上时，射线坐标为 (0.32847548, 0.05527423)。我尝试标准化该点的位置，但仍然不匹配。

感觉好像我错过了/忽略了某些东西，或者只是错误地操纵了坐标系。任何见解将不胜感激，谢谢。

编辑更多信息：

四边形的顶点是： (-0.5f, 0.5f, -0.5f, -0.5f, 0.5f, 0.5f, 0.5f, -0.5f)

将矩阵加载到着色器：

在顶点着色器中计算 gl_Position：

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 0.0, 1.0);

编辑 2：根据 Rabbid 的评论阅读更多材料后修改了我的代码。不确定我是否需要在视口大小中除以 2（我有一个视网膜 MacBook 显示器）。

在询问之前，我已经尝试了很多方法来解决这个话题，现在我真的不知道如何在 gltf 加载的文件上使用 gpu 完成对象拾取，所以我希望能得到任何帮助:(

我已经加载了一个巨大的 GLTF 文件，其中有很多小对象，由于文件数量，如果我只是将它们添加到场景中，它不可能实现良好的 fps，所以我设法实现了 60fps 合并gltfs 孩子成块，但是当我尝试实现 webgl_interactive_cubes_gpu 示例时，但它似乎对我不起作用，我点击时总是得到相同的对象。

为了调试，我尝试渲染 PickingScene 并且一切似乎都到位，从图形上讲，但是当涉及到挑选时，它似乎并没有像我预期的那样工作，除非我做错了什么。

Raycast 拾取对我来说不是一个合适的选择，因为有很多对象并且在其中添加渲染会杀死 fps。（55k 个对象）；

以下是加载gltf后的代码：

编辑：

... var PickGeom = THREE.BufferGeometryUtils.mergeBufferGeometries(geometriesPicking); PickGeom.rotateX(THREE.Math.degToRad(90)); PickingScene.add(new THREE.Mesh(pickingGeom, PickingMaterial));

然后在我的 MouseUp 函数中调用 pick(mouse*) 并传入 mouse* 信息：

我正在尝试使用我从本文后半部分修改的代码https://threejsfundamentals.org/threejs/lessons/threejs-picking.html使用 Points 实现 GPU 拾取

它在桌面上对我来说一直很好，但我开始测试不同的浏览器和设备，但它并不能始终如一地工作。我制作了一个 Codepen 来说明https://codepen.io/deklanw/pen/OJVVmEd?editors=1111

如果您单击（或点击）节点，它们的 ID 应该会在控制台中弹出。在某些设备上，我只得到 0，就像选择背景一样。

有谁知道为什么？

此外，如果有一种方法可以在这种情况下（通过 ShaderMaterial 具有可变大小点的点网格）使用一种仍然有效的更简单的方法，我很好奇如何

编辑：

我删除了 1x1 渲染目标优化，它似乎已经修复了它。现在我想知道那个优化会导致什么问题..

我有一个批处理渲染管道，可以将一堆四边形上传到 OpenGL。这些被呈现给 FBO。自然地，其中一个附件是视觉输出，另一个是深度，允许进行后处理等。但是，第三个附件旨在存储用于拾取的对象 ID，其风格与此处解释的类似。

有一个小问题。我希望一些渲染的项目对挑选是“透明的”。本质上，有些东西（粒子或视觉装饰或其他）本身是不可拾取的，但不应阻止拾取它们后面的对象。

这怎么可能实现？网络搜索表明这glAlphaFunc可能曾经完成了这个角色，因为我可以将对象 id 打包到具有透明度通道的纹理中，然后删除我将透明度设置为 0 的任何片段。有点繁琐，但可行。然而，这已经贬值了。

针对类似问题的另一个常见建议是使用discard关键字。这是不可行的，因为它会删除片段的所有输出元素，而不仅仅是指定附件。

这里有什么解决方案？我可以用我看不到的混合功能做一些聪明的事情吗？我很困惑。

片段着色器看起来像这样：

我想选择其他点云，但 PCL 可视化中的“云”。

但是 registerAreaPickingCallback() 不支持传递 PointCloud arg。默认情况下，只有默认点云：“cloud”可用，回调 areaPickingEvent 的索引只包含默认点云：“cloud”。

我在 PCL 网站上找不到任何有关它的信息。

我想知道怎么做，有人可以帮助我吗？

我正在开发一个 3D 空间中的国际象棋游戏。我试图弄清楚如何移动这些数字，但相机和不同的鼠标模式让我很头疼。

这是一个示例屏幕截图：

理念：

有 2 种相机/鼠标输入模式，一种允许我在空间中自由移动并环顾四周（简称为解锁相机/fps 相机），另一种锁定屏幕，我无法移动，鼠标移动不会旋转视图（锁定的相机/没有菜单的菜单相机）。在锁定模式下，我将能够选择碎片下方的正方形，并通过我投射到场景中的光线将它们移动到不同的正方形到我的光标位置。

我有的：

根据 learnopengl.com https://learnopengl.com/code_viewer_gh.php?code=includes/learnopengl/camera.h中的此代码按预期工作的 相机类

根据本教程制作的鼠标射线类： https : //antongerdelan.net/opengl/raycasting.html

鼠标方向计算放入代码中（最后一个函数正确返回方向，因为我用锁定的相机对其进行了测试）（每次渲染都会更新）：

我还有一个键盘输入功能，我可以通过按 M 键在两种模式之间切换。解锁模式和锁定模式的区别：

• glfwSetInputMode(this->window, GLFW_CURSOR, GLFW_CURSOR_DISABLED)/glfwSetInputMode(this->window, GLFW_CURSOR, GLFW_CURSOR_NORMAL)
• 允许摄像机移动和旋转/不允许移动或摄像机旋转

问题：

我真的不知道如何描述它，所以我制作了一个视频并将其上传到 youtube。

这是链接： https ://youtu.be/4s-M6vHxvCc

现在，是时候解释一下了：

• 您看到的黑白立方体是我尝试跟踪方向射线的尝试，（简单地说，我绘制立方体并将变换矩阵发送到着色器，将其变换为相机位置+射线方向矢量），现在立方体显示在两者中模式（解锁和锁定）。
• 在视频的前半部分，我处于解锁模式。你可以看到我试图向左和向右旋转以试图表明立方体有点卡在这个角度并且不会超过它。
• 在视频的后半部分（立方体“捕捉”到位置后），我切换到锁定模式。您还可以看到我的光标以及立方体。它们没有对齐，但立方体实际上是在复制光标移动。（还值得指出的是光标和位置之间存在偏移，可能是由于之前的鼠标从解锁模式旋转，idk 如何解释）

可能的解决方案/原因/想法：

我对此并不完全确定，但我认为有不止一个问题重叠。

首先，我认为立方体以某种方式锁定在水平面上（无意中）。如果我用移动键移动，立方体会随着我移动，但每当我移动鼠标时，它总是沿着那个平面移动。

其次，它在逻辑上不应该是水平面，而是第一个屏幕被渲染到的平面（英语不是我的母语）。

第三，如果第二个假设是正确的，我需要根据鼠标旋转以某种方式移动这个平面（最好说相机方向），我不知道该怎么做（或者在什么时候我应该把它添加到方程中事实）。

后记：

您可能已经注意到视频前半部分（解锁模式）的问题。用视频游戏术语（这是一个假设）我同时工作的 fps 摄像头（通常在屏幕中间有“光标”）和某种菜单摄像头（跟踪实际光标位置） ，这很糟糕，因为我想要的是在屏幕中心（相机方向）绘制立方体，并且只有当我切换到（锁定模式）时，立方体才会根据光标位置开始移动。但是出于示例目的，您应该看到上面提到的另一个问题。

如果您需要更多信息，我将感谢任何可以回答问题或指出正确方向的人。

我想根据颜色进行鼠标选择。这是我的代码：

我有不同颜色的三角形。当我点击三角形的中心时，它给了我正确的行为，但是当我点击三角形的其他地方时，它不会将该像素识别为颜色。有时它甚至无法识别一些带有不直接代码（如 rgb(255, 0, 0)）的极端颜色。我认为也许我的 x 和 y 坐标不正确，但我认为glfwGetCursorPos()工作正常。

简而言之

我想从 JavaScript 中的 WebGL 2 深度纹理中读取单个像素值。这是可能吗？

情景

我在 WebGL 2 中渲染一个场景。渲染器被赋予了一个深度纹理，它将深度缓冲区写入其中。这个深度纹理用于后期处理着色器等，所以我们可以使用它。

但是，我需要在 JavaScript 中读取我的单个像素值，而不是从着色器中读取。如果这是一个正常的 RGB 纹理，我会做

这会将像素x, y写入outputBuffer.

但是，是否有可能对深度纹理做同样的事情？如果我只是将深度纹理传递给上面的函数，则输出缓冲区只有零，并且我会收到 WebGL 警告GL_INVALID_FRAMEBUFFER_OPERATION: Framebuffer is incomplete.。检查帧缓冲区状态显示FRAMEBUFFER_INCOMPLETE_ATTACHMENT。

自然，深度纹理不是RGBA纹理，但是我们可以给它一些其他的值来得到我们的深度值，还是不可能？

动机

我知道这个问题已经在 StackOverflow 和其他地方以另一种形式被问过很多次，但总是有一些变化让我很困惑，无法直接回答中的问题是或否表格我在这里问。此外，许多问题和资料来源都非常古老，仅适用于 WebGL 1，还提到了一些关于有所作为webgl_depth_texture等的内容。

如果答案是否定的，我欢迎任何有关如何轻松获得此深度像素的建议。由于并非对每一帧都进行此操作，因此我重视简单性而不是性能。用例是采摘，经典的射线相交是不可行的。（我也知道我可以将标量深度值编码进和出 RGB 像素，但我首先需要能够从 js 代码中访问像素。）

我欢迎任何见解。

我试图将方向向量指向我的光标在屏幕上的位置，但是它给了我很大的值而不是实际值。在进行鼠标选择时，我的世界坐标得到的数字非常少，例如

我在这里做错了什么吗，我已经从这里改编了这段代码。我glm::intersectLineTriangle()用来测试这条线是否指向有问题的三角形世界坐标。

以下是相关代码：