My goal is to achieve a smooth transition between two different vertex positions based on the distance from the camera. Specifically, I aim to create a visual effect that seamlessly shifts between a horizontal plane near the camera and a vertical plane in the background. The desired outcome is a curved plane that extends upwards and away from the camera's current position.
From a plane lying flat on the ground: https://i.sstatic.net/OGvtA.png
To the same plane rotated 90 degrees: https://i.sstatic.net/wL0Uy.png
Although I've made progress in my implementation, I still feel like there are missing pieces that prevent me from completing it successfully. I drew inspiration from a Tangram demo (shader code), but I struggle to achieve similar results. The Tangram example uses a different setup compared to my Three.js environment, making replication challenging.
Here is my current progress: https://jsfiddle.net/robhawkes/a97tu864/
varying float distance;
mat4 rotateX(float rotationX) {
return mat4(
vec4(1.0,0.0,0.0,0.0),
vec4(0.0,cos(rotationX),-sin(rotationX),0.0),
vec4(0.0,sin(rotationX),cos(rotationX),0.0),
vec4(0.0,0.0,0.0,1.0)
);
}
void main()
{
vec4 vPosition = vec4(position, 1.0);
vec4 modelViewPosition = modelViewMatrix * vPosition;
float bend = radians(-90.0);
vec4 newPos = rotateX(bend) * vPosition;
distance = -modelViewPosition.z;
float factor = 0.0;
vPosition = mix(vPosition, newPos, factor);
gl_Position = projectionMatrix * modelViewMatrix * vPosition;
}
The steps I'm taking are:
- Compute the rotated position of the vertex (vertical version)
- Determine the distance between the vertex and the camera
- Utilize
mixto blend between the horizontal and vertical positions based on the distance
Despite my efforts, I am unable to achieve the desired outcome accurately.
Any insights or guidance to steer me in the right direction would be greatly appreciated, given my limited knowledge of shaders and matrices.