单击以放大WebGL [英] Click to zoom in WebGL
问题描述
我需要在WebGL中实现相当于"Google Maps"样式的缩放效果.具体来说，我有一个始终垂直于相机的简单二维场景.当用户单击场景时，相机应将其缩放到点击位置上方但更靠近二维场景的位置.
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:
如果您具有启用了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.
(或 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坐标是深度.
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屋！
