OpenGL 3D Game Tutorial 27: Skybox



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

Programming a skybox this week using cube map textures!

Download PNGDecoder: or

Downloadable Source Code:

Skybox Textures:

OpenGL Textures Info:

Loads of skyboxes:

Common Problems:

-Due to hardware limitations on some computers you may see some visible seams at the edges of the skybox. If this is the case then add these two lines to the end of the loadCubeMap() method, just before returning the texID:
GL11.glTexParameteri(GL13.GL_TEXTURE_CUBE_MAP, GL11.GL_TEXTURE_WRAP_S, GL12.GL_CLAMP_TO_EDGE);
GL11.glTexParameteri(GL13.GL_TEXTURE_CUBE_MAP, GL11.GL_TEXTURE_WRAP_T, GL12.GL_CLAMP_TO_EDGE);

Support the series on Patreon:

Facebook Page:
Tumblr:
Instagram:
Twitter:
Check out my game on IndieDB:

End of video music- Kai Engel, “Waking Stars”:

Nguồn: https://indiametechnical.com/

Xem thêm bài viết khác: https://indiametechnical.com/game/

Article Categories:
Game

Comments

  • Best tutorials on tube. Simple, clear, short and with a pinch of humor.
    I wish you all the best.
    You make the world a better place.

    zames probes June 18, 2020 9:05 pm Reply
  • instead of changing the view matrix in the renderer you can treat the position of the vertex as a vector by replacing vec4(position, 1.0) with vec4(position, 0.0) when you calculate gl_Position

    MrTarnegol June 18, 2020 9:05 pm Reply
  • Couldn't I just go into blender and make my skybox there? :/

    Alan Burns June 18, 2020 9:05 pm Reply
  • i love your videos, but i have a problem and is that when rendering the sky box, this does not look right when being reflected by water

    Da_ K8Gamer June 18, 2020 9:05 pm Reply
  • Hi. I know this is a 4-year-old tutorial. Nevertheless, could you please help me out with this issue?

    Whenever I enter my game, only one side of the skybox renders, and the images render in a very distorted way. When I move back, away from it, one of the edges follows me. Whenever I implement the thing to make it follow the camera, it disappears.

    Some images here: https://imgur.com/a/91rNcym

    Do you have any insights as to what could cause this problem?

    Thanks.

    Lonsdaleite Politics June 18, 2020 9:05 pm Reply
  • For people who experience serious problems like flickering in the edges (seams) of the skybox just add this line somewhere in your project (it need to be called just one): glEnable(GL_TEXTURE_CUBE_MAP_SEAMLESS)

    Colorful Darkness June 18, 2020 9:05 pm Reply
  • For some reasons, up and down textures for cubemap are not seamless transitioning with other textures.
    I found solution for my case if you download skyboxes from such website as suggested in the video, you need to do the following

    – rotate up texture 90 degrees counter-clockwise
    – rotate bottom texture 90 degrees clockwise

    That's all! Thanks for video!

    haxpor June 18, 2020 9:05 pm Reply
  • Hi! It all looks wonderful, but I would like to see the sky (the top of the cube) without the ferns, player and other stuff… How can I do that?
    P.S.: I hope I'm not too buggy with my questions! 😀

    Silviu Alexandru June 18, 2020 9:05 pm Reply
  • Isn't it better to just render a huge textured cube with backface culling turned off?

    Bruce Walker June 18, 2020 9:05 pm Reply
  • One quick tip I have for skyboxes: this skybox will clip through the terrain and reduce the draw distance, wasting render time on objects/terrain which is beyond the bounds of the skybox. You can fix this by adding this code to the start of the skybox render method:

    glDepthMask(GL_FALSE);
    glDepthRange(1f, 1f);

    And adding this code to the end of the method:

    glDepthRange(0f, 1f);
    glDepthMask(GL_TRUE);

    This for one stops the skybox from being drawn onto the depth buffer, and two makes the skybox draw behind everything else, which keeps everything in view and puts the skybox at the back of the scene, so it doesn't cut any objects off.

    Jack Davenport June 18, 2020 9:05 pm Reply
  • An important note if you wish to create your own set of skybox images from scratch if that each of the images needs to be a 90 degree field of view. The total view around the entire skybox is 360 degrees. Seeing as how we have four sides, each side needs to cover a 90 degree field of view (90 * 4 = 360). The top and bottom also need to be 90 degree field of view. I used terragen to create some nice skyboxes, I rendered the sky etc… and set the view to 90 degrees, then turned the camera 90 degrees to get each direction perfectly, keeping the output square. I then faced what would be the front direction and then looked straight up and straight down to render top and bottom. For one skybox I left out the landscape entirely and then edited the sides and the bottom view so they had a fog colour and solid half at the bottom which was the same colour as the in game fog so it blends in perfectly. On my channel I have a video called "City3D" I made years ago which use this and you can see how well it works.

    With my own skybox, I took an idea from the older Battlefield 1942 game, which done it's skyboxes so that the bottom half of them, which you seen on the horizon had a more foggy, solid colour which matched whatever the fog colour was so they both blended together nicely.

    Neil Roy June 18, 2020 9:05 pm Reply
  • source code plz

    AwlÍ June 18, 2020 9:05 pm Reply
  • I didn't notice it before but when I looked at the corners of the skybox I saw that the corners were a little bit glitchy. How can this be fixed?

    KeN Ny June 18, 2020 9:05 pm Reply
  • Thank you for your Awesome tutorials! I have developed an APP with some OpenGL aspects:
    https://play.google.com/store/apps/details?id=com.neoexpert.glfun

    neo expert June 18, 2020 9:05 pm Reply
  • I don't know if someone else has mentioned this already, but in the vertex shader it's also possible to multiply the view matrix with vec4(position, 0.0f) instead of vec4(position, 1.0f). Because of the 0.0f the view matrix' translation won't affect the vector at all, but the rotation (and scale) will. That way you don't have to create a modified view matrix just for this shader.
    After that multiplication the vector's w coordinate does need to be manually set back to 1.0f though, otherwise the projection matrix won't apply correctly anymore:

    vec4 untranslated_view = viewMatrix * vec4(position, 0.0f);
    untranslated_view.w = 1.0f;
    gl_Position = projectionMatrix * untranslated_view;

    It probably doesn't make any difference for the performance, but it's still nice, I suppose. ^w^

    Kumodatsu June 18, 2020 9:05 pm Reply
  • Just wanna say keep making new tutorials pls. You're the apple of my eye!!

    Leon Lyu June 18, 2020 9:05 pm Reply
  • All the textures load fine, but the "top.png" is all multi colored lines, like an old TV(the static looking stuff). why is this? why just top.png and no others ? I would appreciate help from anyone

    Kyle Pearce June 18, 2020 9:05 pm Reply
  • I'm having a problem with the lwjgl library that seemed to start after I added the PNGDecoder jar. This is the console output: Exception in thread "main" java.lang.ExceptionInInitializerError
    Caused by:
    java.lang.RuntimeException: No OpenGL context found in the current thread.
    at org.lwjgl.opengl.GLContext.getCapabilities(GLContext.java:124)
    at org.lwjgl.opengl.GL30.glBindVertexArray(GL30.java:1510)
    at renderEngine.Loader.createVAO(Loader.java:88)
    at renderEngine.Loader.loadToVAO(Loader.java:35)
    at weapons.RenderWeapon.<init>(RenderWeapon.java:33)
    at entities.Camera.<init>(Camera.java:28)
    at gameObjects.GameObjects.<init>(GameObjects.java:24)
    at engineTester.MainGameLoop.<clinit>(MainGameLoop.java:36)
    I have no idea how to fix this.

    Tyler Marchildon June 18, 2020 9:05 pm Reply
  • If you render the skybox first with depth testing disabled, the skybox wont collide with the terrain like at 18:50.

    Aidan Haddon-Wright June 18, 2020 9:05 pm Reply
  • For me, the sides of the skybox is rendering upside down.

    coden4 June 18, 2020 9:05 pm Reply
  • Is it just my terrain that won't render at coordinates like 1, 1 and -2, -2?

    Bob Bobety June 18, 2020 9:05 pm Reply
  • my skybox is just a 2d wall?!?!

    thatmadhacker June 18, 2020 9:05 pm Reply
  • If anybody is getting this error: Exception in thread "main" java.lang.IllegalArgumentException: ByteBuffer is not direct
    In the loader class, in the decodeTextureFile method, look for where you allocate the bytebuffer and change that line to: buffer = ByteBuffer.allocateDirect(4 * width * height);

    Ojas Landge June 18, 2020 9:05 pm Reply
  • I'm starting to have PTSD from these Fragment and Vertex Shader files… Oh well I can't let it stop me from creating this, after spending so much time on it.

    Jordan Mancini June 18, 2020 9:05 pm Reply
  • My skybox was black,I accidentally forgot to multiple width by 4 at pngdecoder..now its working…good tutorial Tnx Matrix.

    Alexander LastName June 18, 2020 9:05 pm Reply
  • How would you do a procedural skybox I tried to set one up but it just ended up rendering the default blue color and nothing else

    Null void June 18, 2020 9:05 pm Reply
  • I am having trouble with the downloaded code in the loader class.
    Format.RGBA
    none of the imports I can use appear to work for that.

    LegoGenius 1st June 18, 2020 9:05 pm Reply
  • er, what about the PNGDecoder class from slick util?

    Fireboyev June 18, 2020 9:05 pm Reply
  • why dont u just call import static org.lwjgl.opengl.GL13.*;
    or does it effect on memory?

    The Flair June 18, 2020 9:05 pm Reply
  • I tried to make the skybox size to 1000 and what happens is when i try to look above the sides of the skybox seems to have triangular wholes?

    lorenzo garcia June 18, 2020 9:05 pm Reply
  • why not skydome?

    lorenzo garcia June 18, 2020 9:05 pm Reply
  • I'm just wondering that the fog distance should be calculate from the player instead of the camera. Therefore, zoom in and out won't change visible area.

    Teng Long June 18, 2020 9:05 pm Reply
  • Hey, I just wanted to say thanks with this for teaching me so much:
    i.imgur dot com/tInCooh.png
    <3

    LapisSea June 18, 2020 9:05 pm Reply
  • My skybox will only render as a 2d plane

    Singular Healer June 18, 2020 9:05 pm Reply

Leave a Reply

Your email address will not be published. Required fields are marked *