Web 上での AR 体験を実現した SEIKO 提供の年賀コンテンツ！ 希望のうさみくじがおもしろい
新聞紙面がなくても体験可能
新年、明けましておめでとうございます。
WebGL 総本山では 2023 年も WebGL を活用した事例をできる限りたくさんご紹介できたらと思っています。いつものようにあくまでも個人的な感想や注目した点を紹介していくだけのコンテンツではありますが、読んでくださっているマニアックなみなさんにとって少しでも有用な情報源となりますよう、今年もがんばって更新を続けていこうと思います。
2023 年一発目にご紹介するのは、時計メーカーとして世界的に知られる SEIKO の年賀コンテンツです。
WebAR を活用した事例となっていて実際に体験するにはスマートフォンなどのモバイル端末（及び対応する動作環境）が必要となりますのでご注意ください。
リンク：
8th Wall と Babylon.js の合せ技
今回のサイトでは、Web サイト上で AR コンテンツを実現しています。
WebAR は実際に取り組んだことがある方ならなんとなく想像できるかと思いますが、高いクオリティのコンテンツを提供するには思いのほかいろいろなハードル・制約があります。
今回のサイトの場合は AR 実装を 8th Wall で行っており、そこに Babylon.js での 3D 表現を組み合わせているようですね。
なんと今回のケースでは実際に新聞に掲載された広告記事そのものが AR 表示のためのマーカーとなっています。新聞を取っていない場合でも、そのマーカーとなる模様のデータはウェブ上から入手することができるので、新聞が手元になくても体験可能です。
注意点としては、あくまでも「新聞の紙面をテーブルなどの上に広げた状態」での体験を前提としているため、平らな場所にマーカーとなる記事の模様が配置されている必要がある点でしょうか。
たとえばダウンロードできる紙面のデータをモニターなどに表示することは当然できるわけなんですが、それをそのままモバイル端末のカメラで読み込んでしまうと、本来は水平方向からの視点で見るはずの AR コンテンツが垂直方向（真下）に向かった状態で再生されていまいますので注意しましょう。
ちなみに、コンテンツを制作された Dentsu Craft Tokyo の公式 Twitter 上では動作している様子を撮影した動画が公開されていますので、そちらを見ていただくと動作する様子をイメージしやすいんじゃないかなと思います。
かわいらしいうさぎの 3D モデルが登場する一連のデモが終わると最後にうさみくじの画面が表示されます。
このうさみくじの画面上でも、うさぎの 3D モデルがアニメーションして表示されているのですが、AR 表現を含むこれらの 3D 部分が Babylon.js による実装のようですね。
実装を担当された Yuki Tanabe さんは今回初めて Babylon.js を使ってみたということですが、アニメーションするモデルをインスタンシングで軽量に扱える機能があるというのが、Babylon.js を採用する決め手となったとのことでした。
Yuki Tanabe さんは WebGL ゆる勉強会、というコミュニティも主催していますので、興味のある方は以下の Discord に参加してみると良いかもしれません。
うさみくじのコンテンツは年賀コンテンツということもあり 1 月 11 日までの期間限定で公開されているもののようなので、気になる方はぜひ早めにチェックしてみてください。
