问题标签 [gl-matrix]

我已经实现了一个简单版本的相机。它的唯一目的是环顾场景（这意味着只有旋转）。我更新的每一帧都是mat4.lookAtand mat4.perspective（javascript数学库），但在移动设备（fe android）上，移动感觉很迟钝。这就是我计算的方式yaw和pitch：

并随着更新yaw，pitch我重新计算matrices：

有什么方法可以改进我的相机吗？或者你会做一些完全不同的事情吗？如果是这样，你会改变什么？

我需要有关 webgl 的帮助。

我画了一个简单的立方体并在立方体的每个面上应用纹理，我在立方体的每个面上旋转纹理，但问题是：

纹理不会围绕自身旋转，而是围绕立方体的左下角旋转：

这是我相对于旋转的代码：

在顶点着色器中：

在脚本中：

我正在尝试实施：

transform.InverseTransformPoint(Vector3) 和 transform.InverseTransformDirection(Vector3) 使用 opengl 中的 glm 库。我有每个对象的视图、投影、模型矩阵。

实际上我不知道我必须用这个矩阵做什么才能得到那个方法的功能。

我正在做一个 HTML/Javascript 项目，其中一部分涉及使用glMatrix。我的问题是我不知道它是如何实际实现和使用它的。

我尝试做你通常会在 HTML 页面中使用 Javascript 文件的操作：

文件夹“lib”是存储与 glMatrix 相关的所有文件的位置。问题是，如果我运行这个文件，我会得到这个：

我没有更改 glMatrix 代码中的任何内容，所以问题可能是我如何使用它，但该网站没有提供任何文档或任何可以指导我如何实际使用它的内容。

那么如何在我的项目中使用 glMatrix 呢？

我使用的版本是 2.3.2。

我正在编写一个使用gl-matrix作为依赖项的库。我正在使用 webpack 输出 src 并希望从我的代码中排除 gl-matrix 部分，但将其列为依赖项。

但事实证明我只能将 gl-matrix 打包到库中，或者说来自 gl-matrix 的对象vec3在我的库中未定义。有任何想法吗？

webpack.config.js

最小gltf-loader.js（我的库）

应用程序

我在这个plunkr中有一个 GL 立方体，看起来像这样：

我想从一个枢轴缩放、旋转和平移立方体。希望让它像https://www.youtube.com/watch?v=sZeBm8EM3mw&feature=youtu.be

对于这个转换，我将使用： gl-matrix。幸运的是，这种转换在下面有一个方法mat4.fromRotationTranslationScale()

问题是我仅仅使用这种方法就玩得很开心？没有错误，只是默认实现从屏幕上删除了多维数据集。

（静止的）fromRotationTranslationScale(out, q, v, s) → {mat4}

从四元数旋转、矢量平移和矢量比例创建矩阵。

问题：

我使用fromRotationTranslationScale不正确吗？如果是这样，我哪里错了。如果没有，如何获得某种反馈来玩弄。

我的数学很弱，但我觉得我可以在你的帮助下进行逆向工程和学习；）。

我使用 glMatrix 的方法：mat4.lookAt(out, eye, center, up)在渲染 WebGL 模型时设置相机视图。

渲染模型后，我需要center从视图/透视矩阵中检索属性。我知道如何检索该eye属性，但我不知道如何获取该属性center。我怎样才能做到这一点？

这是mat4.lookAt我使用的方法：http: //glmatrix.net/docs/mat4.js.html#line1366

我无法将这些功能从使用 glMatrix 1.2 的旧应用程序更新到 glMatrix 2.7：

并且不存在以下将矩阵乘以 4 分量向量的函数：

我正在尝试在这里使用 mat4 来翻译对象。我知道如何旋转对象，但我未能翻译对象。我将非常感谢所有帮助我的人，因为我厌倦了试图找到解决问题的方法。

javaScript中的重要代码：

这里的着色器代码：shader.vs.glsl：

我正在尝试使用 WebGL（regl，更具体地说）创建 2D 图形可视化。通过我当前的实现，我已经可以看到应用于每个节点的力布局，这很好。当我尝试相对于当前鼠标位置进行缩放时，问题就出现了。根据我的研究，要实现这种行为，有必要按以下顺序应用矩阵变换：

因此，每次wheel触发事件时，都会重新计算鼠标位置，并使用新的鼠标位置信息更新变换矩阵。当前的行为很奇怪，我似乎无法理解出了什么问题。这是一个活生生的例子。

显然，如果我将鼠标固定在初始位置进行放大和缩小，一切正常。但是，如果我移动鼠标并尝试将注意力集中在另一个节点上，那么它就会失败。

获取鼠标位置的函数是：

事件wheel监听回调：

以及更新变换的函数：

该transform矩阵在顶点着色器中作为统一体提供：

其中，position是保存节点位置的属性。

到目前为止，我已经尝试过：

• 我已经尝试改变转换的顺序。结果更奇怪。
• 当我独立应用平移或缩放时，一切看起来都很好。

这是我第一次与不是通常的 SVG/canvas 的东西进行交互。解决方案可能很明显，但我真的不知道该去哪里找了。我究竟做错了什么？

2018 年 6 月 11 日更新

我遵循@Johan 的建议并在现场演示中实现了它。虽然解释相当有说服力，但结果却不是我所期待的。反转变换以获得模型空间中的鼠标位置的想法对我来说很有意义，但我的直觉（这可能是错误的）说直接在屏幕空间上应用变换也应该有效。为什么我不能在屏幕空间中同时投影节点和鼠标并直接在那里应用变换？

2018 年 7 月 11 日更新

经过一番挣扎后，我决定采用不同的方法，并根据我的用例调整这个答案的解决方案。尽管缩放的工作正常（还添加了平移），但我仍然相信有些解决方案根本不依赖 d3-zoom。正如评论中所建议的那样，也许可以隔离视图矩阵并独立控制它以实现预期的行为。要查看我当前的解决方案，请在下面查看我的答案。