Quad using Unshaded Material and Texture with fully transparent area

Troubleshooting graphics
1

I’m having two issues and not exactly sure how to go about fixing them.

  • In both screenshots there is a line showing at the top of the vertical quads. It is a hard to see green line in the left black area. I have verified this line is not in my image file.
  • Second issue does not occur all of the time and can be seen by comparing the two images. In the first image the wall closest to the camera is drawing correctly and it does 9 time out of 10 but the sometimes it ends up like what is seen in the second screenshot.

Material Definition
[java]
borderMaterial = new Material(app.getAssetManager(), “Common/MatDefs/Misc/Unshaded.j3md”);
TextureKey key3 = new TextureKey(“Textures/grassborder.png”);
key3.setGenerateMips(true);
Texture tex3 = app.getAssetManager().loadTexture(key3);
tex3.setWrap(Texture.WrapMode.Repeat);
borderMaterial.setTexture(“ColorMap”, tex3);
borderMaterial.getAdditionalRenderState().setBlendMode(BlendMode.Alpha);
borderMaterial.getAdditionalRenderState().setDepthWrite(false);
[/java]

Loading Into World
[java]
Quad border = new Quad(10, 5);
border.scaleTextureCoordinates(new Vector2f(2, 1));

wall = new Geometry("wall2", border);
wall.setMaterial(borderMaterial);
wall.setShadowMode(RenderQueue.ShadowMode.Off);
wall.setQueueBucket(RenderQueue.Bucket.Transparent);
groundNode.attachChild(wall);
wall.addControl(new RigidBodyControl(0));
bulletAppState.getPhysicsSpace().add(wall);

[/java]


2

Not sure what happened with the first screenshot and can find the edit option for the original post.

3

One of your images is missing but I’m going to guess “transparent sorting issues”. This is discussed a lot so a forum search may give you some background.

Edit: you ninja’d me but it’s definitely a transparency sorting issue.

4

Is your wall by any chance in the transparent bucket? cause this looks like sorting problems for me.
Have you defined the alphadiscard stuff correctly? SO the depth buffer is nto written for transparent pixels?

5

Even in the screen shot with the wall, you can see a sorting issue because it looks like the west wall is drawn over the south wall… this also suggests that depth write or depth test are turned off for some reason.

6

Thanks for the help. Figured I was missing something simple and somewhat obvious. I removed all of the render states that I had and am now just using the following. This fixed all of the issues on the desktop version. The android issues have now changed. The west wall that is behind the alpha area of the north wall are being clipped.

[java]
borderMaterial.getAdditionalRenderState().setBlendMode(BlendMode.Alpha);
borderMaterial.getAdditionalRenderState().setAlphaTest(true);
borderMaterial.getAdditionalRenderState().setAlphaFallOff(0.5f);[/java]

I found this thread which discusses the same issue I’m having: http://hub.jmonkeyengine.org/forum/topic/transparency-in-android/page/2/

From what I’ve read my issue is that I’m not setting the alphathreshold of the unshaded material. I’m still new to jmonkey and haven’t done much with shaders so I’m not sure how I would set it. As it is late here I’m just going to post this and pick this back up after work tomorrow.

7

Adding this should fix the issue.

[java]
borderMaterial.getAdditionalRenderState().setDepthTest(true)
[/java]

8

I had tried the setDepthTest before and didn’t notice any change. Just to be safe I put it back in and did a clean and build. There was no noticeable change between the desktop and android versions with this line.

9

This is what the issue looks like on android. I produced this by commenting out this line and running on desktop:

[java]borderMaterial.getAdditionalRenderState().setAlphaTest(true);[/java]

10

alpha test only works on desktop as it’s basically deprecated in openGL. This is why you have to set the AlphaDiscardThreshold material parameter instead.

11

Thanks. After finding that line I assumed that was going to be the issue. Here is the code that has this drawing correctly on both the desktop and android incase someone else comes across this thread.

[java]
borderMaterial = new Material(app.getAssetManager(), “Common/MatDefs/Misc/Unshaded.j3md”);
Texture tex3 = app.getAssetManager().loadTexture(new TextureKey(“Textures/grassborder.png”));
tex3.setWrap(Texture.WrapMode.Repeat);
borderMaterial.setTexture(“ColorMap”, tex3);
borderMaterial.getAdditionalRenderState().setBlendMode(BlendMode.Alpha);
borderMaterial.setFloat(“AlphaDiscardThreshold”,1f);
borderMaterial.getAdditionalRenderState().setAlphaFallOff(0.5f);
[/java]

12

FYI: alpha falloff is meaningless without alpha test. So you can take that out, too. AlphaDiscardThreshold takes the place of both of them.