Opengl es 单击以放大WebGL
我需要在WebGL中实现“谷歌地图”风格的缩放效果。具体来说,我有一个简单的二维场景,始终垂直于摄影机。当用户单击场景时,相机应缩放到单击上方但更接近二维场景的位置 例如,请参见此JSFIDLE,它实现了场景但没有缩放: 如果启用了WebGL浏览器,则应在Z轴上的-7处看到一个三角形和一个正方形(二维)。我已经添加了一个占位符handleMouseUp()事件处理程序来记录任何单击事件,但是对于如何将单击事件给出的坐标转换为相机的新位置(或者我猜相当于一个新的视图矩阵),我有点不知所措Opengl es 单击以放大WebGL,opengl-es,webgl,Opengl Es,Webgl,我需要在WebGL中实现“谷歌地图”风格的缩放效果。具体来说,我有一个简单的二维场景,始终垂直于摄影机。当用户单击场景时,相机应缩放到单击上方但更接近二维场景的位置 例如,请参见此JSFIDLE,它实现了场景但没有缩放: 如果启用了WebGL浏览器,则应在Z轴上的-7处看到一个三角形和一个正方形(二维)。我已经添加了一个占位符handleMouseUp()事件处理程序来记录任何单击事件,但是对于如何将单击事件给出的坐标转换为相机的新位置(或者我猜相当于一个新的视图矩阵),我有点不知所措 (JS
(JSFIDLE基于learningwebgl.com的教程1,使用glMatrix库进行矩阵运算。请记住,这是WebGL,类似于OpenGL ES,无法访问glu*函数。)我在这个JSFIDLE中写了一些应该对您有所帮助的东西 (或) 只需单击WebGL窗口即可放大鼠标指向的位置 其基本思想是,通过使用投影矩阵
pMatrix
和视图矩阵(视图矩阵取决于相机所在位置及其查看方向),从3空间投影WebGL窗口中的点,从而获得该点。这些矩阵的组成在代码中命名为pvMatrix
如果希望从窗口反向变换回三个空间,则必须获取剪辑空间坐标(x、y、z),并使用pvMatrix
的逆方向将其“取消投影”回3D。在剪辑空间中,坐标在[-1,1]范围内,z
坐标为深度
在OpenGL世界中,这些转换是在gluProject()
和glunproject()
中实现的(您可以在谷歌上搜索更多信息和源代码)
在jsfiddle示例中,我们计算剪辑空间中的(x,y)坐标,然后针对两个不同的z值取消投影(x,y,z)。从中我们得到了3D空间中映射到(x,y)的两个点,我们可以推断出一个方向向量。然后我们可以朝那个方向移动相机以获得变焦效果
在代码中,相机位置位于<代码>眼睛代码>向量的反方向
此示例演示如何沿单击的方向移动摄影机。如果您想要实际移动到场景中的特定对象,则必须实现类似对象选择的功能,这是另一回事。我给出的示例不知道场景中的对象。这确实是brainjam回答的一部分,但为了防止JSFIDLE消失,我想确保代码已存档。以下是主要位:
function handleMouseUp(event) {
var world1 = [0,0,0,0] ;
var world2 = [0,0,0,0] ;
var dir = [0,0,0] ;
var w = event.srcElement.clientWidth ;
var h = event.srcElement.clientHeight ;
// calculate x,y clip space coordinates
var x = (event.offsetX-w/2)/(w/2) ;
var y = -(event.offsetY-h/2)/(h/2) ;
mat4.inverse(pvMatrix, pvMatrixInverse) ;
// convert clip space coordinates into world space
mat4.multiplyVec4(pvMatrixInverse, [x,y,-1,1], world1) ;
vec3.scale(world1,1/world1[3]) ;
mat4.multiplyVec4(pvMatrixInverse, [x,y,0,1], world2) ;
vec3.scale(world2,1/world2[3]) ;
// calculate world space view vector
vec3.subtract(world2,world1,dir) ;
vec3.normalize(dir) ;
vec3.scale(dir,0.3) ;
// move eye in direction of world space view vector
vec3.subtract(eye,dir) ;
drawScene();
console.log(event)
}
而整个JS
var gl;
function initGL(canvas) {
try {
gl = canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {
}
if (!gl) {
alert("Could not initialise WebGL, sorry :-(");
}
}
function getShader(gl, id) {
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}
var str = "";
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
}
var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
var shaderProgram;
function initShaders() {
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
}
var mvMatrix = mat4.create();
var pMatrix = mat4.create();
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}
var triangleVertexPositionBuffer;
var squareVertexPositionBuffer;
function initBuffers() {
triangleVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
var vertices = [
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
triangleVertexPositionBuffer.itemSize = 3;
triangleVertexPositionBuffer.numItems = 3;
squareVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
squareVertexPositionBuffer.itemSize = 3;
squareVertexPositionBuffer.numItems = 4;
}
var eye = vec3.create([0,0,0]) ; // negation of actual eye position
var pvMatrix = mat4.create();
var pvMatrixInverse = mat4.create();
function drawScene() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
// calculate the view transform mvMatrix, and the projection-view matrix pvMatrix
mat4.translate(mvMatrix, eye);
mat4.multiply(pMatrix,mvMatrix,pvMatrix) ;
mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
}
function handleMouseUp(event) {
var world1 = [0,0,0,0] ;
var world2 = [0,0,0,0] ;
var dir = [0,0,0] ;
var w = event.srcElement.clientWidth ;
var h = event.srcElement.clientHeight ;
// calculate x,y clip space coordinates
var x = (event.offsetX-w/2)/(w/2) ;
var y = -(event.offsetY-h/2)/(h/2) ;
mat4.inverse(pvMatrix, pvMatrixInverse) ;
// convert clip space coordinates into world space
mat4.multiplyVec4(pvMatrixInverse, [x,y,-1,1], world1) ;
vec3.scale(world1,1/world1[3]) ;
mat4.multiplyVec4(pvMatrixInverse, [x,y,0,1], world2) ;
vec3.scale(world2,1/world2[3]) ;
// calculate world space view vector
vec3.subtract(world2,world1,dir) ;
vec3.normalize(dir) ;
vec3.scale(dir,0.3) ;
// move eye in direction of world space view vector
vec3.subtract(eye,dir) ;
drawScene();
console.log(event)
}
function webGLStart() {
var canvas = document.getElementById("lesson01-canvas");
initGL(canvas);
initShaders();
initBuffers();
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
canvas.onmouseup = handleMouseUp;
drawScene();
}
webGLStart();
+1用于将learningwebgl场景导入JSFIDLE。我没有想到你可以把着色器放到HTML部分。谢谢,这正是我想要的帮助。我想知道您的解决方案是否可以用于检测已单击的对象?我正在考虑做一个向量(从已经转换成世界坐标的点击点开始,在检查碰撞的物体时通过世界发射)。@Alvin,是的,你可以这样做。不过,您也可以使用其他方法,例如“颜色编码”(请参阅)“剪辑空间坐标”到底是什么?@Alvin,我建议您用谷歌搜索“图形管道剪辑空间”之类的东西