To achieve zooming at the mouse position in a WebGL context, you need to adjust your viewpoint transformation to account for the mouse position. This involves converting the mouse coordinates to world coordinates and then adjusting the viewpoint accordingly. You can use a method similar to screenToWorld to transform your mouse coordinates into the world space of your skeleton. Here's a general approach:
Convert Mouse Coordinates: First, convert your mouse coordinates from screen space to world space. This can be done using a method like screenToWorld, which will take into account the current transformation matrix of your camera or viewpoint.
Adjust Viewpoint: Once you have the world coordinates of the mouse, adjust your viewpoint so that the zoom operation centers around these coordinates. This typically involves translating the viewpoint by the difference between the current center and the mouse world coordinates.
Apply Zoom: Finally, apply the zoom transformation. This can be done by scaling your view matrix or adjusting the projection matrix to zoom in or out.
Here's a simplified example of how you might implement this:
function zoomAtMouse(mouseX, mouseY, zoomFactor) {
// Convert mouse coordinates to world coordinates
let worldCoords = screenToWorld(mouseX, mouseY);
// Calculate the new center based on zoom
let newCenterX = worldCoords.x + (currentCenterX - worldCoords.x) * zoomFactor;
let newCenterY = worldCoords.y + (currentCenterY - worldCoords.y) * zoomFactor;
// Update the viewpoint to center on the new coordinates
setViewpoint(newCenterX, newCenterY, zoomFactor);
}
This approach ensures that when you zoom, the operation is centered around the mouse position, providing a more intuitive zooming experience.
