ペルソナさんにARで遍在してもらった[serial experiments lain Advent Calendar 2019 3日目]
こちらの記事はserial experiments lain Advent Calendar 2019参加記事です。
こんにちは、あにろりです。
PS版serial experiments lainに登場するインターフェイス、ペルソナさん。なんともキュートな彼女がこのたびAR(拡張現実)技術により遍在なさいましたので、ご報告いたします。
専用のアプリケーションをインストールすることなくブラウザからWebページにアクセスするだけでいつでもどこでも体験できます。
やったこと
技術面をより詳しく解説した記事も後日したためるつもりですが、取り急ぎ概説まで。
きっかけ
予てよりブラウザ上での3Dコンテンツの制作に興味がありまして、私の友人がまさにブラウザ上でのARコンテンツの制作をしていたこともあり、折角ペルソナさんのVRMモデルもあることだからと、AR空間にペルソナさんを出現させることにしました。あまり巨大なペルソナさんにはできないので、イメージは卓上フィギュアです。
……思い返せば7月のlainTTL発表から、細々とではありますが、serial experiments lain関連の二次創作をいろいろな形で行ってきました。また先日lainTTL.wiredというDiscordコミュニティを立ち上げ、まだまだlain関連で抱えているプロジェクトも沢山あります。しかし二次創作にせよDiscordコミュニティにせよオフ会にせよ、どうも体験するに至るまでのハードルが多少高かったりするようでして。ブラウザ上でいつでもどこでもアクセスできるARコンテンツなら、気軽にlainっぽさを感じられるのではないか？ と考えたわけです。
つくるために必要だったもの
ブラウザ上で3D空間を表示するための仕組みと、そこへAR表現に必要な要素を流し込む仕組みの二つが必要です。
前者についてはThree.jsというJavaScript製のライブラリがあり、ブラウザ上で3Dコンテンツを容易に制作/体験できます。AR表現も、Three.jsとAR.jsを連携させることで実現できます。
また、Three.jsと組み合わせてVRMモデルを読み込み・表示できるthree-vrmというライブラリもあり、今回はこの三つを主軸に据えて開発することにしました。
使ったモデル
こちらの自作モデルです。
できたもの
写真とか
こんな感じ。
前髪やおさげ、スカートなどもマーカーの動きに応じてリアルに揺れます。
体験する
こちらのページにアクセスして、ブラウザにカメラの使用を許可してください。
そして下の画像にPCやスマートフォンのカメラを向けると、ペルソナさんが現れます(残念ながらまだ棒立ちですが、きちんとカメラに目線を向けてくれます)。
さいごに
今後はペルソナさんに原作準拠のポーズを取ってもらったり、一緒に写真撮影できるようにしたり、顔にノイズを乗せてみたりしたいな……やることたくさん。
実を言うと作業時間の8割は目線をこちらに向かせること・そのとき首を適宜動かすこと・適当なポーズで動いてもらうことに割かれていたのですが、失敗続きでかなり時間を食われました。結局達成できたのは1/3、しかも本当にそれが機能しているのかヒジョーに分かりにくい！
モデルを作ったことだしと始めたARだというのにいつしかARのためにモデルをバージョンアップすることになったり、とにかく枝葉末節と下働きに貴重な作業時間を持っていかれたというのが実情です。ペルソナさんを表示するだけなら2時間でできたんです……。つらい。
明日の記事は石林グミさんのペルソナサンタ玲音ですって！たのしみたのしみ
こちらの記事はserial experiments lain Advent Calendar 2019参加記事です。
