AR-js-org / AR.js

Image tracking, Location Based AR, Marker tracking. All on the Web.
MIT License
5.43k stars 925 forks source link

If you move away from the NFT, the object will not be visible even if tracking is working. #377

Closed sinano1107 closed 2 years ago

sinano1107 commented 2 years ago

Do you want to request a feature or report a bug? bug

What is the current behavior?

<!DOCTYPE html>
<head>
    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
</head>

<style>
    .arjs-loader {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .arjs-loader div {
        text-align: center;
        font-size: 1.25em;
        color: white;
    }
</style>

<body style="margin: 0px; overflow: hidden;">
    <div class="arjs-loader">
        <div>ローディング</div>
    </div>

    <a-scene
        vr-mode-ui="enabled: false;"
        renderer="antialias: true; logarithmicDepthBuffer: true; colorManagement: true; sortObjects: true;"
        embedded
        arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;"
    >
        <a-nft
            type="nft"
            url="markers/tabekko"
            smooth="true"
            smoothCount="10"
            smoothTolerance=".01"
            smoothThreshold="5"
        >

            <a-entity position="100 100 -300" rotation="0 0 0">
                <a-sphere scale="50 50 50"></a-sphere>

                <a-box color="red" scale="50 50 50" position="100 0 0"></a-box>
                <a-box color="red" scale="50 50 50" position="200 0 0"></a-box>
                <a-box color="red" scale="50 50 50" position="300 0 0"></a-box>
                <a-box color="red" scale="50 50 50" position="400 0 0"></a-box>
                <a-box color="red" scale="50 50 50" position="500 0 0"></a-box>

                <a-box color="green" scale="50 50 50" position="0 100 0"></a-box>
                <a-box color="green" scale="50 50 50" position="0 200 0"></a-box>
                <a-box color="green" scale="50 50 50" position="0 300 0"></a-box>
                <a-box color="green" scale="50 50 50" position="0 400 0"></a-box>
                <a-box color="green" scale="50 50 50" position="0 500 0"></a-box>

                <a-box color="blue" scale="50 50 50" position="0 0 100"></a-box>
                <a-box color="blue" scale="50 50 50" position="0 0 200"></a-box>
                <a-box color="blue" scale="50 50 50" position="0 0 300"></a-box>
                <a-box color="blue" scale="50 50 50" position="0 0 400"></a-box>
                <a-box color="blue" scale="50 50 50" position="0 0 500"></a-box>
            </a-entity>
        </a-nft>
        <a-entity camera="active: true; near: 0.1; far: 100;"></a-entity>
    </a-scen>
</body>

If you run this code on localhost and test it by accessing it from a smartphone, you will get a bug like the one in the video. Tracking is working, but objects that are far from the camera do not seem to render properly.

https://user-images.githubusercontent.com/45984123/149292488-e3982318-8909-487d-9f7b-7f1651104c0c.mov

If the current behavior is a bug, please provide the steps to reproduce. Save the above code as an html file and run it

Please mention other relevant information such as the browser version, Operating System and Device Name Mac iPhone13 pro safari

What is the expected behavior? I want the object to be visible as long as it's being tracked, even if it's away from the NFT.

If this is a feature request, what is motivation or use case for changing the behavior?

sinano1107 commented 2 years ago

markers.zip markers is this tabekko.JPG.zip

kalwalt commented 2 years ago

@sinano1107 this is not a bug you are using a marker with 72 dpi, the recommended dpi value is 300, also width and height need to be increased; You need to recreate your marker with 300 dpi.

sinano1107 commented 2 years ago

@kalwalt Thank you. I had a big misunderstanding about DPI. I mistakenly thought that by changing the dpi of the original image that generates the marker to 300, it would also change the dpi of the marker. However, I noticed that there is a field for dpi in nft-marker-creator.

So I have one question. By setting dpi to 300, it runs comfortably on pc, but fps seems to be reduced on iphone. Can this problem be solved by setting dpi below 300? Please let me know if there is any other best solution.

kalwalt commented 2 years ago

By setting dpi to 300, it runs comfortably on pc, but fps seems to be reduced on iphone. Can this problem be solved by setting dpi below 300?

If you provide less dpi you will get that issue: object disappear because is not detected/tracked because has less feature and key points. I haven't an iPhone so i can't say more about this issue.