Fix PanelAttachable transformations.

Apply the offsetPosition of the PanelAttachable after the facingRotation
of the FloatingUIPanel, not before.

examples/controlPanel.js

@@ -26,7 +26,8 @@ var panel = new FloatingUIPanel({
     anchorPosition: {
         bind: "myAvatar"
     },
-    offsetPosition: { x: 0, y: 0.4, z: 1 }
+    offsetPosition: { x: 0, y: 0.4, z: 1 },
+    facingRotation: { w: 0, x: 0, y: 1, z: 0 }
 });
 
 var background = new BillboardOverlay({
@@ -51,9 +52,9 @@ var closeButton = new BillboardOverlay({
     alpha: 1.0,
     ignoreRayIntersection: false,
     offsetPosition: {
-        x: -0.1,
+        x: 0.1,
         y: 0.1,
-        z: -0.001
+        z: 0.001
     }
 });
 closeButton.onClick = function(event) {
@@ -77,9 +78,9 @@ var micMuteButton = new BillboardOverlay({
     alpha: 1.0,
     ignoreRayIntersection: false,
     offsetPosition: {
-        x: 0.1,
+        x: -0.1,
         y: 0.1,
-        z: -0.001
+        z: 0.001
     }
 });
 micMuteButton.onClick = function(event) {
@@ -103,9 +104,9 @@ var faceMuteButton = new BillboardOverlay({
     alpha: 1.0,
     ignoreRayIntersection: false,
     offsetPosition: {
-        x: 0.1,
+        x: -0.1,
         y: -0.1,
-        z: -0.001
+        z: 0.001
     }
 });
 faceMuteButton.onClick = function(event) {
@@ -129,9 +130,9 @@ var addressBarButton = new BillboardOverlay({
     alpha: 1.0,
     ignoreRayIntersection: false,
     offsetPosition: {
-        x: -0.1,
+        x: 0.1,
         y: -0.1,
-        z: -0.001
+        z: 0.001
     }
 });
 addressBarButton.onClick = function(event) {

examples/example/ui/floatingUIExample.js

@@ -23,11 +23,12 @@ var mainPanel = new FloatingUIPanel({
         bind: "quat",
         value: { w: 1, x: 0, y: 0, z: 0 }
     },
-    offsetPosition: { x: 0, y: 0.4, z: 1 }
+    offsetPosition: { x: 0, y: 0.4, z: 1 },
+    facingRotation: { w: 0, x: 0, y: 1, z: 0 }
 });
 
 var bluePanel = mainPanel.addChild(new FloatingUIPanel ({
-    offsetPosition: { x: 0.1, y: 0.1, z: -0.2 }
+    offsetPosition: { x: 0.1, y: 0.1, z: 0.2 }
 }));
 
 var mainPanelBackground = new BillboardOverlay({
@@ -42,7 +43,7 @@ var mainPanelBackground = new BillboardOverlay({
     offsetPosition: {
         x: 0,
         y: 0,
-        z: 0.001
+        z: -0.001
     }
 });
 
@@ -55,6 +56,34 @@ bluePanelBackground.dimensions = {
 mainPanel.addChild(mainPanelBackground);
 bluePanel.addChild(bluePanelBackground);
 
+var textWidth = .5;
+var textHeight = .1;
+var numberOfLines = 2;
+var textMargin = 0.00625;
+var lineHeight = (textHeight - (2 * textMargin)) / numberOfLines;
+
+var text = mainPanel.addChild(new Text3DOverlay({
+    text: "TEXT",
+    isFacingAvatar: true,
+    alpha: 1.0,
+    ignoreRayIntersection: false,
+    offsetPosition: {
+        x: -0.15,
+        y: -0.15,
+        z: 0
+    },
+    dimensions: { x: textWidth, y: textHeight },
+    backgroundColor: { red: 0, green: 0, blue: 0 },
+    color: { red: 255, green: 255, blue: 255 },
+    topMargin: textMargin,
+    leftMargin: textMargin,
+    bottomMargin: textMargin,
+    rightMargin: textMargin,
+    lineHeight: lineHeight,
+    alpha: 0.9,
+    backgroundAlpha: 0.9
+}));
+
 var redDot = mainPanel.addChild(new BillboardOverlay({
     url: RED_DOT_IMAGE_URL,
     dimensions: {
@@ -149,7 +178,7 @@ function onMouseUp(event) {
                 var newPos = {
                     x: Number(oldPos.x),
                     y: Number(oldPos.y),
-                    z: Number(oldPos.z) + 0.1
+                    z: Number(oldPos.z) - 0.1
                 };
                 overlay.offsetPosition = newPos;
             }

examples/libraries/overlayManager.js

@@ -94,7 +94,6 @@
     OverlayManager = {
         findOnRay: function(pickRay, knownOverlaysOnly, searchList) {
             var rayPickResult = Overlays.findRayIntersection(pickRay);
-            print("raypick " + rayPickResult.overlayID);
             if (rayPickResult.intersects) {
                 return findOverlay(rayPickResult.overlayID, knownOverlaysOnly, searchList);
             }
@@ -102,7 +101,6 @@
         },
         findAtPoint: function(point, knownOverlaysOnly, searchList) {
             var foundID = Overlays.getOverlayAtPoint(point);
-            print("at point " + foundID);
             if (foundID) {
                 return findOverlay(foundID, knownOverlaysOnly, searchList);
             } else {
@@ -270,7 +268,7 @@
         generateOverlayClass(Planar3DOverlay, "text3d", [
             "text", "backgroundColor", "backgroundAlpha", "lineHeight", "leftMargin", "topMargin",
             "rightMargin", "bottomMargin", "isFacingAvatar"
-        ]);
+        ].concat(PANEL_ATTACHABLE_FIELDS));
 
         generateOverlayClass(Volume3DOverlay, "cube", [
             "borderSize"
@@ -443,7 +441,6 @@
     function onPanelDeleted(id) {
         if (id in panels) {
             panels[id]._children.forEach(function(child) {
-                print(JSON.stringify(child.destroy));
                 child.destroy();
             });
             delete panels[id];

interface/src/ui/overlays/BillboardOverlay.cpp

@@ -43,8 +43,7 @@ void BillboardOverlay::setTransforms(Transform& transform) {
     PanelAttachable::setTransforms(transform);
     if (_isFacingAvatar) {
         glm::quat rotation = Application::getInstance()->getCamera()->getOrientation();
-        rotation *= glm::angleAxis(glm::pi<float>(), IDENTITY_UP);
-        setRotation(rotation);
+        transform.setRotation(rotation);
     }
 }
 
@@ -101,6 +100,7 @@ void BillboardOverlay::render(RenderArgs* args) {
     setTransforms(_transform);
     Transform transform = _transform;
     transform.postScale(glm::vec3(getDimensions(), 1.0f));
+    transform.postRotate(glm::angleAxis(glm::pi<float>(), IDENTITY_UP));
 
     batch->setModelTransform(transform);
     batch->setResourceTexture(0, _texture->getGPUTexture());

interface/src/ui/overlays/PanelAttachable.cpp

@@ -15,6 +15,7 @@
 
 PanelAttachable::PanelAttachable() :
     _attachedPanel(nullptr),
+    _offsetPosition(0, 0, 0),
     _facingRotation(1, 0, 0, 0)
 {
 }
@@ -30,8 +31,9 @@ void PanelAttachable::setTransforms(Transform& transform) {
     if (getAttachedPanel()) {
         transform.setTranslation(getAttachedPanel()->getAnchorPosition());
         transform.setRotation(getAttachedPanel()->getOffsetRotation());
-        transform.postTranslate(getOffsetPosition() + getAttachedPanel()->getOffsetPosition());
+        transform.postTranslate(getAttachedPanel()->getOffsetPosition());
         transform.postRotate(getFacingRotation() * getAttachedPanel()->getFacingRotation());
+        transform.postTranslate(getOffsetPosition());
     }
 }
 

interface/src/ui/overlays/PanelAttachable.h

@@ -23,12 +23,12 @@ public:
     PanelAttachable(const PanelAttachable* panelAttachable);
 
     FloatingUIPanel::Pointer getAttachedPanel() const { return _attachedPanel; }
-    glm::vec3 getOffsetPosition() const { return _offsetPosition; }
-    glm::quat getFacingRotation() const { return _facingRotation; }
+    virtual glm::vec3 getOffsetPosition() const { return _offsetPosition; }
+    virtual glm::quat getFacingRotation() const { return _facingRotation; }
 
     void setAttachedPanel(FloatingUIPanel::Pointer panel) { _attachedPanel = panel; }
-    void setOffsetPosition(const glm::vec3& position) { _offsetPosition = position; }
-    void setFacingRotation(const glm::quat& rotation) { _facingRotation = rotation; }
+    virtual void setOffsetPosition(const glm::vec3& position) { _offsetPosition = position; }
+    virtual void setFacingRotation(const glm::quat& rotation) { _facingRotation = rotation; }
 
     QScriptValue getProperty(QScriptEngine* scriptEngine, const QString& property);
     void setProperties(const QScriptValue& properties);