Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video position not fixed on top of the target nft and moving as you move the camera and video flickers when you move the camera slight far away. #335

Open
subramani01 opened this issue Dec 19, 2024 · 0 comments

Comments

@subramani01
Copy link

The issue i face is this,

  1. The target image size and the augmented rendered video is not the same size. i want the video to be position exactly on top of target image, it has to be latched to it or attached to it.
  2. The video moves as you move the camera, that is if you move the camera to the left the video moves to the left or if you move the phone in a circle, the video moves along with the camera in a circle. Expected result the video shouldn't move as you move the camera, it should stick to the target nft image.
  3. Now if you move the camera slight far away from the target image, the video starts to flicker tremendously.
ScreenRecording_12-19-2024.12-46-29_1.mp4
       import * as THREE from "three";
       import arnft from "arnft";
       const { ARnft } = arnft;
       import ARnftThreejs from "arnft-threejs";
       const { SceneRendererTJS, NFTaddTJS } = ARnftThreejs;

       let width = 640;
       let height = 480;
       ARnft.init(width, height, [["src/DataNFT/pinball"]], [["pinball"]], "config.json", true)
           .then((nft) => {
               console.log("nft", nft);
               document.addEventListener("containerEvent", function (ev) {
                   let canvas = document.getElementById("canvas");
                   let fov = (0.8 * 180) / Math.PI;
                   let ratio = width / height;
                   let config = {
                       renderer: {
                           alpha: true,
                           antialias: true,
                           context: null,
                           precision: "mediump",
                           premultipliedAlpha: true,
                           stencil: true,
                           depth: true,
                           logarithmicDepthBuffer: true,
                       },
                       camera: {
                           fov: fov,
                           ratio: ratio,
                           near: 0.01,
                           far: 1000,
                       },
                   };

                   let sceneThreejs = new SceneRendererTJS(config, canvas, nft.uuid, true);
                   sceneThreejs.initRenderer();

                   let nftAddTJS = new NFTaddTJS(nft.uuid);
                   nftAddTJS.oef = true;
                   // Set width, height and width and height number of segments of the PlaneGeometry.
                   let imgConfig = { w: 1, h: 1, ws: 1, hs: 1 };
                   nftAddTJS.addVideo("arvideo", "pinball", 180, imgConfig, false);

                   const tick = () => {
                       sceneThreejs.draw();
                       window.requestAnimationFrame(tick);
                   };
                   tick();
               });
               window.addEventListener("nftTrackingLost-" + nft.uuid + "-" + "pinball", function (ev) {
                   //console.log(ev);
                   console.log("lost marker");
               });

               window.addEventListener("getMatrixGL_RH-" + nft.uuid + "-" + "pinball", function (ev) {
                   console.log("getMatrixGL_RH, Target found",ev);
               });
           })
           .catch((error) => {
               console.log(error);
           });

I tried loooking into many similar issues posted here and tried to implement, but it didn't work for me or im making a error.
#155
#198
webarkit/jsartoolkitNFT#73
#11

Can you please guide me on how to solve this issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant