javascript - 如何使用 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]));
    }
};

我认为在 javascript 方面可以做一些事情，因为着色器看起来不错。有什么建议吗？

Answer 1

发生错误是因为您尝试将 vec4 写入 float ，但这是行不通的。 float 与 vec4 相乘会得到 vec4，因此您将得到如下所示的结果:

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

编辑

如果这真的是关于平移(移动对象)，那么我不太明白为什么涉及到 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);
}

编辑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;
};