WebGL GLSL 放大 2D 图

问题描述

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

我还希望用户使用鼠标滚轮放大和缩小。我有一个在 GLSL 中工作的基本缩放功能（在我的 main 函数中），但它会在图形的中心放大，而不管当前的平移偏移量如何。

如何修改我的 GLSL main 函数以始终在画布/屏幕的中心放大？

我的片段着色器看起来像这样，（func 是一个特定的复杂函数，不会改变平移或缩放）：

#version 100
precision mediump float;

#define PI 3.14159265359
#define SAT_RATIO 0.0625
const vec2 R = vec2(1.0,0.0);
const vec2 I = vec2(0.0,1.0);

uniform vec2 uMouse;
uniform vec2 uOffset;
uniform float uZoom;
uniform float uTime;
uniform vec2 uResolution;

...

void main(void) {
  vec2 center = uResolution*0.5;
  vec2 z = gl_FragCoord.xy - center + uOffset;
  float computedZoom = pow(2.0,uZoom);
  float ratio = 0.1*min(uResolution.x,uResolution.y);
  vec2 z1 = (z*computedZoom)/ratio;
  vec2 o = func(z1);
  gl_FragColor = vec4(getColor(o),1.0);
}

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

const projectionMatrix = mat4.create();
mat4.perspective(
  projectionMatrix,45 * Math.PI / 180,canvas.clientWidth / canvas.clientHeight,0.1,100
);
const modelViewMatrix = mat4.create();
mat4.translate(
  modelViewMatrix,modelViewMatrix,[0.0,0.0,-1.0]
);

...

gl.uniform2f(locations.uMouse,mouse.x,canvas.clientHeight - mouse.y);
gl.uniform2f(locations.uOffset,-offset.x,offset.y);
gl.uniform1f(locations.uZoom,zoom);
gl.uniform1f(locations.uTime,elapsed);
gl.uniform2f(locations.uResolution,canvas.clientWidth,canvas.clientHeight);
gl.uniformMatrix4fv(locations.uProjection,false,projectionMatrix);
gl.uniformMatrix4fv(locations.uModelView,modelViewMatrix);

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

#version 100
precision mediump float;

attribute vec4 aPosition;
uniform mat4 uModelView;
uniform mat4 uProjection;
void main(void) {
  gl_Position = uProjection * uModelView * aPosition;
}

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

glsl glsl glsl glsles