Threejs+WebAudio APIで勉強がてらオーディオビジュアライザーをつくった
Threejs+WebAudio APIで勉強がてらオーディオビジュアライザーをつくった。
成果物↓
修正はしたが、音量少しデカいかもしれんので注意
背景
2017年1~3月の振り返りで次にやることとして3Dコンテンツを作りたいということを書いた。
その折、ちょうど業務でThree.jsを使う機会があったのでこの際勉強してみるかーということで取り掛かることにした。
やったこと
とりあえずは「初めてのThree.js」を電子版で買って、3日くらいかけて読んでみた。
一応サンプルソースを動かしながら、カメラ・シーン・ジオメトリ・マテリアル・テクスチャ・メッシュ・レンダラー・ライトという各構成要素をどのように組み合わせてモデルを作ったり、アニメーションさせたりするのかというところはわかった。
ローカルでサーバを立ち上げると、サンプルソースをdatGUIで調整しながら実際の動きを確認できるので大変理解しやすくいい本だなと思う。学習の初期段階で概要と出来ることが見渡せると後で枝切がしやすくなって効率いい。
これらを一通りやり終えたところでまずはThree.jsでMMDモデルを動かしたりした。ブラウザでサーバルちゃんを動かせた。
わかりやすくすごそうなことができるとモチベーションがあがる。
ただこれはThreejs搭載のLoaderとMMD用のjsライブラリを使っただけ。
なのでもう少し凝ったものが作りたくなった。
というわけで前々から興味のあったオーディオビジュアライザーを作ることにした。
オーディオビジュアライザーとはこんなやつ。音楽にあわせて波形が動く。
[引用画像]-Visualizations with Web Audio API
id:hitode909さんとかも加速度センサー + 波形生成 + 波形表示で大昔やったりしてた記憶。
これらはcanvasで作られてる。なので当然2次元。
Three.jsでももちろんこれと同じものはつくれるのだけど、WebGLならやはり3Dだろうということでx,y,zの3次元をフルで使ったアプローチを取ることにした。
できたもの
使い方は、ページ中央の再生ボタンを押すだけ。音量デカメなので注意。
あとはsoundcloudからひっぱってきた音楽が自動で流れ、それに合わせて奥行きのある波形っぽいものが躍動する。
できればPCで見てほしい。モバイルからだとaudio再生周りが煩雑なので ...。
ボツ
先のビジュアライザーが一番しっくりきたのでそれを採用したのだが、実はその他にも音に合わせてオブジェクトを動かすというアプローチでいくつかつくってた。いわゆるボツ作品。
とりあえず見てほしいのだけど、どちらも面白い動きをする。
ただ、いまいち音に合う感触がなくて断念した。
ボツ2は特に面白い動きで好きなんだけども。ゲーセンにこういう音ゲーあるよね。
技術的なこと
使ったものとしては下記。
- Three.js
- EventEmitter
- WebAudio API
- Soundcloud API
実際やってることとしては大したことない。
- Soundcloudからtrackをひっぱってくる
- WebAudioでstreamをロードする
- createBufferSource,createAnalyser,frequencyBinCountあたりで波形を取得
- カメラを(x,y,z) = (0,0,100)くらいで引きで設置
- オブジェクトを上下に(256/2個ずつ)設置
- 波形の大きさに合わせて各オブジェクトのz軸を前後させる
ざっくり書くとこんな感じ。
あとはオブジェクトの色を波形の大きさで色分けしてみたり。
実際一番だるかったのはThreejsでごにょごにょするとこではなくて、WebAudioの実行順序をeventEmitterで調整したりするところだった。モバイルでは自動再生できないのでクリックで再生できるようにしないといけなくて苦労する。
詳しくはソース読んで。くそ汚いけど...。
まとめ
- 初めてのThree.jsを読んだ
- オーディオビジュアライザーを作った
ここまで1週間。
当初は今月いっぱいThreejsで遊ぼうかと思っていたんだけど、新年度を迎え気持ちがサーバーサイドに向いてしまったのでこの辺で切り上げたかったというのが正直な気持ち。
端的にいうと飽きてしまったという...。本を読みきったところでモデル作ったりするならBlenderとかだし、ゲームならUnityやるよな〜とか考えてしまいモチベーションがいまいち上がらなくなった。
だからといって何も成果物を出さないのも気持ち悪かったので突貫で動くものをつくってしまったというわけ。
とはいえ、学びは確実にあったし、自分で何か作りたいものがあったときに出来るか出来ないかの判断が最低限つくレベルにはなった気がするので良しとしたい。
オーディオビジュアライザーのほうは大した労力をかけてない割には実用的なものができたとおもうのでこれはこれで良かった。
今週からは何するか迷ってるけどたぶんGolang,Scale,Elixerあたりやると思う。要件と選択肢がやや恣意的だが結果だけ見るとGolangかなぁ。
ゼロからAPIサーバーを書き直すなら
— razokulover (@razokulover) 2017年4月10日
どれも普段業務で使ってる言語とは違うパラダイムというか思想が多分に含まれているのでやってて手応えおおそう。
またなんか成果でたらブログ書きます。
以上。
あとエンジニアの採用もやってます。興味あれば声かけて下さい。 →https://www.green-japan.com/job/48124
