Add ability to add networked entity to non-networked parent

[Agupta00]

What

From my understand there is no way to add a networked entity to a specific part in the DOM unless the networked entity has a networked parent. The way to work around this behavior is to create a nested list of networked components that are "no-ops" (ie don't sync any data), but this doesn't seem ideal API wise.

An example use case of why this feature may be beneficial is, I have a platform in my scene that I want entities to spawn to, but I don't want to have the platform itself have a networked component. You can imagine that this platform is deeply nested in my a-cene.

For example: The entity two here will end up as a child of the 'a-scene`.

my client:

<a-scene>
     ....... //a bunch of other parents
       <a-entity id="one" platform>
            <a-entity id="two" networked/>
       </a-entity>
</a-scene>

other client:

<a-scene>
       <a-entity id="one" platform>
            <a-entity id="two" networked/>
            // WANT IT ADDED HERE 
       </a-entity>
       // ADDED HERE
        <a-entity id="two" networked/>
</a-scene>

This can be done pretty easily it looks like from the current logic by adding another attribute to the networked component. Something like attachToNonNetworkedParent which if specified adds the networked component to the right place in the DOM using its parent's id to find who the parent in the other clients scene is.

Let me know if this sounds good, and I can look into sending a PR :)

[vincentfretin]

Your example is very abstract, so I'm not sure what you propose is really needed for your use case. Do you have dynamic number of children entities or is this a static number of children? If it's dynamic, your proposition may make sense. If not usually you can add networked component on a root parent and with a networked template that use selector you can sync only a child or even a grandchild properties.

Anyway feel free to experiment, if you have a change in the code that is not too complex with an example, we can discuss on the PR and see if we merge it or not.

[Agupta00]

Thank you for your response. Here is an example if it makes it more clear. Perhaps there is a better way to do things in NAF?

// html

<!-- Copyright (c) 2022 8th Wall, Inc. -->

<a-scene
  networked-scene="debug: true; connectOnLoad: false;"
  >
  
  <a-assets>
    <template id="portal-template">
      <a-entity image-target-portal="name: portal"></a-entity>
    </template>

    <template id="offset-template">
      <a-entity id="offset" position="0 -.7 0"></a-entity>
    </template>

    <template id="avatar-template">
      <a-entity
        class="avatar"
        random-color
        character-animation
        gltf-model="#robot_model"
        scale="0.08 0.08 0.08"
        shadow>
      </a-entity>
    </template>
  </a-assets>
  
  <a-camera id="camera" position="0 1 0.5" rotation="-20 0 0"></a-camera>
  
  <a-entity id="img-portal" networked="template:#portal-template"> //1

    <a-entity id= "offset" networked="template:#offset-template"> //2
        <a-entity
          id="character"
          position="0 0 -0.5"
          character-input
          networked="template:#avatar-template" //3 
          >
        </a-entity>
  
      <a-entity gltf-model="#sky"></a-entity>
      
    </a-entity>

  </a-entity>
  
</a-scene>

//js

const addNAFSchemas = () => {
  NAF.schemas.add({
    template: '#avatar-template',
    components: [
      'position',
      'rotation',
      'random-color',
    ],
  })

  NAF.schemas.add({
    template: '#portal-template',
    components: [
      // We don't want to sync the position and rotation of portal-template. The portal template is
      // used to translate the robot positions to where the image target is in the world.
      // Position and rotation are added by default if we don't include a template, but since
      // we don't include position and rotation in this custom template, they are not synced.
      // 'position',
      // 'rotation',
      'unused',  // We have to include a field here otherwise NAF will give us an undefined error.
    ],
  })

  NAF.schemas.add({
    template: '#offset-template',
    components: [
      // 'position',
      // 'rotation',
      'unused',
    ],
  })
}

addNAFSchemas()

You can see here I am adding nested networked components just so my "avatar" can end up as a child of id=offset.

My proposal is instead to add attachToElementId on the avatar networked component so it knows where to end up in another client's scene.

        <a-entity
          id="character"
          position="0 0 -0.5"
          character-input
          networked="template:#avatar-template; attachToElementId: offset" ///<------ (tell it who to end up as a child off)
          >
        </a-entity>

[Agupta00]

Also I am trying to create a pull request but when I run:

git push origin master

I get:

remote: Permission to networked-aframe/networked-aframe.git denied to Agupta00.
fatal: unable to access 'https://github.com/networked-aframe/networked-aframe.git/': The requested URL returned error: 403

Do you know what the fix here is by chance?

I can succesfully run this:

ssh -T git@github.com

Hi Agupta00! You've successfully authenticated, but GitHub does not provide shell access.

[vincentfretin]

The https url is different from the ssh url. If the ssh works, then use the ssh url: git@github.com:networked-aframe/networked-aframe.git

[vincentfretin]

Your example appears to be complex to just sync just 'position', 'rotation', 'random-color' of the avatar indeed. Not sure what your random-color component is, but it may be the wrong thing to sync, maybe you want to sync geometry color instead but that's a different issue.

Did you look at using a template with selector? See documentation
https://github.com/networked-aframe/networked-aframe#syncing-custom-components
You shouldn't need a template and empty schema like that.
Something like that (I may have overly simplified your example because I don't understand what are all those entities are for but I hope you get the idea):

<a-scene
  networked-scene="debug: true; connectOnLoad: false;"
  >
  
  <a-assets>
    <template id="avatar-template">
      <a-entity image-target-portal="name: portal">
        <a-entity class="offset" position="0 -.7 0"> // I changed id="offset" by class="offset" here
          <a-entity
            class="avatar"
            random-color
            character-animation
            gltf-model="#robot_model"
            scale="0.08 0.08 0.08"
            shadow>
          </a-entity>
        </a-entity>
      </a-entity>
    </template>
  </a-assets>
  
  <a-camera id="camera" position="0 1 0.5" rotation="-20 0 0"></a-camera>
  
  <a-entity id="img-portal" networked="template:#avatar-template"></a-entity>
  
</a-scene>

const addNAFSchemas = () => {
  NAF.schemas.add({
    template: '#avatar-template',
    components: [
      {
        selector: '.avatar',
        component: 'position'
      },
      {
        selector: '.avatar',
        component: 'rotation'
      },
      {
        selector: '.avatar',
        component: 'random-color'
      },
    ],
  })
}

addNAFSchemas()

[Agupta00]

Hmm, is there a security setting that might need to be changed on the repo? Maybe you could add me as a contributor? I have tried the ssh url from two different computers but have not been able to run git push -u origin master. I can however successfully run ssh -T git@github.com and run git push -u origin master on a repo that I own.

In regards to the example, yes I have seen selectors. However the complexity isn't around syncing childeren. It comes from the issue that the childeren are added to the root scene (unless there is a networked parent). From this logic: https://github.com/networked-aframe/networked-aframe/blob/master/src/NetworkEntities.js#L128

Anyways it might be easier if I open a PR :)

[vincentfretin]

Creating a fork and opening a PR is the way to go yes.

It comes from the issue that the childeren are added to the root scene (unless there is a networked parent).

What you said is right. But for your use case is this really an issue? If you do something like I described in #400 (comment) doesn't it work properly? It's not obvious to me that your really need something else. If you create a runnable example on glitch, I may understand it better.