我发现自己在 webGl 中使用的许多符号和域约定中有点迷失了。看一下这个 regl 示例（它显示了狒狒测试图像）。以下是我对它的理解：

• 未指定原语；它很可能推断GL_TRIANGLE。
• 因此，它在世界空间中创建了一个具有顶点(-2, 0)、(0, -2)、的三角形表面。(2, 2)在纸上画出来，似乎是专门选择了这个，因为它包含了这个区域[0,1] x [0,1]。
• uv从世界空间中获取它的值，包括这个[0,1] x [0,1]区域（它是 的域texture2d）。如果我理解正确，约定是+u指向图像的右边缘，+v指向顶部。
• gl_Position设置为1 - 2*uv，以便图像占据[-1,1] x [-1,1], z=0“剪辑空间”，无论是什么。
• 更重要的是，这也意味着方向对应！+{u,v}-{x,y}
• 显示的图像，实际上是水平镜像的！！（与此相比）但它不是垂直镜像的。 在与屏幕像素坐标的最终转换过程中必须有其他东西抵消了 y 中的负因子。
• 然而，谷歌搜索并没有发现gl_Position任何与屏幕相关的证据。我看到讨论说它是左撇子，但这只是z相对于世界坐标的否定。（例如这里的这个问题）

简而言之，在我看来，这个图像也应该垂直镜像。

我错过了什么？

为了后代，代码复制如下：（MIT许可）

我有以下代码，我试图将 3d 看到（使用REGL）渲染到 React 组件App中。一开始它似乎渲染得很好。但我注意到，如果我调整浏览器窗口的大小，组件渲染的 div 会增加高度。因此，任何窗口调整都意味着直接转化为高度的增长，直到 div 高于窗口。我试图了解如何REGL以及如何REACT协同工作，所以我不确定将这种行为归因于什么。这可能是我对任何一方的误解。

编辑：

我能够将错误追溯到文件resize中的一个函数REGL。

它h以一些高值结束计算（在稍微调整浏览器窗口后说 1000+），而window.innerHeight保持在320.

我正在使用 regl 渲染圆圈，并有三个目标：

1. 画布应该是透明的，在其后面显示 HTML 内容。
2. 圆应该平滑地消除锯齿。
3. 重叠的圆圈应该看起来合理（混合颜色，不显示角落）

到目前为止，我有这个：故障代码和演示。

更新：演示链接现在反映了有效的、可接受的答案。下面的代码不变。

index.js

顶点.glsl

片段.glsl

然而，结果看起来并不那么好。角落是可见的，并且圆圈没有正确混合。

我还尝试添加以下混合术语：

这看起来好一些，但角落仍然存在，并且当背景为白色时出现问题。

你能建议对此进行改进吗？（如果这就是我在这里所缺少的，也许可以向我指出有关混合的更好信息）谢谢！

我在 Google Chrome (61.0) 中遇到了 WebGL 的问题，在我的机器上每 60-90 秒出现一次非常长的帧。Devtools 将这些帧记录为 GPU 活动，但实际上导致这些帧变长的原因对我来说是不透明的。该应用程序正在使用REGL并使用subdata. 我正在寻找可能导致这些长帧的原因，以及如何继续调试它们，因为 Chrome 的 devtools 没有提供有关GPU 帧的详细信息。

Safari 11.0 不会出现此问题

经过进一步调查，它似乎与ANGLE_instanced_arrays扩展的使用有关。禁用实例化并使用单独的绘图调用绘制每个实例时不会发生此问题。

我看到一些我无法在我编写的 WebGL 着色器中解释的奇怪行为。这对我来说不是一个专业领域，所以我完全有可能误解了一些非常简单的东西，但我不确定是什么。

我有一个代码笔来说明这里的奇怪行为https://codepen.io/bjvanminnen/pen/XqMpvL。

正在发生的事情的摘要

• 在 JS 中，我创建了一个每个像素为 #350000 的纹理

• 在我的片段着色器中，读取前两个像素

• 如果两个像素相同（它们应该相同），则最初将输出的 r 值设置为 1

• 取消注释时，根据 val1 的下限更改 color.r 的值（我不希望影响 color.b 的步骤）

• 如果像素值为 53（即 0x35），则将输出的 b 值设置为 1。

• 然后我在 JS 中检查生成的像素值。

我的期望：当第二color.r行被注释掉时，我期望结果为 (53, 0, 255, 255)。这是我在桌面上看到的，但在我的 iOS 设备上看到的是 (53, 0, 0, 255)。似乎 val1 在 iOS 上最终略大于 53。我假设这只是浮点怪异。

超级奇怪，我无法理解的是，当我注释掉第二color.r行时，我的桌面上会出现 (255, 0, 255, 255) - 这是有道理的 - 但我的桌面上会出现 (255, 0, 0, 255) iOS 设备。

换句话说，这条线的存在/不存在color.r = floor(val1) / 255.;以某种方式改变了color.b.

我是否遇到了一些奇怪的 iOS 错误，或者我在这里误解了什么？

在构建着色器时，我注意到有时会使用一个名为 main 的 void 函数来定义着色器。当一个属性被迭代时，它似乎main被添加到着色器中。

我想弄清楚何时适合在内部定义着色器main，而不是仅在着色器的顶级定义空间内。

regl 教程中的示例代码。

我试图弄清楚如何使用Regl实现基元之间的颜色和 alpha 混合。

我知道 Regl 命令有一个blend属性，并且我尝试复制以下 webgl 设置来解决问题：

blend在 Regl 中使用以下设置：

但是混合似乎只对背景颜色起作用，而不是在点之间。（请参见下面的示例。）

示例：http: //jsfiddle.net/8gyf7pek/13/

难道我做错了什么？我怎样才能实现与纯 webgl 代码产生的相同类型的混合？谢谢！

使用 regl 我正在尝试实现一个非常简单的drawRect()函数，该函数最终将能够在屏幕空间中传递 x、y、宽度、高度（屏幕左上角的原点 0,0）

这是我到目前为止所拥有的：

https://codesandbox.io/s/nn9qvxom4l

目前它绘制了一个空白屏幕（我猜是由于投影矩阵裁剪或将所有内容移动到视口之外）。如果您从顶点着色器中移除投影或在投影属性中使用单位矩阵，则它会再次呈现蓝色方块。

所以我的问题是：

1. 我在这里做错了什么？为什么我的正交投影不起作用？
2. 将来我将如何调试它，以便我可以“看到”结果坐标以及它们是如何错误的？

我已经阅读了一些 SO 问题、OpenGL 书籍和博客，但我被困在这里，因为这似乎应该可行。

相关资源：

https://unspecified.wordpress.com/2012/06/21/calculating-the-gluperspective-matrix-and-other-opengl-matrix-maths/ https://developer.mozilla.org/en-US/docs/ Web/API/WebGL_API/WebGL_model_view_projection https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html WebGL 等距投影 想要一个 OpenGL 2D 示例（VC++，画一个矩形） http://songho.ca/opengl /gl_transform.html

编辑：固定 viewportWidth 在正交投影中使用了两次。这修复了一个空白屏幕，但是原点现在位于左下角而不是左上角。切换正射投影的参数会再次导致黑屏。

我从 regl 开始，我正在尝试制作一个小演示，用于在所有三个轴上绘制点。我已经使用此链接开始。

在上面的例子中，点被初始化为

我将它修改为下面的，以获得一个进入无穷大的螺旋

我修改了顶点着色器以考虑附加轴。以下是绘制点的代码

但是这样做的结果是在同一平面上绘制了一个圆圈。该位置的第三个输入似乎没有任何效果。我尝试交换位置中的y和z值，并获得了正弦曲线。所以z的值被正确分配。我注意到的另一件事是，如果z的值为零，则不会绘制任何内容。z的任何其他值似乎都不会产生任何影响。

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

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

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

获取鼠标位置的函数是：

事件wheel监听回调：

以及更新变换的函数：

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

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

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

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

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

2018 年 6 月 11 日更新

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

2018 年 7 月 11 日更新

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