Custom User Interfaces with Skia

Rhino Developer
1

Hey Developers,

Almost three years ago I shared some experiments with
Custom UI Elements with Eto.Forms.

A lot has happened since.

We’re launching April 21st and sign ups are open at https://jifto.com/
You can see the changelog here: Changelog | jifto

This post is about the UI side of things, since that’s what the original thread was about.

Eto served us well for the early prototypes, but we hit a ceiling. Redrawing a complex panel at 60 fps with Drawable was eating CPU and dropping frames once you had a few animated controls on screen.

I rewrote the entire control library from scratch using SkiaSharp rendering to an OpenGL surface. Every control - buttons, sliders, dropdowns, gradients, charts, the HUD - is drawn with Skia. This gave us GPU-accelerated rendering across the whole interface, 60FPS refresh, and full control over layout and animation without fighting a framework.

What it looks like in practice


Sliders drive the analysis live - no “Apply” button.


Preset buttons with visual feedback.


Animated transitions when switching tabs.


HUD legend and overlays drawn with the same Skia pipeline as the panel.


Context-sensitive controls that adapt to the current workflow.


A dedicated panel which only appears when you need it and adapts its context to your work.


Live metrics when simulations run async


One-click gradient preset switching.


Micro-interactions adding the final polish.

Happy to answer any questions about the controls, the rendering approach, or the migration from Eto to Skia.

Tagging a few people, who expressed interest in custom UIs in the past.
@DavidRutten, @AndersDeleuran, @aramon, @lando.schumpich, @mlukasz87, @matteo1, @Felipe_Penagos, @maxsoder, @Holo, @johannavarro.art, @D-W, @jordanmathers.jm

25 Likes
2

Tagging more people:
@agi.andre, @RdK, @kitjmv, @Gijs, @Michael_H, @benjamin.moulton, @luc.nadibaidze, @johannavarro.art, @zhuangjia777, @wim, @Philip3, @felixmariotto, @Czaja, @rowen1124 @CallumSykes

2 Likes
3

This is some seriously clean UI work @mrhe, thanks for the @ :slight_smile:

You were using nested drawables before iirc and thats what got you hitting a ceiling? Or did you try 1 drawable in the same way here you have 1 SkiaSharp control?

1 Like
4

Thanks @CallumSykes!

Yes, these were multiple nested drawables with a lot of animations and transitions on each of them. I built the new UI with a single ‘parent’ control dispatching events to all the ‘children’ controls nested inside of it. In hindsight, this would have been possible with Eto.Drawable but I still find Skia more attractive for several reasons:

  1. hardware acceleration
  2. lower level access to various drawing methods
  3. ability to use OpenGL shaders for fancy effects. The background gradients on the panel use custom distortion shaders to make them look less uniform and transition into each other during tab switches

I really like the flexibility this pipeline provides. I finally don’t feel limited by any existing UI controls and can create custom interactions based on user feedback.
It was my 4th UI library written from scratch and I keep learning more tricks each time. Number 5 is probably inevitable some time in the future :wink:

1 Like
5

Couldn’t agree more. I’ve used this approach (within drawables) for my new toolbar work and this is also how GH2 works.

2 Likes
6

Any chance this lovely library will be available for others? :smiling_face_with_sunglasses:

7

If there is enough interest, I could open source it. But the highest priority right now is launching the plugin :slight_smile:

2 Likes
8

I’m looking forward to playing with it!

9

It looks like something I’ve already done :wink:

10

Your work on the radial menu was an inspiration to explore this path, @Tigrou

11

Beautiful work! Thanks for sharing.

1 Like
12

Migration to Skia was worth every effort. I’m honored to work together with @mrhe utilizing his Skia framework inside Rhino with all those fancy controls, and I have to admit that this solution is elegant from every side, UI/UX, and dev. Definitely, the biggest pro of this solution is lower-level access, allowing effortless expansion of controls to current needs.

1 Like
13

Hello @mrhe !

I’ve heard of Skia before, but I’ve never used it. Have you ever used ImGui? If so, what are the differences between ImGui and Skian?

14

Hey @kitjmv,

think of Skia as one level lower than ImGui. It doesn’t have a concept of a Button, Slider, etc. But it gives you a canvas and a toolbox to draw all the shapes you can imagine. It is much more flexible in this regard. In exchange for the artistic freedom, you have to manage the interaction logic and respond to all events (hover, click, mouse leave, etc.).

Skia also only redraws pixels when needed, while ImGui redraws everything every frame. This requires state management, which ImGui simplifies.

It’s definitely not for everyone. I believe Avalonia is built on top of Skia and comes with a lot of syntactic sugar to flatten the learning curve.

15

For my part, I’ve only tested two solutions that offer the flexibility I’m looking for: ImGui and HTML/WebGL/Canvas.

I’m impressed by the results you’ve achieved. Your message makes me want to try Skia… Ah! If only there were more hours in a day!
(Note: Imgui is not documented, but it is indeed a 2D drawing library with user interaction that does not require redrawing each frame. However, Skia seems much more complete and documented.)

I’ve followed your projects on this forum for years. You undertook this development to meet professional needs, and I’m certain that the launch of your plugin will be very well received by professionals in your field. It’s a long-term project! Congratulations!
In this article, you present analytical tools; have you also incorporated other research: sculpture, interactive maps, etc.?

16

Thanks for the kind words @kitjmv! jifto is a passion project and I’m looking forward to opening it up to the community.

Yes, interactive maps are already part of it.

This is the very first user interaction to define the site area and automatically download all the necessary data:

  1. Buildings
  2. Terrain
  3. Trees
  4. Land use
  5. Historical weather data
  6. Future climate projections

Mesh sculpting will be added soon as part of the wider set of terrain modelling tools.

4 Likes
17

Wow! You’ve integrated 3D import! I hadn’t noticed that! (Cesium, Google 3DMap?)

18

Looks great @mrhe , but I’m sitting behind my screen wanting to turn off the “edges” of mesh display so bad there :wink:

19

Yes! I could weld the meshes at 10 degrees and instantly the meshes would ‘look’ cleaner. But I want to fix the root cause and hence keep the edges on so that I’m equally annoyed as you are each time I look at them :wink:

2 Likes
20

This looks great; thanks for sharing. I’ve always wanted to provide an Eto.Drawing layer on top of skia, but all those other projects I work on always get in the way.