How to render a Translucent border image HUD pic with water filter visible through it?

Troubleshooting graphics
1

Hi,
I’m trying to draw a boat Dashboard meter HUD (meter.png image with transparent background) .

code :-

public void initWater()
{
    FilterPostProcessor fpp=new FilterPostProcessor(assetManager);
    WaterFilter w=new WaterFilter(rootNode,lightDir);
    w.setWaterHeight(-2.00f);
    w.setSpeed(0.5f);
    w.setLightColor(ColorRGBA.White);
    w.setWaterColor(ColorRGBA.Brown.mult(2.0f));
    fpp.addFilter(w);

    TranslucentBucketFilter transbucketfilter=new TranslucentBucketFilter();
    transbucketfilter.setEnabled(true);

    fpp.addFilter(transbucketfilter);

    viewPort.addProcessor(fpp);

}

 public void createSpeedoMeter()
{
  Picture pic = new Picture("HUD Picture");
  pic.setImage(assetManager, "Textures/meter.png", true);
  pic.setWidth(settings.getWidth()/4);
  pic.setHeight(settings.getHeight()/4);
  pic.setPosition(settings.getWidth()/8, settings.getHeight()/10);

  pic.setQueueBucket(RenderQueue.Bucket.Translucent);

  guiNode.attachChild(pic);

}

Snapshot 1 :-
(if, i comment line :

//pic.setQueueBucket(RenderQueue.Bucket.Translucent);
) :-

JME.png1044×669 707 KB

but, i can’t see water through its transparent area.

snapshot 2 (if i uncomment line ) :-

pic.setQueueBucket(RenderQueue.Bucket.Translucent);

JME_uncomment.png1013×668 655 KB

Am i missing something? or doing it completely wrong.
pl help me.

Thanks and regards,
Lokesh.

2

What about

pic.setQueueBucket(RenderQueue.Bucket.Transparent);
3

thanks for reply.

i replaced :-

pic.setQueueBucket(RenderQueue.Bucket.Translucent);

by,

pic.setQueueBucket(RenderQueue.Bucket.Transparent);

but, still not working.
all i can see snapshot-2 view.

4

So, since you are trying to add a GUI Picture, try:

pic.setQueueBucket(RenderQueue.Bucket.Gui);
5

on using :-
> pic.setQueueBucket(RenderQueue.Bucket.Gui);

i got snapshot 1 view.
still, not working as desired.

6

What happens if you disable the water filter ? Do it shows ok ?

7

no.
result :- snapshot -2 without water and no HUD meter pic.

8

I didnt understand, image 1 shows your transparent hud working with the ship image but not with the water, if you just remove the water then nothing shows ? Are you sure ? I was expecting that it just dont get transparency with the waterfilter, its important to try to understand what is going on. I am suspecting with something wrong with the waterfiler or something wrong in your video card.

9

if i comment line :-

pic.setQueueBucket(RenderQueue.Bucket.Translucent);

and comment water code as well then, HUD become visible. i.e, snapshot-1 but without water.

NO_WATER.png986×656 633 KB

bu,t if i uncomment above line and comment water code. then :-

NO_WATER_uncomment.png987×661 636 KB

seems like, if i put pic in Translucent bucket, it doesn’t get render at all. whether i add water Filter in FilterPostProcessor or not.

10

Things in the gui need to be in the gui bucket else they are rendered in scene coordinates… where cam.getWidth()/x is waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaay out in space somewhere.

The real question is why is the water filter affecting the HUD at all. If the picture is in the guiNode then none of the main scene filters should be affecting it. The guiNode is in its own Viewport that is rendered 100% after the main viewport. So something is odd about your scene setup.

11

Can you post the code , or make an test case ?
It seems for some reason your gui is being draw before the water processing, that’s weird.