OpenGL 3D Game Tutorial 24: Rendering GUIs

LWJGL tutorial series on how to create a 3D Java game with OpenGL!

Rendering GUIs this week!

Models and Textures:

End of video music- Kai Engel, "Waking Stars":

[Grego.]

9 years later and these videos are still the best videos on OpenGL I know everyone says Vulkan has replaced OpenGL but as a wannabe game dev that is working on a 7 year old laptop Vulkan isn’t an option for me. Unity unreal and even Godot can’t run on my laptop so I thought my gave dev dreams were impossible but after seeing the games you have made all in eclipse you made it clear that anything is possible you are such an inspiration to me and I thank you for making such amazing tutorials ❤❤

[NOOBDP]

After watching from tutorial no. 1 to this I have one question for you:
Do you ever breathe?

[Ricky]

You are very awesome!!! I could no longer move in OpenGL but, with your tutorials I have a great help, thanks you for everything

[markienl]

happy new year to you aswell! love the series, thank you for all this information! 

[Romejanic]

Hey +ThinMatrix, just a question about this tutorial, why are you drawing the quads to the screen without a projection matrix? If you use an orthographic matrix you can achieve the same results, except that the GUIs wouldn't be stretched by working directly with the OpenGL coordinate system.

[AdriansNetlis]

1:27 "no need for setters here" What? But I want interactive GUIs with moving and scaling elements. I won't follow you at this step and I'll make setters for position and scale. And you can't stop me from doing that!

[NixinovaMC]

If the GUIs aren't rendering for anyone else, make sure to put the _guiRenderer.render(guis);_ *_after_* the terrain renderers!!!

[felixdemey]

Guys be shure to check the float[] positions variable in the GuiRenderer class, when you get a clear screen!!!
check the

[NichtLustigNicht]

For thoose of you, who may got a random texture from your res folder displayed and not the texture you wanted check out 10:50. It is not GL11.GL_TEXTURE !!
#image #random #wrong

[prestleynelly]

For some reason this isn't rendering in the middle of the screen and being stretched out over it

GuiTexture loading = new GuiTexture(loader.loadTexture("loading"), new Vector2f(0f, 0f), new Vector2f(1f, 1f));

[singularhealer]

+ThinMatrix How does your lighting look so good? I have played around with EVERYTHING for hours and it still won't look even close to yours. BTW the light reflections seem to follow the camera.

[brian-min]

It seems the GUI Texture scaling / positioning does not work properly for texture files with dimensions that are not 32x32, 64x64, 128x128, etc.

[JosephAlaiManifests]

My texture is loading in reversed and upside down.

[DemonicGaming]

I get a normal screen at 7:50? No GUI, no white or black screen. Any help?

[MohammedPlaysMC]

Before i complete this tutorial im designing like a boarder for what my game might look like and set the centre as transparent :D THANK YOU THIN MATRIX i never thought id get this far never ever in my life but cuz ur so inspiring i did :D I hope one day u can be the number 1 billionaire :D

[mrmaniac]

I tried to download your 50 mb tree, but when I load it into my game it gives an error

[Beloli]

its the fifth time i watch whole video and i do same thing as you but nothings render on screen. I really dont know what is wrong.. But i want to tell you, its the best tutorial ive ever seen on opengl. thank you man

[guy]

Awesome vid! thanks si much for doing these amazing videos!

[ryklin]

I have some questions related to transparency.

The texture files thinmatrix.png, socuwan.png, and health.png all have white RGB(255, 255, 255) backgrounds. How does OpenGL know to "ignore" the white color as opposed to some other color? We do not specify the transparent color anywhere.

These are the only two function calls needed to get that white color to be ignored:

GL11.glEnable(GL11.GL_BLEND);
GL11.glBlendFunc(GL11.GL_SRC_ALPHA, GL11.GL_ONE_MINUS_SRC_ALPHA);

Can you explain a bit more about how this works? How is transparent color is determined using this technique?

Also, in a previous tutorial where you implemented grass, we also needed to deal with transparency. The grass texture file, grassTexture.png, also has a white background. However you handled it differently. In the fragmentShader.txt program you instructed:

if (textureColour.a < 0.5) {
discard;
}

and you enabled culling (which I forgot what that does and need to review).

Can you elaborate a bit on why these two implementations are different.

Also I wanted to mention was that if you look closely at the texture file socuwan.png, there is a slight brown colored gradient in the background pixels. It is very slight. It does render in the program as well as in any image viewer. So, the texture is not completely transparent. You can perceive that brown "tinge" if you rotate the scene so that the light blue sky is directly behind the gui. This makes the brown color more apparent.

Final though is regarding the alpha channel. We never specified the alpha value in any of the textures. So, I thought it was set to a default of 1.0 (no alpha). Am I wrong about that?

Thank you!

[scewps]

Hey ThinMatrix,
thanks for your awesome tutorials! They are really helping me out ;)
The next thing I've thought of was about how to make the Gui react to mouse over events and clicking? Because you didn't mention this in the video. Is it too complex or could you give me a hint on how to implement that?