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: ][/td] [td][attachment=36015: ][/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: ][/td] [td][attachment=36016: ][/td] [/tr] [/table]