nw.jsでデスクトップアプリを作る(26) - 音声で映像を動かす

公開:2015-03-15 06:00
更新:2020-02-15 04:37
カテゴリ:nw.js,three.js,javascript,webgl,html5,nw.jsでデスクトップアプリを作る

馬の絵をアニメーションさせることができるようにはなった。これを使ってRydeenのカバー曲の動画を作ろうと思っているわけだがどうもアイデアが湧いてこない。タイムラインに沿って馬を動かすだけでは面白くなくて、やはり何かこう高度なライブラリを使っているのだからそれらしい表現も取り入れたいのだが。

three.jsのissueを覗いていたらこのようなsuggestionが。


Adding THREE.AudioAnalyser · Issue #6213 · mrdoob/three.js · GitHub

その中のリンクをクリックするとこのような記事へのリンクが。


Experimenting with Web Audio API + Three.js (WebGL) - Thoughts and Experiments

これはリアルタイムにオーディオを鳴らしながら、オーディオに合わせて映像内容を変化させるというものだ。これは使えるね。当面はこの線で行ってみようかなと思っている。これと馬の絵をどのように組み合わせるかを実装しながら考えているところだ。

こういうWeb Audioとthree.jsを組み合わせたものは結構たくさんある。下記サイトなどが参考になるね。こういうのを観ていると何かイメージが湧いてきそうな気もする。なんか昔のメガデモを観ている感覚に近い。

下の作品もとても綺麗だ。こういうのがブラウザのみでできるんだからすごい時代になったものだ。

私の場合リアルタイムではなくてレンダリングしたものを一枚一枚静止画として出力し動画化するのでもっと凝った表現ができるのだが映像表現に関する知識がほとんどないので厳しいね。。