In my project using Three.js, I have created a vertex shader that assigns colors to each point in a plane based on the quadrant of the screen where a pixel is rendered.
// customized vertex shader
uniform float width;
uniform float height;
varying float x;
varying float y;
void main()
{
vec4 v = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
x = v.x;
y = v.y;
gl_Position = v;
}
// updated fragment shader
varying float x;
varying float y;
void main()
{
gl_FragColor = vec4(x, y, 0.0, 1.0);
}
For a live demonstration, visit this jsFiddle link: http://jsfiddle.net/Stemkoski/ST4aM/
I am looking to adjust the shader so that x represents 0 on the left side of the screen and 1 on the right side, while y signifies 0 at the top and 1 at the bottom. My initial attempt was to modify x = v.x / width and y = v.y / height with the assumption that it would give me the desired outcome (where width and height hold the window's dimensions). Unfortunately, after making this alteration, the colors on each screen pixel appeared to change when zooming in or out on the plane.
What adjustments can be made to the shader code to achieve the intended result?