javascript - Three.js - 画面上のピクセルの位置に基づいて色を付ける頂点シェーダー

Question

Three.js を使用して、ピクセルがレンダリングされる画面の象限に応じて平面内の各ポイントに色を付ける頂点シェーダーを作成しました。

// 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;
}

// fragment shader
varying float x;
varying float y;
void main() 
{
    gl_FragColor = vec4(x, y, 0.0, 1.0);
}  

jsFiddle での実例: http://jsfiddle.net/Stemkoski/ST4aM/

このシェーダーを変更してx、画面の左側で 0、画面の右側で 1、同様yに上部で 0、下部で 1 に等しくなるようにします。私は (誤って) これには and の値をand (xウィンドウの幅と高さを格納する場所) に変更する必要があると想定しました。ただし、この変更により、平面をズームインおよびズームアウトすると、各画面ピクセルの色が変化するように見えます。yx = v.x / widthy = v.y / heightwidthheight

望ましい効果が得られるようにシェーダー コードを修正するにはどうすればよいですか?