🎨 pmndrs/uikit, ui for threejs

Resources
,
1

it’s early but extremely powerful already: GitHub - pmndrs/uikit: 📱 user interfaces for react-three-fiber

buttons, text, images, icons, inputs, checkboxes, radio buttons tabs, bars, scroll, nested scroll, flexbox, borderradius, margin, padding, theming, light/dark mode. probably forgot a ton.

it’s instanced and very performant, in theory it supports a11y and perhaps also seo through role descriptions. it will run on the web, ar/vr, and native platforms.

5 Likes
2

Having this UI work in XR and non-XR is a big plus. The discrepancy of available functionality and tools between desktop and mobile; and between mobile and XR has always made me unhappy.

Also, accessibility is something a lot of people forget, unless they need it by themselves.

As for pmndrs/uikit my general concern is:

  • how noise-friendly it is – I feel uncomfortable when during some meeting I open a site that happens to have 3D stuff rendered in realtime and the fan of my notebook gets crazy
  • how battery-friendly it is – a side effect of 3D-ness is the faster battery drain, some of the 3D effects are just fancy wrapping that has no functional value, but wastes uses more resources than the actual content
1 Like
3

i think i can address your questions having talked with bela about this before

  • noise-friendly, it avoids draw calls by instancing all shapes and glyphs. even the smallest ui would otherwise yield hundreds or thousands of drawcalls but i think uikit will have 2, if i understood bela correctly.
  • battery friendly, fiber has a prop frameloop="demand" which means it renders only on changes. for instance if the user pulls orbitcontrols around. but components have to support it, uikit does not currently but he’s going to add it. of course if something in the app is constantly animating it’s basically a game loop, demand only makes sense for apps that can stand still. once it’s in it shouldn’t take anything when it rests.

i don’t know how intelligent uikit is about culling. technically i don’t think that instances can cull per item. this is something that i need to ask him.

3 Likes
4

Yes, this sounds reasonably. The programmer that uses this UI should also help it be noise and battery friendly, otherwise the UI cannot do everything by its own.