Sign in to follow this  
Followers 0
b1narez

OpenGL
Should I vertically flip the lines of an image loaded with stb_image to use in OpenGL?

5 posts in this topic

Hi everybody,

 

I'm working on an OpenGL-powered 2d engine.

 

I'm using stb_image to load image data so I can create OpenGL textures. I know that the UV origin for OpenGL is bottom-left and I also intend to work in that space for my screen-space 2d vertices i.e. I'm using glm::ortho( 0, width, 0, height, -1, 1 ), not inverting 0 and height.

 

You probably guessed it, my texturing is vertically flipped but I'm 100% sure that my UV are specified correctly.

So: is this caused by stbi_load's storage of pixel data? I'm currently loading PNG files only so I don't know if it would cause this problem if I was using another file format. Would it? (I can't test right now, I'm not at home).

 

I really want to keep the screen coords in the "standard" OpenGL space... I know I could just invert the orthogonal projection to fix it but I would really rather not.

 

I can see two sane options:

 

1- If this is caused by stbi_load storage of pixel data, I could invert it at loading time. I'm a little worried about that for performance reason and because I'm using texture arrays (glTexture3d) for sprite animations meaning I would need to invert texture tiles individually which seems painful and not a general solution.

 

2- I could use a texture coordinate transformation to vertically flip the UVs on the GPU (in my GLSL shaders).

 

A possible 3rd option would be to use glPixelStore to specify the input data... but I can't find a way to tell it that the incoming pixels are vertically flipped.

 

What are your recommendations for handling my problem? I figured I can't be the only one using stbi_load + OpenGL and having that problem.

 

Just to be extra clear: I know that (0,0) is the bottom-left of the texture map. My problem is precisely that when I specify (0,0) I get the top-left corner texel... not what I expect on OpenGL That's why I'm asking if stbi_load pixel storage and OpenGL pixel storage differ and what I can do about it if that's the case.

 

Finally, my target platforms are PC, Android and iOS smile.png Thanks!

 

0

Share this post


Link to post
Share on other sites

Ok, I will answer my own question... I went thru the documentation for both libs (stb_image and OpenGL).

 

Here are the appropriate bits with reference:

 

glTexImage2D says the following about the data pointer parameter: "The first element corresponds to the lower left corner of the texture image. Subsequent elements progress left-to-right through the remaining texels in the lowest row of the texture image, and then in successively higher rows of the texture image. The final element corresponds to the upper right corner of the texture image." From http://www.opengl.org/sdk/docs/man/xhtml/glTexImage2D.xml

 

The stb_image lib says this about the loaded image pixel: "The return value from an image loader is an 'unsigned char *' which points to the pixel data. The pixel data consists of *y scanlines of *x pixels, with each pixel consisting of N interleaved 8-bit components; the first pixel pointed to is top-left-most in the image." From http://nothings.org/stb_image.c?

 

So, the issue is related the pixel storage difference between the image loading lib and OpenGL. It wouldn't matter if I loaded other file formats than PNG because stb_image returns the same data pointer for all formats it loads.

 

So I decided I'll just swap in place the pixel data returned by stb_image in my OglTextureFactory. This way, I keep my approach platform-independent. If load time becomes an issue down the road, I'll remove the flipping at load time and do something on the GPU instead.

 

Hope this helps someone else in the future.

 

This topic was originally a StackOverflow question that I couldn't get a good answer for: http://stackoverflow.com/questions/19770296/should-i-vertically-flip-the-lines-of-an-image-loaded-with-stb-image-to-use-in-o

0

Share this post


Link to post
Share on other sites

the first answer is somewhat correct but slightly wrong, he said (S,-T), but it should be (S,1-T)

 

This is really the most appropriate way to do it. much faster than flipping the pixels, and it won't effect runtime performance (only load time, and very slightly)

0

Share this post


Link to post
Share on other sites

Yeah, (S,-T) would only work for wrapping texture mode I think. Like I said in my answer, I'll be flipping vertically the image at load time and see if it's a problem down the road. If it is, I'll probably just do (S, 1.0 - T) in my GLSL vertex shader. I want to keep my common code as portable as possible. Thanks 3TATUK2 for your replies!

0

Share this post


Link to post
Share on other sites

HI there

I am new here ,and i want to flip  the image using an image program.I know there are many image program which supports to do that.

is there any image program which supports to work offline?Thanks a lot.

0

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Similar Content

    • By Freezee
      Hi, I'm 16 years old (nearly 17) french guy who loves coding, and pizzas, and music, and a lot of other things...
      I started learning some programming languages 6 years ago, and always failed to achieve something with them. Then I decided to re-try Java 2 years ago, and it went pretty well. So well that from this time I did not stopped programming. I really started to dig into C++ a year ago because I wanted lower level programming skills, with one specific goal: create games. Unfortunately I always overestimate myself and my ideas, and I've not been able to create a single real game because of my lack of experience in that specific domain. So I'm looking for a 3D FPS game project (multiplayer would be great too) to see how that kind of project is managed, and to finally be able to create something. I would like for once to work with other people on the same thing, I think it could really help me to help back the others. I have a lot of free time right now and I'm ready to spend some (if not a lot) into a project.
      I learned a lot of C++ features when I started, but I feel like I'm missing a lot of other features and I want to learn them on something useful.
      I really prefer not working on a project with a pre-used game engine (GM, UE, Unity, ...) because for me the most interesting part is what happens at the lowest programming level of a game. I learned basics of modern OpenGL so if there is a graphical engine to improve, I can work on it. I'm also very interested into working on the game engine structure, and on implementing a scripting language if it's needed. If the game is multiplayer, I will not guarantee that I could really work on that (because I really don't know a lot about networking) but I'll try my best to continue learning things and maybe work on that too.
      If you're interested, feel free to contact me on Discord: Freezee#2283. If you don't have Discord, reply back a way to contact you
    • By Jon Alma
      Some time ago I implemented a particle system using billboarding techniques to ensure that the particles are always facing the viewer.  These billboards are always centered on one 3d coordinate.
      I would like to build on this and use billboarding as the basis for things like laser bolts and gunshots.  Here the difference is that instead of a single point particle I now have to draw a billboard between two points - the start and end of the laser bolt for example.  I appreciate that having two end points places limits on how much the billboard can be rotated to face the viewer, but I'm looking to code a best effort solution.  For the moment I am struggling to work out how to do this or find any tutorials / code examples that explain how to draw a billboard between two points ... can anyone help?
      Thanks.
    • By Sagaceil
      It's always better to fight with a bro.
    • By recp
      Hi,
      I'm working on new asset importer (https://github.com/recp/assetkit) based on COLLADA specs, the question is not about COLLADA directly
      also I'm working on a new renderer to render (https://github.com/recp/libgk) imported document.
      In the future I'll spend more time on this renderer of course, currently rendering imported (implemented parts) is enough for me
      assetkit imports COLLADA document (it will support glTF too),
      importing scene, geometries, effects/materials, 2d textures and rendering them seems working
      My actual confusion is about shaders. COLLADA has COMMON profile and GLSL... profiles,
      GLSL profile provides shaders for effects so I don't need to wory about them just compile, link, group them before render

      The problem occours in COMMON profile because I need to write shaders,
      Actually I wrote them for basic matrials and another version for 2d texture
      I would like to create multiple program but I am not sure how to split this this shader into smaller ones,

      Basic material version (only colors):
      https://github.com/recp/libgk/blob/master/src/default/shader/gk_default.frag
      Texture version:
      https://gist.github.com/recp/b0368c74c35d9d6912f524624bfbf5a3
      I used subroutines to bind materials, actually I liked it,
      In scene graph every node can have different program, and it switches between them if parentNode->program != node->program
      (I'll do scene graph optimizations e.g.  view frustum culling, grouping shaders... later)

      I'm going to implement transparency but I'm considering to create separate shaders,
      because default shader is going to be branching hell
      I can't generate shader for every node because I don't know how many node can be exist, there is no limit.
      I don't know how to write a good uber-shader for different cases:

      Here material struct:
      struct Material { ColorOrTexture emission; ColorOrTexture ambient; ColorOrTexture specular; ColorOrTexture reflective; ColorOrTexture transparent; ColorOrTexture diffuse; float shininess; float reflectivEyety; float transparency; float indexOfRefraction; }; ColorOrTexture could be color or 2d texture, if there would be single colorOrTex then I could split into two programs,
      Also I'm going to implement transparency, I am not sure how many program that I needed

      I'm considering to maintain a few default shaders for COMMON profile,
      1-no-texture, 2-one of colorOrTexture contains texture, 3-........

      Any advices in general or about how to optimize/split (if I need) these shaders which I provied as link?
      What do you think the shaders I wrote, I would like to write them without branching if posible,
      I hope I don't need to write 50+ or 100+ shaders, and 100+ default programs

      PS: These default shaders should render any document, they are not specific, they are general purpose...
             I'm compiling and linking default shaders when app launched

      Thanks
    • By CircleOfLight97
      Hi guys,
      I would like to contribute to a game project as a developer (open source possibly). I have some experiences in C/C++ in game development (perso projects). I don't know either unreal or unity but I have some knowledges in opengl, glsl and shading theory as I had some courses at university regarding to that. I have some knowledges in maths and basic in physics. I know a little how to use blender to do modelling, texturing and simple game assets (no characters, no animation no skinning/rigging). I have no game preferences but I like aventure game, dungeon crawler, platformers, randomly generated things. I know these kind of projects involve a lot of time and I'd be really to work on it but if there are no cleary defined specific design goals/stories/gameplay mechanics I would like to not be part of it x) and I would rather prefer a smaller but well defined project to work on that a huge and not 'finishable' one.
      CircleOfLight97
  • Popular Now