Search code examples
javascriptentityaugmented-realityaframevirtual-reality

A-Frame Relativity Component Request


On A-Frame an entity is relative to its parent. If you move the parent entity, the child moves as well. That's great. But I think it would be great if there was a way to specify an entity to be relative to another entity, that is not necessarily its parent. Even to be relative to the screen. Here's a code snippet to show what I mean:

<a-entity id="entity1" position="0 0 0">
    <a-entity id="entity2" relative = ""></a-entity> <!-- "" or "#entity1" would make it relative to "entity1". This is the way it already works, so the relative component would have "" as the default value -->
    <a-entity id="entity3" relative = "#entity4"></a-entity> <!-- This makes "entity3" relative to "entity4", not "entity1" -->
    <a-entity id="entity5" relative = "#entity1 #entity4" relativeWeight = "0.5 0.5"></a-entity> <!-- This makes "entity5" half influenced by "entity1" and half by "entity4". But it could have other values like "0.8 0.2" or "1 0"(80% affected by entity1 and 20% by entity 4, then 100% affected by entity1 and 0% by entity4) -->
</a-entity>

<a-entity id="entity4" position="0 1 0">
</a-entity>

<a-entity id="entity6" relative="Screen"> <!-- I was thinking of some special values, like "Screen", "TopScreen", "BottomScreen", to make elements be relative to the center of the screen, top, bottom, etc.  -->
</a-entity>

<a-entity id="entity7" relative="#entity5"> <!-- This entity is relative to entity5, which in turn is relative to both entity1 and entity4. In practice, this makes entity7 be indirectly affected by entity1 and entity4 as well because of entity5. -->
</a-entity>

You would then be able to animate the relativeWeight component to smoothly transition an entity's relativity to another entity.

Unity has this: https://docs.unity3d.com/Manual/Constraints.html

ZapWorks Studio has this as well: https://docs.zap.works/studio/scripting/reference/node/functions/relativeto-setter/ and https://docs.zap.works/studio/scripting/reference/node/functions/relativetoprop-setter/ .

It's an extremely useful feature I think.

An example usage of this, is having an UI that is relative to the tracking in an augmented reality experience, but if the user moves away from the tracking, the UI goes to the screen.


Solution

  • You can implement this function using this A-Frame component.

    https://github.com/diarmidmackenzie/screen-display#blend-transforms

    Instead of this syntax:

    <a-entity id="entity5" relative = "#entity1 #entity4" relativeWeight = "0.5 0.5">
    </a-entity>
    

    ...the component uses the following syntax:

    <a-entity id="entity5" blend-transforms="objectA:#entity1;
                                             objectB:#entity4;
                                             percentage: 50">
    </a-entity>
    

    Basically this does exactly what is being asked for here.

    For AR, when you want to move objects to/from the screen, this can be used in combination with the screen-display component (in the same repo) which provides a simple syntax for positioning objects on screen.