音量による3Dコントロールを作ってみました

  1. エンジニアブログ

こんにちは、開発本部の0009です。
今回は音量による3Dコントロールを作ってみました。

↓[VR] ボタンを押してみてください
↓画面左下にメニューが現れると思います こちらによって音量による3Dコントロールが開始できます
↓対応している環境では, マイクの共有が求められます

音量による3Dコントロールは、3種類作ってみました。それぞれ次の機能で、ボタンで選べます。
・[拡大]ボタン モデル全体の拡大
・[BLADE]ボタン モデル内の可動部の動作 このモデルではブレードの回転
・[分解]ボタン 簡易分解

なお、3Dコントロール以外の2つのボタンは、次のことができます。
・[初期]ボタン 初期状態に戻す
・[STOP]ボタン 3Dコントロールを停止

音量の計算は、Web Audio API でやっています。
ただの音量でなく、人間の聴感特性と音声の周波数分布を考慮した、簡易なフィルタリングを行っています。
この工夫によって、モバイル操作などでの雑音への反応を鈍く、音声や息での反応を緩くしています。
やはり、実際に作ってみると、「単純に組み合わせれば直ぐに新しいソリューションができるのではない」現実に直面します。

3Dのプログラミングとしては、A-Frameから一歩深いところに進みました。
three.js というWebGLで3Dを扱うライブラリの層で、読み込んだモデルを構成するパートごとに位置をリアルタイムで変更しています。
なお、今回作った分解は簡易なので、組みあがったところから分解するにつれ、パートがぶつかり合っています。
弊社ソリューションの分解アニメーションでは、ぶつかり合わず現実的な移動を計算します。大丈夫です!

プログミングとしては、2つの特に工夫したところがあります。
第1に、前回作成したAR/VRコンテンツへのプラグインとして機能を追加していることです。
3DモデルもAR/VRのライブラリも、それなりに大きいデータになります。
ですので、記事ごとに丸々サーバに置く仕様よりも、共通する部分はなるべく再利用しています。
ということで、今回作ったものはWordPressからみたとき、プラグインへのプラグインへとなっています。

第2に、地味ではありますが、スライダーに懲りました。
このスライダーは、2つの機能があります。
・音量による3Dコントロールのパラメータの表示
・スライダーの手動操作で3Dコントロールのパラメータの調整
このこだわりにより、マイクを繋がずとも、スライダーの操作で3Dコントロールできます!
さらに、マイクを繋いでいる場合でも、手で動かせば音量での値を上書きして操作できます!


<参考にした記事>
Web Audio API
three.js

ラティス・テクノロジー株式会社のエンジニアです。2016年度新卒入社。
主にTP製品 (Excel帳票出力など) の開発担当をしています。
音のディジタル信号処理で博士(工学)を取得しました。
博士課程にて大量かつ正確にデータ処理する面白さに目覚め、
音信号の1次元の世界から3次元の世界に飛び込んできました。
近年は、子育てとのワークライフバランスのSDGsに邁進しています。

記事一覧

関連記事

しゃべるパワポの作り方

こんにちは、開発本部の0009です。今回は“しゃべるパワポ”の作り方を紹介します。皆さん、発表は得意ですか?私は苦手です。緊張で、声が出なくなるほどです。…

XVLとはどんな技術か?②

前回に引き続き、技術者目線でXVLについてご紹介します。今回のテーマは「XVLはなぜ軽くできるのか?」です。形状データの軽量化いきなりディープな内容になるのも…