javascriptwebglgl-matrixregl

2D zoom to point in webgl

I'm trying to create a 2D graph visualization using WebGL (regl, to be more specific). With my current implementation I can already see the force layout being applied to each node, which is good. The problem comes when I try to zoom with respect to the current mouse position. According to my research, to achieve this behavior, it is necessary to apply matrix transformations in the following order:

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

So, every time the wheel event is fired, the mouse position is recalculated and the transform matrix is updated with the new mouse position information. The current behavior is weird and I can't seem to understand what is wrong. Here is a live example.

enter image description here

Apparently, if I zoom in and out with the mouse fixed at the initial position, everything works just fine. However, if I move the mouse and try to focus on another node, then it fails.

The function for retrieving the mouse position is: 

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)
}

The wheel event listener callback: 

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()
})

And the function that updates the transform: 

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)
}

This transform matrix is made available as an uniform in the vertex shader: 

  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);
  }

where, position is the attribute holding the node position.

What I've tried, so far:

This is my first interaction with something that is not the usual SVG/canvas stuff. The solution is probably obvious, but I really don't know where to look anymore. What am I doing wrong?

Update 06/11/2018

I followed @Johan's suggestions and implemented it on the live demo. Although the explanation was rather convincing, the result is not quite what I was expecting. The idea of inverting the transform to get the mouse position in the model space makes sense to me, but my intuition (which is probably wrong) says that applying the transform directly on the screen space should also work. Why can't I project both the nodes and the mouse in the screen space and apply the transform directly there?

Update 07/11/2018

After struggling a little, I decided to take a different approach and adapt the solution from this answer for my use case. Although things are working as expected for the zoom (with the addition of panning as well), I still believe there are solutions that do not depend on d3-zoom at all. Maybe isolating the view matrix and controlling it independently to achieve the expected behavior, as suggested in the comments. To see my current solution, check my answer bellow.

Solution

  • Alright, after failing with the original approach, I managed to make this solution work for my use case.

    The updateTransform function is now: 

    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]);
}

    And is called by 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)
       }));

    Here is the live demonstration with this solution.

    enter image description here