Perspective vertices distortion

Questions
1

Hi guys.

I am in the process of learning and I am stuck at at something that I can’t figure out.

I am trying to replicate this effect Works | TAO TAJIMA | Filmmaker

I am distorting the vertices on the Z axis using noise and sine based on a circle shape and I manage to write the code, it works as expected but the distortion visually is not uniform, when further from scene the center is stronger, I have no clue how to fix this, I want it visually the same on the entire surface o the plane.

What I would want is to somehow prevent the camera perspective from affecting the mesh but still the z distortion to work.

Please hover over the smaller “images” on the page below.

https://fwdapps.net/ht/distortion/

Here is the code I am using for the vertex shader.

void main() {
  vUv = uv;
 
  vec3 newPosition = position;
  float noise = cnoise(vec3(newPosition.x * 4.0 - uTime, newPosition.y * 4.0 - uTime , 0.0))  * 0.4;
  
  float aspectRatioX = uQuadSize.x/uQuadSize.y;
  float aspectRatioY = uQuadSize.y/uQuadSize.x;
  vec2 circleUv = vUv;
  float curRatio;
  vec2 center = vec2(uHover);

  if(aspectRatioX > aspectRatioY){
      circleUv.x *= aspectRatioX;
      circleUv.x += (1.0 - aspectRatioX) / 2.0;
      center.x *= aspectRatioX;
      center.x += (1.0 - aspectRatioX) / 2.0;
  }else{
      circleUv.y *= aspectRatioY;
      circleUv.y += (1.0 - aspectRatioY) / 2.0;
      center.y *= aspectRatioY;
      center.y += (1.0 - aspectRatioY) / 2.0;
  }
 
  float circleDist = distance(circleUv, center);
  float circle = 1.0 - smoothstep(0.1, 0.505, circleDist);

  newPosition.z += (20.0 * sin(circle * noise * 20.0)) * uHoverState;

  vNoise = circle;
 
  gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(newPosition, 1.0);
}
2

It’s most likely caused by the perspective itself - since you’re using sin in your GLSL, you can be 101% sure your calculations are limited to <-1.0, 1.0> and will be uniform, regardless what magic you’d put in there before that sine.

Try increasing / decreasing camera.fov - it’ll limit / increase the displacement effect based on the angle between the plane and the camera (alternatively you can use an OrthographicCamera - but it may make the entire visual a bit less pretty.)

3

Yes, I think I have to distort the Y and X axes but I have no clue how to do that to achieve this example Works | TAO TAJIMA | Filmmaker when moving the mouse over an image.

The camera fov is set to have a 1:1 ratio with the HTML page so that I can merge the HTML page with Threejs I can’t change it.

4

I figured it out Start

I am also trying to distort the RGB based on the mouse position, are there any examples online?