setCameraMatrix and getCameraMatrix functions

- required functions for a correct render of models
webarkit · Aug 29, 2023 · 4ea9306 · 4ea9306
1 parent cac671b
commit 4ea9306
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 7 deletions.
diff --git a/examples/load_thread.js b/examples/load_thread.js
@@ -37,8 +37,11 @@ function load_thread(msg) {
           var endLoading = new CustomEvent("endLoading", {detail: {end: true}})
             window.dispatchEvent(endLoading)
         });
+
+        var loaded = new CustomEvent("loaded", {detail: {proj: cameraMatrix}});
+        window.dispatchEvent(loaded)
 
-        postMessage({ type: "loaded", proj: JSON.stringify(cameraMatrix) });
+        //postMessage({ type: "loaded", proj: JSON.stringify(cameraMatrix) });
       };
 
       var onError = function (error) {

diff --git a/examples/threejs_wasm_thread.js b/examples/threejs_wasm_thread.js
@@ -1,5 +1,5 @@
 var ar;
-function isMobile () {
+function isMobile() {
   return /Android|mobile|iPad|iPhone/i.test(navigator.userAgent);
 }
 
@@ -22,8 +22,8 @@ function start(container, markerUrl, video, input_width, input_height, canvas_dr
   var w, h;
   var pw, ph;
   var ox, oy;
-  var worker;
-  var camera_para = './../examples/Data/camera_para.dat'
+  var camera_para = './../examples/Data/camera_para.dat';
+  var camera_matrix;
 
   var canvas_process = document.createElement('canvas');
   var context_process = canvas_process.getContext('2d', { willReadFrequently: true });
@@ -55,6 +55,13 @@ function start(container, markerUrl, video, input_width, input_height, canvas_dr
     })
   }
 
+  var getCameraMatrix = function () {
+    window.addEventListener("loaded", function (ev) {
+      camera_matrix = ev.detail.proj;
+      console.log(camera_matrix);
+    })
+  }
+
   sphere.material.flatShading;
   sphere.scale.set(200, 200, 200);
 
@@ -93,26 +100,45 @@ function start(container, markerUrl, video, input_width, input_height, canvas_dr
 
     load_thread(msg);
     markerInfos();
+    getCameraMatrix();
   };
 
   var world;
 
   var found = function () {
-    window.addEventListener("markerFound", function (ev) { 
+    window.addEventListener("markerFound", function (ev) {
       world = ev.detail.matrixGL_RH
     })
   };
 
   var lasttime = Date.now();
   var time = 0;
 
+  var setCameraMatrix = function () {
+    var proj = camera_matrix;
+    var ratioW = pw / w;
+    var ratioH = ph / h;
+    proj[0] *= ratioW;
+    proj[4] *= ratioW;
+    proj[8] *= ratioW;
+    proj[12] *= ratioW;
+    proj[1] *= ratioH;
+    proj[5] *= ratioH;
+    proj[9] *= ratioH;
+    proj[13] *= ratioH;
+    setMatrix(camera.projectionMatrix, proj);
+  }
+
   var draw = function () {
     render_update();
     var now = Date.now();
     var dt = now - lasttime;
     time += dt;
     lasttime = now;
     found();
+    if (camera_matrix) {
+      setCameraMatrix();
+    }
 
     if (!world) {
       sphere.visible = false;
@@ -130,7 +156,7 @@ function start(container, markerUrl, video, input_width, input_height, canvas_dr
         var loader = document.getElementById('loading');
         if (loader) {
           loader.querySelector('.loading-text').innerText = 'Start the tracking!';
-          setTimeout(function(){
+          setTimeout(function () {
             loader.parentElement.removeChild(loader);
           }, 2000);
         }
@@ -146,7 +172,7 @@ function start(container, markerUrl, video, input_width, input_height, canvas_dr
 
     var imageData = context_process.getImageData(0, 0, pw, ph);
 
-    if (ar && ar.process) {  
+    if (ar && ar.process) {
       ar.process(imageData);
     }