Как скопировать текстуру программно с помощью gl_Position

Question

Я могу легко масштабировать текстуру в этом fiddle, но не смог правильно панорамировать.

Вот Фрагмент кода шейдеров:

var vertexShader = createVertexShader([ 
    'attribute vec3 attrVertexPos;', 
    'attribute vec2 attrTextureCoord;', 
    'varying highp vec2 vTextureCoord;', 
    'uniform float zoomFactor;', 
    'uniform vec2 panCoord;', 
    'void main(void) {', 
     '\tgl_Position = vec4(attrVertexPos.xy + panCoord.xy, 0, zoomFactor);', 
     '\tvTextureCoord = attrTextureCoord;', 
    '}' 
    ].join('\n')); 

//create and compile Fragment Shader 
var fragmentShader = createFragmentShader([ 
'#ifdef GL_FRAGMENT_PRECISION_HIGH', 
    'precision highp float;', 
'#else', 
    'precision mediump float;', 
'#endif', 
    'varying highp vec2 vTextureCoord;', 
    'uniform sampler2D uImage;', 
    'void main(void) {', 
     '\tgl_FragColor = texture2D(uImage, vTextureCoord);', 
    '}' 
    ].join('\n')); 

код Javascript:

document.getElementById('canvas').onmousedown = function(e) { 
if(startX === undefined) { 
    startX = e.clientX; 
    startY = e.clientY; 
} else { 
    startX = lastX; 
    startY = lastY; 
} 
isMouseDown = true; 
}; 
document.getElementById('canvas').onmouseup = function() { 
    isMouseDown = false; 
    previousTranslation[0] = xVal/100*zoomFactor; 
    previousTranslation[1] = yVal/100*zoomFactor; 
}; 
document.getElementById('canvas').onmouseout = function() { 
    isMouseDown = false; 
}; 
document.getElementById('canvas').onmousemove = function(e) { 
    if (isMouseDown) { 
     xVal = (lastX-startX)/canvas.width*100; 
    yVal = (startY-lastY)/canvas.height*100; 
    console.log(xVal/100*2.0 + ',' +yVal/100*2.0); 
    gl.uniform2fv(pan, new Float32Array([previousTranslation[0] + xVal/100*zoomFactor, previousTranslation[1] + yVal/100*zoomFactor])); 
    } 
}; 

Я думаю, что есть что-то, что может быть сделано на яваскрипте стороны, как шейдер выглядит отлично. Какие-либо предложения?

Answer 1

Ошибка возникает из-за того, что вы пытаетесь написать vec4 в поплавок, который не будет работать. Умножение поплавка с vec4 приводит к vec4, таким образом, у вас есть что-то вроде этого:

gl_Position.x = aVertexPosition.x * u_CosB - aVertexPosition.y * u_SinB 
    float =  float  * vec4 -  float  * vec4 

Редактировать

Если это действительно о панорамирование (перемещение объекта), то я не» t точно понимают, почему есть связанные с sin и cos термины. Кроме того: почему изменяется координата x в зависимости от координаты y? Это потребуется только в том случае, если происходит некоторое вращение (которое не является панорамированием). В конце концов, объект вообще не виден, потому что вы задаете y-координату для всех вершин равным 0, что означает, что они свернуты в строку.

Так просто реализовать панорамирование, код может выглядеть как-то так:

//Contains offset in normalized device coordinates along x and y direction 
uniform vec2 pan; 

attribute vec4 aVertexPosition; 

void main() 
{ 
    gl_Position = vec4(aVertexPosition.xy + pan.xy, 0, 1.0); 
} 

Edit 2

Путь, как рассчитать кастрюлю в onmousemove неправильно. Вы должны рассчитать расстояние до мыши вниз положения (не уверен, что вы вычисляете сейчас):

document.getElementById('canvas').onmousemove = function(e) { 
if (isMouseDown) { 
    var xVal = (lastX - e.clientX)/canvas.width; 
    var yVal = (lastY - e.clientY)/canvas.height; 
    gl.uniform2fv(pan, new Float32Array([xVal, yVal])); 
    } 
}; 

Когда вам это нужно быстрее/медленнее размножается xVal и yVal с постоянным коэффициентом. И может быть, вы должны инвертировать одно из направлений, когда кастрюля идет не в ту сторону.

Редактировать 3

Функция MouseDown Теперь не имеет смысла? Почему он должен вести себя по-другому после первого нажатия? Единственный код должен быть:

document.getElementById('canvas').onmousedown = function(e) { 
    startX = e.clientX; 
    startY = e.clientY; 
    isMouseDown = true; 
}; 

Кроме того, при вызове функции мыши вверх во второй раз, переопределить значение previousTranslation вместо добавления текущего перевода на него. Правильно:

document.getElementById('canvas').onmouseup = function() { 
    isMouseDown = false; 

    if (previousTranslation[0] == undefined) 
    { 
     previousTranslation[0] = 0.0; 
     previousTranslation[1] = 0.0; 
    } 

    previousTranslation[0] += xVal/100*zoomFactor; 
    previousTranslation[1] += yVal/100*zoomFactor; 
};