소개

안녕하세요, 여유롭게 엔지니어의 츠츠입니다.
블로그 을 운영하고 있으므로 좋으면 봐 주세요.

LookingGlass Three.js 실장이 공개되었기 때문에 내용을 가볍게 읽어 보았습니다, 저로서는 캘리브레이션 결과(개체 정보) 취득 부분이 어떤 실장이 되어 있는지 궁금했기 때문의 확인이 됩니다.

경위

이전에 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 생활을!

전 기사

좋으면 블로그 「초보자용 Unity 정보 사이트」(분)편에도 여러가지 기재하고 있으므로 꼭 참조해 주시면 좋겠습니다.

Looking Glass의 Three.js가 구현되었으므로 캘리브레이션 결과 방법을 살펴 보았습니다.

Unity: Looking Glass를 WebGL을 사용하여 브라우저에서 표시