WWDC2000 Session 188

Transcript

Kind: captions Language: en good morning I'm just all 49 game application even though a lot of this may be applicable to game applications a manager of the DTS group that handles OpenGL handle 2d graphics handles quicktime java and printing but the real people who do the real work are here today also visiting throwing things at me and making comments about the things that get wrong later but John Stauffer is the engineering manager for OpenGL group over here and also we have a number of people number of guests from hei we do the OpenGL drivers for us Chris Bentley sitting on the side Brian Raider min and Jeremy San Mel working on the OS 10 work with a TI so we appreciate them being here and let's jump right into the good stuff is using ok again as I said we're going to use OpenGL for non full screen immersive applications so a lot of people who look at OpenGL and see quake or see some of the full screen immersive things that have been done opengl works really well for maybe a 2d application that just needs to do some rendering or some drawing and wants to have high-speed rendering wants to have that acceleration and doesn't want to have to reinvent the wheel yourself it takes advantage of the fastest Macintosh pipeline what this means is basically that all your graphics there even if it's a 2d texture map which you know just a 2d image sent to the screen it's going to go through all the acceleration layers and use all the accelerated context so this allows you to get to lehigh performs graphics without having to get down into the bits and figure out how to flush caches and what the bus bandwidth is and how to keep that optimize that's all done for you another thing about this is is that they've done a lot of hand coding and hard work to take advantage of velocity engine there's significant improvement you can see on OpenGL applications from a non velocity engine to have lost an engine machine and this is for free is get this and it works great it's good for 2d two and a half day in 3d and for those may be unfamiliar with what how you can two and a half t let's talk about maybe let's talk about a game action in this case let's talk about something like Diablo Diablo basically is a sprite like based game they have a background to have orthographic or flat sprites that move around on top of this opengl can be used for this kind of thing or any other like to decline of sprite game whether there may be a depth there might be a stacking of things look a PowerPoint PowerPoint is a is really a 2d thing but there's a sorting order to it so you could do PowerPoint in OpenGL rendering the text putting the things up there and you get all the fades transitions rotations those kinds for free so it's all accelerated all in hardware once you get your image in there you can manipulate it however you want so it's good for two and a half be good for Trudy good for some of things like that some things that may not be good for is vector drawing for example we have courts which is exceedingly good at handling PDFs handling text tailing vector scaling OpenGL does scaling but the scaling is for a bitmap so if you send a texture and it's going to scale based on that texture so if your textures 32 by 32 so a little icon there and you blow it up the full screen size you're going to get a 32 by 32 icon blown up to full screen size it doesn't do anything special with it whereas like courts may have a text in a description that text in a vector format which will then when you blow it up keeps the vector format keeps the smooth curves and lines so OpenGL is one thing it doesn't it doesn't really do well is handle images in a vector format though the base is the polygon the points are all vectors and those scale infinitely basically and it's easy to add two applications in code there's not you don't have to you know go take a linear algebra class and go find some dark corner of some library that has some dusty old volume but how to put how to code and OpenGL it's not that difficult so let's kind of jump right into things here and move ahead what I'm going to do in this session is I'm going to go through I don't have a lot of slides I have a lot of code I'm kind of next show you were going to go through the demos you're going to see kind of one ubiquitous spinning square demo a lot but it is basically me use it to show you how to manipulate kind of different constructs of OpenGL one of the keys and this is I'm going to be talking about a GL in a lot of ways and how to manipulate your buffers how to set so if you had text on one half your window you could put OpenGL in another half how to do some texture mapping and stuff a lot of this is basically I'm going to demo in an OS 9 for simplicity but basically it's all carbon-based all the most everything you see here is carbonized runs on 10 AGL works on 10 and the stuff you see here almost all works on 10 now I'm trying to think of some of the full screen stuff is not quite supported but that'll be supported shortly so what we're going to do we're first going to talk about pixel formats I think I mentioned pixel format since on my other OpenGL talks until have some the caveats there especially when you're dealing with windows in multiple monitors and multiple renderers we want to talk about me using multiple windows how long drawers and gels this window this window in this window maybe I want a cat application to do the perspective view and then for orthographic views from the front aside in the back or front of line on the top actually in that case you can use multiple windows open GL this update am on update events real simple works right in event loop works great for for good stuff sub windows combining 2d and 3d how ass would you get 2d and 3d on a window if you played with opengl at all one thing you'll see is if you draw 2d and then you draw some opengl and call swap offers its going to blow away that 2d it does not know anything about that drawing does not know about about how you that you had something there it does not know about compositing to your background so you have to consider that that the area you're updating opengl is really going to take over basically that area that you set up talk about some basic font handling then we'll talk about a physical simulation i have a couple demos and talk about just using opengl for physical simulation nothing really really big there's no real good answer i can't give an answer for the world on physical simulation there's a lot of text on that but how to use opengl similar considerations orthographic projections orthographic projections kind of a big word and you say it real quick and some of us what's heck you're talking about real simple is that for like an orthographic projection might be something that puts the text on the screen while behind that you have a perspective view of a walkthrough so as you're walking through your virtual library you want to identify what room you're in and you want to do that in text well you would switch to an orthographic projection which allows you nicely place your text on wouldn't you know do your do any manipulations or any perspective on that text and then we'll talk about texture mapping at the end real simple I'm gonna show you how to get texted into the Macintosh how to texture map them so you can get some the basic stuff going which is kind of a crux of doing 2d and 3d okay six or format considerations AGL tues pixel format is how you set up basically you're kind of drawing almost a context that's not the right word atl pixel format sets up the basics of pixel format and what it handles is it handles things like rgba displays so red green blue handles whether you want a depth buffer or not and what do you require an accelerated context or not and also handles what if you want to choose a specific renderer and let me pull up an example of some of these and we'll look at it some of the caveats here are handling multiple displays handling movable windows and I'll talk about some special considerations actually let me move forward and flying okay we got all kinds of things on the computer here and this is going to be a real simple one I need to set my font size here that's good ok what we have here is talking about some pixel format and brought this up so it's easier to talk about see some examples of them basically in almost all cases if you want to do hard work celebration and you want to red green blue and alpha 8 base 'but is supported in software but almost no hardware right now for birthday pick context so if you want to do hardware acceleration do I speed graphics you Monty red green blue and alpha then we're talking about a GL render ID AGL regular ID says I want a specific render and you can ask for any render that we enumerate if you want a 3dfx render you can ask for 3d effects Ranger in this case I wants a generic render ID but this says I want the software renderer the reason I put this up here is so you know that one good test you can do if you're working OpenGL and not getting things right and you know I shan't this driver is really bad its buggy it's not draw myself right go to the software renderer check out and see what the software render says the software renderer renders it correctly there may be a bug on our part this offer when your render renders it incorrectly then it probably is something in your code so I've a challenge and its challenges for it I put it out pretty much every time I talk about OpenGL I have tremendous confidence and John Stauffer and his ability to code outstanding implementation of the software render so if the software renderer you find is not compliant with the OpenGL specification send what you think is not compliant we'll look at it if you're correct I'll send you a t-shirt right now I'm doing the OpenGL t-shirts but I'll but I'll find something to find if I run out of those so but I haven't given out t-shirt yet so that's a challenge so if you think you have a non compliance in the software render send me send me a send me a note and if you're right i'll sign your t-shirt the AGL render ID should be followed by it by a render ID and that's in the AGL header files the AGL render generic ID said software render basically so AGL generic render ID says I want the software render that generic render its software render there's another Keaton is not a trick to do this if you want to go to software render on a precompiled code you want to check out see how it runs pull out the the ati or 3dfx actual opengl accelerators or opengl component out of your system folder and the only render or less will be the software under those it'll switch to it so that's another test you do if i want to get any render basically i'm going to say rgba idea all renders HDL double buffering on the double buffer means i actually want to double buffer surface which in almost all cases you do it yell all renders what does that really tell you why is that different than just leaving it out eziel all renders will accept non-compliant renders for example the rage to shift on the original reveille imax the non-compete on OpenGL compliant renderer so in that case this will select that Star Wars racer you wanted to run on I'm accra imac reveille so they would use a string such as this to make sure they would be able to like that otherwise they will refuse to select any hardware tolerated render in that case opengl harbor compliant render same as the above string basically but i but i got rid of the HL all renders hardware software design and add at HCL accelerated here's a key that talks about moving windows if you if you have a window that you're using OpenGL and you're moving the window around you ask for an accelerated render it's going to fail and y ou fail on multiple screen displays why is it fail fails on multiple screen displays because there's a we coded a fallback case so when the window spans two screens you go to go to the software renderer so it gives you rendering while you span two screens so if i have a 3dfx card in one my slots i have an open API card in the other slot I dragged across if you use the string such as this I'm sorry if you in most cases you'll get a TI rendering moves across when it's between screens you get the software renderer when it's back on the 3ds three effects display it'll get 3dfx surrender and one interesting thing is you can easily check if you use GL get string check for the manufacturer that in the version string you'll get either the ati the apple software or the 3d effects you can identify what render you're actually on if i use this string right here with the AGL accelerated and i had a movable window so i basically say i wanted for all my monitors and monitor it will fail because it says i can't handle the case for your between screens it's pretty logical but it may be a little caveat say hey why is never working i have a GL accelerating I can never get an acceleration tolerated context with my multiple screen so that's something I've run into with people so that's this little note on that ati compliant render if I wanted a TI and getting a GL render ID an AGL render a TI ID and if i wanted to get an OpenGL compliant ati renderer hardware accelerated render i would add the AGL accelerated so what does this look like real simple one of the simple ways to do it you can do it like above where you can just add the after boots in order RGB a double buffered accelerated in here in this case I'm indicating that i want a depth buffer one key here is with the depth buffer if you actually do something that has depth if you're going to have back to front sorting you need to set a depth buffer up you can turn on depth sorting you can do everything you want you can turn on Z value can do everything everything you possibly can your geocode if you don't set up a depth size and it and have actually have that depth buffer there it'll never do any depth sorting and be like why is this not working because you didn't don't have a depth buffer GL is like that in a lot of ways you get down put on the road and you're sure you got it right you forgot to enable a mode or set up a depth buffer so that's the death little caveat there so you definitely want to do these two lines if you want to use depth sorting and then a GL none terminates all these so let's talk about multiple windows which is really for me the main difference between a full screen immersive and anon immersive application is handling windowed cases and combining 2d and 3d together and combining text for multiple windows will talk about oh I'm sorry there we go we'll talk about my family multiple pixel formats what that means will handle multiple context multiple drawables and considerations such as 80 AGL up fate context times we update contacts my bad I'm sorry and resizing multiple contact multiple pixel formats we've talked about that pixel format setup whether you have a depth buffer whether you're accelerated or not what rendering you may be using those kind of things multiple contacts and capsule it's an OpenGL state a drawable is actually a window and when we talk about considerations will talk about how that relates to all all the above let me actually go through this okay I have my little cheat sheet here so what we're going to do I'm going to go through a lot of coding examples here okay I talked about this as non-gaming so what do we have I want to run the ubiquitous game app so this is this is the app you'll see this kind of thing all over all over the demos and hopefully the projector will sink awesome so this is our our game app full screen has the whole screen doesn't care about anything else doesn't care about updates or not updated just draws works great and you'll see this when you square a lot so just wanted to give you a little preview of that one and let me give you a little little update on my opinion square demos none of the demos you'll see except for maybe the last two are really exciting as far as you know content I didn't spend a lot of time putting textures and fun little cool stuff in it keynotes do that I don't I'm not an artist the point here was just to get across the coating the actual techniques involved rather than it the content so I hope you can bear with my spending squares for a while so where are we we're talking about multiple contexts so let's talk about multiple pixel format multiple pixel formats are pretty there's really no since the pixel format is your basic lowest level everything needs to set up to that there's really no reason to have a more than 1 pixel format / context because when you create a contact the required to supply of pixel format you'd have to destroy the context and then pass in a new pixel on so there's no changing a pixel format you can't maintain a depth buffered one and a non depth buffered one if you want to make that kind of change you're going to have to recreate the context create a second context or you know recreate the pixel format you can't go through and have pixel format swapping to multiple contexts so that's what's thought that if you do have something you want depth offered not depp's buffered you're going to have to work on multiple contexts novels with pixel format ok so I always talk about multiple context so multiple contacts will pull up on my little application here I'm going to have to again resizes to excuse me resize us to make sure the everyone can see this once I bring up the file based multiple contacts handle different GL settings basically the state of GL you can say hey I want to drop I want to draw with shaded outline draw with wine version so what we're going to look at is just this little section right here that of code and it may make this bigger for you see how this works ok what we're going to look at here is setting up a couple context I have two rectangles at the top here they're they're both in this case they're different sized rectangles they have a window I go through here I set up my pixel format and I use my setup GL sample code and called bilji open window so I build a GL context there you can see that's context number one then basically do this a similar thing on this side create a window up here set up something something some similar settings you notice this line right in here for draggable windows as i said before we can't use a gel accelerated because what happens with draggable windows you're saying you want them across multiple monitors and so if it ends up between two monitors you're going to fall back to the software you're going to have that fail because it can't fall back to the software renderer most cases you will actually get an accelerated context there's very few cases you won't if you have an acceleration card so usually I just eliminate a gel accelerate actually getting accelerated context with that then I build and build the gel from window and what I get you what I did here was on the second context I said really I want this one to be flat shaded so we run this very simple i have two context one's a draggable window once a normal window and this window over here it example excuse me exactly the same drawing routine calling the exact same thing so the codes paths for each is exactly the same all I'm doing in this case is that this context here is set up for flat shading if I take it out then I could it would easy we just look exactly the same as the first one we can see that normally the shade model is is not is a solution a dude's all go back to the default version of that real simple so it's just um hmmm this would be used for cases where you have things that was for example you have for windows that you may want to do in a CAD program and what you all want to be smooth shaded the recipe line drawing so if you want to be line drawings you just put the polygon mode into line and we'll assume for my simple demo that the fixed window is your projection of your hallway or you're building your building the other one is your actual line view of it that you're working with so this one would be like your working copy of it and this one over here would be the one that shows the actual was going to look like at the end the rendered kind of image so that's kind of thing you would use is actually multiple context for okay so what else starts I've had so I did flat line drawing that one so we're done there moving on let's look at multiple drawable so in this case multiple drawables is the same context with multiple windows may be exactly want the exact same thing to show but you want it to show in different windows in a different view you just want to rotate a camera and you want all basically the GL sayings will always be linked so if you set one to a different setting both of them will link together but it gives you different views or viewpoints on the same scene will say so let's give them back to another simple spinning square application here and in this one let's just run this and see what we get so I have two windows same size exactly the same view same view of the world everything's the same so when we prove that to you let's go back into our that's about me so I scroll down here and we will get to set up so let's say let's make withdrawals actually a different size instead of making the same size showing that they're actually drawing exactly the same thing unless I do something to affect that okay there you go so in this case they're actually since there's draw will set up on this on the back window first the front window thinks it's basically the same size of the back window and just draw the exactly the same thing so the question is how do we fix this so that's basically the point of all this is if you're handling multiple drawables with a single context what do you need to do for that and what you need to do is you need to make sure that you set the viewport correctly and to set the viewport will scroll down a little bit in the code into our drawing retain this is a simple drawing routine basically what i'm doing here is all you use these two lines of code here what this does is you notice this is the do update so i just have a standard mac program with every time I update I'm drawing it GL again in this case I use GL viewport Jill viewport takes the x and y offset and then also takes the width and height and in this case I did screw up again wow I'm not doing very well here should we bottom and if we compile this you'll see that we should now the drawable slides to the appropriate window sizes okay there we go we're back in selenium con we kind of expected and if we do like a you know window size here it actually keeps the viewport to the window it's another thought here is one thing you'll notice when you're working with OpenGL is it if you're doing something that supposed to look realistic and someone does that to your window you realize that just by sending the viewport OpenGL is going to scale everything OpenGL thinks of everything is basically 0 to 10 to 1 and so what happens is when you scale things into a very small space if I scale things like that you get definitely OpenGL says hey you know I can do this I can fill this rectangle whatever you provide me with that right size of a of your drawing and at that point it'll just scale so you just wasted avoid that you can set your aspect ratios and even check that you so instead of really smishing your your viewing up you're actually just taking off a piece of it out so and one more thing is to let me prove that actually this is actually a separate you know draw the messages in the same contact so if it's using the same context you think any opengl state change to that contact anything effective the state would change both of these so let's make a state change here so same lines of code I used in the last one nitin last one I to contacts I change lines of code date they operate independently in this case again this is something you may all have two views with the same contacts two views of the same scene so we should get basically two views of the same scene so the scene when is drawn should look the same up there we go flat shaded lines and so as we saw when you change the context version contains the OpenGL state variables what happens is we get the the flat shady kind of thing we get the line outline instead of instead of the little spinning square so that's so again let me recap a little bit if you'd really an open chalak a shin you want have multiple views and you want a multiple views that have different kind of OpenGL large-scale states such as you know orthographic versus the projection such as I flat shaded versus a smooth shaded you may want to set it up so you're having the two are on a separate context if you're doing something that just has different views of the same world you want to set it up so using this two different drawables same context let's move on a little bit so moods multiple contacts multiple windows this one is a real simple one I already showed the viewport from the last one and this just shows a couple other things on it and probably I don't really even need to show this other than we'll talk about some specifically I didn't talk on the last one same kind of thing okay what you see here is basically the same same thing but you know there's a black border around one of the things and the black border is from basically a sub window which we'll talk about in a second but the key here is that when you when I move this when I drag this and I do that what do I need to do to OpenGL to tell it that actually I did something to the window and it's pretty important so if you don't the window won't make won't change nothing will happen the window will draw the same size sticking the distraught both right size you need to call update context and let me in this code maybe a little bit convoluted because of the carbon stuff in it but will show it will show it to you and we can we can look at exactly when you need to call update contacts and how you actually grow and drag windows and so just so you know that if you're not taking notes on this and down the right feeder surely all going to put all the code up to you up on the website to all be examples of this on the sample code website so you can pull it down and play around with it and look at it so for example let's look at the inn grow standard thing for growing a window this is kind of code he set right to a big wreck you grow the window but then what do I need to do to OpenGL for the grow basically I set the port here I in Val the wreck to make sure redraws all and then the key here is is down in this area and we'll look at the window to add this window first this is the window I actually can drag I call update context here that's sorry call update context and I called GL set viewport what that does is update contacts tells OpenGL that you've changed something as far as that drawable in the window for example well if you look at the anatomy of how OpenGL works with a window what happens is there's a front buffer which may be certain size and we talked about the bath buffer before the back buffer actually is built behind that front buffer pixel for pixel so if you resize the window the front buffer changes and the back before must be reallocated so we have is we have a lot of reallocation that video card me for example if you had loaded it up with your 200 x 300 little context and and you had all your textures loaded in there and then you go to a thousand 24 x 768 definitely there's a lot more things that are being used a lot more out resources that are being allocated on your video card for the basketball for an that front contacts thus it's going to have to do some shuffling you may purge them textures a lot of things going on in the background just by resizing that window I kill myself up here but that's okay you'll get through this before I die so Jill Jill update cantar atl update context tells a GL which tells GL that you've changed the context show and hide definitely if you call it move window and resize window our cases where you definitely should call a GL update context to let GL know that something's changed for that context GL viewport then was a thing I showed you before the Geo Beaufort basically sets the size of your viewport through that window and scale anything you're drawing to that size of the window ok sub windows look at sub windows now sub windows are pretty cool some windows is probably one of the most useful things for people who are using opengl in a non full screen app if you're any kind of thing where you have a part of your window you want to draw a chart or graph or anything like that it's really simple to do you can use any of the line construction just draw squares you can draw filled squares shaded squares that's really simple any opens your book and tell you how to do that but the question is how do you constrain your drawing how do you make your drawing work you'll draw in the areas you want it to draw in so let's look at let's run this first actually and then i'll show you how it works again this is a spinning square and you notice now we have two spinning squares um this is pretty simple and just put the square we have the one window which is exactly the same as before when I've done in the second window when I go to draw it the same context same drawable but I draw play sending a coatl buffer wreck and the buffer recognized is in this case when I click the mouse it adjusts the vertical part of it to where I click the mouse so you can see that I can adjust the buffer wrecks there so you can see this somewhat you could put a divider bar and have your OpenGL rendering whatever you're doing your visualization of a 3d visualization of a website layout with a list on the system not on the other side of all the web pages and as you've dragged a slider bar you can adjust the size of your display this is an easy way to do it this works great this is called a GL buffer wreck and again someone may wonder if they're new to GL why is it a GL + GL AGL's the apples implementation dependent sections of P of OpenGL anything that has to do with window in anything it has to do with the display is all through a GL thus a buffer rack which is a justin insider window inside a drawable will set up in a GL and that basically sets up kind of a clipping area says it's a small area that it clips to that area and just draws GL in that area one note here if I didn't set the viewport as we saw before buffer rec works great it will it'll draw a little little window that you can move around or whatever so here they don't just all a little cut out so if you say it your viewport your viewport will stay in the in the bottom corner as normal of your of your drawable and you can set a buffer wreck without saying the viewport and it will just move around on your screen I may be a me show you that well let's quit this and I'll show you what very simple setup here to do here this is a buffer retcode will bring a bigger for you okay i might do update again what I do is these are I have two sections of drawing one here and one here and what if you notice that i use it i use the buffer rack and the buffer wreck is in this case X Y with Heights and what i'm doing here is setting the height of it to my mouth location and when i get it when i get a mouse down i find location in window coordinates nice find out what it is and so I set that so that gives me though it would be you know the height of that mouth location there I call GL set integer my context set they call a GL buffer wreck and passing the buffer wreck so that tells it that tells it how I want to constrain my drawing and it called GL viewport for the actual the actual viewport I'm trying to think of how I can do this to make it actually interesting ok I know what it can do we'll get rid of that and we'll do this in a second and we'll get rid of that but basically the other ones the same way so I'm basically drawing two pieces that's adjusting in the interior I talked about how you can use buffer wrecked Ashley take a you know a little bit a little window on the world kind of thing and this should do that yes if you notice it's in my infinite wisdom I probably I have some update context in there but basically the update is out of sync as I move down and you see that is unless you call viewport synced with your buffer rack that you have with cases where you're not you're looking at either old data that's not being updated or you're looking at a the viewports remaining the same because it's not updating this section up here has never been updated again because a swap is just calling it on the small buffer wreck and we can also see that let me show you another case of that so that's something to root over to worry about or not to worry about but to understand I'm going to go back one example the multi context one just run it for you if you notice i talked about that black border the black border what is inset with a buffer rack real simple but notice opengl doesn't updating in that area opengl is not responsible for that so if you have areas that you change your buff iraq or areas that you take over you want to update you need to make sure that you're updating that area because opengl is not going to do it you saw them in the other in this right here you can see it whereas when I changed my drawable here it didn't doesn't update that top part buffer wreck resets it to set that area draws it's just you know constrains the drawing but doesn't draw doesn't say all race the background opengl works the same it's very kind of linear thinking so if it's you if you don't think it's going to do helping you probably won't do it so let's go back and see where we are okay actually good good I'm about where I want to be so you notice on almost all of those you may have noticed on the screen you saw fonts on there and how do you do font so it sponsored great thing to put out because you can just put text on the screen works pretty well and it's something that you definitely want to probably do and on it and if you don't have a way to do that then we talked about OpenGL botha recombine in 2d and 3d one thing actually I there is there's another 10 caveat here I'm going to go back to this for a second 2d and 3d keeps them separate don't try and draw OpenGL on an area that you're also writing 2d on an area make sure that your 2d and 3d are separate you want to put a frame around the 3d area that's fine set the bus wreck boy whatever you want then put the frame around it with your 2d drawing conventions just don't try and overlap them because it's going to happen is the OpenGL is gonna draw right over whatever you have there the OpenGL doesn't know any better doesn't know that you're constraining it opengl does it bye bye bye clip regions you notice if i switch the windows in the background it didn't draw over top the other window it does handle those things in windowed area so it's just fine so there's no problems app switching to the back you don't have to worry about oh my god I have to set this weird area to draw and it'll take care of that but don't try and draw OpenGL like for example not spinning square don't try to do a swap buffer and then immediately try and draw texted screen opengl is a pipelined and asynchronous method of drawing so what happens in it is that swap buffer basically says yeah sometime in the future I'll get to it the engine usually is running much faster than you can send commands to it so usually you know you saw you know 400 600 frames per second so I mean if you draw in text every frame it's probably probably synchronized but what's going to happen is that in reality you're lucky if it's think it doesn't really synchronize together by calling swap buffers doesn't think to anything you there are ways in jail flushing GL finished do some synchronization but I recommend staying away from that I recommend using the buffer Rex i recommend drawing parts of screen remember recommend you can even do a clipping region and clip out the area that you don't want to draw into and then using 2d specifically in those areas we tell you I'm full window updates if you're doing a full window update make sure you draw the 2d pieces also if you change your buff iraq open jokes going to forget about the piece that doesn't want to draw any more other pieces and how you moved it and you have to take care of drawing up basic file handling as you saw my demos have some fonts on there if you want to put fonts on top of 2d don't draw text from top of 2d on top of 3d sorry on top of three deepest it won't work so you have to use some of the font handling that we have in opengl johnson very nice to work work and put a GL font handle in that works like a champ it's super easy once you figure it out it's like you can put any text you want on it you can what you can't do though is you can't rotate it and can't blend it it's just bitmap raster font it worked great to draw strings work great to color it whatever we want they can't blend it with a background and you can't i'm sorry i say blend I mean blend the actual text not the background you don't get blocks of black letters the text is transparent in the areas that they aren't actually drawn to but you can't blend the white text into grey into the background kind of thing so let's talk to us look look at the code to do that and it is super simple and i think it's i have it on the web right now and and if it's not i'll put this off this is this is I like this stuff it's really really easy ok I have a big draw frame rate but that's not the real key the real key is the build ponte el ok we call GL unsigned integer list base and the GL gen list and basically that makes 256 slots for basically display list so it is it holders for the font letters then i'm going to go AGL use font right here i give it a context that was passed in a font ID so i use like Monaco whatever i called get font f num a face ass iso face maybe normal size to be 9.0 to 256 that sets the parameters for how many is going to generate and the list space which is what I got right here basically what that does it generates all your fonts it a call upon stiff stuffed into a list and you get a flan that you wanted whatever raster point you wanted I this is something because the way a gel use fun sets up a AGL pixel map handling you want to reset your pixel store called geo pixel store I 20 this kind of a key thing to do to make sure that you don't have problems later on trying to draw textures and real simple to delete it you call delete list the font list you created it's passed in and 256 elements that list pretty simple and what's even better is draw my draw 3c string GL all you do is go you take a lint send i equal to 1 wall you have letters in your in your out string you want to use call list font list plus the base in unity and increment I and there's other ways to do this with four loops and some other loops but basically what that does it's going to walk through your list and the list basically says its ass playlist in GL which basically says to draw this character at the raster position and advance the raster position of width of the character so you get you get the proportionally spaced fonts so it works fine it's not like they're all blocked out and you get all the letters and the letters will draw nicely on the screen you get nice letters you can put information I'll you quit your frame rate value can put version numbers out you can put debugging information what your states are works great simple so you then have a basically your kind of printf for GL you can in that way or a printout you can use printf the fourth sprint have to format and then you can spit it out to here so that works well and in this case this is just some code that i'm using here to do framerate timing inside of it so I call that once per frame so that's more of a there's no real complication there so I won't show you anything with fonts right else responds right now in a second i'll show you that when you want to draw fonts you want to make sure you're in a context or in any you can set your raster position to the 2d position on the screen you want your fonts and if you're drawing complicated 3d screen you may not be able to it may be your x0 y0 may be back face of this polygon over here until your font comes out backwards and over here or whatever so that's not you want to be careful about that because that won't work very well so we'll look at remind me about that and i'll tell you how to set up an orthographic context in a minute and so I think I'll go back here how we doing it got about 20 minutes I think and let's go back to I don't believe I'd eat something no one told me I did I didn't okay awesome thank you save me okay so basically fun handling is good physical simulation really simple physical simulation is I'm going to talk about some examples of it of how to use do physical simulation or examples of doing physical simulation in OpenGL you can do something from very simple just to get the idea of what's going on just to get hey you know sometimes visualization if something's a lot easier than describing it or writing a text based program so it with a little bit of hooks in there you have your you know you have your physics emulator working on University you want to simulate some effect and you and you want to snap it out it's pretty simple just toss in OpenGL couple recommendations here if you all want to do any kind of mac handling you want to make the thing run on you next want to make it run on Windows you wanna make it run on the Macintosh what you can do is you can use glut glut is Jail utility tool kit it's a cross platform on the code level based kind of you you are a handler so it gives you the keyboard events it gives you the windows and that kind of stuff you write the same code I would recommend it for shipping code but i would recommend it for if you're doing any kind of a profile any kind of kind of research areas any kind of you want to look at some algorithms you want to do a quick one off application for in-house to demonstrate something what works like a champ so one michelle miss there's some fun example so you've now pretty much finished with my spinning square i appreciate you kind of hanging in there for the spinning square demos so now i look at some more interesting things thank you very much sky rocket sky rocket is written with is a program that was written by kerry welsh and the reason I bring this up is because i ported this from windows to macintosh it took me about two hours to do this a screen saver and took me about two hours to the port and run runs really well it's not it wasn't a big deal it's opengl and based on a standard template library it was really easy came over no problem no changes in the GL code at all didn't change anything I mean not a line there's a little bit of a GL set up and that was about it and so then we go to the GL code leave it the same and okay so I'm going to I'm going to run this in 1024 768 and I think it all fit on the screen and should work just fine and then I would ask you to bear with me for a minute because it takes a little while to get started see it and I'm not sure how well you can see that you probably can and the camera will take maybe a few minutes to rotate but what he's done here is basically set up a texture for the clouds use it up a texture for the for the sky those stars he also has some terrain below you and can't really see that role volcania that's not bad we'll wait for it to rotate and and all and I'll show you the new Ashley CS 3d so it's your standard fireworks kind of demo if you notice that the fireworks light to smoke up or the other fireworks so he has a lot of lighting effects go on the clouds get lit up and of course it wouldn't cause I don't have mouse keys to rotate it it wouldn't start want to start rotating for me to the kind of randomly picks times to rotate so we'll let it will sit down and be patient let it fool around anymore so what else can I tell you about it Egyptian the way this works she knows each piece of smoke is a texture and he scales a text during call and colors the polygon color so he takes a texture of the cloud with some alpha values and then we does he put the polygons in the right place and he turns on he sets the polygon color to lefty now here we go if you notice it really is full 3d application rotating at that little matrix like effect of the camera rotating and um what's really nice about this application is I mean it just it looks good to give some power and OpenGL and it's pretty small pretty compact one guy did it I mean if so if you want to simulate something she wants or some simulation you can see that you get kind of get can do some really nice things in OpenGL an ice moon glow and some lighting effects there so you can see that that's uh he did a real nice job with this and what's nice about it some opengl stuff is that i can turn it off full screen good 400 x 300 remember i haven't done anything to the OpenGL itself I all I'm doing is changing too window said calling the same thing I've talked about before the GL viewport making sure the windows set up the right way and there I hey I got it in a window same stuff running exactly the same no changes same code works like a champ so OpenGL works in a window I could have something that says hey this is my rock of simulation i'm going to show you you know this is a fireworks effect that my fireworks company is going to set up for your for your fourth of july celebration here's an example of what it's what it's going to look like and has some some costs or some some presentation on using opengl to demo it so that could be a use for someone who want to use opengl without them without having to do too much extra work actually want to whiz through these ones a little bit quickly so I can get to the end anyway this is a example that comes with it comes with the glut the codes comes with this you have source code for that with our SDK and you can you can find it and this is something that's really easy to do and that's kind of nice you know it's kind of cool what's nice about it actually is that you can do this and let's do something else here let's sit sighs this is just use the environment mapping the reason I say this is a physical simulation other than just a cool piece of eye candy it's because let's display the wireframe the wireframe is actually just a beta of set of Springs and they use a simple physical stimulation Springs to set this up and to do the propagating waves on it so this is another physical simulation that's kind of cool you could talk about it you can do it but then you put it OpenGL throw the environment mapping on and you got something that really catches your eye and says hey that's something great and you notice it runs in a window just fine it's not like you have to go fullscreen that's demo stuff and the last one is actually a real simple demo and I apologize for this one because on this machine it kind of runs a little fast so this is a demonstration of lorenza tractors and you can see that that's so it's showing its following a little red ball around in little Lorenz attractor so that's another idea of someone using open l mapping and out the 3d min in implementing a very simple way so just to show that you can do simple stuff there too okay let's move on and you're awesome you're going to have to switch it over by time i get here i'm going beat him nah damn convene orthographic projections we talked about that a little bit orthographic projection is basically a parallel projection it's one to one for the screening the contacts and one good use for this is a sprite engine I wanted to have a spray into an example here honestly but I did not have the time to put it together with all the other things for doing so what I have is I have my font at my fonts at the end I'll show you the how that how that works with the font display how is actually is an orthographic projection and you can set it month its really fairly simple just a little three lines of code but yet a hold on for that so I'll move on to it into a minute texture-mapping I in my last ten minutes here I'm going to tell you all how to do texture mapping on the Macintosh because it seems that first people go who learn how to texture mapping i know i'll put cool stuff on the screen honey that's all I know how to do is actually draw boxes like I did that's easy texture-mapping hard texture map it's easy basically got to read the image got Swizzle two pixels so I me my swizzle depicts a little that's an official industry term now sizzling pixels swiveling pixels is you got an Arg be so it's eight bits alpha 8 bits rot red eight bits green aphids blue in the Macintosh 32-bit off-screen that's what you get that's when you read it read it in using QuickTime reading and using your read picture or whatever that's what you that's what you're gonna have opengl doesn't like that it doesn't like taking that format in and doesn't like handling that format so what you need to do with that seem to Swizzle the pixel so what what you're going to do is read it into a different buffer and you know take the RGB RGB values out of it and put it in the other buffer set it up as just three bite values or tuples of large eb values and use that for your texture send that in to opengl that's whistling pixels you have to do that but we've just announced that we're going to have packed pixel format support in our next version of GL which would be seeded to developers very shortly and that'll allow you to take standard macintosh pixel formats like something you get into an off-screen imply it directly to a texture so you can do 1555 16-bit you want to fill the alpha channel and you can or you can blank the alpha channel or you can fill them with ones and you can send it directly into a texture and there you go your texture mapping without having do any pixels whistling then we'll talk about handling GL textures just the basics of how to texture and we'll combine that with quicktime magic let me show you the texture mapping demo I just want to make sure I don't run over and have time for the last MO so that's the only one I'm really really proud of so this is just my I stole them the Maya face and if the guys worked on and basically did texture mapping demo can you see that real well is that really hard to see I think it's probably hard to city and you kind of can see it you can see the reflection better than anything else but basically you have a texture map floor you have a reflection in the cube and they're fussing the cube is really simple just it's just the same thing it's you who noticed anyone knows something's wrong with that exactly it's not that the reflection is totally raw and the reflection should be in this case should be going as it dies down on the top the point should come up in the bottom so that's all screwed up but that's not the point of this so I can do that and by the way I mean this is a big thing for anyone is using OpenGL there's so many resources on the web is one of the people who work with OpenGL love to write about if I guess to I've seen their names in print did you go to ww OpenGL org and follow the links there and there is tons of stuff out there doing reflections correctly what mistakes not to make all that stuff is out on the web great stuff so what was going to show you texture mapping ok load texture res so what we're going to do is we're not again go to the bigger size so again so you can actually see this animation oh good i have a coffin on my machine my on my screen hear someone yell if i get to the 55 mark without finishing so I'm not gonna worry about the setup here but I'm going to basically do get picture res ID we all know that if you actually get the picture get pic info the reason I want to get the pic info is cuz I want to get the size of the picture I want to create a new g world the size of that picture if it's 32 bit I want to actually lost the pixels remember to check to make sure that the lock doesn't fail as if it fails you're in trouble so that's what we should always be doing and the reason I say that actually is partly because that's something you should do and partly because as we move forward to 10 and there are actual locks and unlocks that matter locking pixels if it doesn't let you lock it there may be a reason you can't draw with it so there really is something you should pay attention to I draw a picture into the offscreen G world i set the g world now here is the magic really simple magic here with tights tried base address width is the width of the picture price's the heights of the picture stride is the actual Road a road distance and bytes which is the row bikes base address of the first address of the buffer I create a new pointer so I create a buffer for my texture that's the size of the width and height and three four one one bite for each RGB components and then really simple what I do is in this section I pull out I pull out the this was offset by for possessing a RGB so it's four bytes for each component this is by three so it does this RGB three bites and I pull out the zero and I fault the red the green the blue in order and then a simple call for OpenGL now I have a buffer that's its width x height that set up for for the texture and I called GL text image 2d texture 2d three components with pipes RGB unsigned byte sort of components and the pointer to its buffer dispose pointers suppose he rolled release resource boom done that's all you need to do to texture ok but you have to get it to the screen I think I have that somewhere ok a little little trickery here that I'm not going to show you today but you can look up this buying texture thing I called buying texture but I only want to load the texture one so actually I load the texture right here that call call bind texture to say I want to pay attention to the marble lightning or the face of the mask so say pay attention to this set these parameters for the texture load the texture and then every time I call bind textron pain I want to use that texture so they go back down here and I say fine texture so I want to use a mask and then go to draw cube and draw cube says here's a texture coordinate 0 0 0 here's the vertex coordinate which is a position for the stats face vertex texture coordinate 0 1 1 1 1 0 if you notice I'm just walking around the polygon I'm just boom boom boom all four corners textures are going to be map 0 to 1 so what happens when your map is 0 to 1 it makes really easy for your map a full text virtual polygons is used maps the corners for the right place is 0 to 1 and simple it's gone done perfect awesome we're done we're not done but we're done with that so texture mapping is not hard oh I think I think that's all I need to need to show you on that one so we solve that and then I have swiveling texture update so text your updates oh I'll show you this one this is this is actually the demo I'm kind of actually i think is actually reasonable you want to see what Steven those guys showed you want to see a different trailer ok this is the large size of the dinosaur trailer basically what it is is quick time playing into an off-screen and then playing it and it should you should see it in a second so it's actually dark to start with oh I'm sorry one thing at kyanite is really dark can you turn down this way turn down some of these lights yeah turn them off I don't you don't need to see me I'm ugly well thank you I appreciate it ok open GL texture and you can't see the cool part is what's in which I've got you can't really see is this is running a 9999 this is running to about a hundred frames per second so its texture mapping from a QuickTime movie on to the texture at 100 frames per second so it's blowing away the QuickTime movie is easily can update at the rate to QuickTime movie is and one thing i have here also is i have fog setup so as it fades out at ashleys fading that's why you get fit you get the fade as it goes away so it actually that's not that's not a mistake that's I set it up on purpose of the black fog to go out fade in fade out and there actually is sound playing with and all that stuff we don't have that hooked up so but not a big deal so this is a real simple it's playing the trailer and if I click it ends and if you notice that I can do is just pick I'll play the same one they always play you can leave the lights down spell it posed any movie no no big deal no tricks no no no awesome self so can we do that at home right is that easy you actually someone wants to bring the lights up or leave them down and I don't care and I have a couple minutes here to actually show you how I did it the texture texturing routine is almost exactly the same i basically use some of the some of the utilities that we have out there i SAT around for about a couple hours and figure out hey this is not that hard to do and the key here is I call I have movie the movie and let me show you this section I want to show you right there that's my slog set up oh by the way this is all that was required to send any fog start a start and end linear flogged and a fog color real simple but you enabling I enabled textures at the top I set a clear color which is really pretty simple I empty my texture buffer which is pretty simple to hear here here's a quick time to texture conversion basically what I'm doing is I look I have at exercise and I want to set off thats into subsample the movie and I set these up ahead of time right here and I'm going to put the code on the web so people can really look at exactly how I do it but the key is to find all your offsets into an array so I can do an array offset into the actual texture so when I come down to make texture if you notice basically I'm taking the offsets into I get my my pics map which is the pixmap for my for the movie base address i got that i got i set up my array for my texture and i work through this by offsetting from my G movie which is the texture into my using my base address for the for the RGB and I offset correctly into the array the rail is already offset for the out to avoid the alpha values a little trickery there but not to complicate ass all the code that does them to handle the texture if you notice in this code that's all the stuff to do the window moving and all I call is make texture and then the key other line is GL text sub-image 2d once I call texture once i can call Geo textile mhm 2d doesn't recreate the texture all it's going to do is update the contents of the texture on the card so it keeps filling stuff more of the car go faster than admitting GL texture text image 2d and I really don't want to go through text image 2d I mean I guess I can run it I'll do that so let's so let people know that I don't think they're going to you in too much of a degradation at all in this but that's a different another way to do it if you have textures that are changing all time and i'll tell you what the frame rate is 87 instead of 100 so i lost 10 frames per second by doing it by doing it this way so and you know if anyone's interested they really want to see that do I know you can't see the framerate counter up there absolutely your we were welcomed to come up and look at it and again the code will be up so you can look at the code and figure it out so if we can switch back to this one you know him nope nope I got it road map okay what are we doing next to cook time in this room right after this is the advanced optimization John Stauffer has graciously allow it has graciously given his time to put some cool demos together talk about optimization with quicktime I'm sorry quicktime opengl and talked about how to do that here to talk about how to do that and then we have the feedback form right after lunch please did you have anything to say about OpenGL about 3d direction on Apple come to the feedback form we'd love to hear any of your opinions comments goods others whatever you have will take them down and we'll take them in and try and get you the best 3d implementation out there anywhere