Microsoft の GitHub リポジトリに突如として現れた Microsoft HoloJS について簡単に紹介しましょう。

HoloJS という名前から一般的な Web ブラウザーで動作する JavaScript のライブラリを連想した人も多いかもしれませんが、残念ながらこれは Universal Windows Platform (UWP) アプリを開発するためのフレームワークです。したがって Web コンテンツの作成には使用できませんし、Windows 10 でしか動作しません。

Windows 10 がお手元ない人はダウンロードして環境を作るか、いっそあきらめて WebVR (※)の勉強でもすると良いでしょう。(※WebVR は Edge も対応すべく絶賛開発中ですので、2017 年中には WebVR がそれなりに使える環境も整ってくるでしょう。)

HoloJS とは

HoloJS は、JavaScript と WebGL を使用して UWP アプリケーションを作成するためのフレームワークです。

HoloJS は、JavaScript コードを実行するための Chakra をホストする C++ ライブラリであり、また、 OpenGL ES のグラフィックスの呼び出しを処理するための ANGLE をホストしています。OpenGL ES の呼び出しは、JavaScript アプリによって WebGL  呼び出しから変換されます。Microsoft HoloLens で実行している場合、HoloJS はホログラフィックレンダリングをサポートします。

HoloJS は以下から入手することができます。

• Microsoft/HoloJS: Provides a framework for creating holographic apps using JavaScript and WebGL.

サンプルコード

上記の HoloJS のリポジトリには Windows Holographic 用のサンプルプロジェクトが含まれています。

このサンプルは、HoloJS ホストレイヤーからホログラフィックビューマトリクスを取得することにより、Windows Holographicで動作します。

ANGLE for Windows Holographic は、ホログラムデバイスの正しい投影行列を各頂点に自動的に適用したあと、ジオメトリ シェーダーを使用して、左と右のビューに出力を分割します Windows Holographic　は、ジオメトリシェーダーを使用して出力を左右のビューに分割した後、各頂点にホログラムデバイスの正しい投影行列を自動的に適用します。

その他

このライブラリには、Visual Studio 2015 Update 3 が必要であり、Windows 10 や Windows ホログラフィックなどの Windows ユニバーサルプラットフォームをサポートしています。Windows Holographicデバイスには、Microsoft HoloLens と Microsoft HoloLens エミュレーターが含まれます。

Windows 10 開発に関する情報を入手するには、Windows デベロッパーセンターにアクセスしてください。
Microsoft Visual Studio 2015 Update 3 および Microsoft HoloLens エミュレーターなど、Windows ホログラフィック開発に使用されるツールに関する情報を取得するには、ツールのインストールに進みます。

リファレンス

以下の Windows Universal API はこのサンプルコードの中で、空間位置を示しすのと holographic レンダリングに使用されます。

• Chakra official site
• Chakra samples repo
• ANGLE Experimental for Windows Holographic

システム要件

HoloJS は以下のいずれかのプラットフォームで動作します。

Client: Windows 10, Windows 10 Holographic

Phone: Not tested

Visual Studio 2015 のオプション設定

サンプルプロジェクトをビルドするには Visual Studio 2015 の以下のオプション設定が必要です。

• Windows 8.1 SDK と Universal CRT SDK
• Visual C++ 2015 用の共通ツール
• ユニバーサル Windows アプリ開発ツール
• Windows 10 SDK 10.0.10.10240 と 10.0.10586

サンプルのビルド

入手したサンプルコードをビルドするには、以下の手順を実行します。

なお、この時点で HoloJS のリポジトリはクローンするかダウンロードするなどして入手できているものとします。

1. Angle のリポジトリをクローンするかダウンロードします。
   　
2. HoloJS のリポジトリ HoloJS-masterangle に、手順 1 で入手した Angle のリポジトリ angle-ms-holographic-experimental の中身をすべてコピーします。 
   　
3. HoloJS リポジトリのクローンを作成したフォルダから、HoloJS サブフォルダに移動し、HoloJS.sln ファイルをダブルクリックします。
   　
4. Visual Studio 2015 が起動し、サンプルプロジェクトがロードされた状態になるので、キーボードの [Ctrl] + [Shift] + [B] を押下するか、Visual Studio IDE のメニュー [ビルド] – [ソリューションのビルド](註:初回は [ソリューションのリビルド] がおすすめです。)

サンプルの実行

Microsoft HoloLens エミュレーターを使用してサンプルプロジェクトを実行してみましょう。

1. Visual Studio 2015 のソリューションエクスプローラーでプロジェクト SampleApp (Universal Windows ) を右クリックし、表示されたコンテキストメニューから [スタートアッププロジェクトに設定] を選択します。
   　
2. デバッグターゲット ドロップダウンリストをクリックし、[Microsoft HoloLens Emulator] を選択します。
   
    
3. [F5] キーを押下してデバッグ実行を開始します。
   「これらのプロジェクトは変更されています」「ビルドしますか?」というメッセージが表示されるかもしれませんが [はい] をクリックして実行してください。

以上の手順で HoloLens エミュレーターが起動し、初期画面が表示されます。

しばらく待っているとサンプルプロジェクトのデプロイが完了し、エミュレーターの中央に「Hello script」と書かれた緑色の四角形が表示されます。

エミュレーターの画面内とマウスでドラッグすると緑色の四角形が動きます。

もしかして、「え、あんなにがんばって環境を作ってビルドしたのに、たったこれだけ?」、と思われるかもしれません。

はい、これだけです。

SampleApp プロジェクトの Scripts フォルダの中の app.js を覗いて JavaScript がどのように書かれているか見てみましょう。(きっと気分は晴れないと思いますが)

まとめ

今回は、Microsoft の GitHub リポジトリに突如として現れた Microsoft HoloJS の紹介と、サンプルプロジェクトをビルドして動作するまでを紹介しました。

引き続き Microsoft HoloJS  について紹介するかどうかは分かりません。

なにかもう少し、気持ちがそそられるようなアップデートがあった際には紹介したいと思います。