没入感ならぬ凹入感？：拡張現実というより現実拡張？：ARで凹んだオブジェクトを作ろう！

はじめに

Three.jsとAR.jsで、凹んだ3Dオブジェクトでこんなの作りました。

※左が凹んだオブジェクト

デモ映像

凹んだオブジェクトのデモ映像です。向かって左が完成品です。右と比べると凹んでいる感じに見えますよね？

ARで凹んだオブジェクトを表示するところまでをQiitaにまとめる。#ウソ穴 pic.twitter.com/hbnjCoeiNM

— j4amountain (@zsipparu) January 19, 2020

ARとは

ARとは「拡張現実感（Augmented Reality）」の略で、以下のようなARマーカを基準に3Dオブジェクトの情報を、実際の映像に合成する技術のことです。

※ Thee.jsとAR.jsは、ARをWebサイトとして実現できる凄いやつ！ブラボー

凹んだオブジェクトの仕組み

凹んだオブジェクトの仕組みを説明します。

5つのオブジェクト

5つのオブジェクトで構成されています。凹みの外側にあたる面のテクスチャを透過率100%の画像（透明な画像）をマッピングします。

3DオブジェクトとARマーカの座標をこのように合わせます。3Dオブジェクトの上部の中心が、ARマーカの中心に合うようにします。

透明な画像とオブジェクトの配置を工夫することで凹んだオブジェクトを表現しています。

※参考※ 透明な画像を不透明な画像に置き換えると、右のようになります。

ソース

ソース一式をgithubに格納しました → 02-depressiion

githubのソース一式には、画像ファイルがないので、以下3つの画像ファイルを追加してください。

• parts/img/invisible.png ※透明度100%の画像
• parts/img/tex101.jpg ※筒の底の画像
• parts/img/tex105.jpg ※筒の側面の画像

Webサーバーを作ろう

凹んだオブジェクトを表示するにはWebサーバーが必要です。

1.NodejsでWebサーバーを作ろう

Webで閲覧するコンテンツなのでWebサーバーが必要です。私はNodejsを使いましたが、他のWebサーバーでも動作すると思います。

1-1.構成図

WindowsパソコンをWebサーバーにします。パソコンにはカメラが付いています。

ブラウザで、サイトhttp://localhost:xxx/depression-01.htmlを開き、パソコン内蔵のカメラでARマーカを映すと、凹んだオブジェクトが表示されます。

1-2.Nodejsの設定概要

詳細は省きますが、フレームワークExpressを入れました。サーバ起動のスクリプトは以下です。サーバを起動する（$ node app.js）と、wwwroot配下にhtmlファイルを格納すると、ブラウザからアクセスできます（http://localhost:3000/xxx.html）

app.js

var express = require('express');
var app = express();
app.use(express.static('./wwwroot'));
var port = 3000;
app.listen(port,function(){
	console.log("Expressサーバーがポート%dで起動しました。モード:%s",port,app.settings.env)
});

凹んだオブジェクトのソース一式をwwwroot配下に格納しブラウザでアクセスします。ブラウザでサイトを開く際、カメラの使用許可が表示される場合は許可してください。

2.スマホでも見れるようにしよう

WebサーバにしたWindowsとは別の端末からWebサイトを開くにはSSL通信が必須です。要するに『http://・・・`はダメ、https://・・・はOK』ということです。

2-1.構成図

SSL通信に必要な証明書を用意します。今回は自己証明書を使います。また、スマホをWebサーバー(Windows10)と通信可能にするため、同じネットワークにします。

2-2.自己証明書を作ろう

Windwos環境では、OpenSSLで自己証明書が作れます。私はこちらのサイトを参考に作成しました。 → Node.js v12でTLSv1.3のテストサーバを手軽に構築

以下のコマンドで証明書を作ります。xxx.xxx.xxx.xxxには、Webサーバとなる環境のIPアドレスを設定します。
※注意※ IPアドレスを127.0.0.1とすると他の端末ではSSL通信できないかも（←ためしてない）

openssl.exe

# 秘密鍵とサーバ証明書を作成するコマンド
OpenSSL> req -subj '/C=JP/ST=TestState/O=TestCompany/CN=xxx.xxx.xxx.xxx' \
 -x509 -nodes -days 3650 -newkey rsa:2048 \
 -keyout server-key.pem \
 -out server-cert.pem

2-3.Webサーバーに証明書を適用しよう

作成した自己証明書を使い、SSL通信のWebサイトを作ります。1-2で紹介した app.js を以下のように編集し、app.jsと同じ階層に自己証明書（server-key.pem, server-key.pem）を格納します。これでSSL通信のWebサーバの準備完了です。

app.js

"use strict";

// express を使う
var express = require("express");
var app = express();
app.use(express.static("wwwroot"));
app.get("/", function(req, res) {
  res.sendFile("wwwroot/index.html");
});

// http サーバ
var http = require("http").Server(app);
http.listen(3000);

// https サーバ
var fs = require("fs");
var opt = {
  key:  fs.readFileSync("server-key.pem"),
  cert: fs.readFileSync("server-cert.pem"),
};
var https = require("https").Server(opt, app);  // https サーバを立てる
https.listen(3001);

上記は、このようにポート番号で非暗号暗号(https://・・)/(http://・・)となります。スマホで開くアドレスは、暗号のURLになります。

• 非暗号化
  • http://{WindowsのローカルIPアドレス}:3000/depression-01.html
• 暗号化(SSL通信)
  • https://{WindowsのローカルIPアドレス}:3001/depression-01.html

暗号化(SSL通信)のサイトをスマホで開くとスマホ上で、凹んだオブジェクトが表示されます（iOS の Safari では動作を確認しました）

このようにスマホでARマーカを映し、凹んだオブジェクトが表示されれば成功です。

3.インターネット公開しよう

多くの人に利用してもらうためインターネット公開します。ネット公開はherokuを使うなどありますが、私はAWSのS3を使用しました。

3-1.構成図

こちらが構成図です、S3だけにしました。

S3に凹んだオブジェクトのソース一式を格納しインターネット公開すれば準備完了です。

※S3上のファイルをインターネット公開すると、証明書を用意しなくてもSSL通信になります。
※Window10+Chrome, iOS+Safariの2環境で動作することを確認しました。

課題

一応作れたけど、課題はたくさんありそう

• 透明な画像を使用することで、凹んだオブジェクトを表現しましたが、正しい方法は別にあると思います（どーやるんだろ？）情報お持ちの方、教えて頂けると幸いです。
• 画像の張り方やオブジェクトの数はもっとシンプルにできそう
• スクリプトが汚い（いつか整頓します、、たぶん）

さいごに

凹むオブジェクトを応用すると、何か面白いものが作れそうです。挑戦してみます、乞うご期待

ー追記ー

作ってみた

凹むARマーカ、からのリアルとデジタルを行き交う謎物体できた。https://t.co/3JXAdQHgGk#webgl #threejs #AR pic.twitter.com/4eDjFrFxJb

— j4amountain (@zsipparu) January 21, 2020