QtWS15- Using the Qt Quick Scene Graph API, Jocelyn Turcotte, Woboq GmbH

thank you welcome everybody so yes my name is Justin so cut and french-canadian I'm working at war book here in Berlin I come from I'm here today because I worked on cute kid WebKit and kid web engine at Nokia and enjoying the cube company and during that time I've been working on integrating the two compositors the acute quick - compositor and the WebKit and Roman compositor and in the chromium case we were using the scene graph the kakuhen graph to composite the layers in in chromium for q2 a million so I'm here today to share you that experience again as a user of the API so the talk today would be separated in three parts first we'll explain where does the scene graph come from why is it there the second part will be about implementing key quick item update by node basically and use existing USD geometry node implementations and cute quick and the third part is going to be about implementing yuan qsg geometry no which basically mean shipping triangles and implementing your own shader in C++ so first what about you guys does anybody could you raise your hand if you ever really prevented update by note okay and anybody here for the second part of the third part ever fiddled with the open GL shaders and camera shutter effect or anything okay so some of you guys are beasts and if you don't know what I'm talking about hopefully you have an eye the end of this talk if something is not clear just feel free to interrupt me for a short question so first where does the scene graph come from in cube we can go back a bit and go back to q-quit one which appeared with I don't know if it for that seven or I don't remember and it's initially it was an evolution of UI files that you haven't to designer so it was meant to to be able to do animations and some more scripting directly in the structure of the file instead of having all the logic in C++ and everything in the UI it was using three graphics view for rendering along with two painter and was using hue script for the scripting part cute quick to came with cute file it was built directly on top of kid GUI it was using key window or a subclass and key opengl for rendering it's not using two graphics you not using cue painter the scripting has been fork and windowing and even system has been forth from super pco2 well if we look at the architecture of quick - we have OpenGL on the right you have three ml components and human engine that you flee that you probably know already about a bit too quick view is just subclass of cute window one the window is the surface of the rendering of everything and in the middle you have the quick quick items the built-in one that come with which it quick for example to cut rectangle click context and the qml components are going to use those two quick items and those two quick items are going to use sin graph nodes to define the rendering so queue quick item is taking care of the event system there's no event handling in sin graph nodes it's only there for rendering it's a replacement for queue painter you could say and the single F nodes are going to be walked by the single renderer to convert this into open your comments and make this as efficient as possible here I'm showing something that is important is that as you know everything in general is a wreck want a circle it's really difficult and this is because everything is in the end a triangle in OpenGL you make a rectangle by using two triangles made of four vertices now let's try to look how its rendered and cute quick one and why cute quick two came to exist so the way it used to work basically in through graphics use that you have a scene made of Geographic items and you want to render the scene back to front and vertically using a print virtual call and this print command this print virtual call is going to send print comments basically through the cue painter abstraction so set this brush draw this rectangle to all this image and the pain engine behind the scene for example the raster package and is going to interpret those print commands and transfer this into changing the memory to change in the world pixels so the way it works is that you're going to paint the background then paint the frame of the okay button then the text and the frame of the cancel button then the text and this works great the clipping mixture that you don't move memory that doesn't need to be updated depending on the 30 area on the screen but the problem comes when cute wanted to target and better than mobile devices so of course you want to use OpenGL so yes let's just convert those 2.2 commands into OpenGL comments so yes it's not too difficult so we have you set up your shader your OpenGL States to enter the frame of the ok button then you change the state again to to render the text and this is the nasty part is that you're going to change the state to render the frame of the cancel button to the same state it was for the ok button and you're doing so much changing here and they are not you will have been much better than rendering the two frames before and then the two texts so some plane engines for example skia is going to reorder those things and do everything but in the end is basically going to reconstruct like try to imply information that was already in the higher layer and the item tree so this is what the scene graph does instead of going to imperative abstraction it takes the declare destruction of an item no tree and it's transferring it to a rendering load tree and it's transferring all the information it needs to render the scene to convert this essentially and then to OpenGL commands so you're going to have two geometries for the two frame of the button with a material associated and the scene graph can see ok this is the same material basically they don't overlap nothing so yeah let's just run through them together in one single - alcohol and then you use the parallels and what the GPU much much better so let's try to see how do we convert the how do we track the information from the cue quick item and put it in scene graph let's start with a quick demo called first so it's basically just a cube is the text big enough or I guess I can make this a bit bigger no not too much okay so this is the QQ ml application engine that I use just to be able to use a string for my Keanu program for a presentation I convert this using jute string if I just to have the syntax in the editor but then I need to put semicolons but anyway what's important here is that the scene is just a rectangle it has two property bindings to define the size depending on the parent and it has an anchor that is going to basically change the x and y position I'm going to I'm going to use this is okay I'm going to use this environment variable here which is going to convert to tell the scene graph to output the whole scene graph on the common on sed out which normally you don't need to see but in this case what I get is my rectangle in the middle and this was the first frame that just had the scene before the the kml scene was loaded and this is my first frame you see the same two nodes that were for the the beginning of for the empty scene and here those two nodes here are for my kml rectangle that you see in the scene so the transform node contains here the x and y position and the geometry node has material let's say red and it has 0 0 like you would do with two printer you print everything at zero-zero coordinate of your widget and this the height and width are converted here oops sorry and if I just resize this then you see the singular three changing on every frame so okay let's see before here you see that the opacity is 1 the opacity is implied we don't see it here in the screen so if there's nothing no information there is going to be one but if I come here and I put opacity 0.5 and then clipping since it's works similarly if I want this again here you saw that before this is the old one before we have the transform node which is handled by the item and this was our paint node the geometry node but if I run the new one here you see that this was my transform node my my paint node and now there's information that has been added in the scene in the century for opacity and clip node so the opacity node is there to set an opacity of 0.5 and it's going to affect all the children so it's going to be cascading so if you have multiple opacity no they are going to basically multiply the same way that if you set opacity on a root item and then on trial item the common trial of of this whole chain is going to have the opacity multiplied and this is how it's implemented on scene right now same thing for the clip node here so now the interesting part is how do we do this in C++ so here I have my caramel rectangle I'm going to make a my rect that is just pre-employment ik to click item and I'm going to register it put it in I'll call it the main namespace on the zero and then I'll call it in channel the same one let's call in C++ I'm going to go in my camel scene import main and I'm going to just change this for my rect and then I don't have a color property on it so I'm just going to come in this out and if I run this then my item is there you can see the position of dating it still has the opacity and clip nodes that were added to the scene graph by item but there's nothing to render there's no drama tree node anymore so this is because we did an update we didn't come and update pend on so we want to tell this item how should it be painted so I'm going to implement on the panel I just copy paste declaration from qqk under age that you can also get from the documentation and now update paneled needs to return acuity node so q3 node is the brace class of everything it's the same way that cube a cubed jet is the base class of everything the same way that you don't need to have point metal in queue jet you can have acute you know that doesn't do anything but now what we want to do is return new qsg simple red node QG simple reg node is Jeremy tree node like we saw in the tree earlier it's one that come in the public API that basically just show a color rectangle so I'm going to have the bounding rekt of the item which is 0 0 with the width and height so it's basically just setting the width and height on on my single F node and I'm going to put it hard-coded to blue so now I'm retaining this and let's see what happens to the same thing and doesn't work of course because I forgot to set something very important that I myself have forgotten at least three times when I was trying to use the API why is the update panel not even called and the reason is that there's a flag you need to set on the item if you look at the documentation about depend on you see this written but it's easy to miss item has contents and this is basically going to tell you quick item when update is called please call update paint node so now what happens doesn't work because it's private okay here's my blue rectangle success well not quite because now every time iris I'm calling update by no there's a noodle that's added to to its parent and this here is not going to the ownership is a bit complicated and the way it works is here this first parameter is all mold basically what I returned from update panel is going to be sent back to me in the next update panel called I'm going to explain why later but let's just what I could do is just a little note here but that means that I'm going to recreate it every time there's an animation frame so what we want instead is to keep it so let's say no they called all node and if not node so if I do this the first time it's called is going to recreate the note but it's not going to update it and I can show you what happens it's basically just that my note it doesn't get resized even though the width and height of the item change the rendering back-end didn't change I need to transfer all the information from the item that is updated by qml into the rendering tree the same way that you will have a cue painter call that would use the new width every time that you call paint so what I have to do is just to set the bonding reactant to bonding set direct is a method of qsg simple reg node so I'm going to be dirty and do a static last year it's okay to do this because update pine node is always going to be all node is always going to be something that yourself has created an update panel in a previous code so wherever you return here if you always return the same you can assume that the structure is going to be there when you come back it can be known because the scene graph might be completely deleted between frames because if the window is minimize you want to destroy textures and stuff like this so it can either be null or something in return earlier if I do this and I run it then I have my C++ implementation cool simple but about this update panel ownership so the reason there's this whole old node thing and return thing why not just have a cetera the reason is that it's not the item that owns the Pinetree it's the scene graph you you will see your node is set in the in a single and the reason that it can only be owned by it is that because it's running in a separate thread so the items live on on the get read and the rendering tree the whole thing is living on a separate thread which is the synchrotron the reason there is a single thread is basically because these things so the way that vsync works is that you have a back in the front buffer and you don't want to have tearing so while you render your back buffer after this you tell OpenGL please put it on put this on the front and meanwhile you're going to render in the next black buffer but then you cannot you cannot queue buffer then you would be either have lag either you would be dropping frames that you spend so much resources to compute so the tread is blocked if you have to tread the two frames to two back buffers in a row your tread is going to block which happens all the time if you have a simple scene so that means that if you do this on the GUI thread you're going to block the GUI tread if you have a lapse of 16 milliseconds to render the whole scene and you have a simple scene then you're going to wait for 10 millisecond in that scene so that means that you always have a latency of at least 10 milliseconds to handle even source and network requests so stuff like this so the solution is to put everything in a separate thread so like we see at the bottom here the scene graph is going to wait for this thing while the witch red can go back and handle events and do useful stuff so and in general the way that the classes are separated is that queue quick classes live in the GUI 12 and qsg classes live in the scene graph thread even though both of them are in a cute quick module now the the tasty part is that update type node is the portal between the two threads do you don't need to use mutexes you shouldn't use me Texas there's no even to punishing us tread you have to take on the panel that's something that you it's like a door that opens you shuffle every information that you have from the item that you accumulated this needs to be rendered you commit this to the to this engraft read-only in that code and the way it works is just that there's a synchronization mechanism in queue window and excuse your under loop that when you start updating the nodes the GUI thread is going to be blocked and this is going to run on the sink rafter just so you know so creating two objects and that thread is going to be messy please don't try to do this so you can do anything you want this is why I could call a bounding wrecked our on my cue cook item even though I was in the single thread because at this moment you know the gooey trail is blocked I'm going to show I call it pathological because I didn't try to make it fast but let's have a look at this so let's pretend that our boss asked us to do a QR code animated for some advertising panel or something so the animation here control from 0 to 1 using the slider manually is that it's going to move dots based on a arbitrary logic that I choose that it counts the number of dots around so it trembles basically the stuff alone trembles first and the other one crumbles later so if I named ated it looks like this and this is all done in GML but the information comes from C++ I use lip yarn code to be able to fit that information from C++ which is the CPC library but anyway and then I put this information back to key ml and I create a general rectangle for each of those single black node here and then I animate the position and opacity of those key ml rectangle in UML let's have a look at the code so the code is just a quick code view with a magnet channel and here's my back end I register it's a cue object that I registered to be able to instantiate it into ml it's the same as if I was doing for example a global set context property on the camera engine this engine this backend is basically like a Sudoku object and it has a single static and vocable just to be able to call it from GML and what it does it that is going to convert text a URL in this case into a cue variant containing a cue gadget I mean it could be a cue object but then you need to create it on the heap and everything so it's just a structure gadget that I put a cue Varia in a cue variant which contain itself a cure variant is of cue gadget so in the end this is the information that's important to us what's the X Y position of every undos dremel tangle that we want and what is surround con is that property that I feed back to 3 ml that counts the number of points around so I'm going to decide base of this town should this point move first or should this one go first that's not the point of the presentation but you need will need to carry this information around for the whole talk so this this part is just let's call it business logic the implementation is just calling it your encode and it's taking the data structure of literature on called counting the this round count and in the end it just happens this this is my cue gadget that I append in the cube are endless this is just a back end we won't work with this piece of code until the end this is my main of GML file the important part is here it's my QR code ml ml code which was basically the whole QR code in the middle it has my text property that is static and a river progress probability that I'm animating I said the Lila to be able to set it manually but this is the animated valueless goes from 0 to 1 everything around is just to have arrived a little benchmark that I'll show later to to have multiple codes on the screen and the important part is here this is my QR code this is what we'll be working with so here's my text and my reveal progress property is my C++ back an object that I instantiate because I registered it and here I have property binding that convert my text into my cue gadget wrapped in a cue variant in the property bar etc so I have a white rectangle that is the parent of everything you see here and here is is where it all happens so my list my cue variant list is used as a model to Indian get my rectangles on the screen so each of those dots because of the repeater is going to be converted to a rectangle and in this rectangle I'm using model data which is this individual dot and I'm going to position this on my background XY all of them depending on the information I got from C++ the coordinate system of this x and y is each point is one unit so I'm going to I don't want to have accurate code of one pixel per points I'm scaling scaling it back a bit higher here so I do this is the width of my QR code and then I'm going to scale it just to to have the geometry to rectangle triangles being scaled in the end so anyway here's the animation this is animated from the slider which eventually goes in in my item and this here is going to create - is a property binding that's going to trigger this dot progress which is a value from 0 to 1 that is going to animate each of the dot should I move now or should I move when the slider is is freedom and this is a bit of logic that I have here that just takes the surround count into account which is value taking some stuff we don't need to go into details into this but what's important is that I'm using this value to in the end set the opacity and a y offset on my rectangle so I'm showing you this and it's fast I mean what am i coming with this if I look at so it's 60fps yes sure what's the problem so if I put four of them it's still 60 FPS mostly but this is where it gets messy so I just had I mean it didn't scale at all I just put 16 of them which could be just one big QR code with a long URL like some people like to use sometimes and it would just be horribly slow why why is that so if I look at the CPU usage for this right there yeah using 100% CPU trying to render something I mean should quick is supposed to be quick so what's the problem anybody has an idea okay I'll tell you the problem actually I didn't know myself I had to profile the code which is the right thing to do anyway the problem is the property by name I mean I had this huge property binding that was using cosine function and stuff like this and I put this in JavaScript and it's fine it's fine to do this but in this case is that for each animation frame for each of those single dots on the screen I have to execute those three property bindings the main dot progress and the opacity and y1 and if you run this in instruments or perf you're going to see just the property binding is being executed so so let's try to see what happens when I animate those properties when I animate opacity and while to come back to our scene graph case update is going to be called on the item and the item itself is going to update the transform node that we saw earlier in the DOM and the opacity note that I had and it's going to add the offset to the transform node and is going to update the opacity no and this and the end is going to affect rendering so this is the question do we have to use camera in this case I mean chairman is the bottleneck sometime you can't avoid it but in this case well to be honest I chose to design because I could do it else I would be I would be in trouble here but you don't need our control on each point you don't have any event handler it's just pure rendering it's just like let's move this thing there the same way that you just put this thing in a cue point recall and on top of this the points are G come from C++ I took this information from C++ I move it in a cue gadget crazy crazy technique just to bring it to to KML and this in the end is going to be converted to essentially Jeremy tree nodes so what I can do in this case is that I can just use the text property and the river progress property that I had on my comer component and basically convert my comer component into an Q quick item so instead of having a criminal component with a bunch of items I'm going to have one item that is going to have a bunch of child nodes so this is the plan here we have one item and sorry for for the drawing we have a white background in this case and we'll have one geometry node for each of the dot and this is our print node tree this is for one item this is the Pantanal tree that we'll use and we're going to create manually this transform node and opacity node we're going to build a tree to match what essentially a tree of item will have done but we'll do it confined into one item so I'm going to set the geometry itself is going to be moved in the coordinate system of the item instead of being to its own rectangle and they're going to be positioned directly where they should be and I'm going to use the transform node only for the offset so the transform node is going to be an identity matrix when the the code doesn't animate but as I move the code is going to be plus one two three four dots and I'll do the same for the opposite you know that is a parent of my geometry node here so let's try to do this okay let's go back to - EPB no iteration you get the culturist so here's my main I have my QR code item that replaces my cure called helper and the rest is the same here is all the same - but here where I had the cure code alper with a single cure code data in vocable now it's a static private that I'm going to use internally and here are my two properties that basically reflects what I had in my camera component originally so each time I'm going to call the setter I'm going to call update and I'm going and update my note to do the logic that that's interesting to us now so let me go into a deep a note or first Setters so a basic to cook item cetera you keep the value that UML sends you into a member variable you emit a signal follow property to update any property binding on this value and here I'm setting text dirty because I if the review progress property changed I don't want to recreate my cure code so I'm going to track did the text change actually since the last update and I'm going to call date same thing for real progress and here our update panel is basically a more complicated version than the one we had a simple case at the beginning so I'm going to have my my background note here's basically just a simple red node as well and I'm going to put everything in an antique USG node so here I'm doing the static cast the same way that I did earlier but now I'm starting to assume stuff from the structure of the tree itself and not just the type of the root so the background node and in that container here I'm deleting all the nodes that were there before because sorry the text change here so let's delete everything every single chain that was there we're going to recreate them but I keep the basic structure I just changed the content and here I'm doing the get QR code data that I was doing in KML it's basically the same code I'm taking a text value putting it taking the code that contains the dots in it and for each of those that I'm going to create a management circle you can do it directly in update panel if you won't have a for loop with 6 embedded stuff but in this case I'm just going to have a class that implements the logic the I'm going to create later so here's the animation each of those dot that I created here is going to have a set reviewed progress and I'm going to set the rate of progress so if I have 200 dots on the screen for all of them I'm going to set the animation value so if I look at the top then like I said I create the chain of all my notes so the translate load know is a child of the of the management node capacity know that child translate geometry node the child the opacity node that I that is in the end a simple right know that we had earlier I'm putting it at this time and the animation here says will be progress it's basically the dot progress at property binding a header I can have variable as the same name and in the end what I'm doing is I'm setting the opacity and the matrix of the translate node manually translate node is a matrix you have to do everything you can do scaling with it we can do perspective but in this case I'm just using a translation so looks the same let's just put it in the profiler just to see the framework frame rate so if I animated the same same as before and I do this then my 16 node works almost at 60fps you see in the middle it's like so let's put more okay now it's really nicely what's happening there so the problem in this case is it's actually further down the rendering path we got rid of the KML the criminal property bindings bottleneck but in this case we just hit a scaling issue a bit further in the road because it's just a big scene I mean it has a lot of stuff on it so the problem is batching and the way that batching is used for is for free cable for example there's a thing in OpenGL which is draw call usually you want to group stuff together so if you send one triangle then the GPU goes like this and it has to set up okay change the uniform and change the states so if you put everything in one single drakul it's just more work and you can just do more stuff the same way that when you paint with a roll you don't want to start painting the corners with it you want to have enough surface to render so by batching stuff together you're just making sure the GPU can be more efficient and in this case sorry in the flickable case that's perfect you have a flickable that moves you have a bunch of text that you want to be grouped together you don't want to render every single cliff separately so you're going to batch everything together and when it's time to animate you to send email transform and everything is in to tweet Rocko's it's just great but in this case is that we trigger our reconstruction of the batch because the way that transparent node has to be done you cannot have overlapping nodes in the same batch because you don't know at which order they will be rendered and you don't get the same value if you have a transparent image on top of a white background or a transparent background on top of an image so you need to make sure that the batches are in order and in this case since the rectangle are moving then the batches are great already I always have to reorder everything so anyway what we want to do in this case is I forgot to show you the CPUs edge but I was still at 100 C PU so in this case we have we have two CPU in this case we have the CPU doing all the work is doing all the transform while in the end the GPU is sitting there and saying okay what's the next frame coming I can render this in a tenth of a second of the time you're doing you know and the CPU is still doing this so what we want is move all this computation on the GPU so this brings us to the second part let's try to make triangles ourselves and let's try to animate this directly in the GPU before you start doing this I mean it start it's tenting okay maybe okay so before we do this you can have alternatives or the shadow effect is basically a fragment shader and the printed item and the caramel canvas can also use the GPU and the cue quick frame buffer object and can also be used to render standard OpenGL code so this you can see a recipe stalk right after this that is going to go more into death but what we want first is to implement on geometry node so a geometry node is going to need two things a geometry which is a bunch of triangles and attribute and a material which is going to be a bunch of variables that come into control the whole rendering in our case we're going to have each of our point as two triangles to be a square and we're going to put the surround count as a property of this to be used in the wrap in the further in the vertex shader and we're going to pass the review progress as a uniform so that the vertex shader can use it is going to be the same value for the whole set of points the QC material shader is instantiated by the accusing material there's only one instance for everything is going to be used to control the lifetime of the shadow itself so why we want is basically this we want to do the the y plus equal and the opacity logic directly on the GPU this is why we want so to do this we need input and those inputs are going to come like I said earlier from the vertices themselves so in this case I'm going to have 40 vertices I'm going to put this around count in it I'm going to use this value in the vertex shader another thing is that we won't have that many geometry node anymore we're going to do our own batching ourselves and one geometry node it's not necessarily a geometry at this point because they're going to be separated but in the other qfg geometry is just a bunch of vertices grouped in triangles so there's a way to just put everything in the same QT geometry oops so the other demo okay what change in this case is only to our code the CPP so we have the same thing as basically we had before with the cuckoo kite M everything around is the same the interface from qml doesn't change what change is what do we do in update paint node I'm first going to show the the fragment shader I mean I don't want to go into details and it's still it's still a string that I convert to stringify so that the the GPU driver can convert this and compile it well what's interesting is those here the position come from my choose the geometry the same as the surround count so I passed them to the qht geometry and the reveal progress property that is animated is going to be used to move stuff around as fast as well again this is the same logic with the dot progress that i ported first from kml them to c++ then to a shader and it's going to change the Y the same way that before is going to move it down and it's going to change the opacity it's changing the opacity by a bearing that is first to go through the fragment shader which is then going to be set as the color let's go down to the sorry so if I go a bit further we're going to see the charcoal material so the curricle material if I go a bit further is the data it contains the data of the material it's is it red or is it blue and the material has to be sent to the QC material shader which is the cold out to do this here's the information to do your work here's the texture ID to do it here's the color and I'm going to transfer this in update state which is a method of the material shader which takes the material and here and basically just call it it could be just a plain OpenGL call this is a cue OpenGL shader program class that essentially just called OpenGL to set the value of my animation directly in OpenGL so this value here was initially in thermal which first transferred it in a cue cook item then it got transferred we're going to transfer it in update panel into the material and the matter yourself push it into the GPU so there's a whole queue of things to put this stuff on the screen in the end if I do an update paint node this year changed because now I only have one zoom it you know I can put this in my static declaration I don't have a tree of geometry know that one I'm just going to change the geometry on the geometry node and this one is not a simple reg node it's it's mine it's a parent class it security geometry node I'm doing the same here static cast of malas my static structure and here is where this is my material that I said sorry here on the geometry node and I said the own material so that I don't have to delete it manually because you want to attach everything to the scene graph including texture so that when the graph is destroyed if the window is minimized everything has to go with us there's no point destroying it if it leaks resources so anyway my material I'm going here to convert I mean update panel I take the value that came from EML putting it in a material that the same way that we saw earlier is going to be put in OpenGL and for the geometry case this is the same code as before in this case I'm building a geometry okay I'm using a geometry here I'm using an index buffer as well but you could use just plain triangles and I'm setting the geometry on the geometry node this geometry is GL triangles because the default is just going to put all the triangles in one strip in my case I want to have separate one I could use the general triangles if you know what this is but don't worry for now and this is this is worth nice this is why nobody used a single flip yet this render brackets here so you have to write raw data into the buffer so if I go back up a bit here my geometry I set a set of attribute that you can read the code I'll put it on github later but this attribute defines the memory model of this buffer and here I'm doing a renter podcast of a C++ structure that has the same memory layout and I'm going to write into my buffer using busy carry I'm going to construct the C++ truck directly in memory to visit here you write my three float directly in it in this case I'm setting my four corners and I'm using the index buffer to bind those corners in to two different triangles any question now yes a triangle is basically but you call it a shader but it's a shader because normally you would say the surface with it and because of lighting because you want the shading on it but in our case we have a flat structure and we don't have light I mean in OpenGL so let's just call it a programmable surface so a triangle is a programmable surface the vertex shader is going to polish on the surface and the fragment shader is going to decide what to put the color on top so it's not faster it's just the way that you let OpenGL render this thing like like a printer programmable stamp or something it's really out there as your colors yeah yeah here yeah it's because you could have the tree is there okay you have the root from a date panel and this root is transfer the northern ship to the scene graph and then a single I've had some point on the side I'm just going to cut this I need the resources so if your material is not attached to this root in any way then it leaks so all the material is just a way to avoid you from having to subclass this thing and put it as a member variable it's just if like to say okay take ownership of it you could have it as a member variable if you prefer yes I'm sorry could you repeat but then you will need to modify the pixels in your body I mean of course you can do the logic and the pixel shader if it's better yes yes of course but then you in this case I wanted the hard edge you know like this is black this is why I don't want to a filtering that sometime you get two textures I mean yeah I'm here to show the pipeline and if you have a more efficient way to do it I mean some guys in here are much better OpenGL programmers in aya but the basic is that you have to carry this information from from a kml down to the GPU in some way and once you're there I mean you can do all the way you want okay so let's just see what we gain from it so it's the same as before let me put it in in the GPU in the profile so let's go 264 like we had before so we get 60fps 266 to 60s now he recreates all the items it's starting to hitting the button Nexus qml again and now we're back to the framerate with 16,000 of them that we had with 16 of them at the beginning so in this case the GPU is still used the CPU is still used a lot I mean of course we won't display 16,000 of them but if I go to something more reasonable and I look I mean it's reasonable if I go back to my 16 originally you get CPU usage of instead of a 100% CPU you get 12% CPU because now the GPU is doing all the work and not just that it's also that by modifying something at the higher layer you have to to basically update all the layers under but now since we're rendering on the GPU and computing on the GPU then you don't have to carry this information anymore in this case in all frames of the animation the hosting graph doesn't change it's all the same so we just basically change this one reveal progress property that we carry down the chain twin to end up in the in OpenGL uniform and that's the only thing you have to do to update you animation yes okay yes okay see so the question is why wouldn't I write this as OpenGL directly in basically a cue quick frame buffer object yeah and the reason is that first you have the scene graph if you want to do something efficient in OpenGL I mean of course if you have an engine use it I mean but in this case you already have an engine that's already optimized and do stuff the way so it's not so much effort compared to starting using auger or something like this and the other advantage is that if you use a cookie frame of object you still going to go through a temporary texture I mean you still have to do two paths to be able to update it and of course on my laptop I won't see a difference but if you run this on the Mallee 400 or something I mean you you're going to see a performance it so this thing is rendered directly with the rest of the scene so that's meaning the main advantage let me just finish my slides okay so if it doesn't work there's this there's two documentation pages for a syndra q-quit scene graph renderer is going into details on stuff but this probably won't be enough you'll be why is it doing this so go read the code go read the code use the scene graph as a framework at this level like you said I mean it's just a tool for you to render on OpenGL efficiently and OpenGL is the platform at this point and if you want to start looking at the code look at cute window choose each other's render loop and qsv batch render the last one clears the batch render is where the other batching is done all the OpenGL calls are if you want to look at something please look at this if you have problem feel free to ask well Bach we like to to deal with this kind of call and maybe we can help you find a solution or to change your design so conclusion thermal property bindings are a convenient but have a limited scalability using too many cue geometry node can also be a scalability issue because of batching and it's it has to walk the structure and I didn't show you but the the red one that I was moving that was really dependent on batching if you just disable the opacity node you get double the performance so blending has the cost so make sure that you don't use transparent dramatic weeks unless necessary and at the end I just say that if you compute on the vertex or fragment shader you can get like twenty hundred times performance just because the the GPUs are faster especially on a middle so for example the Raspberry Pi the teracle gigaflop that you have on the GPU versus the CPU is a hundred fifty times more the first one it's just some emitted devices you are advantage to use the GPU you

Channel: Qt

Views: 12,067

Keywords: Qt

Id: cNE6Jabxxxo

Length: 51min 11sec (3071 seconds)

Published: Thu Oct 22 2015