下から見たり横から見たりできる打ち上げ花火作りました。
http://lab.tsukuenoue.com/fireworks/
遊び方
画面クリックすると花火がバンバン打ち上がります。
| 基本操作 | 内容 |
|---|---|
| クリック or タップ | 花火打ち上げ |
| ドラッグ | 回転 |
PC Chromeのみ、音声操作もできるようになってます。
画面右下のマイクアイコンをクリックしてから音声入力受付開始です。
| 音声操作 | 内容 |
|---|---|
| 「ひゅー」 | 花火打ち上げ（爆発しない） |
| 「打ち上げ」 | 花火打ち上げ（爆発しない） |
| 「どーん」 | 打ち上げ中の花火爆発 |
| 「爆発」 | 打ち上げ中の花火爆発 |
| 「横から見る」 | 画面回転 |
| 「下から見る」 | 画面回転 |
花火の種類
以下の7パターン作成。
ランダムでどれかが打ち上げるようになってます。
- 球体花火
- リング状花火
- パラパラ花火
- 土星みたいな花火（球体 + リング花火）
- 2段階花火（球体 + パラパラ花火）
- 軌跡花火
- ネコ型花火
目的
パーティクルが何かやりたかった。
音声使って「ひゅー」「どーん」で花火したら楽しいかと思った。
音声は期待したほどはうまくいかなかった。
パーティクル
花火の種類で少々違いますが、大体1つの花火で2000パーティクルくらい使ってます。
連射すると簡単に1万パーティクルオーバーになりますが、WebGLのGPUパーティクルだと結構いけますね。
Three.jsのTHREE.PointsMaterialとTHREE.Pointsを主に活用。
抜粋するとこんな感じ。
//texture：パーティクル用画像
//color：花火の色
//size：パーティクル一つ一つの大きさ
//blending：光った感じにしたいので加算合成
//geometry：花火の爆発する瞬間の形状を指定。爆発後の挙動は他でごにょごにょしてる。
//scene：花火を配置する3DのScene
var material =new THREE.PointsMaterial({
map:texture,
color:color,
size:particleSize,
blending: THREE.AdditiveBlending,
transparent: true,
depthTest: false
});
var particles = new THREE.Points(geometry,material);
scene.add(particles);
あと、光の感じを強調したかったので、THREE.AdditiveBlendingの加算描画に加え、THREE.UnrealBloomPassもPostEffectで使ってます。
ネコ型花火
フリーのネコ3Dモデルを使いました。
THREE.OBJLoaderでobjを読み込み、THREE.Geometry().fromBufferGeometryでgeometryを数値で扱える状態にして花火にしてます。
var objLoader= new THREE.OBJLoader();
objLoader.load('cat.obj',function(model){
var catGeometry=new THREE.Geometry().fromBufferGeometry(model.children[0].geometry);
});
音声コントロール
「ひゅー」「どーん」で花火遊びがしたかったですが、思ったようにはいきませんでした。
波形解析は断念
最終的にはChromeのwebkitSpeechRecognitionを使ってますが、最初は波形解析でどうにかしようとしてました。
「ひゅー」「どーん」とそれ以外の判定だけならなんとかならないかな、と思って
navigator.getUserMedia と AudioContextを使って取得される波形を見つめてみたけど、こりゃ無理だと早々に断念。
自分の声だけに合わせてなんとか頑張っても、PCやマイクが変わったり、色んな人に体験してもらえるような汎用性を考えると無謀でした。
やはり音声解析は機械学習ベースの実装に限りますね。
webkitSpeechRecognition
今回はGoogle先生頼みのwebkitSpeechRecognitionを使って音声コントロール対応しています。
ただ、webkitSpeechRecognition自体はとても素晴らしいですが、残念ながら短い音声や擬音は精度があまり良くないので苦肉の策をとってます。
打ち上げ用の音声は以下の文字列が入ってたらOKという甘々判定です。
["ひゅー","旬","今日","キュン","ユー","ヒュン","チュン","チューン","ヒュー","9","球","cune","皮膚","うちあげ","打ち上げ","打上"]
「皮膚」が含まれてるのは、自分の声で「ひゅー」と言うとなぜか「皮膚」と誤認識されることが多かったので...。
爆発の方はこんな感じです。
["バン","バー","バーン","ダン","ドー","どー","ドン","丼","タン","トン","豚","版","と","ばん","どん","ばくは","爆破","爆発"];
[2018/05/17追記]
デスクトップアプリなのでwebで体験できないですが、機械学習版の音声コントロールやり直しました。
この前作ってみた声の機械学習のコンテンツ応用作ってみました。https://t.co/PiXXXWSZAj
— foka (@foka22ok) 2018年5月16日
「ひゅー」「どーん」の声で花火が上がり、「にゃー」と言うと猫花火になります。
#打ち上げ花火、下から見るか？横から見るか？
映画も原作も見てないので、実はあまり詳細知りません...。
花火の映像探してたら最近公開された映画があったので小ネタとして加えてみました。
技術的にはカメラ回してるだけですが。
映画は見てないですが、公開されていた主題歌聴きながらこれ作ってたので良しとさせてください。