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与vec4的乘法得到vec4，因此你有这样的东西：

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

修改

如果这真的是关于平移（移动对象），那么我并不完全理解为什么涉及到sin和cos术语。另外：为什么根据y坐标修改x坐标？只有在进行一些旋转（不是平移）时才需要这样做。最后，该对象根本不可见，因为您将所有顶点的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; };

如何使用gl_Position以编程方式平移纹理

1 个答案: