Help with first shader attempts

Troubleshooting effects
21

Well it’s all relative, but yes - move them up the texture…
But if you are happy it’s all good :slight_smile:

22
@ryukajiya said: Just have to manage the offsets in update loop then, but thats ok. It probably is not the best solution, or a realy pretty one, but it's a working one and i learned quite a bit about shaders while trying this stuff out ;) Thanks @pspeed for you patience and @zarch for your suggestions ;)

You can’t really do otherwise without a lot of complexity. Shaders don’t remember things from frame to frame so you’d have to manage start times and stop times, etc… easier to do that in Java code, really.

23
<cite>@pspeed said:</cite> You can't really do otherwise without a lot of complexity. Shaders don't remember things from frame to frame so you'd have to manage start times and stop times, etc... easier to do that in Java code, really.

Yes, done that allready and quite fond with the result. Had a little missunderstanding with the offset because i thought i have to set it from 0 to the heigth of the image, but it realy is from 0f to 1f, but figured that out and the animation works quite well.

Only problem i now have is that i wanted to prevent mixing colors of the door frame with the moving parts, because in the door frame image everything is either full opaque or completely transparent, but it seems my image has not the right format for alpha channel somehow…

I edited shader like this:
[java]
if (texture2D(m_DiffuseMap, newTexCoord).a == 1) {
diffuseColor = texture2D(m_DiffuseMap, newTexCoord);
} else {
diffuseColor.rgb += texture2D(m_DiffuseMap, newTexCoord).rgb * texture2D(m_DiffuseMap, newTexCoord).a;
}
[/java]

Wich should use the diffuse map if the pixel there is fully opaque and mix it if it is not. The problem now is that this paints the diffusemap over everything.

Not sure where the problem is right now, because those parts are transparent in the scene then.

I created the image with gimp, made the frame fully opaque and the inside transparent and saved the image as png. But it seems the alpha of the pixels the shader gets is allways 1. If i remember correctly png has a something that it sets a colour as the transparent color, so maybe the problem is there… anyone knows what the problem might be ?

24

Random aside: you probably want to avoid doing two texture lookups just to retrieve one value. Texture lookups are one of the more expensive things you can do and you are doing 3 instead of 1.

Also, your current approach could have very bright pixels if there are several overlaps for some reason. It’s probably better to use mix() with the alpha value as discriminator.

Can’t really say what’s up with your alpha. You will have to do some debugging. Sometimes setting colors to weird values is a way to validate shader paths or values. For example, you could force the diffuseColor.r to be the same as alpha just to see what it visually looks like, etc.

1 Like
25

@pspeed: Yes i saw some pretty bright pixels, was not sure where they came from, but it makes sense.
Strangely enough switching to fetching the value from texture and mixing the rgb values solved the issue i had with transparency. Not sure why, but it works now.

Tried to set g and b to 0 and map aplha to r and the resulting texture on the quad looked fine, so no clue where the problem realy was, but its fixed now.

Final code looks like this now if anyone is interesed :wink:

[java]
vec4 diffuseColor;
vec4 partColor;
vec2 partTexCoord;

#ifdef DIFFUSEMAP
  diffuseColor = vec4(0.0);

  partTexCoord = texCoord + m_SlideUpOffset;
  partColor = texture2D(m_SlideUp, partTexCoord);
  diffuseColor.rgb = mix(diffuseColor.rgb, partColor.rgb, partColor.a);
  diffuseColor.a += partColor.a;

  partTexCoord = texCoord + m_SlideDownOffset;
  partColor = texture2D(m_SlideDown, partTexCoord);
  diffuseColor.rgb = mix(diffuseColor.rgb, partColor.rgb, partColor.a);
  diffuseColor.a += partColor.a;

  partTexCoord = texCoord + m_SlideLeftOffset;
  partColor = texture2D(m_SlideLeft, partTexCoord);
  diffuseColor.rgb = mix(diffuseColor.rgb, partColor.rgb, partColor.a);
  diffuseColor.a += partColor.a;

  partTexCoord = texCoord + m_SlideRightOffset;
  partColor = texture2D(m_SlideRight, partTexCoord);
  diffuseColor.rgb = mix(diffuseColor.rgb, partColor.rgb, partColor.a);
  diffuseColor.a += partColor.a;
  
  partColor = texture2D(m_DiffuseMap, newTexCoord);
  if (partColor.a &gt;= 1.0) {
    diffuseColor = partColor;
  } else {
    diffuseColor.rgb = mix(diffuseColor.rgb, partColor.rgb, partColor.a);
    diffuseColor.a += partColor.a;
  }
#else
  diffuseColor = vec4(1.0);
#endif

[/java]

Works perfect. Doorframe texture wins if its alpha 1, animation looks good and smooth.
Thanks a lot for the help.

1 Like
26

Give pspeed lots of thumbs up then :smiley: