Texture Loading in LWJGL3 | Coding a 2D Game Engine in Java #9
Vložit
- čas přidán 31. 05. 2024
- Join the Discord: / discord
In this video I go over how to load textures in LWJGL3 using OpenGL. I go over what UV coordinates are, and how we can use them to sample an image, and apply that image to an object in our scene. We then add texture coordinates to our vertex attributes, and load an image using the stb library, then upload the image to the GPU, and finally display the image in our game.
Code for this video: github.com/codingminecraft/Ma...
OpenGL Texture Parameter Docs: www.khronos.org/registry/Open...
---------------------------------------------------------------------
Website: ambrosiogabe.github.io/
Github: github.com/ambrosiogabe
Here are some books I recommend if you want to learn about game engine development more thoroughly. I do not profit off any of these sales, these are just some books that have helped me out :)
My Recommended Game Engine Books:
Game Engine Architecture: www.gameenginebook.com/
Game Physics Cookbook (Read this before the next physics book): www.amazon.com/Game-Physics-C...
Game Physics (Ian Millington): www.amazon.com/Game-Physics-E...
Game Programming Patterns (Free): gameprogrammingpatterns.com/
My Recommended Beginning Game Programming Books:
JavaScript Game Design: www.apress.com/gp/book/978143...
My Recommended Java Books:
Data Structures/Algorithms: www.amazon.com/Data-Structure...
LWJGL (Free, but I haven't read this thoroughly): lwjglgamedev.gitbooks.io/3d-g...
Outro Music: www.bensound.com/royalty-free...
Mybe we should call glActiveTexture(GL_TEXTURE0) first and then bind the texture?
Yes, this is the correct way to do this, I have been correcting it in future videos, and I think I correct this in the render batching video :)
Edit: I'm also pinning this for anyone watching this in the future
25:50 the "better" way to do that is to use the function "stbi_set_flip_vertically_on_load" before calling "stbi_load"
im not even a 4th of the way through tis course and already my mind is blown. it would have taken me years to just do these 9 vids. it takes me about 2 days to wrap my head around just one. anyway finished number 9 with no hiccups this time.
Hi Gabe awesome series. Just a note you can use stbi to flip the image verticaly before loading :) So before creating the buffer image you can say: stbi_set_flip_vertically_on_load(true); :D
Great Tutorial! This helped me get texture loading down in lwjgl. Without you, I would spend lots of time looking for a clean and explained way for texture loading.
Thanks Roblox Builders! I'm glad that the tutorial was able to help you out with textures. (To be honest they still confuse me a bit haha)
I must have had a typo or "unseen character data" in the text field for the default.glsl file. So after copy and pasting your clean version, all is working well. thank you for a great series!
No problem David! And I'm glad you got it resolved pretty simply :D
I always wanted to learn how unity/godot/monogame etc. work now I know how complex, frustrating and fun it could be.
PS
I love u
Haha thanks @Æ
! Yea I always wondered how Unity/Godot/Unreal worked too which is why I wanted to just start writing an engine and try to share what I learned with everyone :)
Dude, i love your channel
Hi Gabe, great tutorial (thanks)! But I have a question. How would I make it so the image would be pixelperfect (so that it wouldn't stretch). When I take out the lines that make it stretch / shrink it only shows a black rectangle. Or will there be an easy/good way to do this once we abstract out the vertex array part?
Hey Luc D! This is a good question (and something that's messed me up so many times haha), if you want the image to stretch you have to make sure to add
glTextureParemeteri(GL_MAG_FILTER, GL_LINEAR)
glTextureParemeteri(GL_MIN_FILTER, GL_LINEAR)
to make it blurry or:
glTextureParemeteri(GL_MAG_FILTER, GL_CLOSEST)
glTextureParemeteri(GL_MIN_FILTER, GL_CLOSEST)
to make it pixel perfect. I might have those gl calls slightly wrong, but you do need to set mag filter and min filter to stretch/shrink an image :)
my texture is still in the bottom left corner. what can i do? when i create new Camera(new Vector2f(-100,-100)); it fixes it but i dont think i should have negative values there
Hey gabe, to deal with the problem that image is upside down, we can just call stbi_set_flip_vertically_on_load(true) before we call stbi_load() :D.
Yea, this probably would have been the best solution haha
Nice video as always.
Thanks Alexandru!
So, my texture is wrapping (which makes sense -- we told it to do that). Where can I resize the area the texture is supposed to occupy so that I don't get repeating images and fuzzy noise in the unused vertical area? Thanks!
Hey @1psuedocidal! So the if you wanted to stretch your texture over a larger area, you could make sure that your texture coordinates range from 0, 1 (if they go above 1 then you should get the repeated texture). As for the fuzzy noise I would have to take a closer look at your code to see exactly which part your talking about. You could use the GL_LINEAR parameter for the texParameteri functions which would give your images a pixelated look, or you can use GL_NEAREST to give it the fuzzy look :)
Really good tutorials
Thanks :)
Mine is a just a black square and I have no idea why? Checked everything 3 times already, Just can't find anything.
Hello, I accidentally formatted my drive that had this very project, I had all the way to last episode. Do you have a github or something that has all the files that lead to last episode?
Oof, I've done that before! Every video has a link to the Github commit that contains the code up to that point, and this is the main Github link github.com/codingminecraft/MarioCZcams
So I've been wanting to learn java for a while, and being someone who creates games with tkinter in python, this series has been amazing to to stumble across. And you channel in general. But I'm now lost, I understand the texturing and how it all works but it doesn't seem to want to work. I've checked your code against mine but to no avail. When ever I try to run it works fine however the texture doesn't, it seems to only be showing one colour from the texture, maybe just the one pixel of it. I then tried it with yours and it just appears white, probably the same thing happening. Do you know what is causing this and how it could potentially be fixed? I have messed around with alphas and stuff but that did nothing.
Hey Judd! I'm glad the channel is helping you out! So your problem could lie in quite a few places, working with textures can be a pain haha. The first thing I would check is to make sure your shader is applying the proper texture coordinates. So instead of drawing the texture as the output color, do something like color = vec4(texCoords[0], texCoords[1], 0, 1) and see if that gives you the expected colors. If that's working correctly I would say make sure that if you're using an image with alpha, to use the open gl RGBA type, and if it has no alpha use RGB type. If the types match, I would say check out the actual data stb image is returning for the image, so make a completely white image and then make sure that you get a bunch of 255's back for the color. Let me know if any of this helps you out!
@@GamesWithGabe It didn't work with the coordinates but was still a colour from the texture so I messed around with the shader names and realised I was calling texcoords with different names. I changed it to be the same and it now works. Thank you though, as I though it was due to code elsewhere so that helped me on where to look.
so much work just for a texture!
yeeeesh... can someone let me know if this stuff gets simpler to work with later? i'm completely lost on all the glsl stuff. i don't really see it being feasible for me to work with this if it's this hard to just render an image. i don't understand it at all.
When I run the program after following all of your steps, the java.exe returns -1073741819. I'm assuming this error is coming from C since GLFW is built with C. I've googled it and they told me to update my GPU drivers which I did and it is still returning the same thing. Now I'm assuming I did something wrong, do you know the solution to this?
Solved. I used the glVertexAttribPointer() twice with the same index.
@@kian8770 Nice! Sorry it took me so long to get back to you, but I'm glad you were able to resolve it. It can be very hard to debug these types of issues (I'm going through that right now haha)
Mine just uploaded the picture with blurry pixels, did I forget to remove something either than the noise in default.glsl?
This sounds like you have the texture uploaded with the parameter GL_TEXTURE_MAG_FILTER set to GL_LINEAR. If you find where you're loading textures, you can change the parameters to GL_NEAREST and that should make a picture become more pixelated as it gets magnified instead of getting blurry
When I try to upload my image it shows just a black square with a bit of color and when I try your image it stops working and crashes after 30 seconds. It only says that there was some error in main method. I guess I just made a typo somewhere..
Edit: I'm an idiot.. I forgot to change GL_RGBA to GL_RGB
Hey Long I'm glad you got it solved! And don't worry I've done the same thing several times, and many similar things that have cost me way more time than I'd like to admit haha
question: isn't it easier to render an image with directly manipulating pixels (if that's possible with modern day compters)
turns out i can, its called software rendering.
Yep! And sometimes it's faster too, vector graphics is one area where GPU acceleration oftentimes is slower than CPU rendering. That's why most font libraries will rasterize the fonts (which are vector graphics) on the CPU. Same goes for SVG :)
Not to sound dumb, but do you need to add the image file directly to the IntelliJ file in order for it to be used?
I have the same question so its a shame no one answered it :(
@@speedcuber7862 no you can just use the absolute path like C:\\user\\myimage.png
My png image was being displayed with black where alpha == 0.
I added this to the end of LevelEditorScene.init() and it is now working.
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
Not sure if I've missed something in a previous video or how this is fixed afterwards
Hey Lucas, that is totally fine and to be expected. In hindsight I probably should have mentioned that any images with alpha values would have this happen (and I tried to illustrate it a bit in the thumbnail), but I do cover blending in more depth in a future tutorial :)
yup, I'm pretty certain he didn't cover this transparency thingy here, since the image he was using is in jpg format.
i am having an error:
Exception in thread "main" java.lang.NullPointerException: Cannot invoke "java.nio.ByteBuffer.position()" because "buffer" is null
what should i do?
I had the same, problem for me was the path for the texture in LevelEditorScene was incorrect
It's great !
:D
Hello! I know this coment is years after the video release, but I was wondering if you needed to clear out the texture data from the GPU?
Hey Ultrasword! If you mean destroy the texture after you finish using it, then yes that is necessary. If you have some textures that you forgot to free, they will be automatically cleaned up once the program exits, but if you are switching to a new level or something you should definitely free it :)
@@GamesWithGabe ok Thanks!
When I test my image, I can still see it... BARELY! JUST THIS 1 LINE THINGY PART OF THE PICTURE!
When using VAOs, you don't need to call glEnableVertexAttribArray every time you render, only once when you initially set up the VAO. Calls to glEnableVertexAttribArray modify the state of the VAO object. So, all you need to do to render the VAO is bind it.
Thanks Phil! I'll keep that in mind for future videos
@@GamesWithGabe also thanks for the videos, you've been real helpful :)
I love your videos, but I'm having trouble with some of them because I'm using a Mac. I was able to figure out the VM settings on the last few videos, but I have no idea how to fix the error that is popping up now.
It will not open the window 50% of the time, and it almost always prints out this message:
Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
It seems to be failing to use the glTexImage2d function properly, and I have already changed RGB to RGBA and back. I've looked everywhere I can to figure out how to fix it, but I have no idea how. I know you don't use a mac, so you don't run into these issues, but if you know where I can look to figure these issues out, that would be awesome.
Other than that I love your series though, you are a very thorough teacher!
Also, when it does load, the texture ends up upside down, and tiled and stretched at different lengths, so it definitely can access the image, and it's getting the colors right, so I don't know if there's something I'm missing on mac
Nevermind. I found how to fix it. You have to put: -Dsun.zip.disableMemoryMapping=true in the VM configurations
@@albertodent7920 Hey alberto sorry I wasn't able to help you out, but I'm glad you solved it! I'll keep this in mind in case anyone else runs into similar issues Also, if you run into more problems like this, it looks like this stack overflow thread has some helpful debugging techniques: stackoverflow.com/questions/51610420/deprecated-gradle-features-were-used-in-this-build-making-it-incompatible-with :)
@@GamesWithGabe Thanks!
Nice
Thanks :D
you mistakenly spelled channels like channesl at 26:53
Okay, stop using asserts! Use logging instead. Asserts are not recommended for release!
Project link but not GitHub pls
Hey @ALL PLAY PIXEL ATOM. Do you mean a link to like a JAR or something? I don't have that right now since the project is a WIP, I'll release one at the end of the series though :)
@@GamesWithGabe ok thanks can you make a video tutorial a but openGL ES 2.0 un native apps please sir
@@allplaypixelatom3480 I don't have any experience doing native apps with openGL ES yet, but if I do create some cross-platform apps using it in the future I will try and make videos about the process. It seems like it should be mostly similar to OpenGL, you just don't have all the functions that normal OpenGL provides
@@GamesWithGabe ok but you can find openGL ES on Android developer you can find some codes😊 and also thanks sir for replying me.
@@allplaypixelatom3480 no problem, and I'll try and check it out once I get some free time :)