本記事は AR Advent Calendar 2019 の19日目の投稿です。

はじめに

A-Frameとは、WebAR/VRをHTMLのように書いて実装できるフレームワークです。
A-Frameで3DモデルをAR空間に表示する方法については以前「【WebAR】A-frameを使ってマーカー上に3Dモデルを表示するまで」に書いたので興味のある方はぜひ読んでみてください。

さて、A-Frameで文字を表示する場合、<a-text> もしくは <a-entity>を使用します。
しかし、<a-text>は日本語に対応していません。
（<a-entity>は使用していないのでわかりません。多分対応していないと思います！）

日本語が表示できないのは困るので調べてみたところ、
無事に日本語を表示することができたのでその方法をまとめます。

日本語を表示する方法

公式ドキュメントのNon-ASCII Charactersの項目でその方法が簡単に紹介されています。(英語)
せっかくなので、この記事で日本語で詳しく書いていきたい思います。

フォントファイルの用意

下準備は以下のようなサイトで行います。

1. 使用したいフォントのttsファイルを用意します。
2. MSDF変換ツール (↑画像のサイト)を開きます。
3. 画像の1番で、用意したttsファイルを選択します。
4. 画像の2番で、ARで使用したい文字を全て入力します。
5. 画像の3番で、 [CREATE MSDF] ボタンをクリックします。
6. 準備ができたら画像4番の [DOWNLOAD] ボタンが押せるようになります。クリックしてzipファイルをダウンロードしてください。

A-Frame用にDLしたファイルを整える

先ほどDLしたファイルを解凍すると、jsonファイルとpngファイルが入っています。
pngファイルの名前を、*.png から *-msdf.png にリネームしてください。

ファイルの配置

用意した２つのファイルをポーンとプロジェクトファイルに置いてやります。

project_file
├ custom-msdf.json
├ custom-msdf.png
└ index.html

コード

以下の様に記述します。
文字コードは必ずutf-8にしてください。

<!DOCTYPE html>
<html>
  <head>
  <head>
    <meta charset="utf-8" />
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
    <title>WebAR</title>
  </head>
  <body>
    <a-scene embedded arjs="debugUIEnabled:false; sourceType: webcam;">
      <a-text
        value="こんにちは世界！"
        font="custom-msdf.json"
        font-image="custom-msdf.png"
        negate="false"
        scale="2 2 1"
        position="0 1 -4"
        color="red">
      </a-text>
    </a-scene>
  </body>
</html>

結果

こんな感じで表示されます。

参考サイト

A-Frameで日本語フォントする方法
 公式ドキュメント

さいごに

少しだけ裏話をば。
実は、当初は公式ドキュメントのコード例にはfont-imageが書いてありませんでした。
おそらくドキュメントが作成された当時は記述なしでも動作したのだと思いますが、A-Frameの現在のバージョン（0.9.2）ではfont-imageも書かないと日本語が表示されないです。
(先日v1.0.0がリリースされましたね。こちらのバージョンではまだ動作確認していません。)

なので、人生で初めて公式にPRを出しましたー！無事にマージもされています！
このアドベントカレンダーがなかったらきっとまだOSS活動をしたことのない人生を送っていたことでしょう。
この様な機会をくださったアドベントカレンダーに感謝。

それではみなさまよいARライフをお過ごしください！

A-Frameで日本語を表示したい