Looking Glass の Three.js が実装されたのでキャリブレーション取得方法を見てみた

たっつー

6年前

Toggle

はじめに

LookingGlass の Three.js 実装が公開されたので中身を軽く読んでみました、私としてはキャリブレーション結果（個体情報）取得の部分がどういった実装になっているのか気になったための確認となります。

LookingGlass関連

経緯

以前、「Unity：Looking Glass を WebGL を使ってブラウザで表示する」の記事を書いた際に、Looking Glass ではキャリブレーション結果（個体情報）をUSB経由で取得してその結果により表示の調整を行っています。

Unity で WebGLで実装しても手元の環境でうまく表示されない原因はここのキャリブレーション結果（個体情報）がUSB経由で取得できないためにおこる原因となります。（ブラウザで動作する場合デバイスへのアクセスはセキュリティの制約があるので取得が難しい事に起因しています）

なので、Three.js での実装が公開されると情報を聞いたのでこの実装をどう解決しているのか気になっていたためその調査結果となります。

ソースコードを読んでみた結果

以下の部分が該当部分になります、doLoadEEPROM 関数になっており、ここでキャリブレーション結果（個体情報）を取得しています。

	function doLoadEEPROM (inInit)
	{
        var OSName="Unknown OS";
        if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
        if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
        if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
        if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
        
		var ws = new WebSocket('ws://localhost:11222/');
		var finished = function () {
			ws.close();
		};
		var timeout = setTimeout(function () { 
			var errstr = "Calibration not found in internal memory.";
            if (inInit) {
				console.log(errstr); 
			} else { 
				alert(errstr);
			}
			finished();
		}, 800);
		ws.onmessage = function(event) {
			console.log("New calibration loaded from internal memory.");
			saveCalibration(event.data);
			applyCalibration(event.data);
			clearTimeout(timeout);
            initialized = true;
			finished();
		};
		ws.onerror = function(event) {
			if (confirm("Three.js driver not detected! Click OK to download. If you have already installed the driver, please make sure port 11222 is open.")){
                if(OSName == "Windows"){
				    window.location.href = "https://s3.amazonaws.com/static-files.lookingglassfactory.com/WebCalibrationBridge/LKG_ThreeJsDriver_Win.exe";
                } else if(OSName == "MacOS"){
                    window.location.href = "https://s3.amazonaws.com/static-files.lookingglassfactory.com/WebCalibrationBridge/LKG_ThreeJsDriver_Mac.pkg"
                } else{
                    alert("Only Windows and OSX operating systems are currently supported for the Three.js library.")
                }
			}
			finished();
		};
	}

まずは、ローカルPCの 11222 ポートに対して WebSocket を開こうとします。

		var ws = new WebSocket('ws://localhost:11222/');

11222 ポートへの WebSocket オープンに失敗した場合、ドライバーがインストールされていないと判断してダウンロードしてインストールしようとします。

		ws.onerror = function(event) {
			if (confirm("Three.js driver not detected! Click OK to download. If you have already installed the driver, please make sure port 11222 is open.")){
                if(OSName == "Windows"){
				    window.location.href = "https://s3.amazonaws.com/static-files.lookingglassfactory.com/WebCalibrationBridge/LKG_ThreeJsDriver_Win.exe";
                } else if(OSName == "MacOS"){
                    window.location.href = "https://s3.amazonaws.com/static-files.lookingglassfactory.com/WebCalibrationBridge/LKG_ThreeJsDriver_Mac.pkg"
                } else{
                    alert("Only Windows and OSX operating systems are currently supported for the Three.js library.")
                }
			}
			finished();
		};

11222 ポートへのWebSocketオープンに成功した場合、キャリブレーション結果（個体情報）を取得して正常に描画処理への調整パラメータとして設定します。

		ws.onmessage = function(event) {
			console.log("New calibration loaded from internal memory.");
			saveCalibration(event.data);
			applyCalibration(event.data);
			clearTimeout(timeout);
            initialized = true;
			finished();
		};

結果

簡単でしたね、キャリブレーション結果（個体情報）を取得する方法としてどういったアプローチをするのかと思っていたのですが、予想通りバックグラウンドにプロセスを立ち上げて、WebSocket 経由で情報を取得する形になっていました。

Looking Glass の特性上、出荷時に個体毎にキャリブレーションを行いその値を本体に保存しているのでこのような手法に落ち着くのは仕方がない事かと思われます。

よい、Looking Glassライフを！