Hi guys! I've been exploring AR.js for awhile, and trying to integrate lottie.json animation instead of gltf, so far i'm able to replicate it in aframe by using the lottie.json as a texture to be mapped on a canvas, but as i move on to AR.js, it doesn't seem to show up =/
not working with AR.js
working in aframe
@nickw1_gitlab https://hikar.org/webapp does not work on my iPhone SE (14.4.1), I can see all the labels which seem to be placed in correct direction, but the camera freezes. The same happen with red-box example in GitHub issue AR-js-org/AR.js#216. The iOS Safari console output the error:
Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. (aframe-ar-nft.js:210535)
When I replace "videoTexture: true;" with embedded, the camera works but not 'click' and if both "videoTexture: true;" and embedded, then the screen is totally black.
Any idea what could be the problem? Thx in advance🙏🏽
Hi everyone, I will just post this here if someone has similar issue or want to make a pull-request. I needed to display far objects (>1km) like in the Hikar example. I was fighting with
videoTexture: true because the image from camera gets squished and does not maintain aspect ratio. I wanted to maintain aspect ratio and make the image from camera cover whole area. I came up with this solution:
//main <a-scene> element - you need to wait for loading - use `loaded` event var scene = document.getElementById('scene'); //this is the extra component created by AR.js which puts camera feed into scene without making far objects invisible var webcam = document.querySelector("[arjs-webcam-texture]"); var component = webcam.components['arjs-webcam-texture']; //you also need to wait for video to start playing via `loadeddata` event or similar, otherwise the `videoWidth` and `videoHeight` is zero var viewportRatio = scene.clientWidth / scene.clientHeight; var videoRatio = component.video.videoWidth / component.video.videoHeight; var w = Math.max(1, videoRatio / viewportRatio); var h = Math.max(1, viewportRatio / videoRatio); component.geom.attributes.position.array = new Float32Array([ -w / 2, h / 2, 0, w / 2, h / 2, 0, -w / 2, -h / 2, 0, w / 2, -h / 2, 0 ]); component.geom.attributes.position.needsUpdate = true; //you should also call this code once the viewport size changes (onresize event of window)
I am not sure how this code affects placing precision of 3D content in the image (you should probably adjust FOV, but I am not that far yet - outdoor testing required).