Search code examples
opengl-esthree.jswebglshaderuv-mapping

What range are the uv coordinates from


I have a sphere with shader material. In that material I need to use uv coordinates but I don't understand how are they computed. If I check geometry of sphere uv coordinates are in range [0, 1] but in my shader they seem to use only half of that range. Why is that so?

 var material = new THREE.ShaderMaterial({
     vertexShader: vertexShader, 
     fragmentShader: fragmentShader
 });

 var sphere = new THREE.Mesh( new THREE.SphereGeometry(150, 16, 16), material);


//
// Vertex shader
//
varying vec2 vUv;
void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

//
// Fragment shader
//
varying vec2 vUv;
void main() {
    // why is the vUv.x range somewhere between 17/255 and 110/255
    gl_FragColor = vec4( vUv.x, 0.0, 0.0, 1.0);

    // this corrects it a little bit but it still isnt range [0/255, 255/255]
    //gl_FragColor = vec4( vUv.x*2.0, 0.0, 0.0, 1.0);
}

jsfiddle


Solution

  • Oh, I just got it :) ... uv.x range is [0, 1], it's just that range is across the whole sphere not just the visible part. Adding movable camera to jsfiddle makes it clear, just try to rotate around the sphere :)

    jsfiddle