sometimes an svg layer will load 90º incorrect on one rotation axis about 3dstreet HOT 15 CLOSED

Some thoughts:

• For issue # 1 I'm guessing the grass texture in the component is overriding the user decision to remove a texture. Maybe it is better for the component to NOT add any material or only if a component property is passed to indicate that the material should be set
• For issue # 2 I am very confused as to how that happens. I can do a dump of the scene JSON before / after which might help diagnose

from 3dstreet.

For issue # 2 here is how to reproduce reliably:

• Import SVG, save -- it works OK and reloads as expected see BEFORE scene [1]
• Then change the Z scale to 0.01, then save
• Then upon reloading it has incorrect rotation parameters see AFTER scene [2]

Scene links:

1. Before https://dev-3dstreet.web.app/#/scenes/9a6651fd-363f-47d9-988c-c94a44fd1d08.json
2. Ater https://dev-3dstreet.web.app/#/scenes/20419735-f0a4-42f6-92e9-46a03b158f0f.json

BEFORE scene JSON dump that works correctly:

      {
        "components": {
          "material": "src: #grass-texture; repeat: 5 5; roughness: 1",
          "position": "-1.53846 0 0.19231",
          "scale": "0.05 0.05 0.05",
          "shadow": "",
          "svg-extruder": "svgString: [SVG DATA]"
        },
        "data-layer-name": "SVG Path • Yellow Center Lines",
        "element": "a-entity"
      }

AFTER scene JSON dump that renders incorrectly:

      {
        "components": {
          "material": "src: #grass-texture; repeat: 5 5; roughness: 1",
          "position": "-1.538 0 0.192",
          "rotation": "90 0 0",
          "scale": "0.05 0.05 0.01",
          "shadow": "",
          "svg-extruder": "svgString: [SVG DATA]"
        },
        "data-layer-name": "SVG Path • Yellow Center Lines",
        "element": "a-entity"
      }

from 3dstreet.

I notice that there are a few attributes that are "hard coded" into the svg component:

https://github.com/3DStreet/3dstreet/blob/main/src/components/svg-extruder.js#L27-L29

• Likely this is the cause of the user selected material settings not being reflected
• Unsure why but perhaps the competing attempt to set different scale values results in odd rotation behavior

from 3dstreet.

About point 1. If do not set the material in component, then the material component will not be seen in the Editor and user couldn't change it. I made the default grass and saving/loading works well. The user can remove the texture, if necessary, add color, etc.
And I also found and fixed the issue: when the user changes any material parameter, the texture settings are reset and it is not visible again. It turned out that everything can be done much simpler and avoid tricks with textures after loading it. The reason was the texture scale

from 3dstreet.

I can't reproduce issue 2. I was trying my scene and your scene also. I added check for scale editing also before editing scale to 0.05... So now scale can be saved correctly in JSON. Maybe its better to make default scale attribute to component?

from 3dstreet.

I made the default grass and saving/loading works well. The user can remove the texture, if necessary, add color, etc.

@Algorush where can I find these changes on a branch or PR?

from 3dstreet.

Sorry, I fogot to make a PR. #480

from 3dstreet.

Let's celebrate that the first issue has been resolved, yay thank you! The second is not, will write up more soon.

from 3dstreet.

Here is an example of rotation of svg entities being inconsistent as I reload the same scene over and over again:

from 3dstreet.

One hypothesis is that there are race conditions going on with rotation being set multiple times. For example perhaps the svg is rendered at rotation x1 y1 z1 in three.js and then a-frame attempts to apply a transformation for rotation, but maybe sometimes a-frame applies the transformation before the svg rotation is applied or vice versa resulting in inconsistent conditions

from 3dstreet.

Note the similarity to the error in this case: nytimes/aframe-loader-3dtiles-component#34

Sometimes the tiles were 90º incorrect, sometimes correct. Again a situation where perhaps three.js is doing its own thing and maybe a-frame sometimes applies a transformation before the other or vice versa

from 3dstreet.

maybe remove this line?
https://github.com/3DStreet/3dstreet/blob/main/src/components/svg-extruder.js#L80

and instead set rotation using a-frame component property?

from 3dstreet.

yes, now I see it. The rotation transformation is applied twice when loading a scene. The first time the rotation is applied is from the component code, and the second is from the saved JSON data. Possible solution - apply transformation for geometries (not for Mesh) before adding to Mesh (trying to do this). And another quick solution - don't applying any transformations in component

from 3dstreet.

After last PR #482 with fixes it seems that rotation issue is gone. But for previous saved JSON scenes using svg-extruder to work correctly, you need to manually remove the scale and rotation values for extruded element in JSON. Or change them in the editor - scale: 1 1 1, rotation: 0 0 0. Now these values ​​are set for the geometry before adding it to the Mesh. Also made centering geometry more efficient.
There is one problem - when changing the depth parameter for svg-extruder, the material disappeared... I don’t know yet how to fix this. It might be best to disable this option for now.

from 3dstreet.

resolved by #482

from 3dstreet.