shader - 使用 WebGL 着色器对几何图形进行纹理化

Question

我是 WebGL 中纹理和着色的新手。问题是我想用渐变颜色为球体着色，但是当我使用gl_FragColor = vec4(vUv, 0.0, 1.);There are a line on the surface 时。

之后，我使用顶点着色器中的位置gl_FragColor = vec4(vPosition, 1.);并得到 8 种不同颜色的结果，这不是我想要的。

我认为问题是顶点着色器的位置没有正确传递。有没有办法解决这个问题？

分段：

varying vec2 vUv;
varying vec3 vPosition;

void main () {
  vUv = uv;
  vPosition = position;
  gl_FragColor = vec4(vUv, 0.0, 1.);
  gl_FragColor = vec4(vPosition, 1.);
}

顶点：

varying vec2 vUv;
varying vec3 vPosition;

void main () {
  vUv = uv;
  vPosition = position;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 
}

[编辑] 尝试后gl_FragColor = vec4(abs(vUv.x*2.0-1.0), vUv.y, 0.0, 1.0);

来自@Rabbid76 我得到了顶部和底部的峰值