in
Welcome to Lionhead Community Sign in to Windows Live ID | Help

2D images displayed in a 3D environment

Last post 10-23-2008, 15:58 by GodBeastX. 10 replies.
Sort Posts: Previous Next
  •  06-26-2007, 19:54 2682187

    2D images displayed in a 3D environment

    Hi guys =) Well, I pretty new here, that's my first post =) and I'm really proud about it Big Smile [:D]. I have got a problem in OpenGL. Actually it isnt directly with OpenGL, it's a theoretical problem. I wanna display 2D images in my 3D environment like an user interface. But how I did it? I have looked for an gui tutorial, article or something but without success. I main problem is that I dont know exactly how I gotta handle with the window size. Cause if u wanna put an image to the right side of the window and the window has the resolution of 1024x768 then everthing is fine. But if the enduser changes his resolution on his pc to, for example, 800x600 then the images on the right side will be not visible or just a pieces of them.... How do it the pro's? Shall I update the images position in relation to the window size in every frame? Actually I have already a way to make it, maybe..... but I would like to know whether is that the right way? Well, just the window size is my problem. I think the image size itself is every times the same, doesnt matter which resolution is using. Just the position of the single images on the screen is my big problem and the question, is the way, how I render my 2D images, the right one or exists another one which the pro's r using it on their games.... Well, I would be really happy if someone could helps me.... Thx a lot Best regards Andy Edit: Sorry, I'm german, so my english isnt perfect, I hope u can handle it ^^ if not then just ask I will do my best to explain it as well as possible =).
  •  06-26-2007, 20:08 2682211 in reply to 2682187

    Re: 2D images displayed in a 3D environment

    Ok, ignore the problem of pixel sizes etc - you don't want to be going down that route Happy [:)] What you want to be doing is rendering your 3D scene as per usual and once you've done that, disable the zbuffer and switch to an 'orthographic' projection matrix. The orthographic projection matrix will mean that not only will you have no perspective, but whatever arbitrary dimensions you give it will give you the 'bounds' of the surface you're rendering to. Your UI will stretch to fit whatever your viewport size is. This can be problematic if you don't want your textures stretched and you may want to play with filtering options, disable mipmapping and that kind of thing too! This make sense? Happy [:)] [list] [*]Render 3D Scene [*]Disable Z Buffer [*]Switch to orthographic projection matrix [*]Render HUD from back to front so everything layers nicely [*]Re-enable Z buffer and switch back to the perspective projection matrix [*]Eat pie [/list] You can faff around with billboards or whatever but you'll just find yourself pulling your hair out as they're unsuitable for most HUDs, you'll just get lots of artifacts around the edges Happy [:)] [Edit] After reading this post, I've written it all rather "matter of fact", which I tend to do from time to time. This is only my opinion from my experience, and if somebody has a better way of doing things then I'll learn from them too Wink [;)]
    I have no idea what I am talking about
  •  06-26-2007, 20:22 2682232 in reply to 2682187

    Re: 2D images displayed in a 3D environment

    hey thx a lot for your reply. Can u give me a example code? Cause I already use the orthographic projection matrix but It doesnt stretch unfortunately. Best regards Andy
  •  06-26-2007, 20:32 2682244 in reply to 2682187

    Re: 2D images displayed in a 3D environment

    When you create your orthographic matrix, do you use your window height/width in the creation of it? If so, that would cause the problem you describe. All you really need to be concerned about is the aspect ratio of the two values you plug in for the width and height of the orthographic view space. For example, in DirectX we have a handy method to create an orthographic matrix for us: [code] D3DXMatrixOrthoLH(&mat, width, height, 0.0f, 1.0f); [/code] If I was to put in the window width and height there, then the view space would change based on the size of the window and my carefully placed UI at 400,300 would vanish when the window was resized to 200,100. If instead, I just used the values 640,480 all the time and maintained that there was always a 4:3 aspect ratio (ok, not realistic, but you can deal with that yourself) then everything works out fine. I could choose values of 4:3 and place all of my UI objects between 0,0 and 4,3 - it's just more natural to choose values that match a vague window size. Obviously you're using OpenGL and probably have a funky extension for UI or something...
    I have no idea what I am talking about
  •  06-26-2007, 20:41 2682256 in reply to 2682187

    Re: 2D images displayed in a 3D environment

    I wrote this in opengl glViewport(0,0,width,height); glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(0,width,0,height,-100,100); glMatrixMode(GL_MODELVIEW); i use the width and height of the current resolution. if i resize my window, then i put in the current window size....with the same code. but with my images happen nothing. they just vanish if I make the window smaller.... Edit: I dont use extension or other libraries. I create a own GameEngine, and wanna build my own UI for my game....but the 2d stuff is a little bit strange Wink [;)] Best regards Andy
  •  06-26-2007, 20:44 2682260 in reply to 2682187

    Re: 2D images displayed in a 3D environment

     Quoting: ModCreator
    i use the width and height of the current resolution.
    Don't, use some arbitrary values that you make up unless you want to write your own layout logic for resizing HUD components. (This is an ok and actually interesting approach but it really depends what you're interested in as to whether you do it or not)
    I have no idea what I am talking about
  •  06-26-2007, 20:53 2682270 in reply to 2682187

    Re: 2D images displayed in a 3D environment

    Is culling and clipping relevant for drawing a GUI in 3D APIs? From what I remember if you want to draw something 2D in DirectX you just use the 3D functions with flat objects, so it could be relevant. If it is, you'd probably want to disable that as well so you don't have to worry about your GUI's back faces pointing towards the camera or being too close to it.
  •  06-26-2007, 21:03 2682285 in reply to 2682187

    Re: 2D images displayed in a 3D environment

    well, I have started a game in window modus right now and I saw that they make the mouse input exclusive for their game, that means I can't change the window size and so I gotta take the window size which I get. And these r just 800x600 as smallest resolution and window size. What do u think. Right now, if I change the window size, the images doesnt change their shape or size or position. I could set the positions of the single 2d images in relation to the window size. example: 2d image: width: 100px, height: 100px window size: 800x600 I wanna set the image on the right side of the window then I do: image_pos = 800-100-20; and every time when the window size is changing I update the window variables and the then the 2d images should have always the right position. What do u think about the idea? I hope u could follow me =) sry cause my english knowledge Wink [;)] Best regards Andy
  •  06-26-2007, 22:11 2682346 in reply to 2682187

    Re: 2D images displayed in a 3D environment

    Hi =) Well, I'm not sure but probably I got it =) I load a really big texture and put it into the background so that it fills the whole window. Then I could better work with my problem. Then I search in the web and found something, but it's in german that's why I dont tell ya the link sry but if u would like to know it, it shouldnt be a problem to write it down here Wink [;)] My fault is, that I didnt create a view frustom, i just made the orthographic matrix. now, at first I made a view frustom with glFrustum afther that I load my orthographic matrix and rendered my images. But that wasnt the only fault. Cause the images wasnt displayed. Hmm I thought a couple of minutes and looked at my code an then I found the bug. I just forgot to disable the z-buffer Wink [;)] After I did that everthing works fine, and if I resize the window now, the 2d image will be strechted. I think now it could works =) Thank u very much to ya all for your help =) This forum is really great till now. I think I'll write here more posts in the future =) Well, answer here some members of the lionhead team too, so that we get help by some professional developers? See ya Best regards Andy
  •  06-26-2007, 22:27 2682363 in reply to 2682187

    Re: 2D images displayed in a 3D environment

    No problem, it's nice to have somebody to help from time to time in these rather dead dev forums Wink [;)]
    Well, answer here some members of the lionhead team too, so that we get help by some professional developers?
    Yeah, they do - and they tend to be very smug and sarcastic in their replies. Best to ignore them really, you don't want to encourage them.
    I have no idea what I am talking about
  •  10-23-2008, 15:58 3154612 in reply to 2682363

    Re: 2D images displayed in a 3D environment

    I didn't read everything in depth, but there are a few things to consider. 800x600 for example, is a nice resolution for some UIs in a Ortho representation, however, it's not crazy for people to have a 1600x1200 resolution in a game these days, so make sure you consider that.

    Also you want to be able to handle widescreens if you are serious about an engine. Nothing like being on a laptop and some UI doesn't support widescreens so all the UI elements look jacked up, so you might want to be able to handle variable resolutions when placing UI components. For example, if you have something like hitpoints or scores or whatnot on the screen, base them off the position from left edge or right edge of screen, so if widescreen is used they're still placed correctly relatively.

    Also you might want to have options for people to select a different UI resolution than the game resolution just because of personal preference. Some people might actually want the UI elements to get smaller and smaller based on their screen resolution just to save client space.

View as RSS news feed in XML