时间:2015-11-19 18:39:37

标签: opengl-es three.js webgl shader uv-mapping

我有一个带着色器材质的球体。在那个材料中我需要使用uv坐标,但我不明白它们是如何计算的。如果我检查球体uv的几何体,则坐标在[0, 1]范围内,但在我的着色器中,它们似乎只使用该范围的一半。为什么会这样?

 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

1 个答案:

答案 0 :(得分:0)

哦,我刚刚得到它:) ... uv.x范围是[0, 1],它只是整个范围内的范围,而不仅仅是可见部分。将可移动摄像机添加到jsfiddle使其清晰,只需尝试围绕球体旋转:)

jsfiddle