AR.js/Three.js низкая производительность при использовании нескольких маркеров NFT

#javascript #three.js #augmented-reality #ar.js

Вопрос:

Это не вопрос, который просто помещается здесь для справки другими.

Для тех, кто еще сталкивается с серьезной задержкой при отслеживании нескольких маркеров NFT в AR.js вот что я добавил к ar-nft.dev.js файл для замедления проверки невидимых маркеров, повышающий производительность:

  1. В функции загрузки в нижней части страницы добавьте URL-адрес маркера в объект markerResult, он будет просто не определен, когда он не активен, и определен, когда активен
 
     ar.addEventListener('getNFTMarker', function(ev) {
                        // let AR.js know that a NFT marker has been found, with its matrix for positioning
                        markerResult = {
                            type: 'found',
                            matrix: JSON.stringify(ev.data.matrix),
                            markerURL: nftMarkerUrl, //add this line
                        };
                    });
 
  1. Резервное копирование в handleNFT добавьте следующее в вызов профиля в нижней части функции

process(ev.data.markerURL);

  1. добавьте в функцию процесса следующее
 function process(yeet) {
worker.postMessage({ type: "process", imagedata: imageData ,yeet:yeet}, [imageData.data.buffer]);
 
  1. Снова спуститесь вниз, измените сообщение на это:
 this.onmessage = function(e) {
            var msg = e.data;
            console.log("ID: " msg.yeet);
            switch (msg.type) {
                case "init":
                    {
                        load(msg);
                        return;
                    }
                case "process":
                    {
                        next = msg.imagedata;
                        if(typeof msg.yeet == 'undefined'){
                            setTimeout(process,1000);
                        }else{
                            process();
                        }
                        // 
                        
                        return;
                    }
            }
        };