Transforming widgets with a widget-centered vanishing point.

Transforming widgets with a widget-centered vanishing point.

- in Widgets
103
Comments Off on Transforming widgets with a widget-centered vanishing point.

Image result for Transforming widgets with a widget-centered vanishing point.

I’m trying to create a GUI system inspired by Apples UIView architecture.  For those unfamiliar with it, a “UIView” is Apples version of a widget.  Each widget can be transformed with a 4×4 matrix.  Its transformation effects its children, its children’s children, and so on down the hierarchy.

The problem I’m running into is a perspective problem: Each widget must transform with a vanishing point located at its center. The following two gifs show what I mean.
[table] [tr] [th]Incorrect[/th] [th]Correct[/th] [/tr] [tr] [td]The buttons in this gif use the center of the screen as their vanishing point.[/td] [td]The buttons in this gif use their own center as the vanishing point (this is the expected behavior).[/td] [/tr] [tr] [td][attachment=36013:buttons_bad.gif][/td] [td][attachment=36015:buttons_good.gif][/td] [/tr] [/table]

Here is how I’m moving the vanishing point now:

  • Start with an upright button whose vertices are centered around the origin.
  • Apply a rotation matrix to them.
  • Apply a translation matrix to move them forward so they are centered in front of the eye.
  • Apply a perspective matrix to transform them to clipspace.
  • Translate the X,Y clipspace coordinates moving the button to the lower-right corner of the dialog box.

The problem with this solution is it doesn’t account for the parents transformation.  In my gif examples the dialog box is the parent of the buttons.

[table] [tr] [td]The following gif shows the expected behavior of a rotation applied exclusively to the dialog box.[/td] [td]Now imagine the dialog rotating, but this time with the buttons transformed and in the perspective depicted below. That’s the behavior I need.[/td] [/tr] [tr] [td][attachment=36014:dialog_good.gif][/td] [td][attachment=36016:rotation.png][/td] [/tr] [/table]
[“Source-ndtv”]