【2019/9/18追記】Immersive Web Meetup#1の全講演をまとめました

先日、WebXRとWeb Musicに関する勉強会が開催されました。少し時間が経ってしまいましたが、ブロガー枠での参加というのもあり、当日の講演内容をまとめました。

主催者のRyoya Kawaiさんのまとめは下記の通りです。

ryoyakawai.com

(2019/9/17追記) 参加者の方のまとめが公開されていたので追加します。 torikizi.hatenablog.jp

1. Immersive Web Meetup (WebXR & Web Music)とは？

Immersive Web Meetup (WebXR & Web Audio/MIDI)は、Web XR、Web Audio/MIDI関連の開発者向けのMeetup（勉強会）です。xR Tech TokyoとWeb Music Developers JPが合同で開催いたします。

引用：https://connpass.com/event/139407/

参加者は約60名です。WebXR関係の勉強会はなかなかないので、60人規模はかなり大きいと思います。

会場は株式会社メルカリです。

2. 講演（30min session)

2.1. 9 Years of WebAudio

発表者：Hongchan Choi 氏 @hochsays

Googleの方の発表です。タイトル通り、ここ9年のWebAudioの歴史を解説されています。講演スライドをGoogle Documentで公開してくださっており、話す内容も書いてありました。

docs.google.com

2.1.1 2010-2015年

個人的印象に基づく、という前提の上で、Choi氏は9年間を２つに分けて説明されていました。2010-2015年は前半です。
ここでは代表的なものを抜粋して解説します。

2010：WAA(Web Audio API)のパイオニア的存在であるChris Rogers氏が、初めてChronium (Chromeブラウザの元となっているWebブラウザ)にWAAのパッチを当てた

詳細は未確認ですが、下記にWAA仕様を和訳したドキュメントがありました。たしかに2010年に提案されているようです。

W3Cオーディオグループの提案
編集者：
Chris Rogers, Google
最初の提案：2010年5月24日

引用元：Web Audio API のスペック (日本語訳) - miura off

最新を含む原文全体はこちらです。

Web Audio API

なお、2011年からWAA仕様の議論が始まったとのことです。

2012：Web MIDI APIに初めてコミットがあった

Web MIDI APIメーリングリストでは、本日２つめの発表者であるChris Wilson氏がWeb MIDI APIについて説明されています。

MIDI is an industry standard protocol used to enable communication between musical controllers, computers, and other musical instruments. It was originally designed in 1983 and was quickly adopted across a wide variety of devices...

引用元：Web MIDI API メーリングリスト冒頭

MIDIは1983年に考案されていたのは知りませんでした。

Web MIDI APIですが、少し調べると色々情報が出てきます。参考までに掲載します。

html5experts.jp MIDIとは？という説明も入っており、大変わかりやすいです。 (2015)

ta-music.net
比較的新しい情報です。色々面白そうな感じです。 (2018)

2015：Audio Workerの提案

Webには、Web Workerという仕組みがあります。これは、以下のように定義されています。

Web Worker は、ウェブコンテンツがスクリプトをバックグラウンドのスレッドで実行するためのシンプルな手段です

引用元：Web Worker の使用 - Web API | MDN

Audio Workerは、Web Workerの仕組みを用いて音声処理を行う仕組みです。

Audio workers を利用すると web worker のコンテキストで音声処理をおこなえます。

引用元：Web Audio API - Web API | MDN

講演によると、その後の議論によってAudio WorkerはAudio Workletに統合されたようです。

Audio Workletについては、下記に詳しい解説がありました。

qiita.com

2.1.2 2016-2019年

2016：Audio Workletの提案

2017：Audio WorkletがChrome(M63)に搭載

2018：PropellerHead社が自社製品「Reason」にWebブラウザで動くシンセサイザー機能を搭載

PropellerHead社のHPです。シェイプシフト シンセサイザー「Europa」に搭載とのことです。

http://www.propellerheads.jp/www.propellerheads.jp

2016年以降は、色々な製品や事例が出始めたということですね。

2.1.3 Spatial Audio on Web

Spatial(空間的な)でのAudioについても、参考までに紹介されていました。関係しそうな技術名だけ紹介されていましたので、リンクを貼っておきます。

developer.mozilla.org

googlechrome.github.io

resonance-audio.github.io

2.2 WebXR: AR and VR on the Web

発表者：Chris Wilson氏 @cwilso

こちらもGoogleの方の発表です。Web上でのWebXRについて解説されていました。講演スライドは下記です。こちらも話す内容が書かれています。

docs.google.com

あと、講演スライドにリンクがあったので、WebXRのGithubアカウントも貼っておきます。

github.com

2.2.1 WebVRとWebXRの違い

WebVRは廃止予定で、AR要素も含んだ WebXRがこれからの主流になるとのことです。私が色々調べているBabylon.jsにもWebXRのドキュメントがありました。

doc.babylonjs.com

WebVRとWebXRの違いについては、日本語でわかりやすい解説があったので、参考までにリンクを掲載します。

qiita.com

上記記事にも載っていますが、WebXRはまだ不安定な可能性があります。講演の内容から判断しても、技術的なお試しやR&D的にやるのはありですが、商用利用の場合はUnityやUnreal Engineなどの方が安心という気がしました。

2.2.2 WebXRの状況

VR：Chrome、FireFoxブラウザでは対応が進んでおり、2019年内には正式対応する可能性あり

なお、現時点でも対応はしています。Chromeブラウザで"Chrome://flags"にアクセスすると設定画面が出ます。ここで、webxrと検索するとこのような画面が出ます。

確認バージョンは76.0.3809.132です。ただ、MacOSのChrome(77.0.3865.75)では、webxrの設定が出てきませんでした。

AR：まだ時間がかかりそう

MacigLeapが試験的に対応中だが、WebXRのARについては設計含めてまだ検討が必要

WebXRのGithubリポジトリを見てみましたが、ARについては下記のみでした。

github.com 2019/8にReadmeを書いたのみで特に議論は進んでいません。

github.com WebXRのARの仕様を書いたドキュメントです。 Github Pagesを使ってWebページとして公開されています。

immersive-web.github.io

2.2.3 WebXRのWorking Group

詳しくはこちらです。

www.w3.org

3. 講演(15min short talk)

3.1 PlayCanvasで始めるWebXR

発表者：GMOクラウド / PlayCanvas推進室 / フロントエンドエンジニア 羽賀 流登氏 @Mxcn3

PlayCanvasで始めるWebXR from RyutoHaga

www.slideshare.net

3.1.3 PlayCanvasとは？

公式HPから引用します。

PlayCanvasは、インタラクティブなウェブコンテンツ用のビジュアル開発プラットフォームです。
作成するツールとウェブアプリは、どちらもHTML5を使用しています。
プラットフォームはウェブでホストされているため、インストールするものは何もなく、対応されているウェブブラウザを実行する任意のデバイスからアクセスできます。

引用元：導入 | Learn PlayCanvas

PLAYCANVAS社が開発をしており、日本ではGMOクラウド株式会社が販売しています。

参考：ニュースリリース(2015)
HTML5とWebGLを用いた3Dゲームが制作できるゲームエンジン「PLAYCANVAS」を日本国内向けに販売開始 | ＧＭＯクラウド株式会社

下記の画像の通り、かなりたくさんのことができて便利です。

引用元：PLAYCANVAS | 日本公式サイト

アカウントを作ることで無料で使えます。料金は下記の通りです。(シート＝プロジェクト)

引用元：PLAYCANVAS | 日本公式サイト

ブラウザ上でUnityのようなエディタもあるので、開発しやすそうです。

3.1.2 PlayCanvasでVRコンテンツを作る方法

以下のゲームの作り方を解説されています。

sandy-chan.firebaseapp.com

構成です。Oculus Questに対応しているようです。

引用元：PlayCanvasで始めるWebXR

SlideShareのP.19-25までで細かい作り方を紹介されています。

3.1.3 PlayCanvasでARコンテンツを作る方法

ARコンテンツを作るには２つの方法があります。

公式のAR Starter Kit

こちらです。

PlayCanvas 3D HTML5 Game Engine

ただ、2017年の8月で更新が止まっているので、あまり活発ではなさそうです。

8thWall

8thWallとは、8thWall社が公開しているWebブラウザ向けARコンテンツの作成プラットフォームです。発表では8thWallと連携した使い方を説明されていました。

このように、環境光の反映、SLAM機能などかなりの多機能です。

8th Wall | Augmented Reality

SlideShareのP.28-32までで細かい作り方を紹介されています。

4. 講演(10min short talk)

4.1 Web Music API ~ Toward the spread of Web Music ~

発表者：Tomohiro IKEDA氏　@xmusicjp

Web Audio向けのライブラリ開発者の方の発表です。たとえば、X-SoundというWeb向けのシンセサイザーAPIを開発されています。

---

2019/9/18 修正

発表された方からご指摘により、4.1.1と4.1.2の表現を少し修正しました。表現ずれ、申し訳ありませんでした。

---

4.1.1 前提：Web Audio APIとは？

Web Audio APIは音声を処理・合成するためのWebアプリケーション向けのハイレベルなJavaScript APIです。

引用元：Getting Started with Web Audio API - HTML5 Rocks

たとえば、こちらのように、Webサイト上で音に合わせて波形を変化させるようなエフェクトを作ることができます。

liginc.co.jp

4.1.2 Web Music APIとは？

Web Music API：IKEDA氏の造語

Web Audio APIは音響技術のないエンジニアには使いづらい

Webブラウザでの音楽再生をしやすくする仕組みとして、Web Music APIを提案

Web Music APIのコンセプト：音楽ドメインに限定、直感的である、音響技術の知識不要

4.1.3 XMusic

XMusic：Web Audio API を利用した Web Music API をシミュレートするライブラリ 　

github.com

デモ
https://codepen.io/Korilakkuma/pen/yLBEpOp

デモでは、楽器の種類、エコー、音量などをGUIで変更できます。ページを下にスクロールすると楽譜も見えます。

4.2 円を3等分する選手権に捧ぐARを使ってケーキを3等分する方法

発表者：石井悠夏 氏 @gorillaPoweeeer

発表者不在のためスキップ

4.3 タイトルなし (Web Music関連技術、作品紹介)

発表者：g200kg 氏g200kg

ご自身のWebサイトや制作物の紹介をされていました。以下、発表中に紹介されていた内容です。

ご自身のWebサイト (DTM関係の用語検索、関連ハードウェア、ソフトウェアなどの情報多数)

www.g200kg.com

Renoid：バーチャルシンガー

RenoidPlayer | g200kg Music&Software

WebModular：ブラウザで動くパッチケーブル式モジュラーシンセサイザー

- WebModular | g200kg Music & Software

LiveBeats：ブラウザで動くオーディオ/ビジュアル・ライブパフォーマンスツール

Live Beats | g200kg Music & Software

wave edit：音楽データをWebブラウザ上で編集するツール (作成中)

GitHub - g200kg/waveedit

5. おわりに

私にとってはWeb Musicは初めてだったので知らないことが多く、全体を通してとても勉強になりました。次回開催があれば、WebXR関係で何か発表できればと思います。