WebGL GLSL放大二维图形

我正在创建一个2D WebGL示例，该示例使用图形着色绘制复杂函数。我已经让它工作了，用户可以通过单击并拖动光标来平移图形

我还希望用户使用鼠标滚轮进行放大和缩小。我在GLSL中有一个基本的缩放函数（在我的

main

函数中），但是它在图形的中心进行放大，而不管当前的平移偏移

如何修改GLSL

main

函数以始终在画布/屏幕的中心放大

我的片段着色器如下所示（

func

是一个特定的复杂函数，不会更改平移或缩放）：

#版本100
精密中泵浮子；
#定义PI 3.14159265359
#定义SAT_比率0.0625
常数vec2r=vec2（1.0,0.0）；
常数vec2i=vec2（0.0,1.0）；
均匀向量2；
均匀矢量2 uOffset；
均匀浮球；
均匀浮动时间；
均匀vec2溶液；
...
真空总管（真空）{
vec2中心=uResolution*0.5；
vec2 z=gl_FragCoord.xy-中心+U偏移；
浮点计算缩放=功率（2.0，uZoom）；
浮动比率=0.1*min（uResolution.x，uResolution.y）；
vec2 z1=（z*计算缩放）/比率；
vec2o=func（z1）；
gl_FragColor=vec4（getColor（o），1.0）；
}

我在JavaScript中的投影和制服定义如下，鼠标位置从左下角开始：

constprojectionmatrix=mat4.create（）；
mat4.1透视图(
投影矩阵，
45*Math.PI/180，
canvas.clientWidth/canvas.clientHeight，
0.1,
100
);
const modelViewMatrix=mat4.create（）；
mat4.1翻译(
modelViewMatrix，
modelViewMatrix，
[0.0, 0.0, -1.0]
);
...
gl.uniform2f（locations.uMouse、mouse.x、canvas.clientHeight-mouse.y）；
总账uniform2f（位置.uOffset，-offset.x，offset.y）；
gl.uniform1f（locations.uZoom，zoom）；
总账uniform1f（locations.uTime，已用时间）；
gl.uniform2f（locations.uResolution、canvas.clientWidth、canvas.clientHeight）；
gl.uniformMatrix4fv（locations.uProjection，false，projectionMatrix）；
gl.uniformMatrix4fv（locations.uModelView，false，modelViewMatrix）；

我的顶点着色器非常简单，因为它只渲染平面2D曲面：

#版本100
精密中泵浮子；
属性向量4定位；
统一mat4 uModelView；
均匀mat4反射；
真空总管（真空）{
gl_位置=上射*模型视图*位置；
}

---

可以找到完整的代码，工作演示是。

我认为您需要做的就是将

uOffset

应用到

z1

而不是

z

@LJᛃ 如果是

（z*computedZoom+uOffset）/ratio，这几乎可以实现。尽管如此，在缩放级别之间，使用鼠标平移并不一致。要使平移一致，您需要更改更新
uOffset
制服的代码，以将比率考虑在内。