法人のお客さま
お問い合わせ
ビジネスブログ

初心者からenXross Hackathon Finalistへ！ゼロからの8th Wall × React実践術

中村 亮太

プロダクトエンジニア＆エバンジェリスト
中村 亮太

2024年12月15日掲載

キービジュアル

この記事は、ソフトバンク アドベントカレンダー2024の15日目の記事です。

はじめまして、アドベントカレンダーの公開日である12月15日が誕生日であるプロダクトエンジニア＆エバンジェリストの中村 亮太です。

普段は、Axross Recipe というAI・DXに関するオンライン学習プラットフォームの開発および、YouTubeチャンネル「ソフトバンク公式ビジネスチャンネル」で、「業務に活かせる最新テクノロジー」の発信を行っております。

対外活動にも積極的に参加しており、PodCast「となりのデータ分析屋さん」のゲストとして出演や、Tech系YouTubeチャンネル「Tech World」のエンジニアインタビューにも出演しております。

日々、皆様の業務の役に立つ発信を心がけており、本年、自身が行なったことから「皆様の技術力向上」に役立ちたいと考え、アドベントカレンダーを執筆いたしました。

自分自身、0から手探りで始めた内容を噛み砕いて、執筆いたしましたので、最後まで見ていただけたら幸いです。

今回、紹介するテーマは、私自身が知識0から挑戦し、ファイナリストまで行くことができた、「enXross Hackathon 2nd」の8th Wallを用いたReactでのWebAR開発について紹介します！

目次

  • 前提知識（必須ではありませんが、以下の知識がないと難しく感じるかもしれません）    
    • HTML, CSS, XMLの知識
    • Javascriptの基本的な実装

はじめに

社内で実施されたXRを利用したHackathonに参加しました。社内10チームが参加し、優勝チームには、東京ドーム主催のenXross Hackathon 2ndの決勝進出枠が付与される。今回、他のチームがほぼチームがXR経験者を入れてチーム編成をしている中、我々のチームはエンジニア3名という中で、XRに専門としているはおろか、XR系の技術を触れたことのないメンバーで構成されたチームにて、社内ハッカソン1位通過、enXross Hackathonパートナー特別賞をいただくことができました。

この記事では、enXross Hackathon 2ndで実装した8th Wallを用いたReactでのWebARアプリケーションの実例について、自分自身が苦労し、見つけたテクニックを中心紹介します。

全員がXR初心者

前提知識（以下の知識がないと少し難易度が高い）

  • HTML, CSS, XMLの知識
  • Javascriptの基本的な実装

enXross Hackathon 2ndとは

enXross Hackathon 2ndとは、東京ドーム主催のHackathonである。世界中のXRエンジニアやデザイナーが集い、競い合う開発イベントです。テーマは「XRを活用した東京ドームシティの体験をアップデートするプロダクト」、参加者には、IPスポンサーである円谷プロダクションからウルトラマンなどの3Dデータが貸与され、これらを使って独自の作品を創出できようになっていました。

チームの成功戦略

チーム構成

今回、知り合いにXR経験者がいないことから、技術力で圧倒的な差をつけることは難しいと考えました。

そのため、上限メンバー5人の構成は、

  • 自分
  • 圧倒的にエンジニアリング力のあるエンジニア
  • 言われたことを手を動かして実現できるエンジニア
  • ビジネスを考えられる人材
  • ワイルドカード

システムコンセプト

新しい東京ドーム。楽しみ方は「ワタシ」がつくる。

をコンセプトに、誰もがARゲームを作成できる「だれでもARゲームメーカー」を開発しました。

誰でもARゲームメーカーとは

プロダクト戦略

アイデア

「XRが実現した時に、必要なプロダクトは何か」を考え、AR謎解きからそれが広まった先には、簡単に作ることのできる、ARゲームプラットフォームが必要であるというアイデアから、ARゲームメーカーを選択しました。ハッカソンでは、お題を使ったら何を作れるかという目先の開発をしがちですが、その先に何があるかを考えることで、他のチームと差別化できたプロダクトを開発することができると考えています。

プロダクト要素

ビジョン：新しい東京ドーム。楽しみ方は「ワタシ」がつくる。

ユーザー価値：誰もが簡単にARゲームをつくって、遊ぶことのできる

事業収益：フリーミアム、限定コンテンツ＆コース配信、X to Earn、SaaS展開

 

本務で培ったプロダクト力で、プロダクトの３要素である上記３つを定めることで、同じ方向を向くことができました。

そのため、初日にコンセプトとプロダクトを決め、一度もブレずに最後まで走り切れたため、大幅な時間のロスがなかったことが、かなり良かったと考えています。

生成AIの活用

個人で、プロダクトを固める際は、全ての内容をChatGPTと会話しながら作成しました。以下の点で、大きく役に立ちました。

  • 「システム構成図」「画面遷移図」「DB設計図」など各種設計書を瞬時に作成することができた
  • 特徴やメリデメの洗い出しができ、ビジネス的に強いプロダクトにできた
  • 想定質問の洗い出しができ、FAQの作成に貢献
  • ロゴや、スライド背景の作成に利用できた
  • 運営からの連携ができておらず、最終日1日前に記事を作成する必要があったが、瞬時に作成できた

参考：ChatGPT for Developer - Prompt のチカラ

AR系の知識・用語

8th wall

概要

8th wallは、Niantic社が提供しているWebAR開発プラットフォームです。
WebXR、3D エクスペリエンス、Web ゲームを構築および公開するための共同ツールで、サイト内で完結してアプリケーションを作成可能です。

メリット

  • ウェブブラウザベース
    • 専用アプリのダウンロードが不要で、ChromeやSafariなどのスマートフォンのウェブブラウザ上でARコンテンツを体験できます。
    • サンプルプロジェクト
  • マルチプラットフォーム対応
    • スマートフォン、PC、AR/VRヘッドセットなど、様々なデバイスに対応したWebAR体験を作成できます。
  • 高品質なARエンジン
  • 開発環境とホスティング
    • Cloud Editorという開発環境があり、Built-In Hostingというホスティングサービスがあります。サイト内でエディター、Git、シミュレーション、ビルド、商用にDeploy（hostingしてくれる）することができ、開発をWeb Editorで完結させることができます。
    • 参考： Introducing 8th Wall’s Cloud Editor & Built-in Hosting
  • 豊富なサンプルプロジェクト
    • 8th wallを使った様々なプロジェクトを公開しているので、このプロジェクトのクローンで簡単に使用することができます(コードも閲覧可能)。また、今回の大会では、Workspaceが共通であり、他のチームのプログラムも見ることができ、AR技術者の知識を活かすことができる環境でした。
  • 3Dフレームワーク統合
    • JavaScriptが簡単に書けるので、AFrame、three.js、PlayCanvas、Babylon.jsなどの主要な3D JavaScriptフレームワークを簡単に実装することができます。

デメリット

  • 独特なお作法
    • サンプルは豊富であるが、エディタの癖がかなりあるという点です。Reactのプロジェクトはサンプルからcloneできたため、簡単に構築完了だったが、ファイル構成・ライブラリ使用方法に癖ありありといった感じでした。（実装にて、詳細記載）しかしながら、本記事では、そんな苦労した点を解説させていただくため、皆様はハードルはかなり低くなると思います。
  • ブランチの不便さ
    • Gitのブランチのような機能はありましたが、人ごとにブランチを切れるわけではなく、バージョン管理のような仕様であったため、チーム開発としては、かなり同期的に実施する必要があります。

VPS(Visual Positining System)

ARにおけるVPS (Visual Positioning System) は、拡張現実 (AR) 体験を大幅に向上させる重要な技術です。

メリット

  • 高精度な位置特定
    • VPSは、カメラ画像の解析と3Dマッピングを組み合わせることで、GPSよりも高精度な位置特定を可能にします。センチメートル単位の精度で、デバイスの位置と向きを特定できます。
  • 屋内外での使用
    • GPSが機能しにくい屋内環境でも使用可能で、屋内外問わず正確なAR体験を提供できます。
  • 環境認識
    • 実世界の環境を認識し、3Dマップと照合することで、ARコンテンツを正確に配置します。
  • マーカーレス
    • QRコードや画像マーカーなどの追加ツールを必要とせず、環境そのものを認識して機能します。
  • 持続的なAR体験
    • 特定の場所にARコンテンツを固定し、複数のユーザーや異なる時間でも同じ位置に表示できます。
  • リアルな統合
    • オクルージョン機能により、ARコンテンツを現実世界の物体の後ろに隠れるように表示するなど、よりリアルな統合が可能です。

GPSとの比較

特徴GPS VPS
位置特定方法

人工衛星の電波

カメラの画像+3Dマッピング

取得できる位置情報

広範囲で2Dの位置情報

方向も含めたより正確な3Dの位置情報

使用場所

屋外（GPSの電波が阻害されない場所）

屋内、屋外（建物の多い都市部）

主な用途

カーナビ、地図アプリなど

AR、地図アプリ（ライブビュー）など

精度

数メートル単位

センチメートル単位

利点

広範囲で利用可能、特に屋外で高精度

屋内外問わず高精度、特に都市部や屋内で有効

制限

建物や障害物による電波の遮断に弱い

照明条件や環境の変化に影響される

コスト

GPS受信機は比較的安価

VPSシステムはより専門的なハードウェアとソフトウェアが必要で高価

プライバシー

位置情報を追跡

カメラ画像の解析によりプライバシーの懸念がある

利用可能性

地球上のほぼ全ての場所で利用可能

事前にマッピングされた場所で利用可能

デメリット

  • 精度
    • 実証実験を何度も繰り返しましたが、成功する時と失敗する時でかなり差がありました。

VPSの種類

  • Niantic Lightship VPS
    • 概要: Nianticが提供するVPSで、ポケモンGOなどの位置ベースのゲームで使用されているVPS。
    • 特徴: 高精度な位置特定、屋内外での使用、マーカーレス、持続的なAR体験。
  • Google VPS
    • 概要: Google MapsやARCoreで使用されるVPS。
    • 特徴: 屋内外のナビゲーション、AR体験の向上、画像認識ベースの位置特定。
  • Apple ARKit
    • 概要: iOSデバイス上で動作するVPS。
    • 特徴: カメラ画像と内蔵センサーを使用した高精度な位置特定、オンデバイス処理。
  • Microsoft Azure Spatial Anchors
    • 概要: Microsoft Azureが提供するVPS。
    • 特徴: クロスプラットフォーム対応、クラウドベース、持続的なARコンテンツの固定。
  • Scape Technologies (Meta)
    • 概要: Facebookが買収したScape Technologiesが提供するVPS。
    • 特徴: 都市規模の3Dマッピング、高精度な位置特定、クラウドベース。

A-Frame

A-Frameとは

AFrameはWeb上でARを実現するためのライブラリ。以下のコードのようにパラメータを設定することで簡単に実装することができます。

<html>
  <head>
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

メリット

WebXR Device APIやWebGLを直接扱う場合、行列計算などの割と高度な数学や物理の知識を要求されます。
そこで、さらに上の抽象レイヤーとして three.js というOSSのライブラリが作られています。
three.jsを使えば数十〜数百行のコードでWebの3D表現が作れます。
そして、さらに抽象化したラッパーライブラリとして、A-Frameが誕生しました。

A-FrameはWebVRをどれほど手軽にしたか  から引用

私自身、ロボットを専攻していたため、非常に苦労がわかるのですが、上記のとおり、AR自体の技術はとんでもなく数学、物理を使用するものですが、そんな計算をライブラリ化したthree.jsをさらに使いやすくした A-Frameとして、現在は、非常に簡単に実装できるようになっています。

実装

システム構成

システム構成図

今回の実装は、フロントエンドを8th Wallで実装し、バックエンドはConohaサーバー上にk3sを用いて、FastAPIとMySQLで実装しました。

ファイル構成と実装テクニック

ファイル構成は以下となります。

​// Core ファイル
head.html
app.js
body.html

// ファイル　ここに実際にコードを書く形になる。
lib/
views/
react-app.tsx​

// アセット ここは画像ファイル、音声ファイルや3Dモデルファイル等を置く場所
*(.svg, .png, .glb)
​

// モジュール​ 8th wall上で作られているモジュール
reflections
game-kit
lightship-maps
player-data
ui-kit

Coreファイル

基本の設定を書くファイルです。(Reactをrenderなどなど)

実装テクニック

ライブラリの使用方法がnpm管理ではなく、head.htmlにCDNでimportする形でした。そのため、CDN提供していないものは使用できませんでした。

以下のようにCDNが用意されているライブラリを記述することで、ライブラリとしてimportすることができます。

<script src="//unpkg.com/jotai@2.8.3/umd/vanilla.production.js" crossorigin=""></scrtpt>
<script src="//unpkg.com/jotai@2.8.3/umd/vanilla/utils.production.js" crossorigin=""></scrtpt>
<script src="//unpkg.com/jotai@2.8.3/umd/react.production.js" crossorigin=""></scrtpt>
<script src="//unpkg.com/jotai@2.8.3/umd/react/utils.production.js" crossorigin=""></scrtpt>

ファイル

自身で、ファイルを作成することのできる領域です。

実装テクニック

実際に通常のReactと同じようにコンポーネントを記述しました。

通常、atom, useAtomを使いたいとすると、以下のように記載します。

import { atom, useAtom } from "jotai"

しかし、8th Wallでは、以下のように記載します。

declare let React: any
declare let jotaiVanilla: any
declare let jotaiReact: any

import { useState } = React
import { atom } = jotaiVanilla
import { useAtom } = jotaiReact

アセット

glbファイルについて3Dモデルのファイルフォーマットのひとつで、ポリゴンモデルだけでなくテクスチャやマテリアルの情報やアニメーションも保持しているものです。

実装テクニック

アセットに書いてあったファイルのimportは、以下のように記載することで読み込むことができます。

require("ファイルの相対パス")

学び

ハッカソンはやるべき

短期間で、技術力を上げるのは、かなり良いと感じた。AR知識ゼロからアプリケーションを開発できるまでになりました。技術力向上にはもってこいだと感じました。

圧倒的練習不足

自分の中では練習していったつもりでしたが、enXross Hackathonでの「せきぐちあいみさん」のパフォーマンス (Youtube) をみて、1秒の狂いも許されないプロの演技で、練習不足を痛感しました。また、本人とも話す機会があり、全然やっていないと言いつつも準備している内容を聞くとまだまだプロ意識が低いと感じました。

コンテンツ力不足

ARの業界は、入るのはかなり簡単だが、奥が深すぎることを痛感しました。大学院の頃から3Dデザインを逃げ続けた借金が降り注いだ気分でした。

まとめ

この記事では、XR初心者で「enXross Hackathon 2nd」に挑戦し、Reactと8th Wallを使ったWebAR開発を短期間でARアプリを形にし、成果を出した経験をもとに、具体的な実装方法やテクニックを紹介しました。

8th Wallの情報はまだ、少なく、実装が不自由に感じる方もいるかと思いますので、紹介したReactとの連携方法を参考に開発し、この記事が、これからWebARやXRに取り組む方々の助けとなり、新しい挑戦のきっかけになれば幸いです。

最後まで読んでいただき、ありがとうございました。この記事が読者の未来の一歩を後押しするきっかけとなることを心から願っています。

登壇風景

関連サービス

Axross Recipe for Biz

生成AIをはじめとしたテクノロジーを駆使し、業務と組織を変革できる自走型DX人材を育成するためのオンライン学習プラットフォームと研修・定着化支援サービスです。

関連記事

enXross（エンクロス）世界のエンターテインメントとイノベーションの交差点 | 東京ドームシティ

XR初挑戦でいかにして激戦のソフトバンク内予選を突破したのか。裏側にあった戦略と入念な準備とは。【enXross HACKATHON 参加者インタビューvol.4「なかむーと焼き肉」】

enXross 2nd アーカイブ映像-06　enXross HACKATHON ファイナリストプレゼンテーション

 ＼ 業務課題をデジタルで支援 ／

デジタルツールの選定から導入の手引きまで、中小規模のお客さまへわかりやすくお伝えします。

中小規模のお客さま向けサイトをみる

メールマガジン登録（無料）
ビジネスに役立つ記事やウェビナー情報をお届けします。

おすすめの記事

条件に該当するページがございません

法人のお客さま向け イベント

イベント・セミナー

ビジネスに役立つ 資料ダウンロード

資料ダウンロード

「今」と「未来」を発信 ソフトバンクのビジネスブログ

ビジネスブログ

クラウドテクノロジーブログ

クラウドテクノロジーブログ