Game Development Community

White line at the top of translucent materials?

by Dave Calabrese · in Torque Game Engine Advanced · 01/09/2008 (11:31 am) · 12 replies

I'm experiencing this weird problem where many of my translucent materials used for foliage have this white line running along the top. The foliage models are generally just 2 poly planes with the material mapped to it, so most of it is transparent... but they all have this ugly white line running along the top. I thought it might be the material looping around, so I shifted the texture up a few pixels, but that didn't do anything. I'm just using the stock Shadergen materials for this with the 'Translucent / LerpAlpha' setting. Any thoughts on what might be occuring here?

Thanks,
-Dave C.
21-6 Productions

#1
01/10/2008 (10:03 pm)
A screengrab would help.
#2
01/15/2008 (3:44 pm)
Ah.. lol, yes, so it would.

www.silentluciditi.net/DCalabrese/problemImage.jpg

You can see in that image that there are white sections around the edges of the foliage, as well as at the very top of where the 3D plane ends. There is nothing at all like that in the texturing, and it does this with and without normal maps.

Thoughts?

-Dave C.
21-6 Productions
#3
01/15/2008 (5:28 pm)
Don't see a problem at the top there. What I see thought is that this most likely is a photoshop png export without superPNG.

Photoshops PNG support sadly is a no go if you wanted to use the alpha for "smooth" borders, the SuperPNG plugin should solve that.
#4
01/15/2008 (5:55 pm)
Hrm... well, I just tried the SuperPNG plugin (which I already use since Shadergen requires alpha channel support, which is incredibly difficult to work with IMO rather than separate greyscale graphics), and the result was actually worse than using Photoshop's stock PNG exporter (the lines were much bolder and more extensive).

I'm gonna try some other programs next, like Fireworks and Gimp. Adobe really dropped the ball with PNG support after version 7 of Photoshop and it just seems worthwhile to find another solution when working with transparent imagery.

Thanks Marc!
-Dave C.
21-6 Productions
#5
01/15/2008 (10:15 pm)
Just a guess, is the background color of your image white? Try coloring the background of the image green around the leaves and brown around the willows (assuming thats what they are).
#6
01/15/2008 (10:47 pm)
Adam: Perhaps I'm confused as to what exactly you are speaking of... I'm working with a transparent .PNG file, so there is no background to it.

However, I was able to fix my problem. The trick was to use another program. When I save out a .PNG from either The Gimp or Macromedia Fireworks, it looks great in the game. So I guess the lesson here is: Don't use Photoshop for transparent PNGs, as something is incredibly broken there.

-Dave C.
21-6 Productions
#7
01/16/2008 (2:01 am)
Unfortunatelly i had the same problem once , but i didn't spend time to solve it. In your case, Dave, you have really few white lines in your textures , I remember in my foliage the white lines were concentrated everywhere at the borders of the image.
#8
01/16/2008 (2:42 am)
Just as a side note: you will get some outlines anyway ... no mather if white or transparent ... and through that outlines you can look through the whole mesh as the stuff is not depth sorted so stuff rendered in front might actually have been rendered first and the rest later -> you look through them as if they didn't exist.
#9
01/16/2008 (9:19 am)
Picasso: The foliage only had the white lines like in the image I posted when exported through Photoshop's built-in PNG exporter. However, when using SuperPNG, they were completely bordered in white lines!

Marc: I know the outlines you speak of, and thankfully they don't cause any white marks. (If you get real close to some foliage, you can see that the very outlines are see through... it's a bizzarre effect, but I figured I can't get around it, at least without writing a custom shader perhaps).
#10
01/17/2008 (9:27 am)
Three years ago i assumed to fix overlay borders with a simple de-interpolation. I was working with another game engine and using vector assembly it seemed something like that:

def c0 1.0,1.0,1.0,1.0
def c1 0.0,0.0,0.0,0.0

tex t0 // sample
mov r0,t0 // use r0 as temporary register
cnd r0.a,r0.a,c0,c1 // modulation
mul r0.rgb,r0,v0 // use r0 as utput register for render

Now in high level (HLSL) i think it seems like that:

//sample with tex2d
round(out.col.a);
//modulate diffuse light
#11
01/17/2008 (9:35 am)
@Dave:

What does your material look like? Have you tried disabling some features in it to narrow down the issue?
#12
01/17/2008 (8:29 pm)
Dave, if you are using superPNG (or any other format that uses an alpha channel for transparency), then you can have the entirety of the RGB channels filled in with color. You don't need to have empty "transparent" space the way you need with adobe's png format.

Also, if using superPNG in photoshop, you need to delete the adobe png plugin otherwise the superPNG plugin doesn't work correctly.