WebGL中的2D缩放到指定点

Question

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

translate(nodePosition, mousePosition)
scale(scaleFactor)
translate(nodePosition, -mousePosition)

因此，每次触发wheel事件时，都会重新计算鼠标位置，并使用新的鼠标位置信息更新变换矩阵。目前的行为很奇怪，我无法理解出错了什么。 这里是实时示例。

显然，如果我固定鼠标在初始位置并放大或缩小，一切都正常。但是，如果我移动鼠标并尝试聚焦到另一个节点，则会失败。

用于检索鼠标位置的函数是：

const getMousePosition = (event) => {
    var canvas = event.currentTarget
    var rect = canvas.getBoundingClientRect()
    var x = event.clientX - rect.left
    var y = event.clientY - rect.top
    var projection = mat3.create()
    var pos = vec2.fromValues(x,y)
    // this converts the mouse coordinates from 
    // pixel space to WebGL clipspace
    mat3.projection(projection, canvas.clientWidth, canvas.clientHeight)
    vec2.transformMat3(pos, pos, projection)
    return(pos)
}

wheel事件的监听器回调函数：

var zoomFactor = 1.0
var mouse = vec2.fromValues(0.0, 0.0)
options.canvas.addEventListener("wheel", (event) => {
    event.preventDefault()
    mouse = getMousePosition(event)
    var direction = event.deltaY < 0 ? 1 : -1
    zoomFactor = 1 + direction * 0.1
    updateTransform()
})

更新变换的函数：

var transform = mat3.create()
function updateTransform() {
    var negativeMouse = vec2.create()
    vec2.negate(negativeMouse, mouse)
    mat3.translate(transform, transform, mouse)
    mat3.scale(transform, transform, [zoomFactor, zoomFactor])
    mat3.translate(transform, transform, negativeMouse)
}

这个transform矩阵在顶点着色器中作为一个统一变量提供：

  precision highp float;
  attribute vec2 position;

  uniform mat3 transform;

  uniform float stageWidth;
  uniform float stageHeight;

  vec2 normalizeCoords(vec2 position) {
    float x = (position[0]+ (stageWidth  / 2.0));
    float y = (position[1]+ (stageHeight / 2.0));

    return vec2(
        2.0 * ((x / stageWidth ) - 0.5),
      -(2.0 * ((y / stageHeight) - 0.5))
    );
  }

  void main () {
    gl_PointSize = 7.0;
    vec3 final = transform * vec3(normalizeCoords(position), 1);
    gl_Position = vec4(final.xy, 0, 1);
  }

在这里，position是保存节点位置的属性。

我已经尝试过的：

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

这是我第一次接触非常规 SVG/canvas 的东西。解决方案可能很明显，但我真的不知道该去哪里寻找了。我做错了什么？

更新于 2018 年 06 月 11 日

我遵循 @Johan 的建议，并在实时演示中实现了它。虽然解释相当令人信服，但结果并不完全符合我的预期。将变换反转以获取模型空间中的鼠标位置的想法对我来说很有意义，但我的直觉（可能是错误的）认为在屏幕空间直接应用变换也应该有效。为什么我不能在屏幕空间中投影节点和鼠标，并直接应用变换呢？

更新于 2018 年 07 月 11 日

经过一番努力，我决定采用不同的方法，并针对我的用例改编这个答案的解决方案。虽然现在缩放（加上平移）的情况符合预期，但我仍然相信完全不依赖于 d3-zoom 的解决方案是存在的。也许可以像评论中建议的那样，隔离视图矩阵并控制它以实现预期的行为。要查看我的当前解决方案，请查看下面的答案。

- Lucas Cardozo

---

您的转换将模型映射到目标视口。如果您想要校正由于缩放（例如delta）导致的平移，其中delta是目标坐标中的距离，则需要将此delta在模型坐标中进行转换。也就是说，确定您的转换的逆，并使用它来计算模型坐标中的校正。 - Johan van Breda

谢谢，@Johan。我会在几个小时后尝试一下看看会发生什么！ - Lucas Cardozo

如果是我，我会将视图/相机矩阵与其他所有内容分开。我会将相机存储为位置和缩放级别，并在每帧计算一个视图矩阵。 - gman

我曾认为相机矩阵只用于处理三维空间，但我可能是错的。鉴于我在WebGL方面的有限经验，这可能是正确的方法。感谢建议，@gman！ - Lucas Cardozo

无论你是否想称之为相机，我只是指控制视图矩阵的东西，该矩阵应用于顶部。然后下面的代码仅在世界坐标中工作，并且您已经分离了它的查看方式。是否这样做是正确的，我不知道:P 实际上，可以将2D显示视为具有正交相机的3D显示，因此，就像在3D建模软件中的正交显示一样，您可以滑动和缩放相机以获取场景的不同视图。即使您仅对2D显示使用3x3矩阵，通过分离视图部分，您也将获得相同的效果。 - gman

Answer 1

好的，在尝试原始方法失败后，我成功地使用这个解决方案来解决我的问题。

updateTransform函数现在如下：

var transform = mat3.create();
function updateTransform(x, y, scale) {
    mat3.projection(transform, options.canvas.width, options.canvas.height);
    mat3.translate(transform, transform, [x,y]);
    mat3.scale(transform, transform, [scale,scale]);
    mat3.translate(transform, transform, [
      options.canvas.width / 2,
      options.canvas.height / 2
    ]);
    mat3.scale(transform, transform, [
      options.canvas.width / 2,
      options.canvas.height / 2
    ]);
    mat3.scale(transform, transform, [1, -1]);
}

并由d3-zoom调用：

import { zoom as d3Zoom } from "d3-zoom";
import { select } from "d3-selection";

var zoom = d3Zoom();

d3Event = () => require("d3-selection").event;

select(options.canvas)
      .call(zoom.on("zoom", () => {
          var t = d3Event().transform
          updateTransform(t.x, t.y, t.k)
       }));

这里是使用此解决方案的实时演示。

- Lucas Cardozo

Answer 2

你的转换将模型映射到目标视口。如果你想纠正由于缩放而导致的平移（例如 delta），这是目标坐标系中的距离，你需要将该 delta 转换为模型坐标系。也就是说，确定你的转换的逆，然后使用它在模型坐标系中计算校正值。

下面给出了一个简单的示例，准备在视口坐标系中以中心为中心进行缩放的转换：

function map (a, p) {
    return [a[0] * p[0] + a[3] * p[1] + a[6],a[1] * p[0] + a[4] * p[1] + a[7]];
}

function scale(transform,scale,viewCenter1) {    
    var inverted = mat3.create();
    mat3.invert(inverted,transform);
    var modelCenter1 = map(inverted,viewCenter1);   // scale from this point in model

    mat3.scale(transform,transform,[scale,scale]);
    var viewCenter2 = map(transform,modelCenter1);  // map model center to screen 
    var viewShift = [viewCenter1[0]-viewCenter2[0],viewCenter1[1]-viewCenter2[1]];

    mat3.invert(inverted,transform);
    var modelShift = map(inverted,viewShift) - map(inverted,[0,0]);
    mat3.translate(transform,[-modelShift[0],-modelShift[1]]);   // correct for the shift
}

// pass the transformation to webgl environment

- Johan van Breda

---

好的，我把你的代码放到实时演示中看看会发生什么。在修复了一些行之后，结果并不是我预期的，尽管你的解释对我来说相当有说服力。我将使用你的建议更新答案和演示。这个“map”函数到底是做什么的？为什么我不能直接在视口空间上应用变换？ - Lucas Cardozo

map函数返回一个转换后的点。输入变换和要转换的点，输出转换后的点。我快速查看了你正在使用的mat3库，但没有找到这样的函数。 - Johan van Breda

请注意map函数中的拼写错误（啊！），最后一个词是a[7]而不是a[6]。我已在答案中进行了更正。 - Johan van Breda

我看了一下这个例子，它飞走了。我需要一些时间，在6小时后再看一下。 - Johan van Breda

没问题！那么这个 map 函数和向量矩阵乘法有什么不同呢？其中向量是形如 (x,y,1) 的点，矩阵（3x3）是变换矩阵。我会更新我的问题，使用从另一个答案中借鉴的 d3-zoom 解决方案，但如果我们能够找到只使用这些矩阵变换的解决方案，我会非常感激。 - Lucas Cardozo

这个 map 函数和向量矩阵乘法不同吗：不，它是相同的。 - Johan van Breda