本書について

　本書をお手に取っていただきありがとうございます。著者にとって技術書を執筆するのは2回目になります。まだ慣れないながらも頑張って書きましたので楽しんでいただけたら嬉しいですし、みなさまのお役に立てたのでしたら著者冥利に尽きます。

　さて本書はVite、TypeScript、Babylon.jsでWebARアプリを作る初歩を解説した本です。WebARは比較的新しい技術領域でありますが、その注目度は高く専用のフレームワークやライブラリも多数存在しています。そんな中で今回Babylon.jsという選択をしたのは、単純に著者が好きだからです。せっかくですから、好きな技術を布教したいと思い筆を執りました。必ずしもBabylon.jsがWebAR開発の銀の弾丸というわけではありませんが、技術選定の際に参考になればいいなと思っています。

本書の内容

　本書はタイトルにもあるとおり「WebARをはじめる」ための本です。実際内容はかなりシンプルになっており、最終的にできる成果物はいわゆる「豆腐」をWebARで見るところまでをやります。逆にいうとそれ以上のことはやりません。

　なぜこのような内容にしたのか、次のような理由があります。

　・プロジェクト作成からWebARを動かすまでの道のりを見てほしかった

　・内容が多くなり、まとまりがなくなるのを避けるため

　今回Babylon.jsのWebAR本を作るにあたり、どういう内容にしようか迷いました。その過程で、そもそもノンフレームワークでViteを使ったWebAR開発というもの自体珍しいのではないかと考え、今回はそこにフォーカスしようと考えました。

　第1章ではViteを使って開発環境を作成します。ローカル環境でTypeScriptの実行環境やESLint/Prettier、Sassも導入して快適な環境づくりを目指します。

　第2章ではBabylon.jsを導入します。Canvas要素にBabylon.jsのシーンをレンダリングして豆腐を表示するまでを解説していきます。

　第3章では作成したBabylon.jsのシーンをレンダリングしてWebARとして表示します。WebARデバッグの鬼門であるHTTPS対応についても著者なりの方法を解説します。動いたときはちょっと嬉しくなるので楽しみにしていてください。

　第4章ではHit Testという機能を使い、現実空間にオブジェクトを配置する実装をします。インタラクションを加えることでよりリッチな体験になりますし、現実空間に配置することで、AR体験の存在感が高くなります。

　第5章では作成したWebARアプリをAzureにデプロイして公開します。せっかくWebという特性を持っているのでリンクひとつでシェアし、インストール不要で他の人にも試してもらいましょう。

対象読者

　本書が想定している読者は次のとおりです。

　・WebARに興味がある方

　・WebARのローカル開発環境の一例が知りたい方

　・WebAR開発の技術選定の幅を増やしたい方

　・Webフロントエンドの経験があるがWebARやWebGLはあまり触ったことがない方

想定環境

　本書を執筆するにあたり著者が使用した環境を次に示します。ご自分で試される際にご参考になさってください。

サンプルプロジェクト

　本書ではサンプルプロジェクトをGitHubにて公開しています。こちらもぜひ合わせてご確認ください。

　サンプルプロジェクト: https://github.com/drumath2237/impressrd-webar-sample

免責事項

　本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。