Merge pull request #2 from fabio914/calibration-json

Calibration JSON Schema

Author: fabio914

README.md

@@ -11,8 +11,6 @@ Keep in mind that this is still just a prototype and that I'm not a frontend dev
 ## TO-DOs
 
  - Create a calibration page to allow users to calibrate the position and orientation of their camera, and to configure their chroma key (green screen).
- 
- - Allow the Mixed Reality Capture session to be initialized with a JSON file with a saved calibration.
 
 ## How to test the example
 
@@ -87,3 +85,40 @@ renderer.render( scene, camera );
 mixedRealityCapture.render( renderer.xr, scene );
 
 ```
+
+Alternatively, you can instantiate the calibration with a JSON provided by the user:
+
+```javascript
+
+// ...
+
+const json = `
+{ 
+    "schemaVersion": 1, 
+    "camera": { 
+        "width": 1280, 
+        "height": 720, 
+        "fov": 38, 
+        "position": [0, 1.5, 0], 
+        "orientation": [0, 0, 0, 1] 
+    }, 
+    "chromaKey": {
+        "color": [0, 1, 0],
+        "similarity": 0.25,
+        "smoothness": 0
+    },
+    "delay": 4
+}
+`;
+
+const calibrationData = JSON.parse( json );
+
+const calibration = MRC.Calibration.fromData( calibrationData );
+
+// ...
+
+mixedRealityCapture = new MRC.MixedRealityCapture( calibration );
+
+// ...
+
+```

examples/calibration/calibration-input.js

@@ -0,0 +1,134 @@
+import { Calibration } from 'reality-mixer';
+
+const exampleCalibrationJSON = `
+{ 
+    "schemaVersion": 1, 
+    "camera": { 
+        "width": 1920, 
+        "height": 1080, 
+        "fov": 38, 
+        "position": [0, 1.5, 0], 
+        "orientation": [0, 0, 0, 1] 
+    }, 
+    "chromaKey": {
+        "color": [0, 1, 0],
+        "similarity": 0.25,
+        "smoothness": 0
+    },
+    "delay": 4
+}
+`
+
+function CalibrationInput(
+    onCompleted,
+    initialCalibrationJSON = null
+) {
+    let initialJSON;
+
+    if (initialCalibrationJSON == null) {
+        let persistedJSON = localStorage.getItem("calibration-v1");
+
+        if (persistedJSON == null) {
+            initialJSON = exampleCalibrationJSON;
+        } else {
+            initialJSON = persistedJSON;
+        }
+    } else {
+        initialJSON = initialCalibrationJSON;
+    }
+
+    let popupDiv = document.createElement("div");
+
+    popupDiv.style = `
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: #303841;
+        border-radius: 4px;
+        font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+        color: #EFEFEF;
+        overflow: hidden;
+    `
+
+    let titleDiv = document.createElement("div");
+
+    titleDiv.style = "background-color: #50565E; padding: 8px";
+    titleDiv.innerText = "Paste or drag and drop your Mixed Reality calibration below:"
+
+    let resultDiv = document.createElement("div");
+
+    resultDiv.style = "padding: 8px; white-space: pre-wrap; background-color: green;";
+
+    let editor = document.createElement("textarea");
+
+    editor.style = `
+        font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+        border: none;
+        box-shadow: none;
+        outline: none;
+        background-color: #303841;
+        color: #EFEFEF;
+        resize: none;
+        margin: 0px;
+    `
+
+    editor.rows = 20;
+    editor.cols = 80;
+    editor.spellcheck = false;
+    editor.value = initialJSON;
+
+    function validateCalibration() {
+        const maybeJson = editor.value;
+
+        try {
+            const json = JSON.parse(maybeJson);
+            const calibration = Calibration.fromData(json);
+
+            resultDiv.style.backgroundColor = "green";
+            resultDiv.innerHTML = "";
+
+            let link = document.createElement("a");
+            link.innerText = "Click here to continue...";
+            link.href = "#";
+            link.style.color = "#EFEFEF";
+
+            link.onclick = function() {
+                localStorage.setItem("calibration-v1", maybeJson);
+                onCompleted(popupDiv, calibration);
+                return false;
+            }
+
+            resultDiv.appendChild(link);
+        } catch (error) {
+            resultDiv.innerText = error;
+            resultDiv.style.backgroundColor = "red";
+        }
+    }
+
+    editor.oninput = validateCalibration;
+    validateCalibration();
+
+    popupDiv.appendChild(titleDiv);
+    popupDiv.appendChild(editor);
+    popupDiv.appendChild(resultDiv);
+
+    popupDiv.ondrop = function(e) {
+        e.preventDefault();
+
+        let file = e.dataTransfer.files[0],
+            reader = new FileReader();
+
+        reader.onload = function(event) {
+            editor.value = event.target.result;
+            validateCalibration();
+        };
+
+        reader.readAsText(file);
+        return false;
+    }
+
+    return popupDiv;
+}
+
+export { CalibrationInput };

examples/calibration_input.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Calibration input</title>
+        <style>
+            body { margin: 0; }
+        </style>
+    </head>
+    <body style="background-color:black;">
+
+        <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+
+        <script type="importmap">
+            {
+                "imports": {
+                    "three": "../node_modules/three/build/three.module.js",
+                    "reality-mixer": "../src/mrc.js"
+                }
+            }
+        </script>
+
+        <script type="module">
+            import { CalibrationInput } from './calibration/calibration-input.js';
+
+            function onCalibrationInput(editor, calibration) {
+                editor.parentNode.removeChild(editor);
+                console.log(calibration);
+                // We can then initialize the Mixed Reality Capture with this calibration....
+            }
+
+            const calibrationInput = CalibrationInput(onCalibrationInput);
+
+            document.body.appendChild(calibrationInput);
+        </script>
+
+    </body>
+</html>

examples/webxr_vr_ballshooter.html

@@ -24,6 +24,7 @@
 
             import * as THREE from 'three';
             import * as MRC from 'reality-mixer';
+            import { CalibrationInput } from './calibration/calibration-input.js';
 
             import { BoxLineGeometry } from '../node_modules/three/examples/jsm/geometries/BoxLineGeometry.js';
             import { VRButton } from '../node_modules/three/examples/jsm/webxr/VRButton.js';
@@ -44,10 +45,23 @@
 
             const clock = new THREE.Clock();
 
-            init();
-            animate();
+            // Mixed Reality Calibration Input
 
-            function init() {
+            function onCalibrationInput(editor, calibration) {
+                editor.parentNode.removeChild(editor);
+                console.log(calibration);
+
+                init(calibration);
+                animate();
+            }
+
+            const calibrationInput = CalibrationInput(onCalibrationInput);
+
+            document.body.appendChild(calibrationInput);
+
+            //
+
+            function init(calibration) {
 
                 scene = new THREE.Scene();
                 scene.background = new THREE.Color( 0x505050 );
@@ -89,11 +103,6 @@
 
                 // Mixed Reality Capture
 
-                const cameraCalibration = new MRC.CameraCalibration();
-                const chromaKey = new MRC.ChromaKey();
-                const delayInFrames = 5;
-                const calibration = new MRC.Calibration( cameraCalibration, chromaKey, delayInFrames );
-
                 mixedRealityCapture = new MRC.MixedRealityCapture( calibration );
 
                 //