<p>There is a little setup to get this to work correctly, and a few different approach's that can be taken.</p>
<p>First the image needs to somehow mark the texel's in the image that need to be shown as the background color. If this isn't done and the generic background color is chosen such as black, vec3(0,0,0), then the background color will bleed through anyplace the image uses the same color. Here is some code to try that will demonstrate the issue: ( in the fragment shader)</p>
<pre><code>FragColor = texture(tex0, texcoord );
if( FragColor.xyz == vec3(0,0,0)) { FragColor = aColor; }
</code></pre>
<p>One way to fix this is to use the same code above and edit the image so that the texels that need to be the background color are set to a unique color that isn't used anywhere else in the image. This method essentially forces the entire project to &quot;never&quot; use the chosen background in the visible parts of an image. As you can
guess, this approach becomes its own headache.</p>
<p>A better way is to add an alpha channel to the image. This is done by OpenGL anyway when the image is loaded. (OpenGL implementations almost never store images as three channel RGB colors, a fourth Alpha channel is added). Unfortunetaly this also means that the image has to be edited. First it needs an alpha channel added (any good image editor can do this) and then the alpha channel needs to be adjusted so that the areas that need to show the shader color are zero, and other areas are one. Then in the fragment shader the code can be changed to handle the color, which could look something like...</p>
<pre><code> if( FragColor.a == 0.0) { FragColor = aColor; } // don't do this
</code></pre>
<p>But if statements can be terribly slow, and there is a much better way by using simple &quot;alpha blending&quot;, such as:</p>
<pre><code> vec4 texColor = texture(tex0, texcoord );
 float a = texColor.a;
 FragColor = aColor * (1-a) + texColor * a; // this is called the &quot;over&quot; operator
</code></pre>
<p>This allows the alpha channel to vary so that blending can be done at the edges, you could even use a second image as a background just by changing aColor to a second texture read, this is also basic alpha blending which turns out to be an &quot;interesting&quot; subject.</p>
<p>Also this is doing all the alpha blending inside the shader so it doesn't require alpha blending to be enabled in OpenGL. Just make sure the image load is updated to handle a 4 channel image.</p>

CC BY-SA 4.0
2022-01-27T10:25:48.747Z
`I thought that if I used an image with a transparent background` I think he has an alpha channel in the image, he just doesn't use it. Therefore I guess just implementing your second solution would yield the wanted results already
Tare
CC BY-SA 4.0
2022-01-25T12:32:12.620Z
2022-01-25T13:03:55.813Z
2022-01-25T13:03:55.813Z
pmw1234
<p>I thought that if I used an image with a transparent background, I would still be able to see the colors I had specified in my vertex attribute buffer.</p>
<pre><code>    // Vertices coordinates
GLfloat vertices[] =
{ //     COORDINATES     /        COLORS      /   TexCoord  //
    -0.5f, 0.0f,  0.5f,     0.83f, 0.70f, 0.44f,    0.0f, 0.0f,
    -0.5f, 0.0f, -0.5f,     0.83f, 0.70f, 0.44f,    5.0f, 0.0f,
     0.5f, 0.0f, -0.5f,     0.83f, 0.70f, 0.44f,    0.0f, 0.0f,
     0.5f, 0.0f,  0.5f,     0.83f, 0.70f, 0.44f,    5.0f, 0.0f,
     0.0f, 0.8f,  0.0f,     0.92f, 0.86f, 0.76f,    2.5f, 5.0f
};
</code></pre>
<p>This is not the case however, and what I am getting instead is this:</p>
<p><a href="https://i.sstatic.net/RH4yC.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/RH4yC.png" alt="enter image description here" /></a></p>
<p>What would be the easiest way to see my specified colors instead of all that black on my object?</p>
<p>default.vert</p>
<pre><code>#version 330 core
layout (location = 0) in vec3 aPos;
layout (location  =1) in vec3 aColor;
layout (location =2) in vec2  aTex;

out vec3 color;

out vec2 texcoord;


uniform mat4 camMatrix;

void main()
{
    gl_Position = camMatrix* vec4(aPos, 1.0);
    color =aColor;
    texcoord = aTex;
}
</code></pre>
<p>default.frag</p>
<pre><code>#version 330 core
out vec4 FragColor;

in vec3 aColor;

in vec2 texcoord;

uniform sampler2D tex0;
void main()
{
    FragColor = texture(tex0, texcoord );
    
} 
</code></pre>

CC BY-SA 4.0
2022-01-17T12:46:34.410Z
in your shader, there you can use the TexCoord for the GLSL `texture(...)` or use the Colors like you want
Thomas
CC BY-SA 4.0
2022-01-17T12:56:30.343Z
can you provide some code? Are you using modern OpenGL or are you using the fixedfunction pipeline?
Thomas
CC BY-SA 4.0
2022-01-18T04:31:04.913Z
I was using modern OpenGL. I don't understand by what you meant by texture(...). I shall update the question with my shader.
Selfish Stoic
CC BY-SA 4.0
2022-01-18T12:06:02.090Z
in your vertex shader you have the output "color" and you declare it in the fragment shader as "aColor"... please try to rename it to "color" in the fragment shader. Then the second last line "FragColor = vec4(color,1); should work. When doing so, the result should be an interpolation of the vertex colors with respect to barycentric coordinates.
Thomas
<opengl><texture><compute-shader><transparency><3dtexture>
How do I view my vertex colors that I specified through the texture I've applied on my objec [OpenGL]?
Selfish Stoic
# How do I view my vertex colors that I specified through the texture I've applied on my objec [OpenGL]?

(Asked by: username_0 on 2022-01-16)

I thought that if I used an image with a transparent background, I would still be able to see the colors I had specified in my vertex attribute buffer.

```
    // Vertices coordinates
GLfloat vertices[] =
{ //     COORDINATES     /        COLORS      /   TexCoord  //
    -0.5f, 0.0f,  0.5f,     0.83f, 0.70f, 0.44f,    0.0f, 0.0f,
    -0.5f, 0.0f, -0.5f,     0.83f, 0.70f, 0.44f,    5.0f, 0.0f,
     0.5f, 0.0f, -0.5f,     0.83f, 0.70f, 0.44f,    0.0f, 0.0f,
     0.5f, 0.0f,  0.5f,     0.83f, 0.70f, 0.44f,    5.0f, 0.0f,
     0.0f, 0.8f,  0.0f,     0.92f, 0.86f, 0.76f,    2.5f, 5.0f
};

```

This is not the case however, and what I am getting instead is this:

[![enter image description here](https://i.sstatic.net/RH4yC.png)](https://i.sstatic.net/RH4yC.png)

What would be the easiest way to see my specified colors instead of all that black on my object?

default.vert

```
#version 330 core
layout (location = 0) in vec3 aPos;
layout (location  =1) in vec3 aColor;
layout (location =2) in vec2  aTex;

out vec3 color;

out vec2 texcoord;

uniform mat4 camMatrix;

void main()
{
    gl_Position = camMatrix* vec4(aPos, 1.0);
    color =aColor;
    texcoord = aTex;
}

```

default.frag

```
#version 330 core
out vec4 FragColor;

in vec3 aColor;

in vec2 texcoord;

uniform sampler2D tex0;
void main()
{
    FragColor = texture(tex0, texcoord );
    
} 

```

**Tags:** opengl, texture, compute-shader, transparency, 3dtexture

> **Comments:**
> **username_1**: in your shader, there you can use the TexCoord for the GLSL `texture(...)` or use the Colors like you want  
> **username_1**: can you provide some code? Are you using modern OpenGL or are you using the fixedfunction pipeline?  
> **username_0**: I was using modern OpenGL. I don't understand by what you meant by texture(...). I shall update the question with my shader.  
> **username_1**: in your vertex shader you have the output "color" and you declare it in the fragment shader as "aColor"... please try to rename it to "color" in the fragment shader. Then the second last line "FragColor = vec4(color,1); should work. When doing so, the result should be an interpolation of the vertex colors with respect to barycentric coordinates.  

---

## 1 answers

### Answer by username_2 on 2022-01-25. Score: 0

There is a little setup to get this to work correctly, and a few different approach's that can be taken.

First the image needs to somehow mark the texel's in the image that need to be shown as the background color. If this isn't done and the generic background color is chosen such as black, vec3(0,0,0), then the background color will bleed through anyplace the image uses the same color. Here is some code to try that will demonstrate the issue: ( in the fragment shader)

```
FragColor = texture(tex0, texcoord );
if( FragColor.xyz == vec3(0,0,0)) { FragColor = aColor; }

```

One way to fix this is to use the same code above and edit the image so that the texels that need to be the background color are set to a unique color that isn't used anywhere else in the image. This method essentially forces the entire project to "never" use the chosen background in the visible parts of an image. As you can
guess, this approach becomes its own headache.

A better way is to add an alpha channel to the image. This is done by OpenGL anyway when the image is loaded. (OpenGL implementations almost never store images as three channel RGB colors, a fourth Alpha channel is added). Unfortunetaly this also means that the image has to be edited. First it needs an alpha channel added (any good image editor can do this) and then the alpha channel needs to be adjusted so that the areas that need to show the shader color are zero, and other areas are one. Then in the fragment shader the code can be changed to handle the color, which could look something like...

```
 if( FragColor.a == 0.0) { FragColor = aColor; } // don't do this

```

But if statements can be terribly slow, and there is a much better way by using simple "alpha blending", such as:

```
 vec4 texColor = texture(tex0, texcoord );
 float a = texColor.a;
 FragColor = aColor * (1-a) + texColor * a; // this is called the "over" operator

```

This allows the alpha channel to vary so that blending can be done at the edges, you could even use a second image as a background just by changing aColor to a second texture read, this is also basic alpha blending which turns out to be an "interesting" subject.

Also this is doing all the alpha blending inside the shader so it doesn't require alpha blending to be enabled in OpenGL. Just make sure the image load is updated to handle a 4 channel image.

> **Comments:**
> **username_3**: `I thought that if I used an image with a transparent background` I think he has an alpha channel in the image, he just doesn't use it. Therefore I guess just implementing your second solution would yield the wanted results already  

---

