Skip to content

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

@subramani01

Description

@subramani01

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions