demo

https://playcanvas.com/project/1089242/overview/demolookingglass

実施手順

1. Looking Glass Portraitの準備
2. Looking Glass Portraitを用意し、電源とHDMIを接続します。電源をONにすると、LookingGlassのLEDが青色に点滅します。
3. Looking Glass Bridgeのインストール
4. Looking Glass BridgeはLooking Glass Factoryのウェブサイトからダウンロードしてインストールします。インストール後、タスクバーのLooking Glass Bridge iconをクリックしてLookingGlassをリセットし、デスクトップを表示します。
5. LookingGlass用のPlayCanvasプロジェクトの作成
6. PlayCanvasで新しいプロジェクトを作成します。プロジェクトのテンプレートとして、Model Viewer Starter Kitを推奨します。
7. プロジェクト内でのスクリプトとHTMLの作成
8. プロジェクト内で、スクリプト(LG.js)とHTML(LG.html)を作成します。
9. LG.htmlの作成
10. LG.htmlを以下のように記述します。

import { LookingGlassWebXRPolyfill, LookingGlassConfig } from "https://unpkg.com/@lookingglass/webxr@0.1.9/dist/webxr.js"
const config = LookingGlassConfig
config.tileHeight = 256
config.numViews = 20
config.targetY = 0
config.targetZ = 0
config.targetDiam = 3
config.fovy = (14 * Math.PI) / 180
new LookingGlassWebXRPolyfill()

1. LG.jsの作成
2. LG.jsを以下のように書き換えます。

var Lg = pc.createScript('lg');

Lg.prototype.initialize = function() {
    pc.app.xr._available["immersive-vr"] = true;
    var htmlAsset = this.app.assets.find('LG.html');
    var div = document.createElement('script');
    div.type = "module"
    div.innerHTML = htmlAsset.resource;
    document.body.appendChild(div);
    htmlAsset.on('load', function () {
        div.innerHTML = htmlAsset.resource;
    });
};

Lg.prototype.update = function(dt) {
    if(this.app.keyboard.wasPressed(pc.KEY_ENTER)){
        this.camera.camera.startXr(pc.XRTYPE_VR, pc.XRSPACE_LOCALFLOOR);
    }
};

1. アプリケーションの実行
2. アプリケーションを実行し、エンターキーを押すとLookingGlass用のコンテンツが別ウィンドウで再生されます。そのウィンドウをLookingGlassに移動させ、F11キーを押します。

以上で、LookingGlass用のPlayCanvasアプリケーションが実行されます。

動作原理

webxr.jsはWeb標準のWebXR APIをラップし、オープンソースで提供されています。このライブラリは3Dエンジンに依存せず、カメラの位置を取得し、複数のレンダリングを立体視可能な画像に変換して出力します。
LookingGlass用のウィンドウはマウスイベントの受け取りと最終レンダリングを行います。実質的には、このウィンドウはPlayCanvasのLaunchタブそのものです。そのため、タブを閉じたりバックグラウンドに移動すると、動作が停止します。また、複数のレンダリングを行うため、描画負荷が増大する点には注意が必要です。

問題点

PlayCanvasでアプリケーションを実行すると、webxr.jsにより定義されたcanvasのサイズ変更アルゴリズムがBufferの問題で誤った数値を出力する可能性があります。その結果、画像が意図せずにトリミングされる可能性があります。立体視画像の生成には複数の画像が必要なので、一部の画像が欠落したり黒くなったりすると、立体視が一部見えなくなる欠点があります。この問題は、canvasのサイズをオーバーライドすることで一時的に対処可能です。

まとめ

裸眼立体視技術は以前から存在していましたが、その技術を5万円程度の手頃な価格で利用できるポータブルデバイスに組み込み、しかもWeb技術のみで実行可能という点で、その革新性を感じます。Bridgeの導入などまだ一部制限はありますが、Webとの接続性により、環境構築の手間が減少し、さまざまなAPIとの接続によるコンテンツ開発が進むでしょう。