[sarbes]

From time to time, there are threads asking how to improve the performance of a skin. I've gathered quite some knowledge about our GUI systems and I've looked at a lot of skins, so I did a write-up of what to do in order to get good performance across the board: https://kodi.wiki/view/Skin_Optimizations. The wiki page is WIP, I'll add screenshots and further topics in the future. Some of the topics may seem trivial, but they are often overlooked.

Also, the skin doctor is IN the house. Do you want to have your skin judged? Feel free to post it here! I'll give advice free of charge!

[wyrm]

Have at it @sarbes , have been hammering on my skin for years and it started out as a xbox skin, so would like to think its pretty lightweight.

Skin is AppTV available thru main repo or from my Github (wyrm65).

Have not played with it yet, but did find the idea of animated diffuse interesting. Are you up for another project?

Would like to be able to use diffuse textures on text so that we could fade text at the bottom of a textbox or fade the end of a text string. Doable?

Wyrm (AppTV)

[bsoriano]

@sarbes, thanks for the offer. I would really like for you to take a look at Amber. It is available in my GitHub repo (bartolomesoriano). Thanks again.

Regards,

Bart

[sarbes]

Have at it @sarbes , have been hammering on my skin for years and it started out as a xbox skin, so would like to think its pretty lightweight.

Skin is AppTV available thru main repo or from my Github (wyrm65).

Home screen

Looking at the home screen, it has an overdraw of around 3.2. Pretty good, but it can be made better.

Firstly, you can reduce the size of the black background element, so it ends with the border of the grey element above. This saves an overdraw of 0.4 without issues.

Secondly, I would advice you to bake in the gradient of the top part of the skin into the grey bars themselves. This saves 0.4 draws on average. You might even be able to bake in the "shadow" filter texture, saving another 0.4 - but the effect would have to be tested. EDIT: there is no such thing.

Also, the icons could be improved. Ideally, there would be two versions (selected/unselected), with no alpha and everything baked in. But I don't know if this would be easy to achieve with our skinning engine. Otherwise, the border element on the selected element seems a bit odd to me. So small gains can be made here.

For the left hand menu, you might be able to dim the screen using the new diffuse animation effect on all the elements in the background, saving a whole draw on the screen. But this might be tricky to do without improvements to the layering system.


Content views

At the views, the overdraw is around 2.5.

You seem so blend the fanart onto a black texture. Instead of doing so, use a diffuse color on it. This saves one draw across the screen.


General comments

Some of those ideas mentioned should be pretty easy to realize. Others might not be. Some might even be impossible right now, I'm actually not too familiar with some details of our GUI. If you have the time you might want to focus on the low hanging fruits. Also, I'm not saying that the GUI will render 50% faster by decreasing the overdraw. It depends heavily on the system Kodi runs on. But I'm sure that there will be some improvement of framerate or power draw.

Also seeing that you are using a basic color in the background, I might be able to give you the option to set the default background color. This would also save further 0.6 draws on the home screen.

 

Would like to be able to use diffuse textures on text so that we could fade text at the bottom of a textbox or fade the end of a text string. Doable?

Instead of having a diffuse texture, I would have the GPU calculate such simple gradients. This is less expensive than using textures and produces higher quality resullts.

Unfortunately, this would require me to make changes on the DirectX side of things. I'm only familiar with OpenGL and the generic GUI system.

[Hitcher]

If you're bored you could have a look at fTV but don't go out of your way as I don't have much time to make adjustments at the moment.

[wyrm]

Have at it @sarbes , have been hammering on my skin for years and it started out as a xbox skin, so would like to think its pretty lightweight.

Skin is AppTV available thru main repo or from my Github (wyrm65).

Home screen

Looking at the home screen, it has an overdraw of around 3.2. Pretty good, but it can be made better.
…

Content views

At the views, the overdraw is around 2.5.
…

General comments

Some of those ideas mentioned should be pretty easy to realize. Others might not be. 
…

Thank you @sarbes , little bit to go on with, but not too shabby off the bat. Have started in on some of the changes.

Quick question that is kind of related to above. In my code I use the following
 

Code:

<control type=“button”>
…
     <texturefocus>blank.png</texturefocus>
     <texturenofocus>blank.png</texturenofocus>
</control>

blank.png is just a transparent png, would it be better to just drop the textures altogether, or would that not work from a gui standpoint?

Would like to be able to use diffuse textures on text so that we could fade text at the bottom of a textbox or fade the end of a text string. Doable?

Instead of having a diffuse texture, I would have the GPU calculate such simple gradients. This is less expensive than using textures and produces higher quality resullts.

Unfortunately, this would require me to make changes on the DirectX side of things. I'm only familiar with OpenGL and the generic GUI system.

 Thought some more on the above, just looking for a fade effect of the text in the controls, how it is best achieved is not really important to the skin writer, just having it would make things look so much better. A stretch goal on the request would be to allow fades (or gradients if that made more sense to you) for ANY controls. For example a panel control that faded to the bottom would allow two and a half lines of icons without a jarring cut off of the bottom line of icons. I have achieved something similar in the past, but it involved using a overlay image over top of the panel that went from transparent to the background colour. Only works if you have a solid background image, otherwise it just looks stupid.

Know would be a lot of work from your end, but would open up so many possibilities from the skin writers side. Definitely a job for if your scratching for something to do ;-) .

I don’t suppose you could give us some details on your magic diagnostic tool so we could play with it ourselves?

Many thanks for your time
Wyrm

[sarbes]

Some additional thoughts on AppTV:

Assets

Some assets the skin is providing are not optimal.

The dots on the top and in front of the posters contain 80% white space. You can save some resources by cropping the unused space. It is not the end of the world, but it would be cool to keep in mind when designing new assets.

The texture for the star rating is iffy. It contains yellow and grey contents while it should be totally white. If you look carefully, this even shows on the screen. I'd suggest to make the texture completely white and let the alpha channel do its job.*

The poster border texture seems to be a bit too large for its needs.

Texture background

Turns out there is a way to color in the background. See https://kodi.wiki/view/Skinning_Manual#Window_Header (backgroundcolor). This eliminates your background texture.



*In the future, an option to use a single channel texture as alpha might me a good addition, as the diffuse color can be applied. This saves 75% of memory resources.

[sarbes]

Thank you @sarbes , little bit to go on with, but not too shabby off the bat. Have started in on some of the changes.

Quick question that is kind of related to above. In my code I use the following
 

Code:

<control type=“button”>
…
     <texturefocus>blank.png</texturefocus>
     <texturenofocus>blank.png</texturenofocus>
</control>

blank.png is just a transparent png, would it be better to just drop the textures altogether, or would that not work from a gui standpoint?

I've found a few places where you seem to use this as dummy buttons for input. Could you explain why?

 

 

Would like to be able to use diffuse textures on text so that we could fade text at the bottom of a textbox or fade the end of a text string. Doable?

Instead of having a diffuse texture, I would have the GPU calculate such simple gradients. This is less expensive than using textures and produces higher quality resullts.

Unfortunately, this would require me to make changes on the DirectX side of things. I'm only familiar with OpenGL and the generic GUI system.

 Thought some more on the above, just looking for a fade effect of the text in the controls, how it is best achieved is not really important to the skin writer, just having it would make things look so much better. A stretch goal on the request would be to allow fades (or gradients if that made more sense to you) for ANY controls. For example a panel control that faded to the bottom would allow two and a half lines of icons without a jarring cut off of the bottom line of icons. I have achieved something similar in the past, but it involved using a overlay image over top of the panel that went from transparent to the background colour. Only works if you have a solid background image, otherwise it just looks stupid.

Know would be a lot of work from your end, but would open up so many possibilities from the skin writers side. Definitely a job for if your scratching for something to do ;-) .

A GPU based solution would have some restrictions, as the gradient function is not freely definable via a texture. But as said, I can't do the DX part. This will block any changes towards such features.

I don’t suppose you could give us some details on your magic diagnostic tool so we could play with it ourselves?

It's a graphics debugger (https://renderdoc.org/).

Explained in a few steps:
- Start Kodi via Renderdoc
- Capture and select a frame
- Switch to the Texture Viewer
- Run through the draw calls in the list
- Optionally select an overlay of your choice

I'm planning on writing a tutorial.

[sarbes]

Here is a hastily written tutorial for Renderdoc: https://kodi.wiki/view/Debugging_via_Renderdoc.

I'll take a look at the other skins when I have the time.

[wyrm]

I've found a few places where you seem to use this as dummy buttons for input. Could you explain why?

Usually is a trick I use to support mouse/touch users of the skin. Move mouse over area of the screen to trigger an action. For example , move to bottom of screen to trigger a scroll on a list control. If I replaced the blank.png (very small transparent image) with just “-“ would the the trick still work and would I gain anything by doing so.

Thank you on the diagnostic tool details, will see if I can’t make use of it.

Wyrm

[roby69]

Hi
I followed the tutorial but I can't launch kodi in portable mode. How did you do?

[Chillbo]

Might you be able to take a look at the OSMC Skin I'm maintaining, @sarbes? It's not in the Kodi repo currently, but can be found on GitHub via my signature here...

[sarbes]

There is the "Command-line Arguments" field you can pass the "-p" argument to Kodi. Also keep in mind that RD will attach itself to the process which is started. This HAS to be Kodi and not a shell script.

[wyrm]

@sarbes ,

thanks for posting details and wiki for renderdoc. Have had a little play but unfortunately my system does not seem to have the ponies to handle it. I’m running the 64 bit version on my 4th gen i5 with 8G of ram and windows 10. Will running the 32 bit version be enough, or do I have to let the moths out of the wallet to make it work.

As a side note, have made your (most of) suggested changes to my skin, but can’t tell if there has been any improvement in render speed. Don’t seem to have broken anything, so that’s something I guess.

Wyrm

[jurialmunkey]

Here is a hastily written tutorial for Renderdoc: https://kodi.wiki/view/Debugging_via_Renderdoc.

I'll take a look at the other skins when I have the time.

This is amazing! Always wanted to be able to see if "improvements" I'm making aren't just a placebo!

On the topic of texture optimisation, something I've thought would be particularly useful is for diffuse textures to specify a border value.

A lot of us use diffuse textures to round the edges of posters but currently we need to make a new diffuse texture for every size/shape. If there was a border attribute for the diffuse we could essentially use one 64x64 diffuse texture with rounded corners everywhere (it would also mean it would be much simpler for pixel perfect support of different resolutions and aspects).

I know diffuse textures are small anyway because mostly white with an alpha channel but this sounds like the level of optimisation we're talking about here.