Writing custom Qt Quick components using OpenGL - Kevin Funk

so hello everyone I'm confirmed I'm working for k-dubb as well as for KDE still so I'm still right there and today I'm going to talk about how to implement custom QT quick components using ok chill just right from the start we had a relatively similar session right in front of this I'm trying to tackle this a bit more from a perspective of your non OpenGL Q guru because I'm not one so I'm just someone who knows a bit of object ooh right custom quick components with it and the idea of this talk is how do we create a new qml elements at all and the steps I'm going to do in this talk is how do I create a custom home our component in here now just the basic offset then head over to how do we use Q quick item then head over to how do we really blend stuff so we can use more C++ features and gel and then and also share a bit of what has been talked about in the previous talk a bit about cue quick frame buffer object I'm missing the outline yeah so sorry for that one I just start right away with how do we do simple UML we implement a simple human object in C++ so the basic steps are subplot I'd a funky object a quick item registered object to get it known to the qml environment in q ml we import the module and in q ml we also use it like any other standard item so basically object i guess everyone is aware of that one we define a custom class random timer in her tricky object and we'd like to get that in qml that's the implementation not much of detail later how do we get the queue management to know about the type so we start the app we call the human register type function which registers our custom type into a specific name space into a specific major and minor version with a custom name and that's it we created which it will be you quickly you may not see ml which is loaded afterwards and with the registration the type is automatically available to main dot qml as soon as we import the right namespace yeah it's explaining it again more detail that's Outlook zoom out right we have the random time out this got imported through this custom name space that's just been a non visual item so far so how do we create guy items that's the next step just what slide there are multiple ways to do that in this talk I just wanted to go through the idea of I start with a simple qml custom item written UML notice it would it will be slow and then iterate so I can get to the more faster version later on so um if you look at the outline first of all I'm going to implement all like I'm going to show you how to implement a custom component using the canvas items you know to just draw a simple triangle and then I go to the to you quick painted item then I'll show how to do it with you cook item re-implementing update painted note and then this is I think that's what Ben we've been talking about in previous talk I just briefly showed that one because otherwise I'll overlap too much that just briefly handed and that one is cubic frame buffer object and at the end I'm going to summarize what to use when and what's better what's not okay first one canvas item that's pretty easy we want to get this nice little triangle here in this case we just use the canvas element from tml boom from cute quick we have an on paint handler there we can get a context and then we use pretty much html5 like syntax for drawing stuff so we begin a path we move the line to some position to another line in a line and then we easily get the triangle that's it nothing really special here so you can do triangles and QML without writing suit surplus that's something really cool didn't know about it I think the canvas item was I don't know when it was introduced but it wasn't part of q25 directly I think I don't know right that's the implementation of a custom file called triangle canvas and that's how it's used in a in the main dot huemul file we have window that gets the specific size and we create this triangle canvas i we just created fills the parent and using that we get this one nothing's texia but and we could just try to have a look at the huemul profile output how that behaves if we like resize it a lot of time like there is extra bit and in this case we already see we have tons of calls for the on pain signal handler because each time you resize the window the human engine asks the canvas item to repaint itself and you can already notice this text quite a bit of time imagine if you have like 50 of these triangles in the scene this is not going to fly so this is going to be really slow each time you have JavaScript evaluation and yeah so there must be something better to it right doing a triangle and Q now let's get back to slides so yeah next step there's this huge week painted item I can still create a qml item and I can still use my well-known cue painter API which I've been using for tons of years so I don't have to do objets cool so yeah this time we create a new class triangle item it turns from quick painted item it gets a random property that's not really that important right now the important part is we have to overload one function called paint which gets a hew painter instance this overrides base class function and implementation is really simple as well so constructor nothing important here's the overloaded method so it overloads a paint method we get our bounding rekt and then we create the polygon to describe the triangle and then paint it and that's all to register it it's similar to well similar to just export in any severs first objective email we call qml register type again put it into namespace and so on how does this one look like so we import the namespace we create a triangle fill it and parent and we are drawing it again but this time there is no JavaScript involved for rendering the triangle of course so all is offloaded to C++ right now no longer any JavaScript and validation as soon as we reset all this on the proof yeah so no 80-plus calls for paint or something inhuman anymore so that's already cool but there are some restrictions to it so if you use quick item there you still don't have real hardware acceleration but because you still need to use the cue painter API to do to the drawing calls and there is a two step operation needed to do this because first you use the you paint a code to draw onto a surface that needs to be rasterized and then again this is transferred over to the sink Raph and then drawn again so there's always a bit of slowness involved because they're two steps and using the actual scene graph which the queue manager provides is always pasta so how do we do that and that's the next one exporting a scene graph item class just a bit of an intro to the quick good week when dr. ed so usually there are two threads in cute quick there's a render thread and a main thread the render thread asks the main thread for the item tree what is written in the qml file and that what internally in the QML engine happens is that huemul the qumar engine pulls up a parallel graph of notes representing the I country and those parallel notes are the so-called sync rough notes which the render thread can more easily handle to render the stuff that's the really really really basic overview of that so you have a item tree in qml and then this human engine magic makes the parallel hierarchy of the tree in Houston Grove cute quick secret notes about those notes that's the the basic inheritance chart of it so there's a huge G note which is the basic note in cute quick sing craft this has several subclasses like Q as GU geometry note which defines geometry and the material geometry for how the shape looks like and material for how the surface surface looks like and there they are actually many more details here you can attach custom shaders stuff like this I'm not going into detail about that one that's really something for sure separate and the other I'm jealous but that's the idea so in your custom class you create such a scene craft yourself so we can optimize how here are the hand render thread actually that's the stuff so we don't need to go through you kinda again going back one slide the separation of threads that's not for all platforms that's I think every platform has two threaded render by default but on Mesa drivers on Linux there you use another approach so the rendering actually happens also in the main thread as far as I know Scott that's true for that system fonts are for instance because I just optimizer previs okay so the next version sync rough item we inherit from cue quick item again create a constructor and this time we need to overload this function here called update paint node get some QC node instance and update no data instance and again this overrides the base class method so we use operator to be sure yeah looking at the implementation relatively easy as well I think you need to set that flag otherwise it isn't rented at all because usually good quick item is a non visual item so you need to set a flag and in the re-implementation of update paint note you check whether the the size of the item has changed if it hasn't changed we just return a previously allocated item and in the other case we try to replace the old item with new one so we create a new geometry node set the flag that it owns material and geometry and do more stuff on that so next slide is right at the end of this file so it gets long we get the boundary act of the cute quick item created geometry in node set it some data so we know this to declaw out more or less and then we defined it to D cloud that's again similar to what we wrote in the qml canvas item and the other class it's just defining the three dots of the rectangle nothing more we set the geometry give it a material so we actually have some saw that the drying is filled and we return the finger and that's all it yeah I'll just go back a few slides and show the code passed at the right one now that one looks like the Internet Explorer with tons of ad blockers installed remove that one okay set it as active and this is still the wrong sorry that one it is I hope yeah okay so yeah this time no Q Penta API involved that's just creating very specific notes for the sync RAF who already knows how to render a specific point cloud so we tell it that's point two three and give it a material and this all happens automatically automatically let's go any questions so far I surprised no all right one picture when we created the German creamy pasta like Judy's like yes sorry so um that's basically the the data storage or the point to the cloud so you create the geometry that already has an internal data structure for keeping point cloud and this one just gets to point to the right data and then again the next lines you just set the points as you wish it to have so there are I think there are multiple things to do here can be texture point color points I can have additional attributes that one's a way to describe that one here I'm just takin didi very very exam simple version of it does it help okay so let's again one of our examples it's a bit more of an elaborated example so it just doesn't show a filled triangle which is boring right so this one does a bit more so it animates the triangle it change its the internal filling of the triangle and that one is also all done with using graph API we look at the implementation here that's update paint note again that's all the same as before almost all the same that's where it starts to get interesting this time we were using the so called transform node which is a note in the scene graph which acts care of applying matrix to subtree of of scene craft nodes so we create that one it's owned again that's all for all these set flex out buy things of course used to clean up after yourself after you delete root note then it will create clean up all the children as well so you need to separate this one but let's have a look at the transform node so this is still the same as before geometry node this time it's colored and interesting part is that we have an matrix defined here which which rotates the triangle and this matrix is set onto the transform node which takes care of handling what's whatever's inside the rotation matrix more color handling we we change the color each time we recall the render thread or I think that's unum via timer so yeah each time a timer trigger switch update the color here and we reuse that updated color in the update paint on class the the top-level note we tell that geometry has changed and that this one is 30 now and the scene graph needs to update Aranda and all this internally triggers an update right so that's the end result of that one profiling yeah you'll nothing you won't see anything here you do seem something like this that's probably because I didn't use anchors fill-in parent here yeah but this is negligible you always have that because you have the top-level qiyamah item which will resize its shouldn't that's right children item but this actually doesn't have any beefy code which needs to be executed that's just updating properties so you all also see it very low meantime yep and yeah that's one I wanted to talk about but any in fact I think that's pepper already had in the previous talk pretty much covered this one this is about hue quick frame buffer object renderer this is a class which is less useful for defining content items in the scene graph but it's more useful for using existing company object code for rendering a complete background for example so you have an existing 3d scene which renders a car or renders whatever and then use cute quick to render your custom controls on it and in order to render the car which is underlying under your cute quick controls you usually use that one cue quick frame buffer object renderer that's also used by cute 3d as the main class so any I think the route cute 3d node as that one as back up which does the Yeah right so this is the the begging part of the q33 denote what you need to do here you implement sorry Yuri will then create a frame buffer object to control the credit a friend of object in object and then you remove and render to call your custom object code and that's already the interesting part because you need to be really really careful what you call in here right that's just done internally by the render thread that one takes care of calling all the random edits on the objects lined in there we will see that like right away because we have some deep pocket statements in there so you can see how many times it's called but yeah it's called multiple times for rent a prayer to reprint so yeah well you have to demo here let you find that one text change she note what well need to do it this way all right so yeah in order to keep it simple I didn't remove meant doing complete triangle in here I just reset the background so the code gets a lot easier to read because you don't need to create vertex buffer objects and vertical area objects just to keep it very simple so we have a cute quick item a standard hood quick item on top here this item and the background is drawn by the cue quick frame buffer object renderer let's look at the code Jim our code it's relatively simple we haven't top-level item there's our custom cue quick frame above object render object and it's just the rectangle we saw below on top of it so this is ranked again at the text area again - oh okay so what magic does happen in here so we create a new class called logo in fgo renderer inherits from this class here we talked about it before it's contractor these track down we learned that we first need to a reimplemented frame buffer object we do it down here and this one takes care of defining the right format for it so you can have control over that so you create a format set the attributes like to have number of samples for instance the type of it and then we just return in your type of it and in the render code you have to pick up the this wrapper around object out which is called your context current context functions this one is used so you don't nail yourself on a specific GL word so this wraps all the QM GL API and then just decides what ID can use OpenGL directly or whether it can't use it at all on the specific platform and then just decides whatever there is so we're keeping it pretty simple here we just play the karla set it to a specific color and clear after us and update needs to be called in order to inform that this one needs to be rear-ended on the scene yeah that's it and you can see you're pretty quickly you can move over to OpenGL and if you want and in there you can do whatever you want but you have to be really careful about keeping the objects stated stacked intact and I think that's one other one that's something you've seen in chiapas of object or right before you have to be really careful not to confuse to cute quick renderer and destroy that one's state otherwise you just get nothing on your screen and with that I'm already done actually that's what I wanted to tell you any questions oh we forgot about that one so we see the debug out so the question was I'm not sure got oh yeah how many times the render function is called so let me clear that one I'll run the example again [Music] you see right after startup the logo FP right fpou renderer constructors called and then each time this Inc RAF requests an update the render function will be called so this is multiple times per second amateur of that sync to the live update rate of the screen should it no but it's okay in the update paint node method what kind of things should you avoid to things that might break batching I don't think I could tell you a lot about that one so I think I have to pass on that one I don't know it's the source code of this somewhere all these examples yes [Music] especially the last one that's okay yeah that one is there's a way way way more complex example away will indicate examples apartment it's called texture and she note so I basically just made it very simple to explain so I stripped a lot of the details that's one I think lustful created for explaining hue creek frame per object when everyone's rendering the cute logo usually transforming it rotating it just lot and lot more teaser on that one you can look at that one that's in the examples yeah cute declarative exam story what does the value achieved between rendering using a frame buffers or rendering using sikraft not sorry septuagint what is the value or advantage between using frame buffers object versus using the cute scene graph of the whoa I'm there I'm just think about it one I mean in this case of just using the cute sink ruff API you don't get to run your own object out that's all hidden behind the notes implementations and just in this case if you use the Google friend ever object you can actually run your own object code so that's why you use that one I mean there are special circumstances where you need to we need to call Raw of GL because special needs I mean the scene graph note API just has a specific set of components so it can't represent everything you ever need to do so it might be to call your knob jail functions the frame object let me check out concede help there should be synchronized function that's the one where trance fear the you can write custom properties on this class so you can curate cue properties here but you can't use them directly and for this you need to reprove and synchronize and there you pull over the properties you have in your us onto another storage and then you can use them in the other functions so let's the synchronization point that's as specifically for that part okay anybody else Gretchen who me a little bit unrelated to the presentation [Music] I think we have that on the to-do list but we still want to make the code a bit more pretty I think that's the current state I'm not in charge of that ones right I really don't know but yeah I would love to have a public as well here this is very some easy way of functionality to import widely stuff slice I like models form for example and apply it so I think it's more a question for q3d they have API for that so you can just import models I think if you look at the k-dubb poofed as this auto demo cute automotive demo and they already have - just some white car ink rendered on in the tree to tree design and that's just a what's the format called I don't know but that's using a model of the car to pick an item example the update page note the noyoke [Music] I think yeah you just usually just cast it to your note type and yeah if it's now then you don't use it and if it's not now then it's your type you're expecting okay thank you

Channel: KDAB

Views: 5,495

Keywords: QtQuick, QML, OpenGL, Qt

Id: fdlU1zVA-Po

Length: 35min 43sec (2143 seconds)

Published: Wed Dec 07 2016