[SOLVED] Render BufferedImage with transparency

[xorinzor]

Hello,

I am trying to render a BufferedImage in JME3 so I can draw text in my 3D world (I tried a bitmap font, but I can’t get that to become transparent either).

Currently I am able to get my BufferedImage output into the world, except it’s presented on a black background, which I’d like to be transparent.

What am I missing in my code?

Please note I’m still a beginner when it comes to JME.

BufferedImage buffer = new BufferedImage(100,100, BufferedImage.TYPE_4BYTE_ABGR);

Graphics2D g = buffer.createGraphics();
g.setComposite(AlphaComposite.Clear);
g.fillRect(0, 0, 99, 99);
g.setComposite(AlphaComposite.Src);
g.setColor(Color.WHITE);
g.drawString("Hello World!",10,10);
g.dispose();

Image image = new AWTLoader().load(buffer, true);
   
Texture2D boardTexture = new Texture2D(image);

Quad quad = new Quad(10, 10);

Spatial textCube = new Geometry("box", quad);
Material material = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md");
material.setTexture("ColorMap", boardTexture);
material.setColor("Color", ColorRGBA.Red);
material.setTransparent(true);
textCube.setQueueBucket(Bucket.Transparent);
textCube.setMaterial(material);
rootNode.attachChild(textCube);

Thanks in advance

[pspeed]

@xorinzor

(I tried a bitmap font, but I can’t get that to become transparent either).

Let’s start with that… because bitmaps fonts can definitely be clear. I do it all the time.

…then the same solution will apply to your image.

Edit: also… how do you know it’s not transparent? We can’t see it. We can’t even see the rest of your scene… and that might be the issue.

[xorinzor]

I don’t know, I followed some examples that I could find via google, but it wouldn’t work for me, those characters would have a black background too.

I uploaded them at https://www.jorinvermeulen.com/downloads/font.fnt and https://www.jorinvermeulen.com/downloads/font_0.png

I tried removing the black background from the PNG file, but it would still render with a black background.

The font is “Roboto Condensed - Regular” and I made the font bitmap using BMFont (as somewhere recommended on this forum).

I don’t have code to paste here since this was a lot of edits ago and I went with the BufferImage in the hope that would work.

As for knowing it’s not transparent, I render it on top of a colored box (light gray), I set the QueueRenderBucket to Bucket.transparent too but to no avail.

[pspeed]

@xorinzor

As for knowing it’s not transparent, I render it on top of a colored box (light gray), I set the QueueRenderBucket to Bucket.transparent too but to no avail.

Can’t see code… so can’t comment.

SOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO frustrating to try to help and not have enough info.

Was the background color thing also in the transparent bucket? Was it in some other bucket? Who knows?!?!

Transparency works fine when you have everything setup, though.

Might be helpful for trying to fix this on your own:

Alpha/Transparency Sorting, Your Z-buffer, and You

Since this comes up every three or four days, I decided to put together some visual aids. There is often a lot of confusion with how pixels get processed in relation to the z-buffer and why sorting is important. Most importantly it can be mind-warping trying to wrap one’s head around how to ‘fix’ the cases where proper sorting isn’t possible. Hopefully these diagrams help show the futility of it all… I mean the trade offs one has to make to get transparency looking its best in the general cas…

[xorinzor]

Like I said I’m just a beginner in JME, no need to be so dramatic.

I haven’t got the slightest clue as to how the buckets influence everything, but I add my box to the root Node without defining bucket stuff.

Or in code, simple stuff.

Box b = new Box(5f, 5f, 5f);
Material mat= new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md");
mat.setColor("Color", ColorRGBA.LightGray);

Spatial w1 = new Geometry("Box", b);
w1.setMaterial(mat);
w1.setLocalTranslation(0f, 0f, 0f);
rootNode.attachChild(w1);

That’s all. nothing complex or big, just very simple stuff and after this I add the code above in which I try to render text.

[pspeed]

Start with a simple one class test case that creates your background box and has a single quad with a loaded texture with transparency. When that works, you can take a step back and figure out what is wrong with your code that we can only see a bit of. If it doesn’t work then you can post the whole file and your image (to something like imgur where we can actually get it since the one you already posted is blocked).

Normally transparency works just fine… within the constraints of that link I posted.

[xorinzor]

Perhaps this will help then, I just uploaded everything to a github repo.

Repository:
github → xorinzor → ShoutzorVisualizer

the file with the text is located in src/com/jorinvermeulen/shoutzor/effects/NowPlaying.java

(Had to break it up because the forum kept throwing an error about new users not beeing allowed 2 urls in a post, which doesnt make sense.)

[pspeed]

The single class test case is not for me. It’s for you to simplify the issue as much as possible.

[xorinzor]

Just have a look at the code and you too will understand it’s just a more glorified single class.

[JESTERRRRRR]

mat.getAdditionalRenderState().setBlendMode(RenderState.BlendMode.Alpha);

[xorinzor]

@JESTERRRRRR

mat.getAdditionalRenderState().setBlendMode(RenderState.BlendMode.Alpha);

Thank you! that solved it! ^^