Incorrect shadow and light handling (broken shadows)

[zsolitech]

Hi! First of all thanks for this nice framework!

At the basic level, there is a large plane and a cube, everything goes well in the "minimal A Frame" demo. I put this under Mind AR and the shadows are messed up.

If I try to do with Mind AR: -There is no shadow in the case of directional light. -In the case of point light, if I set certain parameters irrationally high, some ugly shadow appears, otherwise nothing.

Looking at your code, you control the camera matrix directly in the scene, according to my guess, the shadow and light management module is not in sync with this, so it gets messed.

Based on experiments, everything is too big, so in the case of a 3D engine, the unit is 1 meter. If I hold the marker about 30 cm from the camera, I expect a distance of 0.3, but instead it is about 3000. The large size may also be correlated to the original pixel resolution of the marker, 2000-3000 pixels, I don't know.

I think the shadow rendering is optimized for a range of 10-100 meters and also uses the parameters from the camera. According to my assumption, direct matrix overwriting also affects shadow management.

Source code snippet with directional light source, no shadows visible:

<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
<a-entity id="example-target" mindar-image-target="targetIndex: 0">
        <a-box position="0 0 0.2" rotation="0 0 0" color="#4CC3D9" scale="0.1 0.1 0.1" shadow="cast:true; receive:true;"></a-box>
        <a-plane position="0 0 0" rotation="0 0 0" width="10" height="10" color="#FFFFF" shadow="cast:true; receive:true;"></a-plane>
        <a-entity light="type:directional; castShadow:true;" position="1 1 5"></a-entity>
</a-entity>

Source code snippet with point light source, distance parameter is huge: 100000, has shadows, but is highly pixelated:

<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
<a-entity id="example-target" mindar-image-target="targetIndex: 0">
        <a-box position="0 0 0.2" rotation="0 0 0" color="#4CC3D9" scale="0.1 0.1 0.1" shadow="cast:true; receive:true;"></a-box>
        <a-plane position="0 0 0" rotation="0 0 0" width="10" height="10" color="#FFFFF" shadow="cast:true; receive:true;"></a-plane>
        <a-entity light="type: point; intensity: 0.75; distance: 100000; castShadow:true;" position="1 1 5"></a-entity>
</a-entity>

I am also attaching some pictures. What could be done? Note: The white plane is on purpose large enough to obscure the real webcam image, so don't be confused.

Directional light in A Frame inspector mode:

Point light in A Frame inspector mode:

[zsolitech]

This workaround seems to work: Mr. @hiukim do you have an idea?

    <a-entity light="type: ambient; intensity: 0.5;"></a-entity>

    <a-entity id="example-target" mindar-image-target="targetIndex: 0">
      <a-light 
      id="light"
      type="directional" position="0 1 1" rotation="0 0 0"
      target="#directionaltarget"
      light="
        type: directional;
        castShadow: true;
        intensity: 0.4;
        shadowBias: -0.0005;
        shadowMapHeight: 2048;
        shadowMapWidth: 2048;
        shadowCameraFar: 5000;
        shadowCameraLeft: -2000;
        shadowCameraRight: 2000;
        shadowCameraTop: 2000;
        shadowCameraBottom: -2000;
        shadowCameraVisible: false;
        shadowRadius: 8;
      "></a-light>
      <a-entity id="directionaltarget" position="0.1 0 -1"></a-entity>
      <a-box position="0 0 0.2" rotation="0 0 0" color="#4CC3D9" scale="0.1 0.1 0.1" shadow="cast:true; receive:true;"></a-box>
        <a-plane position="0 0 0" rotation="0 0 0" width="10" height="10" color="#FFFFF" shadow="cast:true; receive:true;"></a-plane>
    </a-entity>

[hiukim]

I don't know for sure. my two cents: yes I think It's possible that because the camera matrix is very unusual and the distance of the augmented objects is of a different magnitude than the one expected for the shadow so it got weird pixelation.