@srsergio/taptapp-ar 1.0.101 → 1.1.2

package/dist/runtime/controller.worker.js

@@ -1,93 +1 @@
-import { Matcher } from "../core/matching/matcher.js";
-import { Estimator } from "../core/estimation/estimator.js";
-import { Tracker } from "../core/tracker/tracker.js";
-import { DetectorLite } from "../core/detector/detector-lite.js";
-let matchingDataList = null;
-let debugMode = false;
-let matcher = null;
-let estimator = null;
-let tracker = null;
-let detector = null;
-onmessage = (msg) => {
-    const { data } = msg;
-    switch (data.type) {
-        case "setup":
-            matchingDataList = data.matchingDataList;
-            debugMode = data.debugMode;
-            matcher = new Matcher(data.inputWidth, data.inputHeight, debugMode);
-            estimator = new Estimator(data.projectionTransform);
-            if (data.trackingDataList && data.markerDimensions) {
-                tracker = new Tracker(data.markerDimensions, data.trackingDataList, data.projectionTransform, data.inputWidth, data.inputHeight, debugMode);
-            }
-            detector = new DetectorLite(data.inputWidth, data.inputHeight, {
-                useLSH: true,
-                maxFeaturesPerBucket: 24
-            });
-            break;
-        case "match":
-            const interestedTargetIndexes = data.targetIndexes;
-            let matchedTargetIndex = -1;
-            let matchedModelViewTransform = null;
-            let matchedScreenCoords = null;
-            let matchedWorldCoords = null;
-            let matchedDebugExtra = null;
-            // New: If the worker received image data, run detector here too
-            let featurePoints = data.featurePoints;
-            if (data.inputData) {
-                const detectionResult = detector.detect(data.inputData, { octavesToProcess: data.octavesToProcess });
-                featurePoints = detectionResult.featurePoints;
-            }
-            for (let i = 0; i < interestedTargetIndexes.length; i++) {
-                const matchingIndex = interestedTargetIndexes[i];
-                const { keyframeIndex, screenCoords, worldCoords, debugExtra } = matcher.matchDetection(matchingDataList[matchingIndex], featurePoints, data.expectedScale);
-                matchedDebugExtra = debugExtra;
-                if (keyframeIndex !== -1) {
-                    const modelViewTransform = estimator.estimate({ screenCoords, worldCoords });
-                    if (modelViewTransform) {
-                        matchedTargetIndex = matchingIndex;
-                        matchedModelViewTransform = modelViewTransform;
-                        matchedScreenCoords = screenCoords;
-                        matchedWorldCoords = worldCoords;
-                    }
-                    break;
-                }
-            }
-            postMessage({
-                type: "matchDone",
-                targetIndex: matchedTargetIndex,
-                modelViewTransform: matchedModelViewTransform,
-                screenCoords: matchedScreenCoords,
-                worldCoords: matchedWorldCoords,
-                featurePoints: featurePoints,
-                debugExtra: matchedDebugExtra,
-            });
-            break;
-        case "track":
-            const { inputData: trackInput, lastModelViewTransform, targetIndex } = data;
-            const trackResult = tracker.track(trackInput, lastModelViewTransform, targetIndex);
-            postMessage({
-                type: "trackDone",
-                targetIndex,
-                ...trackResult
-            });
-            break;
-        case "trackUpdate":
-            const { modelViewTransform, worldCoords, screenCoords, stabilities } = data;
-            const finalModelViewTransform = estimator.refineEstimate({
-                initialModelViewTransform: modelViewTransform,
-                worldCoords,
-                screenCoords,
-                stabilities, // Stability-based weights
-            });
-            postMessage({
-                type: "trackUpdateDone",
-                modelViewTransform: finalModelViewTransform,
-            });
-            break;
-        case "dispose":
-            close();
-            break;
-        default:
-            throw new Error(`Invalid message type '${data.type}'`);
-    }
-};
+import{Matcher as e}from"../core/matching/matcher.js";import{Estimator as t}from"../core/estimation/estimator.js";import{Tracker as r}from"../core/tracker/tracker.js";import{DetectorLite as o}from"../core/detector/detector-lite.js";let s=null,a=!1,n=null,i=null,c=null,d=null;onmessage=l=>{const{data:m}=l;switch(m.type){case"setup":s=m.matchingDataList,a=m.debugMode,n=new e(m.inputWidth,m.inputHeight,a),i=new t(m.projectionTransform),m.trackingDataList&&m.markerDimensions&&(c=new r(m.markerDimensions,m.trackingDataList,m.projectionTransform,m.inputWidth,m.inputHeight,a)),d=new o(m.inputWidth,m.inputHeight,{useLSH:!0,maxFeaturesPerBucket:24});break;case"match":const l=m.targetIndexes;let p=-1,u=null,g=null,f=null,k=null,w=m.featurePoints;m.inputData&&(w=d.detect(m.inputData,{octavesToProcess:m.octavesToProcess}).featurePoints);for(let e=0;e<l.length;e++){const t=l[e],{keyframeIndex:r,screenCoords:o,worldCoords:a,debugExtra:c}=n.matchDetection(s[t],w,m.expectedScale);if(k=c,-1!==r){const e=i.estimate({screenCoords:o,worldCoords:a});e&&(p=t,u=e,g=o,f=a);break}}postMessage({type:"matchDone",targetIndex:p,modelViewTransform:u,screenCoords:g,worldCoords:f,featurePoints:w,debugExtra:k});break;case"track":const{inputData:h,lastModelViewTransform:D,targetIndex:b}=m,C=c.track(h,D,b);postMessage({type:"trackDone",targetIndex:b,...C});break;case"trackUpdate":const{modelViewTransform:x,worldCoords:T,screenCoords:y,stabilities:j}=m,I=i.refineEstimate({initialModelViewTransform:x,worldCoords:T,screenCoords:y,stabilities:j});postMessage({type:"trackUpdateDone",modelViewTransform:I});break;case"dispose":close();break;default:throw new Error(`Invalid message type '${m.type}'`)}};

package/dist/runtime/index.js

@@ -1,5 +1 @@
-export * from "./controller.js";
-export * from "./bio-inspired-controller.js";
-export * from "./track.js";
-export * from "./three.js";
-export * from "./aframe.js";
+export*from"./controller.js";export*from"./bio-inspired-controller.js";export*from"./track.js";export*from"./three.js";export*from"./aframe.js";

package/dist/runtime/three.js

@@ -1,304 +1 @@
-import { Matrix4, Vector3, Quaternion, Scene, WebGLRenderer, PerspectiveCamera, Group, sRGBEncoding, } from "three";
-import { CSS3DRenderer } from "three/addons/renderers/CSS3DRenderer.js";
-import { Controller } from "./controller.js";
-import { UI } from "../ui/ui.js";
-const cssScaleDownMatrix = new Matrix4();
-cssScaleDownMatrix.compose(new Vector3(), new Quaternion(), new Vector3(0.001, 0.001, 0.001));
-const invisibleMatrix = new Matrix4().set(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
-export class TaarThree {
-    constructor({ container, imageTargetSrc, maxTrack, uiLoading = "yes", uiScanning = "yes", uiError = "yes", filterMinCF = null, filterBeta = null, warmupTolerance = null, missTolerance = null, userDeviceId = null, environmentDeviceId = null, }) {
-        this.container = container;
-        this.imageTargetSrc = imageTargetSrc;
-        this.maxTrack = maxTrack;
-        this.filterMinCF = filterMinCF;
-        this.filterBeta = filterBeta;
-        this.warmupTolerance = warmupTolerance;
-        this.missTolerance = missTolerance;
-        this.ui = new UI({ uiLoading, uiScanning, uiError });
-        this.userDeviceId = userDeviceId;
-        this.environmentDeviceId = environmentDeviceId;
-        this.shouldFaceUser = false;
-        this.scene = new Scene();
-        this.cssScene = new Scene();
-        this.renderer = new WebGLRenderer({ antialias: true, alpha: true });
-        this.cssRenderer = new CSS3DRenderer({ antialias: true });
-        this.renderer.outputEncoding = sRGBEncoding;
-        this.renderer.setPixelRatio(window.devicePixelRatio);
-        this.camera = new PerspectiveCamera();
-        this.anchors = [];
-        this.renderer.domElement.style.position = "absolute";
-        this.cssRenderer.domElement.style.position = "absolute";
-        this.container.appendChild(this.renderer.domElement);
-        this.container.appendChild(this.cssRenderer.domElement);
-        window.addEventListener("resize", this.resize.bind(this));
-    }
-    async start() {
-        this.ui.showLoading();
-        await this._startVideo();
-        await this._startAR();
-    }
-    stop() {
-        this.controller.stopProcessVideo();
-        const tracks = this.video.srcObject.getTracks();
-        tracks.forEach(function (track) {
-            track.stop();
-        });
-        this.video.remove();
-    }
-    switchCamera() {
-        this.shouldFaceUser = !this.shouldFaceUser;
-        this.stop();
-        this.start();
-    }
-    addAnchor(targetIndex) {
-        const group = new Group();
-        group.visible = false;
-        group.matrixAutoUpdate = false;
-        const anchor = {
-            group,
-            targetIndex,
-            onTargetFound: null,
-            onTargetLost: null,
-            onTargetUpdate: null,
-            css: false,
-            visible: false,
-        };
-        this.anchors.push(anchor);
-        this.scene.add(group);
-        return anchor;
-    }
-    addCSSAnchor(targetIndex) {
-        const group = new Group();
-        group.visible = false;
-        group.matrixAutoUpdate = false;
-        const anchor = {
-            group,
-            targetIndex,
-            onTargetFound: null,
-            onTargetLost: null,
-            onTargetUpdate: null,
-            css: true,
-            visible: false,
-        };
-        this.anchors.push(anchor);
-        this.cssScene.add(group);
-        return anchor;
-    }
-    _startVideo() {
-        return new Promise((resolve) => {
-            this.video = document.createElement("video");
-            this.video.setAttribute("autoplay", "");
-            this.video.setAttribute("muted", "");
-            this.video.setAttribute("playsinline", "");
-            this.video.style.position = "absolute";
-            this.video.style.top = "0px";
-            this.video.style.left = "0px";
-            this.video.style.zIndex = "-2";
-            this.container.appendChild(this.video);
-            if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-                this.ui.showCompatibility();
-                reject();
-                return;
-            }
-            const constraints = {
-                audio: false,
-                video: {},
-            };
-            if (this.shouldFaceUser) {
-                if (this.userDeviceId) {
-                    constraints.video.deviceId = { exact: this.userDeviceId };
-                }
-                else {
-                    constraints.video.facingMode = "user";
-                }
-            }
-            else {
-                if (this.environmentDeviceId) {
-                    constraints.video.deviceId = { exact: this.environmentDeviceId };
-                }
-                else {
-                    constraints.video.facingMode = "environment";
-                }
-            }
-            navigator.mediaDevices
-                .getUserMedia(constraints)
-                .then((stream) => {
-                this.video.addEventListener("loadedmetadata", () => {
-                    this.video.setAttribute("width", this.video.videoWidth);
-                    this.video.setAttribute("height", this.video.videoHeight);
-                    resolve();
-                });
-                this.video.srcObject = stream;
-            })
-                .catch((err) => {
-                console.log("getUserMedia error", err);
-                reject();
-            });
-        });
-    }
-    _startAR() {
-        return new Promise(async (resolve) => {
-            const video = this.video;
-            this.controller = new Controller({
-                inputWidth: video.videoWidth,
-                inputHeight: video.videoHeight,
-                filterMinCF: this.filterMinCF,
-                filterBeta: this.filterBeta,
-                warmupTolerance: this.warmupTolerance,
-                missTolerance: this.missTolerance,
-                maxTrack: this.maxTrack,
-                onUpdate: (data) => {
-                    if (data.type === "updateMatrix") {
-                        const { targetIndex, worldMatrix } = data;
-                        for (let i = 0; i < this.anchors.length; i++) {
-                            if (this.anchors[i].targetIndex === targetIndex) {
-                                if (this.anchors[i].css) {
-                                    this.anchors[i].group.children.forEach((obj) => {
-                                        obj.element.style.visibility = worldMatrix === null ? "hidden" : "visible";
-                                    });
-                                }
-                                else {
-                                    this.anchors[i].group.visible = worldMatrix !== null;
-                                }
-                                if (worldMatrix !== null) {
-                                    let m = new Matrix4();
-                                    m.elements = [...worldMatrix];
-                                    m.multiply(this.postMatrixs[targetIndex]);
-                                    if (this.anchors[i].css) {
-                                        m.multiply(cssScaleDownMatrix);
-                                    }
-                                    this.anchors[i].group.matrix = m;
-                                }
-                                else {
-                                    this.anchors[i].group.matrix = invisibleMatrix;
-                                }
-                                if (this.anchors[i].visible && worldMatrix === null) {
-                                    this.anchors[i].visible = false;
-                                    if (this.anchors[i].onTargetLost) {
-                                        this.anchors[i].onTargetLost();
-                                    }
-                                }
-                                if (!this.anchors[i].visible && worldMatrix !== null) {
-                                    this.anchors[i].visible = true;
-                                    if (this.anchors[i].onTargetFound) {
-                                        this.anchors[i].onTargetFound();
-                                    }
-                                }
-                                if (this.anchors[i].onTargetUpdate) {
-                                    this.anchors[i].onTargetUpdate();
-                                }
-                            }
-                        }
-                        let isAnyVisible = this.anchors.reduce((acc, anchor) => {
-                            return acc || anchor.visible;
-                        }, false);
-                        if (isAnyVisible) {
-                            this.ui.hideScanning();
-                        }
-                        else {
-                            this.ui.showScanning();
-                        }
-                    }
-                },
-            });
-            this.resize();
-            const { dimensions: imageTargetDimensions } = await this.controller.addImageTargets(this.imageTargetSrc);
-            this.postMatrixs = [];
-            for (let i = 0; i < imageTargetDimensions.length; i++) {
-                const position = new Vector3();
-                const quaternion = new Quaternion();
-                const scale = new Vector3();
-                const [markerWidth, markerHeight] = imageTargetDimensions[i];
-                position.x = markerWidth / 2;
-                position.y = markerWidth / 2 + (markerHeight - markerWidth) / 2;
-                scale.x = markerWidth;
-                scale.y = markerWidth;
-                scale.z = markerWidth;
-                const postMatrix = new Matrix4();
-                postMatrix.compose(position, quaternion, scale);
-                this.postMatrixs.push(postMatrix);
-            }
-            this.controller.dummyRun(this.video);
-            this.ui.hideLoading();
-            this.ui.showScanning();
-            this.controller.processVideo(this.video);
-            resolve();
-        });
-    }
-    resize() {
-        const { renderer, cssRenderer, camera, container, video } = this;
-        if (!video)
-            return;
-        this.video.setAttribute("width", this.video.videoWidth);
-        this.video.setAttribute("height", this.video.videoHeight);
-        let vw, vh; // display css width, height
-        const videoRatio = video.videoWidth / video.videoHeight;
-        const containerRatio = container.clientWidth / container.clientHeight;
-        if (videoRatio > containerRatio) {
-            vh = container.clientHeight;
-            vw = vh * videoRatio;
-        }
-        else {
-            vw = container.clientWidth;
-            vh = vw / videoRatio;
-        }
-        const proj = this.controller.getProjectionMatrix();
-        // TODO: move this logic to controller
-        // Handle when phone is rotated, video width and height are swapped
-        const inputRatio = this.controller.inputWidth / this.controller.inputHeight;
-        let inputAdjust;
-        if (inputRatio > containerRatio) {
-            inputAdjust = this.video.width / this.controller.inputWidth;
-        }
-        else {
-            inputAdjust = this.video.height / this.controller.inputHeight;
-        }
-        let videoDisplayHeight;
-        let videoDisplayWidth;
-        if (inputRatio > containerRatio) {
-            videoDisplayHeight = container.clientHeight;
-            videoDisplayHeight *= inputAdjust;
-        }
-        else {
-            videoDisplayWidth = container.clientWidth;
-            videoDisplayHeight =
-                (videoDisplayWidth / this.controller.inputWidth) * this.controller.inputHeight;
-            videoDisplayHeight *= inputAdjust;
-        }
-        let fovAdjust = container.clientHeight / videoDisplayHeight;
-        // const fov = 2 * Math.atan(1 / proj[5] / vh * container.clientHeight) * 180 / Math.PI; // vertical fov
-        const fov = (2 * Math.atan((1 / proj[5]) * fovAdjust) * 180) / Math.PI; // vertical fov
-        const near = proj[14] / (proj[10] - 1.0);
-        const far = proj[14] / (proj[10] + 1.0);
-        camera.fov = fov;
-        camera.near = near;
-        camera.far = far;
-        camera.aspect = container.clientWidth / container.clientHeight;
-        camera.updateProjectionMatrix();
-        video.style.top = -(vh - container.clientHeight) / 2 + "px";
-        video.style.left = -(vw - container.clientWidth) / 2 + "px";
-        video.style.width = vw + "px";
-        video.style.height = vh + "px";
-        const canvas = renderer.domElement;
-        const cssCanvas = cssRenderer.domElement;
-        canvas.style.position = "absolute";
-        canvas.style.left = 0;
-        canvas.style.top = 0;
-        canvas.style.width = container.clientWidth + "px";
-        canvas.style.height = container.clientHeight + "px";
-        cssCanvas.style.position = "absolute";
-        cssCanvas.style.left = 0;
-        cssCanvas.style.top = 0;
-        cssCanvas.style.width = container.clientWidth + "px";
-        cssCanvas.style.height = container.clientHeight + "px";
-        renderer.setSize(container.clientWidth, container.clientHeight);
-        cssRenderer.setSize(container.clientWidth, container.clientHeight);
-    }
-}
-if (!window.TAAR) {
-    window.TAAR = {};
-}
-if (!window.TAAR.IMAGE) {
-    window.TAAR.IMAGE = {};
-}
-window.TAAR.IMAGE.TaarThree = TaarThree;
+import{Matrix4 as e,Vector3 as t,Quaternion as i,Scene as s,WebGLRenderer as n,PerspectiveCamera as o,Group as r,sRGBEncoding as h}from"three";import{CSS3DRenderer as a}from"three/addons/renderers/CSS3DRenderer.js";import{Controller as l}from"./controller.js";import{UI as d}from"../ui/ui.js";const c=new e;c.compose(new t,new i,new t(.001,.001,.001));const u=(new e).set(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1);export class TaarThree{constructor({container:e,imageTargetSrc:t,maxTrack:i,uiLoading:r="yes",uiScanning:l="yes",uiError:c="yes",filterMinCF:u=null,filterBeta:v=null,warmupTolerance:p=null,missTolerance:g=null,userDeviceId:m=null,environmentDeviceId:w=null}){this.container=e,this.imageTargetSrc=t,this.maxTrack=i,this.filterMinCF=u,this.filterBeta=v,this.warmupTolerance=p,this.missTolerance=g,this.ui=new d({uiLoading:r,uiScanning:l,uiError:c}),this.userDeviceId=m,this.environmentDeviceId=w,this.shouldFaceUser=!1,this.scene=new s,this.cssScene=new s,this.renderer=new n({antialias:!0,alpha:!0}),this.cssRenderer=new a({antialias:!0}),this.renderer.outputEncoding=h,this.renderer.setPixelRatio(window.devicePixelRatio),this.camera=new o,this.anchors=[],this.renderer.domElement.style.position="absolute",this.cssRenderer.domElement.style.position="absolute",this.container.appendChild(this.renderer.domElement),this.container.appendChild(this.cssRenderer.domElement),window.addEventListener("resize",this.resize.bind(this))}async start(){this.ui.showLoading(),await this._startVideo(),await this._startAR()}stop(){this.controller.stopProcessVideo(),this.video.srcObject.getTracks().forEach(function(e){e.stop()}),this.video.remove()}switchCamera(){this.shouldFaceUser=!this.shouldFaceUser,this.stop(),this.start()}addAnchor(e){const t=new r;t.visible=!1,t.matrixAutoUpdate=!1;const i={group:t,targetIndex:e,onTargetFound:null,onTargetLost:null,onTargetUpdate:null,css:!1,visible:!1};return this.anchors.push(i),this.scene.add(t),i}addCSSAnchor(e){const t=new r;t.visible=!1,t.matrixAutoUpdate=!1;const i={group:t,targetIndex:e,onTargetFound:null,onTargetLost:null,onTargetUpdate:null,css:!0,visible:!1};return this.anchors.push(i),this.cssScene.add(t),i}_startVideo(){return new Promise(e=>{if(this.video=document.createElement("video"),this.video.setAttribute("autoplay",""),this.video.setAttribute("muted",""),this.video.setAttribute("playsinline",""),this.video.style.position="absolute",this.video.style.top="0px",this.video.style.left="0px",this.video.style.zIndex="-2",this.container.appendChild(this.video),!navigator.mediaDevices||!navigator.mediaDevices.getUserMedia)return this.ui.showCompatibility(),void reject();const t={audio:!1,video:{}};this.shouldFaceUser?this.userDeviceId?t.video.deviceId={exact:this.userDeviceId}:t.video.facingMode="user":this.environmentDeviceId?t.video.deviceId={exact:this.environmentDeviceId}:t.video.facingMode="environment",navigator.mediaDevices.getUserMedia(t).then(t=>{this.video.addEventListener("loadedmetadata",()=>{this.video.setAttribute("width",this.video.videoWidth),this.video.setAttribute("height",this.video.videoHeight),e()}),this.video.srcObject=t}).catch(e=>{console.log("getUserMedia error",e),reject()})})}_startAR(){return new Promise(async s=>{const n=this.video;this.controller=new l({inputWidth:n.videoWidth,inputHeight:n.videoHeight,filterMinCF:this.filterMinCF,filterBeta:this.filterBeta,warmupTolerance:this.warmupTolerance,missTolerance:this.missTolerance,maxTrack:this.maxTrack,onUpdate:t=>{if("updateMatrix"===t.type){const{targetIndex:i,worldMatrix:s}=t;for(let t=0;t<this.anchors.length;t++)if(this.anchors[t].targetIndex===i){if(this.anchors[t].css?this.anchors[t].group.children.forEach(e=>{e.element.style.visibility=null===s?"hidden":"visible"}):this.anchors[t].group.visible=null!==s,null!==s){let n=new e;n.elements=[...s],n.multiply(this.postMatrixs[i]),this.anchors[t].css&&n.multiply(c),this.anchors[t].group.matrix=n}else this.anchors[t].group.matrix=u;this.anchors[t].visible&&null===s&&(this.anchors[t].visible=!1,this.anchors[t].onTargetLost&&this.anchors[t].onTargetLost()),this.anchors[t].visible||null===s||(this.anchors[t].visible=!0,this.anchors[t].onTargetFound&&this.anchors[t].onTargetFound()),this.anchors[t].onTargetUpdate&&this.anchors[t].onTargetUpdate()}this.anchors.reduce((e,t)=>e||t.visible,!1)?this.ui.hideScanning():this.ui.showScanning()}}}),this.resize();const{dimensions:o}=await this.controller.addImageTargets(this.imageTargetSrc);this.postMatrixs=[];for(let s=0;s<o.length;s++){const n=new t,r=new i,h=new t,[a,l]=o[s];n.x=a/2,n.y=a/2+(l-a)/2,h.x=a,h.y=a,h.z=a;const d=new e;d.compose(n,r,h),this.postMatrixs.push(d)}this.controller.dummyRun(this.video),this.ui.hideLoading(),this.ui.showScanning(),this.controller.processVideo(this.video),s()})}resize(){const{renderer:e,cssRenderer:t,camera:i,container:s,video:n}=this;if(!n)return;let o,r;this.video.setAttribute("width",this.video.videoWidth),this.video.setAttribute("height",this.video.videoHeight);const h=n.videoWidth/n.videoHeight,a=s.clientWidth/s.clientHeight;h>a?(r=s.clientHeight,o=r*h):(o=s.clientWidth,r=o/h);const l=this.controller.getProjectionMatrix(),d=this.controller.inputWidth/this.controller.inputHeight;let c,u,v;c=d>a?this.video.width/this.controller.inputWidth:this.video.height/this.controller.inputHeight,d>a?(u=s.clientHeight,u*=c):(v=s.clientWidth,u=v/this.controller.inputWidth*this.controller.inputHeight,u*=c);let p=s.clientHeight/u;const g=2*Math.atan(1/l[5]*p)*180/Math.PI,m=l[14]/(l[10]-1),w=l[14]/(l[10]+1);i.fov=g,i.near=m,i.far=w,i.aspect=s.clientWidth/s.clientHeight,i.updateProjectionMatrix(),n.style.top=-(r-s.clientHeight)/2+"px",n.style.left=-(o-s.clientWidth)/2+"px",n.style.width=o+"px",n.style.height=r+"px";const T=e.domElement,x=t.domElement;T.style.position="absolute",T.style.left=0,T.style.top=0,T.style.width=s.clientWidth+"px",T.style.height=s.clientHeight+"px",x.style.position="absolute",x.style.left=0,x.style.top=0,x.style.width=s.clientWidth+"px",x.style.height=s.clientHeight+"px",e.setSize(s.clientWidth,s.clientHeight),t.setSize(s.clientWidth,s.clientHeight)}}window.TAAR||(window.TAAR={}),window.TAAR.IMAGE||(window.TAAR.IMAGE={}),window.TAAR.IMAGE.TaarThree=TaarThree;