点击放大 WebGL [英] Click to zoom in WebGL

问题描述

我需要在 WebGL 中实现相当于谷歌地图"风格的缩放效果.具体来说，我有一个始终垂直于相机的简单二维场景.当用户点击场景时，相机应该缩放到点击上方但更接近二维场景的位置.

I need to implement what amounts to a "Google Maps" style zoom effect in WebGL. Specifically I have a simple 2-dimensional scene that is always perpendicular to the camera. When a user clicks on the scene, the camera should zoom to a location that is over the click, but closer to the 2-dimensional scene.

例如看这个jsfiddle，它实现了场景但没有缩放:

For example see this jsfiddle, that implements the scene but no zooming:

http://jsfiddle.net/JqBs8/4/

如果您有启用 WebGL 的浏览器，您应该会在 Z 轴的 -7 处看到一个三角形和一个正方形(二维).我已经放入了一个占位符 handleMouseUp() 事件处理程序来记录任何点击事件，但是对于如何将点击事件给出的坐标转换为相机的新位置(或者我猜相当于一个新的查看矩阵).

If you have a WebGL enabled browser, you should see a triangle and a square (2-dimensional) rendered at -7 on the Z axis. I have put in a placeholder handleMouseUp() event handler that logs any click events, but I'm a little lost as to how to translate the coordinates given by the click event into a new location for the camera (or I guess equivalently a new view matrix).

(jsfiddle 基于 learningwebgl.com 的教程 1 并使用 glMatrix http://code.google.com/p/glmatrix/ 用于矩阵运算的库.请记住，这是 WebGL，它类似于 OpenGL ES，并且无法访问 glu* 函数.)

(The jsfiddle is based on tutorial 1 from learningwebgl.com and uses the glMatrix http://code.google.com/p/glmatrix/ library for matrix operations. Keep in mind that this is WebGL, which is similar to OpenGL ES, and has no access to glu* functions.)

推荐答案

我在这个 jsfiddle 中写了一些东西，应该对你有帮助.

I've written something in this jsfiddle that should help you.

http://jsfiddle.net/hedzys6r/

(或 https://codepen.io/brainjam/pen/gBZyGm)

只需单击 WebGL 窗口即可放大鼠标指向的位置.

Just click on the WebGL window to zoom in to where the mouse is pointing.

基本思想是WebGL窗口中的一个点是通过使用投影矩阵pMatrix和视图矩阵从3空间投影得到的(视图矩阵取决于相机的位置和它正在寻找的方向).这些矩阵的组合在代码中被命名为pvMatrix.

The basic idea is that a point in the WebGL window is obtained by projecting it from 3-space using the projection matrix pMatrix and the view matrix (the view matrix depends on where the camera is and the direction in which it is looking). The composition of these matrices is named pvMatrix in the code.

如果您想要从窗口到三个空间的相反变换，您必须获取一个剪辑空间坐标 (x,y,z) 并使用 pvMatrix 的逆函数将其取消投影"回 3D 空间.在裁剪空间中，坐标在[-1,1]范围内，z坐标为depth.

If you want the opposite transform from the window back to three space, you have to take a clip space coordinate (x,y,z) and 'unproject' it back into 3D using the inverse of pvMatrix. In clip space, coordinates are in the range [-1,1], and the z coordinate is depth.

在 OpenGL 世界中，这些转换是在 gluProject() 和 gluUnproject() 中实现的(您可以通过 Google 获取更多信息和源代码).

In the OpenGL world, these transforms are implemented in gluProject() and gluUnproject() (which you can Google for more information and source code).

在 jsfiddle 示例中，我们计算剪辑空间中的 (x,y) 坐标，然后对两个不同的 z 值取消投影 (x,y,z).从中我们得到 3D 空间中映射到 (x,y) 的两个点，我们可以推断出方向向量.然后我们可以向那个方向移动相机以获得缩放效果.

In the jsfiddle example, we calculate the (x,y) coordinates in clip space, and then unproject (x,y,z) for two different values of z. From that we get two points in 3D space that map onto (x,y), and we can infer a direction vector. We can then move the camera in that direction to get a zoom effect.

在代码中，相机位置在eye向量的反面.

In the code, the camera position is at the negation of the eye vector.

此示例向您展示如何沿您单击的方向移动相机.如果你想实际移动到场景中的特定对象，你必须实现对象选择之类的东西，这是一个不同的鱼锅.我给出的示例不知道场景中的对象.

This example shows you how to move the camera in the direction that you are clicking. If you want to actually move towards specific objects in the scene, you have to implement something like object selection, which is a different kettle of fish. The example I've given is unaware of the objects in the scene.

这篇关于点击放大 WebGL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！