#opengl-es #webgl
#javascript #opengl-es #webgl
Вопрос:
Мне нужно реализовать эффект масштабирования в стиле «Google Maps» в WebGL. В частности, у меня есть простая двумерная сцена, которая всегда перпендикулярна камере. Когда пользователь нажимает на сцену, камера должна увеличить изображение в месте, которое находится над щелчком мыши, но ближе к двумерной сцене.
Например, посмотрите этот jsfiddle, который реализует сцену, но без масштабирования:
Если у вас браузер с поддержкой WebGL, вы должны увидеть треугольник и квадрат (двумерные), отображаемые с разрешением -7 по оси Z. Я вставил обработчик событий-заполнителей handleMouseUp (), который регистрирует любые события щелчка, но я немного запутался в том, как перевести координаты, заданные событием щелчка, в новое местоположение камеры (или, я предполагаю, что эквивалентно, в новую матрицу просмотра).
(jsfiddle основан на руководстве 1 из learningwebgl.com и использует glMatrix http://code.google.com/p/glmatrix библиотека для матричных операций. Имейте в виду, что это WebGL, который похож на OpenGL ES и не имеет доступа к функциям glu *.)
Комментарии:
1. 1 для получения обучающей сцены webgl в jsfiddle. Мне не приходило в голову, что вы могли бы поместить шейдеры в раздел HTML.
Ответ №1:
Я написал кое-что в этом jsfiddle, что должно вам помочь.
(или https://codepen.io/brainjam/pen/gBZyGm )
Просто нажмите на окно WebGL, чтобы увеличить туда, куда указывает мышь.
Основная идея заключается в том, что точка в окне WebGL получается путем проецирования ее из трехмерного пространства с использованием матрицы проекции pMatrix и матрицы просмотра (матрица просмотра зависит от того, где находится камера и в каком направлении она смотрит). Состав этих матриц назван pvMatrix в коде.
Если вы хотите обратное преобразование из окна обратно в трехмерное пространство, вам нужно взять координату пространства клипа (x, y, z) и «разпроектировать» ее обратно в 3D, используя обратное значение pvMatrix . В пространстве клипа координаты находятся в диапазоне [-1,1], а z координата — это глубина.
В мире OpenGL эти преобразования реализованы в gluProject() и gluUnproject() (которые вы можете погуглить для получения дополнительной информации и исходного кода).
В примере jsfiddle мы вычисляем координаты (x, y) в пространстве клипа, а затем отменяем проекцию (x, y, z) для двух разных значений z. Из этого мы получаем две точки в трехмерном пространстве, которые отображаются на (x, y), и мы можем вывести вектор направления. Затем мы можем переместить камеру в этом направлении, чтобы получить эффект увеличения.
В коде положение камеры находится в отрицании eye вектора.
В этом примере показано, как перемещать камеру в направлении, в котором вы нажимаете. Если вы хотите на самом деле перейти к определенным объектам в сцене, вам нужно реализовать что-то вроде выбора объекта, что является другим вариантом. В приведенном мной примере не указаны объекты в сцене.
Комментарии:
1. Спасибо, это именно та помощь, которую я искал.
2. @мозг. Мне интересно, можно ли использовать ваше решение для обнаружения объектов, на которые был сделан щелчок? Я подумываю о создании вектора (из точки щелчка, которая была преобразована в мировые координаты, которая запускается по всему миру при проверке на наличие столкнувшихся объектов).
3. @Элвин, да, ты мог бы это сделать. Однако есть и другие методы, которые вы также можете использовать, например, «цветовое кодирование» (см. khronos.org/message_boards/showthread.php/7017-Picking-tutorial )
4. Что именно представляет собой «координаты пространства клипа»?
5. @Alvin, я предлагаю вам погуглить что-то вроде «пространство клипа графического конвейера»
Ответ №2:
Это действительно часть ответа brainjam, но на всякий случай, если jsfiddle должен был исчезнуть, я хотел убедиться, что код был заархивирован. Вот основной бит:
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();