Debug with Tweakpane

[00:00] So in this lesson, we're going to learn how to integrate Tweakpane to create a live debug panel for our scene parameters. This is pretty useful because we can add controls for the object position, rotation and material color to update it in real time without touching the code. So we're going to learn how to add it to our current scene. To install TwigPaint, we can open the terminal and then just do pnpm add twigpaint. And also if we want type support we can do pinpm add tweak pane core and then sign it as a developer dependency.

[00:43] So once we install both In this case I have version 4.0.5 and 2.0.5. So let's close this and import it at the top of the file. So just before the import of the styles we're going to do import pane from tweak pane. And just below the canvas we are going to create another section called debug and here we are going to initialize a variable with a new pane. So this is the one that we're gonna use to add the bindings for our scene.

[01:26] To add a binding, we're gonna go where we initialize our cube here, just before the scene add cube. And we're gonna add a binding to modify the position on the y-axis so all we need to do is write paint and then add binding so this method accepts several parameters the first one is gonna be the object that you want to modify or bind into the pane. So it's going to be the cube position. Then the second parameter is going to be the property that you want to modify. In this case, the Y.

[02:02] So if we hit save, we have this number control that we can modify like this. So if we put one, it's going to go one in the Y axis. If we put two, it's going to be here. And if we put something like, I don't know, minus three dot five, because you can also put decimals, it's gonna go down in the y-axis. You can also use this handler here which is pretty handy, I really like this feature.

[02:29] It allows you to like modify like it was a slider. But we can actually create our own slider rather than just having the input number. So we can pass an options here and we can specify the minimum value that we want to be available. So let's put like minus two, then the maximum value could be two and then instead of Y we can put something more meaningful something like position Y So we hit save and now we have a range that we can play with it and it goes from minus 2 to 2. Also this handler that we used before is going to be constrained to the same range.

[03:15] Let's try with another property. So we're going to add a pin, add binding, and then in the cube position we're actually gonna use the rotation. Let's change, let's use rotation, and let's change the rotation on the z-axis. Why not? Okay, so as parameters we're gonna also create a range but in this case we can specify like the angles.

[03:39] So we can do something like minus math pi here and then here the maximum will be plus math pi not minus something like this and as label we're gonna pass rotation on the zeta axis So let's hit save and see what we can do here. So if we use the slider we can go from minus pi, so 3.1415 whatever, and we can rotate it from here to here. But the more bindings that you add, the more complicated the organization will be. So something that you can add whenever you're adding bindings to the same object. So imagine that you have several objects in your scene and you want to group them.

[04:34] You can create folders, which is pretty cool So here before the paint here, we're gonna actually do a folder for the cube so it's gonna be Q folder and then equal to paint add folder and then we're gonna add cube actually no we have to pass an object and it's gonna be the title and the title is cube so now we have the cube folder and all we need to do is replace the pane with the cube folder and now we have a collapsible folder with different controls inside. So this is a great way to organize our controls in TwigPane. Another cool thing that we can use to debug our scene is adding monitors into our TwigPane. So what we're gonna do is we're gonna uncomment the previous code that we did for animation of our cube. And then here where we added the binding for the position on the y-axis, which is, I think, the one that we are oscillating between 1 and minus 1, so this one what we are gonna do we are gonna remove the control and We're gonna pass read only True So if we hit save now we have a valley Control or a value control that goes from minus one to one.

[06:08] And it's only read only, you cannot modify it. So this is a monitor. Every time you put the read only, it's going to create a monitor. But this is not the only monitor that you can have. You can also have a graph.

[06:21] So here, not here, we can pass, I think it's view. And then let's put graph. And if we hit save, now we have a graph, but we need to specify which is the mean value so minus one and probably the max value is gonna be one here and if we hit save now we have a graph that goes from one to minus one and we can visually see the oscillation that is happening on the position of the cube. So this is really handy for visualization or effects or animations that you want to add. You can monitor them and see it in a better fashion.

[07:10] There is an insane amount of things that we can tweak with TwigPaint. We can even control colors to modify the colors of the materials that we have. We have the range, but we also have points. So we can modify points with vectors here. Here the amplitude as well, that's pretty cool.

[07:32] We can have tabs with drop downs. So there is a lot of stuff that we can tweak with this. And check the documentation, they have a lot of cool stuff like buttons, tabs, intervals. They have blades, which is kind of like controls like drop downs and such. And we are going to be using this quite often during this course.

[07:57] So take a look of it, play with it and then see you in the next lesson.