WebでARが簡単に作れる（？）時代になったと聞き、WebARアプリを作ってみました。
この記事では、AR.jsを利用し、漢字の自作マーカー（カスタムマーカー）を使った場合の精度について、試行錯誤した内容を書いています。
漢字をそのままマーカーにするのは難しい
OCR（光学的文字認識）並みの精度は、やはり期待しちゃいけませんでした。
「馬」「鳥」「冬」という漢字のマーカーを、それぞれ識別できるか試してみます。
検証結果・・・誤認します。
正しく識別させたいときは、英語と組み合わせたり、レイアウトを変えたり、工夫が必要みたいです。
結果を先に書きましたが、以下、作ったWebアプリと、試行錯誤の内容です。
漢字を楽しく覚えるアプリを作りたい
ある小学生の男の子が、漢字テストで のび太君と同じくらいの点数しか取れません。急に勉強をしなくなったようで、原因もわからず、親も先生も悩んでいました。
男の子は覚える能力がないというより、覚えるモチベーションがないとう印象でした。
解決になるか分かりませんが、紙に書かれた漢字にスマホをかざすと実物が出現するARアプリを開発し、漢字の勉強に関心を持ってもらいたいと考えました。
私自身の技術勉強目的の方が強いですが・・・。
開発に使ったモジュールなど
WebARと言われる、ブラウザでARを実現する素晴らしい技術があります。
HTML、JavaScriptで作れるので、Web系の開発者にはうれしいですし、ユーザーもアプリをインストールする必要がない手軽さがあります。
開発は、AR.jsの説明にA-Frameを使った実装例があるので参考にします。
3Dモデリングについては、自作すると途方もない時間がかかるので、Googleの3Dオブジェクトライブラリ「Poly」から素材を持ってきます。
ただし、Polyの3Dデータは全てAR.js＋A-Frameで使えるわけではありません。
読み込めなかったらあきらめて、別のを使います。
また、３Dデータの大きさもバラバラなので、個別にサイズ調整が必要です。
マーカーを作ろう
マーカーに登録する漢字は、勉強用のプリントに載っていた順番で「馬」「鳥」「冬」。まずは３つだけにします。
さっそく「馬」マーカーを用意します。
AR.js Marker Trainingに、画像ファイルをアップするだけです。
できました。
自作マーカーの実装方法は「AR.jsのカスタムマーカーの作り方と動作しない時の解決法」を参考にさせて頂きました。
記事を読む限り「馬」はちょっと認識が難しいかな・・・。
馬を出してみよう
Polyから馬の3Dモデルを拝借して、Webアプリに組み込みます。
そして、httpsが使えるサーバーにアップして、スマホ（iPhone7 ブラウザSafari)で読み込みます。
カメラを立ち上げを許可して、画面を見てみます。
あ、馬が出てきました。
中央の半透明の円に触れると・・・
ひらがなで「うま」と出るようにしました。
意外としっかり認識しているので驚きです。
「鳥」を出そう
続いて「鳥」の漢字の登録です。（使用した鳥の3Dモデルはこちら）
スマホをかざします。
あれ？
ダメだ！おまえはうまじゃない。
「鳥」で馬が出てきてしまいます。これでは正しく漢字を覚えられません。
「馬」と「鳥」は誤認するようです。
確かにこの２つは、マーカー的には似ている文字ですね。
漢字と英語の組み合わせ
マーカーに差を出しましょう。
「鳥」の方は、漢字と英語を組み合わせてみました。
さすがにこれなら・・・
いけました。
なんだか鳥の3Dオブジェクトが部分的に欠けています。
どうにもできないので、気にしないで進みます。
「冬」を出そう
最後に「冬」の漢字を登録。（使用した冬の3Dモデルはこちら）
「鳥」のマーカーと誤認しなければ良いですが・・・
あ、ダメでした。
「Winter 冬」と「Bird 鳥」のレベルでも、識別はできません。
漢字と英語を逆転させ、配置を大きく変え、別のマーカーに見えるようにします。
これなら大丈夫。
無事、冬も認識し、同時に３つのマーカーも識別することも確認しました。
しかしこの調子だと、同じWebアプリ内で識別できる漢字の数は、そう多くなさそうです。
男の子がアプリ使った様子
３つだけしか漢字はありませんが、漢字の苦手な男の子に使ってもらいました。
ARには興味を持ち、特に冬の3Dモデリングを角度を変えながら熱心に見ています。漢字に目が行ってないので、このアプリは、あまり役に立たないような・・・。
ぜんぜん関係ないが成績は上がった！
結局、漢字WebARアプリの開発は継続しませんでしたが、男の子の成績は驚くほど上がりました。
今では、漢字テストで98％程度の正解率のようです。
男の子のお母さんが、毎日３つずつ漢字を一緒に覚える時間を作り、続けたことが要因です。
お母さん、すごい。
無力な漢字WebARアプリだったのですが、せめてマーカー認識の試行錯誤結果くらいは、記録としてここに残します。