0

I'm new to texturing and shading in WebGL. The problem is I want to color a sphere with a gradient color but when I use gl_FragColor = vec4(vUv, 0.0, 1.); There is a line on the surface Shere geometry with vUv.

After that, I use the position from the vertex shader gl_FragColor = vec4(vPosition, 1.); and get the result of 8 different colors which is not what I want. sphere geometry with position

I think the problem is the position from the vertex shader is not passing correctly. Is there any way to solve this?

Fragment:

varying vec2 vUv;
varying vec3 vPosition;

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

Vertex:

varying vec2 vUv;
varying vec3 vPosition;

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

[Edit] After try gl_FragColor = vec4(abs(vUv.x*2.0-1.0), vUv.y, 0.0, 1.0);

from @Rabbid76 I got The peak at top and bottom

tannguyen1905
  • 21
  • 3
  • *" think the problem is the position from the vertex shader is not passing correctly.[...]"* - Of course it is passed correctly. However, there is a transition from 0 to 1 this is what you can see in when the color changes from yellow to green. Yellow is (1, 1, 0) and green is (0, 1,0). The u-coordinate is 0.0 at 0° and 1.0 at 360°. – Rabbid76 Oct 01 '21 at 12:33
  • @Rabbid76 I see. I use the position to avoid the transition line but somehow it not working correctly. – tannguyen1905 Oct 01 '21 at 13:06
  • Both coordinates look fine, if you have a seamless *texture* then the UV seam will not be visible. I think what you want is to add a sampler to your shader and read from it `gl_FragColor=texture2D(myTexture,vUv)`. – LJᛃ Oct 01 '21 at 13:34
  • Try `gl_FragColor = vec4(abs(vUv.x*2.0-1.0), vUv.y, 0.0, 1.0);` – Rabbid76 Oct 01 '21 at 13:37
  • @Rabbid76 Thank you, It does solve my problem but there is a peak that appears at the top and bottom. It is better if it is a smooth geometry. – tannguyen1905 Oct 01 '21 at 15:32

0 Answers0