Updating to NanoVG

I have been looking for a good way to create GUI in LWJGL since I started working on the IDE, I have been using simple texture atlas with few basic renderers until now. The performance wasn’t a problem since I used batch rendering, but creating anything was a tedious task and required multiple textures to get good effects.

The best solution I have found is NanoVG.

NanoVG

First I have heard about it was December 2015, specifically a tweet by LWJGL

NanoVG is available on github memononen/nanovg and so are LWJGL’s NanoVG examples.


The screenshot immediately caught my attention, the UI looked good and the “VG” part was really interesting since it indicated is was created using vector graphics which are simple to use (if you understand how they work).

I didn’t have time to really test out NanoVG until recently, I was surprised by how easy it was to use and after converting the current code to use it the performance also increased by 50-100%, while making everything look better with little to no effort.

Old OpenGL Renderer vs NanoVG Renderer

OpenGL Renderer (left) – NanoVG Renderer (right)


Improved font quality (right)


Buttons now have gradient and rounded corners (right)


Nice scrollbars (right)

Example button

Another interesting part is how well it connected with ISS (custom CSS-like styles), changing color, adding gradient, border or rounded corners is done using basic style properties and the rest is handled by NanoVG (usually few lines of code).

I will demonstrate it with a simple button, on the left is the ISS style and on the right screenshot of the button.

.tabsButton {
}

.tabsButton {
background-gradient: 0.3;
}

.tabsButton {
background-gradient: 0.3;
border-color: 255 255 255 100;
}

.tabsButton {
background-gradient: 0.3;
border-color: 255 255 255 100;
border-round: 10;
}

.tabsButton {
color: 255 255 255 255 !1;
background-color: 0 0 0 100 !1;
background-gradient: 0.3;
border-color: 255 255 255 100;
border-round: 10;
}


Leave a Reply

Your email address will not be published. Required fields are marked *