geometry primitive undefined so fallback to box

[vincentfretin]

Description:

• A-Frame Version: 0.9.0
• Platform / Device: Chrome on desktop
• Reproducible Code Snippet or URL:

I have simple code that do

const plane = document.createElement("a-plane");
plane.setAttribute("height", 0.196);
plane.setAttribute("width", 0.196);
AFRAME.scenes[0].appendChild(plane)

initially it shows a plane, now if I remove the plane element AFRAME.scenes[0].removeChild(plane) and recreate it, it will take an object from the pool and it will sometime show a box instead of a plane. Somehow I get "primitive: undefined" in the object.

Putting a console.log(this.attrValue, this.data) in src/core/component.js initComponent, I get initially

attrValue: {width: "0.196", height: "0.196", primitive: "plane"}
data: {
  buffer: true
  height: 0.196
  primitive: "plane"
  segmentsHeight: 1
  segmentsWidth: 1
  skipCache: false
  width: 0.196
}

and if it take an existing object from the pool (when I remove plane and recreate it), I can get this:

attrValue: {width: "0.196", height: "0.196", primitive: undefined}
or attrValue: {height: "0.196", width: "0.196", primitive: undefined, buffer: undefined, skipCache: undefined, …}
data: {
  buffer: true
  depth: 1
  height: 0.196
  primitive: "box"
  segmentsDepth: 1
  segmentsHeight: 1
  segmentsWidth: 1
  skipCache: false
  width: 0.196
}

and other time:
{radius: undefined, width: 0.196, height: 0.196, primitive: "plane", buffer: true, …}
triggering a warning:
core:schema:warn Unknown property radius for component/system geometry. see #4012 for this one.

Now If I change the implementation of clearObject to delete the keys:
for (key in obj) { delete obj[key]; }
all the issues goes away.

The issue comes from the commit
6deaea0
from the component.js file. I tested master with the component.js file before this commit and I don't have the issue. The PR #4016 doesn't fix the issue.

[vincentfretin]

You can reproduce the issue like this
Go to https://aframe.io/aframe/examples/boilerplate/hello-world/
Open the console:

var plane = document.createElement('a-plane')
plane.setAttribute('position', "-3 0 -3")
plane.setAttribute("material", "color:red")
plane.setAttribute("geometry", "width:1; height:1")

AFRAME.scenes[0].appendChild(plane)
plane.components["geometry"].attrValue
// {width: "1", height: "1", primitive: "plane"}
// a red plane is shown on the left

plane.removeAttribute("geometry")  // trigger some objPool.recycle
plane.setAttribute("geometry", "width:1; height:1")  // will reuse an object from the pool with primitive: undefined in it
plane.components["geometry"].attrValue
// {width: "1", height: "1"}
// a red box is shown on the left

[vincentfretin]

I spend several hours with console.log and Chrome debugging trying to understand why it won't default to use primitive: plane if there is already a primitive:undefined in the object with no success. I don't know where primitive is set to plane initially.

[vincentfretin]

Actually no this code doesn't really trigger the real issue. The code works the same on aframe 0.8.2, showing a box. This is somewhat normal because when creating a-plane, geometry component is initialized with primitive:"plane", if I remove the geometry component and set it myself, it's normal primitive is not defined.

It's really hard to give you a code that can really reproduce the issue.
As far as I understand it, the issue is that sometime at a-plane creation, primitive: "plane" is not set if an object from the pool had primitive: undefined.

[antoniohof]

workaround:
If you set geometry attribute manually, it fixes this error.

After creating your a-plane, do this:
plane.setAttribute('geometry', 'primitive: plane')

[vincentfretin]

@antoniohof Thanks, yes I did find this workaround. I can modify about 20 places in my code to add the geometry primitive, sure, no biggie.
But I assume the issue can be reproduced by writing html tags <a-plane...> as well.
Am I the only one having this issue?

[antoniohof]

I am having this issue too.
Same as this?
supermedium/aframe-react#57