[Question] - Display Plane

[dittmarconsulting]

Hi there,

In my project I show a text that displays all information from a detected plane using the function onPlaneDetected of the ARKit component.

Is there a way to display the plane somehow?

Thanks in advance.

Cheers, Tom

[macrozone]

yes.

Store the plane in onDetectedPlane somewhere (redux or setState) and use a ARKit.Box or ARKit.Plane to display it. E.g.

<ARKit.Box
    position={position}
    shape={{
      width: 20,
      height: 0.001,
      length: 20,
    }}
  />

this does not take the extent of the plane into account, i used it to display the floor. But using extend should not be a problem.

Btw. once https://github.com/HippoAR/react-native-arkit/pull/71 is merged, you can use shaders to add gridlines or other programmed textures to planes. E.g. this shows gridlines where the colors shows whether the coordinates are positive or negative (x and z):

import { ARKit } from 'react-native-arkit'
import React from 'react'

export default ({ position }) => (
  <ARKit.Box
    position={position}
    material={{
      blendMode: ARKit.BlendMode.Screen,
      color: 'green',
      shaders: {
        [ARKit.ShaderModifierEntryPoint.Surface]: `
        float lineSize = 4;
        vec2 coord = 50*_surface.diffuseTexcoord.xy;
        vec2 grid = abs(fract(coord - 0.5) - 0.5) / fwidth(coord);
        float line = 1/lineSize*min(grid.x, grid.y);

        #pragma transparent

        vec4 posWorld = u_inverseViewTransform * vec4(_surface.position,1.0);
        bool xIsPos = posWorld.x >=0 ;
        bool zIsPos = posWorld.z >=0 ;
        vec4 pospos = vec4(1.0,0,0,1.0);
        vec4 posmin = vec4(1.0,1.0,0,1.0);
        vec4 minpos = vec4(0,0,1.0,1.0);
        vec4 minmin = vec4(0,1.0,0,1.0);
        if(xIsPos && zIsPos) {
            _surface.diffuse = pospos;
        } else if(xIsPos && !zIsPos) {
            _surface.diffuse = posmin;
        } else if(zIsPos) {
            _surface.diffuse = minpos;
        } else {
            _surface.diffuse = minmin;
        }

        _surface.transparent = vec4(vec3(1.0), 1.0 - min(line, 1.0));

        `,
      },
    }}
    shape={{
      width: 20,
      height: 0.001,
      length: 20,
    }}
  />
)

[dittmarconsulting]

That is very cool.

Thanks for the quick reply.

What would be the time frame for #71 to be merged?

[macrozone]

@dittmarconsulting i don't have merge rights yet, but i released a fork for the moment:

@panter/[email protected]

can you check if it works with that? If you install that one, you might need to readd it as a library to your project, because the path is a bit different.

[dittmarconsulting]

Hi @macrozone ,

I get the plane but it seems the displayed, flat 'ARKit.Box' is vertically positioned to the detected plan. Am I correct?

[macrozone]

@dittmarconsulting should not be the case 🤔

the box is placed at position, which is the anchor of the detected plane.

Using an actual AR.Plane would be more correct though.

[macrozone]

@dittmarconsulting still an issue or can i close this issue?