# Perspective vertices distortion

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;

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);
}``````

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.)

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.

I figured it out Start

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