Text transparency problem [SOLVED]

Hello, I’ve been trying to display a text on a colored quad, but there’s a problem with the text transparency.

The viewport background is rendered instead of the quad behind the text.

(I need the quad to have transparent bucket too, because I don’t use a color but a transparent texture in full application)



Test case:



[java]

import com.jme3.app.SimpleApplication;

import com.jme3.font.BitmapFont;

import com.jme3.font.BitmapText;

import com.jme3.font.Rectangle;

import com.jme3.material.Material;

import com.jme3.math.ColorRGBA;

import com.jme3.renderer.queue.RenderQueue;

import com.jme3.scene.Geometry;

import com.jme3.scene.shape.Quad;



public class ZFighting extends SimpleApplication {

public static void main(String… args) {

new ZFighting().start();

}



@Override

public void simpleInitApp() {

getViewPort().setBackgroundColor(ColorRGBA.Blue);



BitmapText text = new BitmapText(assetManager.loadFont(“Interface/Fonts/Default.fnt”));

text.setColor(ColorRGBA.Black);

text.setSize(0.5f);

text.setText(“Test”);

text.setBox(new Rectangle(0, 0, 2, 2));

text.setQueueBucket(RenderQueue.Bucket.Transparent);

text.setLocalTranslation(0.0f, 0.8f, 0.01f);

text.setAlignment(BitmapFont.Align.Center);



Quad background = new Quad(2, 1);

Geometry backgroundGeometry = new Geometry(“background”, background);



Material mat = new Material(assetManager, “Common/MatDefs/Misc/Unshaded.j3md”);

mat.setColor(“Color”, ColorRGBA.Red);



backgroundGeometry.setMaterial(mat);

backgroundGeometry.setQueueBucket(RenderQueue.Bucket.Transparent);



rootNode.attachChild(backgroundGeometry);

rootNode.attachChild(text);

}

}

[/java]

If you move the camera forward, the background is still shown behind the text instead of the quad.

It works from some different camera positions and angles, but most of the time it’s displayed that way.



http://i48.tinypic.com/73pb3q.jpg



Doesn’t work for translucent buckets either.



Thanks for your help :slight_smile:

You put them both in the transparent bucket and they are both at exactly the same location. The front-to-back sorting will often do bad things for you when it can’t decide which one is in front.



Why is the quad in the transparent bucket?

I have a transparent texture on the quad in the full game.

Also they are not in the same location:

[java] text.setLocalTranslation(0.0f, 0.8f, 0.01f);[/java]

“0.01f” at that distance is probably near enough to be basically the same location.



The quad is going to be slightly larger than the text so from anything but a straight-on angle it will sort in front of the text… which means the text will get rendered first (transparent bucket is rendered back to front)



Change the text’s z to 1.0f as a test.

Well, for 1.0f it works, but that’s too much distance from me, as from angle the distance is very obvious. See screenshots for 1.0f :

http://i47.tinypic.com/118iq9j.jpg

http://i48.tinypic.com/6szwhj.jpg

http://i50.tinypic.com/2hxob45.jpg

For 0.5f it doesn’t work and the distance is still quite visible.

That was just a test to prove that what I’m telling you is true.



I’ve have expected 0.5 to work too if viewed directly from the front.



You might be able to fix it by giving the text a polygon offset on its additional render state… I remember this being tricky for text.



Otherwise, a custom comparator on the transparent bucket may be your only option. Also, if you put the text in the translucent bucket and leave the quad in the transparent bucket then that might fix it.

1 Like

If you use it as a gui, why not render in gui bucket? That way you wont have the problems with the perspective.

1 Like
Also, if you put the text in the translucent bucket and leave the quad in the transparent bucket then that might fix it.

This did it, thank you very much :)

edit:
If you use it as a gui, why not render in gui bucket? That way you wont have the problems with the perspective.

Well, i's a muliplayer game so I'd like this damage indicator to position and scale properly consideirng the camera and monster position. Quad + BitmapText + BilboardControl looked like the simplest solution.
@paper said:
Well, i's a muliplayer game so I'd like this damage indicator to position and scale properly consideirng the camera and monster position. Quad + BitmapText + BilboardControl looked like the simplest solution.


...and once you had the billboard control in place it would have always faced the camera. So you could have used the big offsets, too.