AR.js The "awful resize trick" prevents aframe from reacting to window size change

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

Bug

What is the current behavior?

Resizing the window (or rotating the phone) results in incorrect evaluation of the mouse position. This means that clicks are not detected anymore, until the page is refreshed.

This is caused by the "awful resize trick" that is coded in system-arjs.js, line 223, when AR.js spams the resize event. aframe has a debounce function that prevents the application from reacting to events that happen repeatedly in a 500ms window (see cursor.js line 68).

I could not find any documentation on what that "kludge" does and why it is necessary. If somebody could explain it, we may able to find a better way.

If the current behavior is a bug, please provide the steps to reproduce.

Try this code, rotate the phone, the yellow box will stop reacting until the page is refreshed or the phone is turned again to its original position (start in portrait mode once and then in landscape mode, so to prove that it is not dependent on any particular orientation).

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/3.3.3/aframe/build/aframe-ar.js"></script>

<script>
    AFRAME.registerComponent('cursor-listener', {
        init: function () {
            var lastIndex = -1;
            var COLORS = ['red', 'green', 'blue'];
            this.el.addEventListener('click', function (evt) {
                lastIndex = (lastIndex + 1) % COLORS.length;
                this.setAttribute('material', 'color', COLORS[lastIndex]);
                console.log('I was clicked at: ', evt.detail.intersection.point);
            });
        }
    });

</script>

<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded
    vr-mode-ui="enabled: false" 
    arjs='detectionMode: mono_and_matrix; matrixCodeType: 3x3; sourceType: webcam; '>
        <a-box position='0.5 1.0 -8' material='color: yellow;opacity: 0.8;' cursor-listener class="collidable"></a-box>
        <a-entity camera="fov:40">
            <a-entity raycaster="objects: .collidable" showLine= "true" cursor="rayOrigin:mouse"></a-entity>
        </a-entity>
    </a-scene>
</body>

Please mention other relevant information such as the browser version, Operating System and Device Name Android 10 on Xiaomi A2 Lite

What is the expected behavior? Click events should keep working when the phone is rotated without requiring a page refresh.

May 14 '21 16:05 vvigilante

In general the resizing seems like a horrible idea. It completely breaks for embedded a-scenes that don't fill the whole screen. Ar.js shouldn't resize anything but instead fit the existing frame. If the aspect ratio doesn't fit just take a slice of the image.

Nov 05 '21 14:11 Blackclaws

I agree with you @Blackclaws @vvigilante we should find a way to make that resizeing optionally. Recently i merged this PR https://github.com/AR-js-org/AR.js/pull/304 can you test it?

Nov 16 '21 12:11 kalwalt

AR.js AR.js copied to clipboard

The "awful resize trick" prevents aframe from reacting to window size change

AR.js
AR.js copied to clipboard