Shapes

[macrozone]

fixes #80

adds basic support for shapes. A shape is a path that gets extruded. You can use svg to define the path. It uses https://github.com/pocketsvg/PocketSVG under the hood.

Also adds scale property for every geometry.

E.g:

<ARKit.Shape
        position={{ x: 0, y: 0, z: 0 }}
        eulerAngles={{
          x: Math.PI,
        }}
        scale={0.01}
        shape={{
          pathSvg: `
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <path d="M50,30c9-22 42-24 48,0c5,40-40,40-48,65c-8-25-54-25-48-65c 6-24 39-22 48,0 z" fill="#F00" stroke="#000"/>
          </svg>`,
          pathFlatness: 0.1,
          chamferRadius: 5,
          chamferProfilePathSvg: `
            <path d="M.6 94.4c.7-7 0-13 6-18.5 1.6-1.4 5.3 1 6-.8l9.6 2.3C25 70.8 20.2 63 21 56c0-1.3 2.3-1 3.5-.7 7.6 1.4 7 15.6 14.7 13.2 1-.2 1.7-1 2-2 2-5-11.3-28.8-3-30.3 2.3-.4 5.7 1.8 6.7 0l8.4 6.5c.3-.4-8-17.3-2.4-21.6 7-5.4 14 5.3 17.7 7.8 1 .8 3 2 3.8 1 6.3-10-6-8.5-3.2-19 2-8.2 18.2-2.3 20.3-3 2.4-.6 1.7-5.6 4.2-6.4"/>
          `,
          extrusion: 10,
        }}
      />
    </ARKit>

not every svg spec is supported. Paths like above work best. Basic elements like circle and rectangle should work as well. If there are multiple paths in the svg, they get concatinated.

If the svg does not render properly, try to use https://jakearchibald.github.io/svgomg/ to simplify the svg. Als try experimenting with the Precision in svgom. Setting it too low might also cause some paths to not show up.

Most svg are in pixel coordinates, so they will render very large on arkit (arkit 1 unit = 1 meter). Use the new scale-property to scale it down. Don't try to scale down the sizes in the svg, because there is a lower limit for how precise the svg will get rendered. Also experiment with different float values for pathFlatness (defaults to 0.6). See also this comment: https://stackoverflow.com/questions/28597275/how-to-set-the-level-of-detail-smoothness-subdivision-rate-for-scnshape#comment76976130_28600934

Additionally, you can specify chamferRadius and chamferProfileSvgPath. chamferProfileSvgPath takes a svg which should describe a path from [1,0] to [0, 1]. It will be scaled to 1 if its larger or smaller than this. See the chamferProfileSvgPath in action in the image below.

TODO:

• add all properties of SCNShape
• rename path property to svg or similar
• find a good way to include PocketSVG dependency

I could need some advice on the last point. I did not want to add https://github.com/pocketsvg/PocketSVG through cocoapods, because i don't know how that works properly on a library project that might get used without cocoapods. Instead i added it to package.json as a "fake package": "_PocketSVG": "https://github.com/pocketsvg/PocketSVG"

this will download the package into node_modules on install and can be added as library project. However adding it needs some additional step and i managed to get it work, but i am unsure what's the best practise.

NEW: with chamferProfile:

[macrozone]

react 0.50 might get better support for cocoapods: facebook/react-native@74146cb