Alpha Material artifacts(grass)

Troubleshooting graphics
1

I know there’s a lot of threads out there regarding alpha materials but after a quick look i couldn’t find find any that seemed to relate to my problem.

I’m making a grass generator for my game that has a very toon/anime feel to it. I create cross quads using two quads and texture them with the a material that uses the grassBase.j3md material definition found in the forester plugin so that the grass has a nice “sway effect”. I tried using the default Lighting.j3md but the same problem occurs.

When you look at a quad at a very small angle or almost “side on” white lines appear at the edge of the opaque part of the grass texture. Its not too noticeable on its own but when there are lots of grass quads off in the distance it becomes rather prominent, here’s a picture of what i mean:

Here’s my material code:

[java]
faceMat = new Material(app.getAssetManager(),“Resources/MatDefs/Grass/grassBase.j3md”);
faceMat.setTextureParam(“ColorMap”,VarType.Texture2D,app.getAssetManager().loadTexture(“Textures/grassSprite2.png”));
faceMat.getAdditionalRenderState().setBlendMode(RenderState.BlendMode.Off);
faceMat.getAdditionalRenderState().setFaceCullMode(FaceCullMode.Off);
faceMat.setTransparent(true);

faceMat.setBoolean(“VertexLighting”,false);
faceMat.setBoolean(“VertexColors”, false);
faceMat.setFloat(“FadeEnd”, 900f);
faceMat.setFloat(“FadeRange”, 1000);
faceMat.setBoolean(“FadeEnabled”, true);
faceMat.setBoolean(“SelfShadowing”, false);
faceMat.setBoolean(“Swaying”,true);
faceMat.setVector3(“SwayData”,new Vector3f(1.5f,1,5));
faceMat.setVector2(“Wind”, new Vector2f(10,10));
[/java]

Turning blend mode to Alpha gives everything a very “Cell shaded” look but doesn’t seem to fix the problem.
I’m not sure there is any simple solution to this but any thoughts advice would be greatly appreciated.

2

Cool Screen!

Try this:
[java]
faceMat.getAdditionalRenderState().setDepthTest(true);
faceMat.getAdditionalRenderState().setDepthWrite(false);
[/java]

3

I had a similar problem, and this post explains it quite good::

Basically it is because transparent pixels actually do have a color!! when exported from Photoshop, and this is usually white. What you are seeing is the result of a texture lookup being interpolated between the border of your image and the color white: I solved it by disabling the mipmaps in minifcation filtering with:

[java]faceMat.getTextureParam(“ColorMap”).getTextureValue().setMinFilter(Texture.MinFilter.BilinearNoMipMaps);[/java]

but a better idea would be to have the neighboring transparent pixels in your image, to have the same underlying color as the outer pixels. Such as this suggests:

but I couldn’t get it to work properly with an Unshaded.j3md material in jME. An AlphaMap containing the original image, on a Diffuse Map which has the extra pixels extended around the border with the lighting material may be an option. Perhaps someone else has a better idea.

1 Like
4

For me, I have a custom shader that beyond a certain distance turns alpha to black, ie: it mixes the color with black based on alpha and then sets alpha to 1. (As I recall it might actually be based on alpha and distance combined.) You could pick dark green also.

1 Like
5

@vvishmaster

@pspeed said: For me, I have a custom shader that beyond a certain distance turns alpha to black, ie: it mixes the color with black based on alpha and then sets alpha to 1. (As I recall it might actually be based on alpha and distance combined.) You could pick dark green also.

I played around with this solution as well and it worked great. Definitely give this a shot if you can.

1 Like
6

…because here is the other problem you hit:

Little floating pixels of grass. In Mythruna, this resulted in trees that looked like they’d been beaten with a big stick and had all the leaves knocked out of them. So I pick a threshold for alpha and make it opaque + black.

7

Thanks for the feed back everyone, unfortunately I don’t have the knowledge as of yet to go about creating custom shaders so ill have to try and fix my problem with alternative methods.

Here are my findings so far!
When i tried
[java]
faceMat.getAdditionalRenderState().setDepthTest(true);
faceMat.getAdditionalRenderState().setDepthWrite(false);
[/java]
All my grass disappeared completely(I suspect that depth testing/writing isn’t related too closely to my problem)

So i moved onto
[java]
faceMat.getTextureParam(“ColorMap”).getTextureValue().setMinFilter(Texture.MinFilter.BilinearNoMipMaps);
[/java]
This works great! It fixed my problem however i experienced an extreme drop in frame rate for some reason making this approach not very appealing in my situation.
Heres a picture:

Finally i tried the fix suggested here:
http://answers.unity3d.com/questions/10302/messy-alpha-problem-white-around-edges.html
As it says there the image appears to have a solid background and the transparency information is stored in the Alpha channel however this solid color appears in game.
Heres a picture:

I’m not too sure where to go from here. Perhaps i messed up in photoshop somewhere?

8

@vvishmaster here is my code which works:

[java]
mat.getAdditionalRenderState().setBlendMode(RenderState.BlendMode.Alpha);
mat.getAdditionalRenderState().setFaceCullMode(RenderState.FaceCullMode.Off);
mat.getAdditionalRenderState().setDepthTest(true);
mat.getAdditionalRenderState().setDepthWrite(false);

    TangentBinormalGenerator.generate(geom);
    geom.setMaterial(mat);
    geom.setQueueBucket(RenderQueue.Bucket.Transparent);

[/java]

9

Thanks mifth, i think the reason my grass disappeared might have something to do with the different parts of my scene being in the wrong queue bucket or something?
The problem i was having seemed to be caused by the .png file i made and not the code.

Anyway, after having the problem explained to me i was playing around in photoshop and managed to find a possible solution to get rid of these artifacts.
The color that bleeds through is the matte colour of the .png in photoshop if you go to
File -> Save for Web and Devices…
An editing window comes up from the drop down box in the top rightish select PNG-8
Then you should see on the right an option that says Matte: that will allow you to select the Matte color from the drop down box i selected use foreground color which seemed to fix my issue.
There is also an option to turn it off completely.
Here is the result:

2 Likes
10

Nice render!