I'm trying to use the RGBA channels of a PNG texture independently of each other in a fragment shader. But when I use texture2D(map, uv).g the output appears to include data from the green channel AND the red channel.


I'm using this texture.

three.js 0.104.0

Texture as viewed in GIMP 2.10.10:

Close up with red channel disabled, just to show the data shown below isn't in the green channel:

Vertex shader:

varying vec2 vUV;
void main(void) {
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  vUV = uv;

Fragment shader:

uniform sampler2D map;
varying vec2 vUV;
void main(void) {
  float g = texture2D(map, vUV).g;
  vec4 c = vec4(g, g, g, 1.0);
  gl_FragColor = c;


I expect to see just the large soft circle, but as you can see in the corners of the image below, it appears that (some?) of the red channel's data is showing. Why is this happening, and how can I show just the green channel?

Output of the fragment shader:

If I use texture2D(map, uv).r instead, I appear to get just the red channel data, as I'd expect:

UPDATE: Exporting from a different image editor (Krita) fixes the issue, so I'm thinking this has to do with how GIMP is saving the .png.

0 Answers