Light setup for textured gui nodes

Troubleshooting graphics
1

I’m creating a complex scene using textured quads that I’m adding to gui node. I found that textures appear visibly darker than what they actually are.

Official documentation states:

If you attach a Geometry that uses a lit Material, you must add a light to the guiNode.
…
If you don’t see an attached object in the GUI, check it’s position and material (add a light to guiNode)

I’m a bit confused what light setting I should use. E.g. how should I go if I just want textures on HUD appear in the same way they are originally drawn, i.e. give just enough light to the material to convey original colors in the same way for all textured quads I’m adding? Is there a simple example I can refer to?

I tried to follow guidelines literally by creating a light:

PointLight lamp = new PointLight();
lamp.setColor(ColorRGBA.White);

then adding it on a quad via quad’s addLight(lamp) but it had no effect.

2

Why use light at all? Just make the materials Unshaded.

But if yo are going to use a light then a point light is going to be disappointing… you’ll have to remember that point lights are setup for world space and screen space is HUGE comparatively. So you’ll need giant radiuses and stuff.

But really, Unshaded materials is probably what you want based on:

That’s literally what the unshaded material is for.

2 Likes
3

I’m using a custom spritesheet material that contains multiple pictures, it is based on a definition posted in this forum: How to make spritesheet for JMonkey
I guess I need to change material definition somehow to pull that off?

Also I think some degree of controlling the light would be useful, e.g. to increase/decrease overall brightness unless it is too hard to do.

4

The materials in that post are not using lighting so the issue must be something else.

Adding a light should have no affect on the sprite sheet material at all.

You can control brightness without lighting. For a normal unshaded material you would only need to specify a color by which the texture would be multiplied. You’d have to add that to the spritesheet material.

Unless you are not using the code in that post.

1 Like
5

I’ll try to put up a distilled example that illustrates the issue a bit later. I’m not seeing any effect when putting the light at different locations so it is probably something else…

6

OK, I finally got back to this and I started with importing a plain white png and taking a screenshot of it then opening screenshot with gimp and compared white pixel on a screenshot vs original. It was exactly the same.

I loaded white png via spritesheet material I was referring to in my above posts.

Then I got back to a png file that I was using and a screenshot (and obviously a real representation) of that png was very different than what I had when I open png in the preview / GIMP.

Here is my application:

public class WhiteTest extends SimpleApplication {

    public static void main(String[] args) {
        SimpleApplication app = new WhiteTest();
        AppSettings settings = new AppSettings(true);
        app.setShowSettings(false);
        settings.put("Width", 640);
        settings.put("Height", 480);
        app.setSettings(settings);
        app.start();
    }

    @Override
    public void simpleInitApp() {
        setDisplayStatView(false);
        setDisplayFps(false);
        viewPort.setBackgroundColor(ColorRGBA.Gray);
        flyCam.setEnabled(false);
        if (inputManager.hasMapping(INPUT_MAPPING_EXIT)) {
            inputManager.deleteMapping(INPUT_MAPPING_EXIT);
        }

        final Quad quad = new Quad(256, 256);
        final Geometry geom = new Geometry("1", quad);  // create cube geometry from the shape

        //create the material with the spritesheet material definition
        final Material mat = new Material(assetManager, "MatDefs/Spritesheet/Spritesheet.j3md");
        //mat.setTexture("ColorMap", assetManager.loadTexture("Textures/white.png"));
        mat.setTexture("ColorMap", assetManager.loadTexture("Textures/crate.png"));
        mat.setFloat("SizeX", 1f);
        mat.setFloat("SizeY", 1f);
        mat.setFloat("Position", 0f);
        mat.getAdditionalRenderState().setBlendMode(RenderState.BlendMode.Alpha);

        geom.setMaterial(mat);

        geom.setLocalTranslation(100, 50, 1f);
        //geom.setQueueBucket(RenderQueue.Bucket.Transparent);
        guiNode.attachChild(geom);
    }
}

Here is the problematic png:
crate

Here is a part of screenshot edited in GIMP - I added original file so that it is more obvious that colors are very different:

comparison

Here is the white.png file which displays without issues:

white

I’m puzzled what could it be. I don’t see a color scheme associated with this file and it displays properly in the other programs, e.g. preview, GIMP.

I start application above on Mac and I’m using lwgl3 for what that’s worth.

Also imagemagick identify gives the following for the above file:

crate.png PNG 256x256 256x256+0+0 8-bit sRGB 37631B 0.010u 0:00.002
7

Try turning off game in the application settings.

…though if that’s the issue then your texture is somehow being loaded as linear instead of srgba, I think.

8

I’m not sure I understand what setting you’re referring to could you please elaborate? Google search for jmonkey turn off game setting didn’t turn anything useful. I turned off popup settings if that’s what you meant and it changed nothing.

9

App settings:
https://javadoc.jmonkeyengine.org/v3.5.2-stable/com/jme3/system/AppSettings.html

Gamma:
https://javadoc.jmonkeyengine.org/v3.5.2-stable/com/jme3/system/AppSettings.html#setGammaCorrection-boolean-

Set it to false. It defaults to true.

As in:

settings.setGammaCorrection(false);

Insert that right after you create the AppSettings() object.

Right here:

image
image821×376 16.8 KB

1 Like
10

Ah, I see, it did help. Image shows as expected. Thank you very much!

11

I wonder if that’s a by-design behavior, at least the way it worked for image above seems very confusing to me.

12

I found another thread that seems to be related to this problem: Enable gamma correction by default
it explains why it is set to true by default.

13

It’s possible you have a warning when you run that the material doesn’t define the texture type or something and defaults to Linear.

If you put your texture in an Unshaded material does it render correctly?

14

Unshaded behaves in the same way as a custom material I’m using. Tried as follows:

Material mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md");
mat.setTexture("ColorMap", assetManager.loadTexture("Textures/crate.png"));
mat.getAdditionalRenderState().setBlendMode(RenderState.BlendMode.Alpha);
geom.setMaterial(mat);
15

Also: I’m not seeing a warning you’re referring to. I use lwgl3 3.5.2

I can confirm that jme3-lwjgl works properly for both unshaded and my custom material so the bug might be in lwgl3.

16

That’s… weird.

I’m out of my depth at this point as I don’t know what lwjgl2 and lwjgl3 (or JME’s wrappers around them) could be doing differently with respect to gamma.

1 Like