search

aestheticinteractive / Hover-UI-Kit

Create beautiful user interfaces for immersive VR/AR experiences.
Other
787 stars 162 forks source link

Curved item renderers and layouts #49

Open ilanb opened 7 years ago

ilanb commented 7 years ago

Hi zachkinstner,

Is not a issues or bugs, I use extensivly in my VR project this plugin: https://www.assetstore.unity3d.com/en/#!/content/53258 CurvedUI with UGUI elements. Do you think is a possible to make same possibility with your kit ?

Bests,

zachkinstner commented 7 years ago

Hi @ilanb, it should be possible to do this, but it would require custom work on your side. Item renderers can be any shape, including 3D shapes, but currently the system only provides built-in support for "Rect" and "Arc" shapes.

I have previously implemented a prototype UI system where the panels are curved to fit on the surface of a sphere. So, shapes that fit on a sphere or cylinder are both on my longer-term to-do list for Hover UI Kit. Until then, if you do decide to implement your own, I can point you to some docs and code that should help you get started.

If you're asking about the combination of this plugin with Hover UI Kit, I don't know whether that will work. Hover UI Kit uses more than just a canvas (the shapes are built with custom meshes) so I doubt they would be compatible.

ilanb commented 7 years ago

Thanks for quick reply, yes I'm interested to help me with some doc and code to try to implement myself. For last part (CurvedUI) I'm not interested by a combination, I think too, there is not compatible with your kit (meshes generator). Great news that are on your longer term todo :-)

zachkinstner commented 7 years ago

@ilanb, this will be a complex task. There are a several things to do, which fall into the following groups:

  1. Create a new "shape" type (as an addition to the "Arc" and "Rect" shapes already provided) that supports curved geometry. The shape controls the size, arc, and other geometric values for use by the item renderer. This step would include writing code to generate the curved meshes, to update the various elements using the shape's properties, etc.
  2. Create "canvas elements" for item renderers (like labels and icons) that can support curvature. I'm not sure exactly how I would approach this, perhaps the plugin that you mentioned would help.
  3. Create item renderer prefabs that include the new curved shape, the meshes/geometry, and the curved canvas elements. These prefabs can be provided to an item, which would cause the item to use your new curved item renderer.
  4. Optionally: Implement a "curved shape" layout that can arrange these items automatically. Otherwise, it would be fine to size/position them manually.

This would be a very long tutorial, and hard to generalize. It would probably be faster for me to implement the feature, rather than try to document all the steps :)

Reading through the wiki pages, especially the Renderers page, would be a good start. The "shape" code is located here.