HaLake Magazine

AR  ( Augmented Reality , 拡張現実) といえば、昨年大流行した ポケモンGO でも使われていたり、最新の iOS リリースでAR機能が強化されたりと、最近では話題に事欠きません。 今回は、そのAR機能をブラウザだけで実現できる JavaScript ライブラリのAR.jsを使って簡単なARを作ってみましょう。 AR.jsとは AR.jsは、 WebGL やWebRTCなどの Web標準 の機能のうえに実現されたライブラリで、アプリをインストールすることなく Webブラウザ だけでAR機能を実現することができます。 技術的には、ネイティブ向けのARライブラリである ARToolkit を Emscripten を使って JavaScript に変換するというなかなか豪快な作りになっていますが、使う分にはいたって普通の JavaScript ライブラリとして使用することができます。 スマホ のブラウザ上でも問題ないパフォーマンスで動作するので、いろいろな応用ができそうな可能性を秘めています。 ARには、画像認識を助ける2次元パターンの「ARマーカー」を使う通常のARと、ARマーカーを使わないマー カーレス ARがありますが、現在AR.jsではマー カーレス でない通常のARのみをサポートしているようです。 AR.jsを使ってみよう 今回はそのAR.jsを使って以下のようにARマーカーにデジタル時計をオーバーレイ表示する機能を作ってみます。 なお、ここでは以降の実装にClojureScriptを使いますが、 JavaScript やその他のAltJSの言語でも同じように作ることができます。 AR.jsは JavaScript から使えるいくつかの3Dあるいは VR 向けのライブラリ、 フレームワーク と連携させて使うことができるようになっています。ここではそのなかで、 JavaScript から使える3Dライブラリとして 知名度 の高いThree.jsと合わせて使う方法を見てみます。 AR.jsをThree.jsを合わせて使う場合、機能分担は次のようになります： AR.jsはWebRTCからの入力を基にARマーカーの位置を特定し、マーカーの中心を原点とする座標系を用意してくれます。この座標系は、カメラの位置や角度が変わってもマーカーを追従するよう

React  VR とは Facebook が開発している、 JavaScript で VR を開発できる フレームワーク です。 ReactVRの空間内を移動するボタンを作ってみたので、その内容を共有します。 動作環境 下記の環境で動作させました。 名前 バージョン Ubuntu 17.10 Node.js 9.1.0 React  VR 2.0.0 Chromium 62.0.3202.75 プログラムの説明 index.vr.js を変更し、static_assetsにhalake_logo. png というファイル名で HaLakeのロゴ を置きました。 index. vr .jsの変更内容を説明します。 視点の設定 <Scene style={{ transform: [ {translate: [this.state.translateX, this.state.translateY, this.state.translateZ]} ] }} /> Scene の操作で視点の位置を変更できるため、this.stateの値に応じて座標を変更できるようにしました。 ボタンの設置 <View style={{ transform: [ {translate: [this.state.translateX, this.state.translateY + 2, this.state.translateZ - 6]} ] }}> <VrButton onClick={()=>{ this.setState({translateX: this.state.translateX - 1}) }}> <Text style={styles.button}> Left </Text> </VrButton> .. .. </View> 視点と一緒に操作ボタンも移動してほしいので、ボタンを囲むviewの座標をstateで設定しています。 ボタンがクリックされたら、setStateで座標位置を更新しています。 画像の設置 <Image style={{ width: 1, he